Razor Pages中AJAX POST提交JSON时[FromBody]接收参数为空如何解决

问题场景 #

在Razor Pages中实现AJAX POST提交功能时，后端OnPostTeam方法通过[FromBody]接收的TeamShort类型参数所有属性均为空，前端控制台打印的序列化后提交数据格式正常。

现有实现代码 #

前端AJAX逻辑 #

document.querySelector("#btnEditTeamSave").addEventListener("click", function editTeamSubmit(event) { 
    
    event.preventDefault();
    var theTeam = { Id:$('#btnEditTeamSave').val(), Name: $('#EditTeamName').val(), Description: $('#EditTeamDescription').val(), MachineId: $('#EditTeamMachine').val(),Active: $('#EditTeamActive').val(), Color: $('#EditTeamColorPicker').val()  };

       console.log(JSON.stringify(theTeam));
       $.ajax({
            type: "POST",
            url: "?handler=Team",
            contentType: "application/json; charset=utf-8",
            dataType: "JSON",
            data: JSON.stringify(theTeam),
            headers: {
                RequestVerificationToken:
                    $('input:hidden[name="__RequestVerificationToken"]').val()
            },
        })
            .done(function (result) {
                console.log(result);
            });
  },false)

后端模型与接口方法 #

public class TeamShort
{
    public int? Id { get; set; }
    public string? Name { get; set; }
    public string? Description { get; set; }
    public string? MachineId { get; set; }
    public bool? Active { get; set; }
    public string? Color { get; set; }
}

public IActionResult OnPostTeam([FromBody]TeamShort theTeam)
{
    return new JsonResult("succes"); 
}

故障原因 #

jQuery的.val()方法获取的所有表单值均为字符串类型，直接序列化后提交的JSON字段类型和后端模型定义不匹配，.NET默认的System.Text.Json反序列化器不会自动完成跨类型转换，最终导致整个实体绑定失败，所有属性赋值为空：

• 后端Id为可空数字类型，前端提交的是字符串格式的数字
• 后端Active为可空布尔类型，前端提交的是字符串格式的布尔值

修复方案 #

二选一即可：

• 方案1：前端构造提交对象时手动转换字段类型

  var theTeam = { 
      Id: parseInt($('#btnEditTeamSave').val()), 
      Name: $('#EditTeamName').val(), 
      Description: $('#EditTeamDescription').val(), 
      MachineId: $('#EditTeamMachine').val(),
      Active: $('#EditTeamActive').val() === 'true' || $('#EditTeamActive').val() === '1', 
      Color: $('#EditTeamColorPicker').val()  
  };
  

• 方案2：配置全局JSON序列化选项，允许从字符串读取数字/布尔值
  在Program.cs中添加如下配置：

  builder.Services.AddRazorPages()
      .AddJsonOptions(options =>
      {
          options.JsonSerializerOptions.NumberHandling = System.Text.Json.Serialization.JsonNumberHandling.AllowReadingFromString;
          options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
      });
  

注意：.NET 5及更早版本需要在Startup.cs的ConfigureServices方法中完成上述配置。

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