Razor Pages 从 javascript 验证函数调用 asp-page-handler 方法答案

【问题标题】：Razor Pages calling asp-page-handler method from javascript validation functionRazor Pages 从 javascript 验证函数调用 asp-page-handler 方法
【发布时间】：2021-12-15 11:55:51
【问题描述】：

我有一个带有客户端验证功能的按钮

<button type="submit" title="Submit" class="btn btn-success btn-sm" onclick="return OnSubmitValidate()">
                        Submit
                    </button>

我想在这个 javascript 函数中调用 asp-page-handler 方法。目前我正在使用 AJAX 方法，但它没有触发该方法。

function OnSubmitValidate() {
        
        var RequestType = document.getElementById("DrpDwnRequestType");
        var RequestTypeValue = RequestType.options[RequestType.selectedIndex].value;
        alert(RequestTypeValue);
        if ((RequestTypeValue == "") || (RequestTypeValue == null)) {
            document.getElementById("ErrRequestType").innerHTML = "Please select Request Type";
            return false;
        }

        $.ajax({
            type: 'POST',
            url: rootPath + "/RequestForm?handler=Submit",
            dataType: "json"
        });        
    }

编辑：提交处理程序

public async Task<IActionResult> OnPostSubmitAsync()
        {
            
            
            BillType = new SelectList(_context.BillType.OrderBy(e => e.ID), "BillTypes", "BillTypes");



            var requestexist = await _context.RequestFormMaster.FirstOrDefaultAsync(c => c.RequestID == RequestFormMaster.RequestID);

            RequestAlreadyExist = requestexist;
            if (RequestAlreadyExist != null)
            {
                return Page();
            }
            else
            {
                RequestFormMaster.RequestID = RequestFormMaster.RequestID.Trim();
                
                RequestFormMaster.LastModifiedBy = HttpContext.Session.GetString("firstname") + " " + HttpContext.Session.GetString("lastname");
                RequestFormMaster.LastModifiedTimeStamp = DateTime.Now;

                _context.Entry(RequestFormMaster).State = EntityState.Added;
                await _context.SaveChangesAsync();
                TempData["ReqSubmitted"] = "Submitted";
                
                
                if (ReqSupportingFiles != null || ReqSupportingFiles.Count > 0)
                {
                    int i = 0;
                    foreach (IFormFile upload in ReqSupportingFiles)
                    {
                        i++;
                        // Upload file to server folder
                        string ext = Path.GetExtension(upload.FileName).ToLower();
                        if ((ext == ".ppt") || (ext == ".pptx") || (ext == ".xls") || (ext == "xlsx"))
                        {
                            var filesave = Path.Combine(_env.WebRootPath, "Documents", foldername, i + "_" + upload.FileName);
                            using (var stream = System.IO.File.Create(filesave))
                            {
                                await upload.CopyToAsync(stream);
                            }
                        }
                    }
                }
                
                return RedirectToPage("/RequestSummary");
            }
            //return Page();

        }

我想提交整个表格。需要将表单数据插入表格。任何帮助将不胜感激

【问题讨论】：

请添加提交处理程序的代码。你在这里提交什么？没有数据发送到处理程序。
@Steve 我已经添加了提交处理程序。我需要在使用 javascript 函数检查必填字段之前提交表单，因为我有几个强制检查的条件我没有使用所需的数据注释。

标签： javascript asp.net-core razor-pages

【解决方案1】：

如果你想将整个表单数据传递给处理程序，这里有一个演示：

型号：

public class FormModel
        {
            public string RequestType { get; set; }
            public string Test { get; set; }

        }

查看：

<form id="myForm" method="post">
    <select id="DrpDwnRequestType" name="RequestType">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <input id="Test" name="Test"/>
    <input type="button" title="Submit" class="btn btn-success btn-sm" onclick="OnSubmitValidate()" value="Submit"/>

</form>

js:

function OnSubmitValidate() {

        var RequestType = document.getElementById("DrpDwnRequestType");
        var RequestTypeValue = RequestType.options[RequestType.selectedIndex].value;
        alert(RequestTypeValue);
        if ((RequestTypeValue == "") || (RequestTypeValue == null)) {
            document.getElementById("ErrRequestType").innerHTML = "Please select Request Type";
        } else {
            $.ajax({
                type: 'POST',
                url: "?handler=Submit",
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                data: $("#myForm").serialize(),
                
            });
            window.location.href = "xxx";
        }

        
    }

处理程序：

public async Task<IActionResult> OnPostSubmitAsync(FormModel formModel)
{  
     ...        
}

razor 页面中带有post 请求的ajax 需要在header 中添加RequestVerificationToken，并且ajax 调用处理程序不会重定向到RequestSummary，因此您可以尝试在js 中使用window.location.href 进行重定向。结果：

【讨论】：