17370845950

asp.net core 中使用 ajax 提交 json 数据时，若控制器接收的 viewmodel 属性全为默认值（仅 `datetime` 等只读属性有值），通常因缺少反伪造令牌（anti-forgery token）或 json 序列化/绑定不匹配导致模型绑定失败。本文详解正确配置与调试方法。

在 ASP.NET Core 中，通过 AJAX 向 [HttpPost] 动作方法提交强类型 ViewModel 时，模型绑定失败（如 PaymentTypeId、CustomerId 均为 0，仅 OrderDate 有值）是一个常见问题。根本原因通常有两个：缺失反伪造令牌（Anti-Forgery Token） 和 JSON 数据结构与模型不匹配。以下为完整解决方案。

✅ 正确配置 Anti-Forgery Token（关键步骤）

ASP.NET Core 默认启用防伪验证（尤其在标记了 [AutoValidateAntiforgeryToken] 或全局启用了 AddAntiforgery() 的项目中），所有 POST 请求必须携带有效的 __RequestVerificationToken。AJAX 请求无法自动包含该 token，需手动注入：

1. 在视图（.cshtml）顶部添加防伪令牌隐藏字段：

   @Html.AntiForgeryToken()

   渲染后将生成类似：

2. JavaScript 中提取并附加 token：

   function getAntiForgeryToken() {
       return document.querySelector("input[name='__RequestVerificationToken']").value;
   }

3. 在 AJAX 请求的 data 中显式传入该 token：
   ⚠️ 注意：必须作为顶层属性，且名称严格为 __RequestVerificationToken（大小写敏感）：

   const objOrderViewModel = {
       PaymentTypeId: parseInt($("#PaymentType").val()) || 0,
       CustomerId: parseInt($("#Customer").val()) || 0,
       FinalTotal: parseFloat($("#txtFinalTotal").val()) || 0,
       listOrderDetailViewModel: ListOrderDetailViewModel
   };
   
   $.ajax({
       url: '/Home/Index',
       type: 'POST',
       contentType: 'application/json; charset=utf-8',
       data: JSON.stringify({
           __RequestVerificationToken: getAntiForgeryToken(), // ← 必须！
           ...objOrderViewModel
       }),
       success: function (data) {
           alert('提交成功');
       },
       error: function (xhr) {
           console.error('请求失败:', xhr.responseText);
           alert('提交失败，请检查网络和表单数据');
       }
   });

✅ 确保 JSON 结构与 C# 模型完全一致

• 属性名大小写严格匹配：C# 模型中属性为 listOrderDetailViewModel（驼峰命名），但 ASP.NET Core 默认使用 PascalCase 首字母大写 绑定（如 ListOrderDetailViewModel）。推荐统一使用 PascalCase 并启用 JsonSerializerOptions.PropertyNamingPolicy = null（见下文），或在模型上加 [JsonPropertyName("listOrderDetailViewModel")]（需引用 System.Text.Json）。

• 修正模型定义（推荐）：

  public class OrderViewModel
  {
      public int OrderId { get; set; }
      public int PaymentTypeId { get; set; }
      public int CustomerId { get; set; }
      public string OrderNumber { get; set; }
      public DateTime OrderDate => DateTime.Now; // 使用 => 更清晰
      public decimal FinalTotal { get; set; }
      // ✅ 改为 PascalCase，与 JSON 默认序列化一致
      public IEnumerable ListOrderDetailViewModel { get; set; }
  }

• 前端同步更新属性名：

  objOrderViewModel.ListOrderDetailViewModel = ListOrderDetailViewModel; // ← 匹配 C# 属性名

✅ 后端补充：确保 JSON 绑定正常启用

在 Program.cs 中确认已配置 JSON 输入格式（.NET 6+ 默认已启用）：

builder.Services.AddControllersWithViews()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNamingPolicy = null; // 关闭自动驼峰转换
        options.JsonSerializerOptions.WriteIndented = true;
    });

? 调试建议

• 在浏览器开发者工具中检查 Network → Payload，确认发送的 JSON 是否包含 __RequestVerificationToken 及字段值是否非空；
• 在控制器动作中设置断点，检查 HttpContext.Request.Headers["X-Requested-With"] 是否存在（AJAX 标识），并查看 ModelState.IsValid 状态；
• 若仍绑定失败，临时移除 [AutoValidateAntiforgeryToken] 测试是否为 token 问题（仅用于调试，生产环境必须保留）。

✅ 总结

遵循以上步骤，即可确保 ASP.NET Core 中 AJAX JSON 提交正确绑定到复杂 ViewModel。