jQuery ajax POST提交嵌套复杂对象数组时后端接收数组为空如何解决

问题根因 #

你当前的写法不符合FormData传递复杂对象数组的绑定规则：

• FormData不支持直接嵌套传递FormData对象数组，你把r_form数组append到外层frm时，浏览器会自动将其转为[object FormData]格式的字符串，后端无法识别解析为ScoreModel数组
• ASP.NET系列框架的[FromForm]模型绑定要求复杂数组的键名遵循数组名[索引].属性名的命名规则，才能正确映射到对应的类属性

修正方案 #

直接删掉原有生成r_form数组的逻辑，按照绑定规则给外层FormData添加对应键值即可，修改后的前端代码如下：

$("#btnCountScore").click(function () {
    var frm = new FormData();
    frm.append("Name", "Garfield");
    var r = [
        { "Subject": "Chinese", "Score": 89 },
        { "Subject": "English", "Score": 87 },
        { "Subject": "Math", "Score": 76 },
        { "Subject": "NaturalScience", "Score": 90 },
        { "Subject": "SocialScience", "Score": 83 },
    ];
    // 按照模型绑定规则拼接FormData键
    for (var i = 0; i < r.length; i += 1) {
        frm.append(`Scores[${i}].Subject`, r[i].Subject);
        frm.append(`Scores[${i}].Score`, r[i].Score);
    }
    $.ajax({
        url: "../Home/CountScore",
        method: "post",
        processData: false,
        contentType: false,
        data: frm,
        success: function (ret) {
            $("#lblShowAverage").text(ret);
        }
    });
});

后端验证 #

确认你的后端接口Action写法符合要求，参数添加[FromForm]注解：

public IActionResult CountScore([FromForm] StudentTestModel model)
{
    // 你的业务逻辑
}

修改完成后后端即可正常拿到Scores数组的全部内容。

内容的提问来源于stack exchange，提问作者Miki Hoshitsuki 437SH