ASP.NET Core MVC 如何通过Ajax向控制器传递嵌套模型数据

1. 控制器端空引用异常 #

trnPurchaseOrderLists类中的Items是mfItems类型的引用类型属性，实例化trnPurchaseOrderLists时，该属性的默认值为null。直接执行hey.Items.ItemID = id时，会触发空引用报错，控制器无法正常携带Items对象的序列化数据返回前端，这也是为什么你观察到“移除嵌套值打印语句后，只有Quantity字段能正常工作”的核心原因——Quantity是decimal类型的值类型，无需提前实例化也不会触发报错。
修正方式：在实例化trnPurchaseOrderLists时，同步初始化嵌套的Items对象。

2. 前端读取返回值的大小写匹配问题 #

ASP.NET Core MVC 默认使用System.Text.Json完成JSON序列化，默认规则是将PascalCase命名的C#属性转换为camelCase格式输出。mfItems类中的ItemID属性序列化后，对应的前端字段名为itemId，而非代码中写的全小写itemid，因此会出现读取值为undefined的问题。

修正后完整可运行代码 #

控制器代码 #

[HttpPost]
public trnPurchaseOrderLists ChangeQuantity(string id, decimal value)
{
    trnPurchaseOrderLists hey = new trnPurchaseOrderLists
    {
        Items = new mfItems(),
        Quantity = value
    };
    hey.Items.ItemID = id;
    return hey;
}

前端Ajax代码 #

function change_quantity(id) {
    var value = $('#' + id).val();
    $.ajax({
        type: "POST",
        url: "@Url.Action("ChangeQuantity")",
        data: { id: id, value: value },
        dataType: "json",
        success: function (data) {
            console.log(data.items.itemId);
            console.log(data.quantity);
        }
    });
}

可选优化配置 #

如果希望前端读取返回值时和C#模型属性名的大小写完全一致，可以在项目的Program.cs中调整JSON序列化规则，关闭默认的camelCase自动转换：

builder.Services.AddControllersWithViews()
    .AddJsonOptions(options =>
    {
        // 序列化输出的属性名和C#模型定义保持完全一致
        options.JsonSerializerOptions.PropertyNamingPolicy = null;
    });

配置完成后，前端可以直接使用data.Items.ItemID的方式读取嵌套模型的返回值，无需适配大小写规则。

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