.NET Core Razor Web API提交表单遇Bad Request 400错误求助

核心排查方向与修复步骤 #

1. 后端模型绑定与验证检查 #

首先确认Add.cshtml.cs中的OnPostAsync方法配置正确：

• 明确指定表单数据绑定源，避免自动绑定歧义：

  [ValidateAntiForgeryToken] // Razor Pages默认启用，确保未手动移除
  public async Task<IActionResult> OnPostAsync([FromForm] KpiModel model)
  {
      // 先排查模型验证失败的情况
      if (!ModelState.IsValid)
      {
          var errors = ModelState.Values
              .SelectMany(v => v.Errors)
              .Select(e => e.ErrorMessage)
              .ToList();
          return new JsonResult(new { IsSuccess = false, IsListResult = true, Result = errors });
      }
  
      // 业务逻辑处理
      // ...
  
      return new JsonResult(new { IsSuccess = true, Result = "KPI添加成功" });
  }
  

• 模型属性名需与表单字段名完全匹配（大小写不敏感，但建议保持一致）；若涉及文件上传，模型需包含IFormFile类型属性。

2. 前端AJAX配置修复 #

你的代码存在防伪造令牌传递方式错误和潜在的参数调用问题，按以下方式修改：

调用PostAjax时的调整

将防伪造令牌直接追加到FormData中，而非通过请求头传递（Razor Pages默认从表单数据读取令牌）：

url = "/IPM/KPI/Add"; 
input = new FormData($('#frmKPI').get(0));
// 追加防伪造令牌到表单数据
input.append('__RequestVerificationToken', $('input[name="__RequestVerificationToken"]').val());
// 确保第一个参数isForm传入true，触发FormData对应的配置
PostAjax(true, url, input, divErrID, btnID, isSuccessFunction, isFailedFunction, NoModalAlert, isAsync);

PostAjax函数修改

移除请求头中的令牌配置，保留FormData的正确处理逻辑：

PostAjax: function (isForm, url, input, divErrID, btnID, isSuccessFunction, isFailedFunction, NoModalAlert, isAsync)
{
    var contentType = isForm ? false : "application/json; charset=utf-8";
    var processData = isForm ? false : true;

    $(btnID).prop("disabled", true);
    Loading(true);
    $.ajax({
        url: url,
        type: "POST",
        data: input,
        async: isAsync == null || isAsync == undefined ? false : isAsync,
        dataType: "json",
        // 移除headers中的令牌配置，改为通过FormData传递
        contentType: contentType,
        processData: processData,
        success: function (data) {
            if (data.IsSuccess) {
                if (isSuccessFunction != null)
                    isSuccessFunction(data);
    
                if (!NoModalAlert)
                    ModalAlert(MODAL_HEADER, data.Result);
    
                $(divErrID).html("");
            } else {
                var msg = "";
                if (data.IsListResult == true) {
                    for (var i = 0; i < data.Result.length; i++) {
                        msg += data.Result[i] + "<br />";
                    }
                } else {
                    msg += data.Result;
                }
                ModalAlert(MODAL_HEADER, msg);
                if (isFailedFunction != null)
                    isFailedFunction();
            }
            $(btnID).prop("disabled", false);
            Loading(false);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log("AJAX Error:", jqXHR.status, jqXHR.statusText);
            console.log("Response Text:", jqXHR.responseText);
            if (isFailedFunction != null)
                isFailedFunction();
            Loading(false);
            $(btnID).prop("disabled", false);
            ModalAlert(MODAL_HEADER, jqXHR.responseText);
        },
    });
}

3. 浏览器开发者工具辅助排查 #

若仍出现400错误，打开F12开发者工具查看Network标签：

• 检查请求的Content-Type是否为multipart/form-data; boundary=xxx（FormData提交时的正确类型）；
• 查看Request Payload确认所有表单字段（包括令牌）是否正确传递；
• 查看Response中的详细错误信息，若为模型验证失败，后端返回的JSON会包含具体错误列表。

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