ASP.NET Core中Ajax提交JSON无法绑定控制器模型问题求助

问题根源 #

• 前端构造的请求对象属性名与后端Model属性名不匹配
• 前端提前序列化了ID字段，导致与后端List<string>类型不匹配
• JSON提交时未指定正确的请求头，后端无法正确识别请求体格式

具体修复步骤 #

1. 修正前端Ajax代码

$('#RolesSave').click(function (e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 直接提取选中行的ID数组，无需提前序列化
    var sRow = $('#table').bootstrapTable('getSelections');
    var IDList = sRow.map(item => item.ID);

    // 属性名必须和后端RightsModel定义保持完全一致
    var view = {
        Company: $('#Company').val(),
        Roles: $('#Roles').val(),
        ID: IDList
    };

    $.ajax({
        method: "POST",
        url: '@Url.Action("Save")',
        // 声明请求体为JSON格式
        contentType: 'application/json; charset=utf-8',
        // 完整序列化整个请求对象
        data: JSON.stringify(view),
        success: function (data) {
            alert(data + '!!!')
        },
        error: function () {
            alert('ERROR')
        }
    })
})

2. 修正后端Controller代码

给参数添加[FromBody]特性，让ASP.NET Core从请求体读取JSON完成反序列化：

[HttpPost]
public IActionResult Save([FromBody] RightsModel view)
{
    // 此时view的所有属性都可正常绑定
    return View();
}

兼容场景说明 #

如果需要同时兼容表单提交逻辑，也可以手动构造FormData对象传递数据，无需添加[FromBody]特性：

var formData = new FormData($('#formData')[0]);
// 按数组格式追加ID字段
sRow.forEach((item, index) => {
    formData.append(`ID[${index}]`, item.ID);
});
// ajax中直接传入formData即可，无需额外设置contentType

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