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

Question

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

<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();

        }

我想提交整个表单。需要将表单数据插入 table.Anyhelp 将不胜感激

Answer 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)
{  
     ...        
}

ajax with post request in razor page 需要添加 RequestVerificationToken 到 header，并且 ajax call handler 不会重定向到 RequestSummary，所以你可以尝试在js中使用window.location.href重定向。结果：

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

Razor Pages calling asp-page-handler method from javascript validation function

javascript

asp.net-core

razor-pages