使用jQuery $.post向Razor Page提交FormData时出现400错误求助

使用jQuery的$.post方法向Razor Page发送POST请求时持续出现400错误，尝试多种方案未解决，相关代码如下：

后端PageModel代码 #

public class RecoveryAdhocInvoicingModel : PageModel
{                                                                                  
    Public IActionResult OnPostDoJob(string invNo, string account)
    {
        //var emailAddress = Request.Form["emailaddress"];
        // do something with emailAddress
        return new JsonResult("");
    }                                                                                   
}

前端jQuery代码 #

$('#submitBtnUpdateJob').click(function (evt) {
            var formdata = new FormData();
            formdata.append("invNo", $('#adhocInvoiceNumber').val());
            formdata.append("account", $('#invoiceAccountInput').val());

    $.post(window.location.href + '?handler=DoJob', JSON.stringify(formdata), function () {
         alert('Posted');
    });                                                                                   
});

问题排查与解决 #

1. 修正后端方法访问修饰符 #

C#是大小写敏感语言，代码中Public需改为小写public，否则后端方法无法被框架正确识别：

public IActionResult OnPostDoJob(string invNo, string account)

2. 添加防伪造令牌验证 #

Razor Page默认启用防伪造令牌验证，POST请求未携带令牌会直接返回400错误：

• 在页面中添加令牌：在页面任意位置插入@Html.AntiForgeryToken()
• 修改前端请求，在headers中携带令牌：

  $('#submitBtnUpdateJob').click(function (evt) {
      var postData = {
          invNo: $('#adhocInvoiceNumber').val(),
          account: $('#invoiceAccountInput').val()
      };
      var token = $('input[name="__RequestVerificationToken"]').val();
  
      $.ajax({
          url: window.location.href + '?handler=DoJob',
          type: 'POST',
          headers: {
              'RequestVerificationToken': token
          },
          data: postData,
          success: function () {
              alert('Posted');
          }
      });
  });
  

3. 修正请求数据格式 #

不要使用FormData结合JSON.stringify传递数据，这种方式会导致后端无法解析参数。直接传递普通JS对象即可，jQuery会自动处理为表单格式数据，匹配后端参数绑定要求。

内容的提问来源于stack exchange，提问作者Paul