ASP.NET Core 6 MVC传递对象列表到控制器时模型为null求助

问题背景 #

定义了以下模型类：

public class DataModel
{
    public int CreatedBy { get; set; }
    public DateTime CreatedDate { get; set; }
    public List<ViewModel> ViewModel { get; set; }
}

public class ViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
}

通过JS提交数据到ASP.NET Core 6.0 MVC的API控制器，控制器方法接收的postedModel始终为null，JS提交代码和控制器代码如下：

JS提交代码：

let postedModel = {
     CreatedBy :null,
     CreatedDate :null,
     ViewModel : []
}

postedModel.CreatedBy = "some id";
postedModel.CreatedDate = "today date"

$(".form-fieldset").each(function () {
    let formObject = {};
    $('form').find('input').each(function (index, element) {
        //In cshtml Name attribute given without form index
        formObject[$(element).attr('name')] = $(element).val();
    })
    postedModel.ViewModel.push(formObject)
}

$.ajax({
    url: '/ApiController/SaveData',
    type: 'POST',
    crossDomain: true,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    data: JSON.stringify(postedModel),
    async: false
})

控制器代码：

public async Task<IActionResult> SaveData([FromBody] DataModel postedModel)
{
}

错误原因及解决办法 #

1. 数据类型不匹配，导致模型绑定失败 #

• CreatedBy在模型中是int类型，但JS中赋值了字符串"some id"，无法解析为整数；
• CreatedDate是DateTime类型，JS中赋值了非标准格式的字符串"today date"，ASP.NET Core无法将其解析为有效的DateTime对象。

解决办法：

• 将CreatedBy赋值为数字类型：

  postedModel.CreatedBy = 123; // 替换为实际的数字ID
  

• 将CreatedDate转为ISO标准格式的日期字符串，确保ASP.NET Core能正确解析：

  postedModel.CreatedDate = new Date().toISOString();
  

2. JS代码存在语法错误，导致JSON序列化失败 #

$(".form-fieldset").each循环缺少闭合的});，会导致JS代码执行中断，无法生成有效的JSON数据提交到后端。

解决办法：
修正循环的闭合部分，同时调整表单输入项的遍历范围（避免跨表单收集数据）：

$(".form-fieldset").each(function () {
    let formObject = {};
    // 只遍历当前fieldset下的input，而非所有表单的input
    $(this).find('input').each(function (index, element) {
        formObject[$(element).attr('name')] = $(element).val();
    });
    postedModel.ViewModel.push(formObject);
}); // 补上闭合的括号

3. 表单遍历逻辑错误，导致ViewModel结构不符合预期 #

原代码中$('form').find('input')会遍历页面中所有表单的输入项，导致每个formObject可能包含重复或无关的字段值，破坏了ViewModel的结构，进而导致模型绑定失败。

解决办法：
如上面的修正代码所示，使用$(this).find('input')只遍历当前.form-fieldset元素下的输入项，确保每个formObject只包含当前表单的字段值，与后端ViewModel的结构匹配。

4. 额外检查项 #

• 确保CSHTML中input的name属性与ViewModel的属性名完全一致（比如name="Id"、name="Name"、name="Address"），模型绑定依赖名称匹配；
• 若仍存在问题，可以在浏览器开发者工具的Network标签中查看请求的Payload，确认提交的JSON格式是否正确，是否与DataModel的结构一致。

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