ASP.NET Core AJAX提交表单仅DateTime有值，其余数据为空排查

问题描述 #

提交表单数据时，调试发现后端的OrderViewModel对象只有OrderDate属性有值，其余属性均未成功传入。

控制器代码 #

[HttpPost]
public JsonResult Index(OrderViewModel objOrderViewModel)
{          
    return Json(data: "");
}

JS代码 #

var objOrderViewModel = {};
var ListOrderDetailViewModel = new Array();
objOrderViewModel.PaymentTypeId = $("#PaymentType").val();
objOrderViewModel.CustomerId = $("#Customer").val();
objOrderViewModel.FinalTotal = $("#txtFinalTotal").val();
$("#tblRestaurantItemList").find("tr:gt(0)").each(function () {
    var objOrderDetailViewModel = {};
    objOrderDetailViewModel.ItemId = $(this).find("td:eq(0)").text();
    objOrderDetailViewModel.Quantity = $(this).find("td:eq(3)").text();
    objOrderDetailViewModel.Total = $(this).find("td:eq(5)").text();
    objOrderDetailViewModel.Discount = $(this).find("td:eq(4)").text();
    objOrderDetailViewModel.UnitPrice = $(this).find("td:eq(2)").text();
    ListOrderDetailViewModel.push(objOrderDetailViewModel);
});
objOrderViewModel.listOrderDetailViewModel = ListOrderDetailViewModel;

$.ajax({
    async: true,
    type: 'POST',
    dataType: 'JSON',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(objOrderViewModel),
    url: '/home/Index',
    success: function (data) { alert(data) },
    error: function () { alert('There is some problem to get the unit price.') }
});

ResetItems();
ResetItemsDetails();

模型代码 #

public class OrderViewModel
{
    public int OrderId { get; set; }
    public int PaymentTypeId { get; set; }
    public int CustomerId { get; set; }
    public string OrderNumber { get; set; }
    public DateTime OrderDate { get { return DateTime.Now; } }
    public decimal FinalTotal { get; set; }
    public IEnumerable<OrderDetailViewModel> listOrderDetailViewModel { get; set; }
}

public class OrderDetailViewModel
{
    public int OrderDetailId { get; set; }
    public int ItemId { get; set; }
    public decimal Quantity { get; set; }
    public decimal Total { get; set; }
    public decimal UnitPrice { get; set; }
}

原因分析及解决方案 #

核心原因：缺少[FromBody]特性 #

你在AJAX请求中设置了contentType: 'application/json; charset=utf-8'，发送的是JSON格式的请求体，但ASP.NET MVC默认会从查询字符串或表单集合中读取数据绑定模型，不会自动解析JSON请求体。必须在控制器参数上添加[FromBody]特性，告诉模型绑定器从请求体中读取JSON数据。

其他辅助问题及修复 #

1. 数值类型不匹配：从DOM获取的val()或text()返回的是字符串，而模型中对应属性是int或decimal类型，需要手动转换为数值类型，否则模型绑定可能失败。
2. 多余属性传递：JS中给OrderDetailViewModel添加了Discount属性，但模型中没有该字段，虽然不影响绑定，但建议移除避免冗余。

具体修复步骤 #

1. 修改控制器方法，添加[FromBody]

[HttpPost]
public JsonResult Index([FromBody] OrderViewModel objOrderViewModel)
{          
    return Json(data: "");
}

2. 调整JS代码，转换数值类型并移除多余属性

var objOrderViewModel = {};
var ListOrderDetailViewModel = new Array();
// 转换为整数类型
objOrderViewModel.PaymentTypeId = parseInt($("#PaymentType").val());
objOrderViewModel.CustomerId = parseInt($("#Customer").val());
// 转换为浮点数类型
objOrderViewModel.FinalTotal = parseFloat($("#txtFinalTotal").val());

$("#tblRestaurantItemList").find("tr:gt(0)").each(function () {
    var objOrderDetailViewModel = {};
    objOrderDetailViewModel.ItemId = parseInt($(this).find("td:eq(0)").text());
    objOrderDetailViewModel.Quantity = parseFloat($(this).find("td:eq(3)").text());
    objOrderDetailViewModel.Total = parseFloat($(this).find("td:eq(5)").text());
    // 模型中无Discount属性，移除该赋值
    // objOrderDetailViewModel.Discount = $(this).find("td:eq(4)").text();
    objOrderDetailViewModel.UnitPrice = parseFloat($(this).find("td:eq(2)").text());
    ListOrderDetailViewModel.push(objOrderDetailViewModel);
});
objOrderViewModel.listOrderDetailViewModel = ListOrderDetailViewModel;

$.ajax({
    async: true,
    type: 'POST',
    dataType: 'JSON',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(objOrderViewModel),
    url: '/home/Index',
    success: function (data) { alert(data) },
    error: function () { alert('获取单价出现问题。') }
});

ResetItems();
ResetItemsDetails();

3. 可选：给OrderDate添加setter（如果需要手动传入）

如果后续需要手动设置OrderDate，而不是默认返回当前时间，需要给它添加setter：

public DateTime OrderDate { get; set; } = DateTime.Now;

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