JS向ASP.NET MVC提交复杂对象时后端无法接收数据的问题

嘿，这个问题我之前做项目时也踩过坑！核心原因是jQuery默认的Ajax提交格式（application/x-www-form-urlencoded）和ASP.NET MVC的模型绑定器对嵌套对象/数组的解析规则不匹配——扁平键值对格式刚好符合MVC绑定器的预期，所以能正常接收，而嵌套的JSON对象则不行。下面给你几个实用的解决办法：

方法一：提交JSON格式数据（最推荐） #

直接把嵌套对象序列化为JSON字符串，并设置请求的contentType为application/json，这样MVC的模型绑定器就能正确解析嵌套结构了。

前端代码： #

var data = { 
  orderInfo: { time: '2018-04-01', phone: '111122223333' }, 
  products: [ {id: 1, count: 1}, {id: 2, count: 2} ] 
};

$.ajax({
  url: '/YourController/SubmitOrder', // 替换成你的控制器和Action路径
  type: 'POST',
  contentType: 'application/json; charset=utf-8', // 关键：告诉后端这是JSON数据
  data: JSON.stringify(data), // 将JS对象转为JSON字符串
  success: function(response) {
    console.log('提交成功:', response);
  },
  error: function(xhr) {
    console.error('提交失败:', xhr.responseText);
  }
});

后端代码： #

首先要定义和前端数据结构对应的模型类：

// 定义嵌套的子模型
public class OrderInfo
{
    public string time { get; set; }
    public string phone { get; set; }
}

public class Product
{
    public int id { get; set; }
    public int count { get; set; }
}

// 主视图模型
public class OrderViewModel
{
    public OrderInfo orderInfo { get; set; }
    public List<Product> products { get; set; }
}

然后在控制器的Action中接收这个模型：

[HttpPost]
public ActionResult SubmitOrder(OrderViewModel model)
{
    // 这里就能正常获取到orderInfo和products的数据了
    if (ModelState.IsValid)
    {
        // 处理订单逻辑...
        return Json(new { success = true, message = "订单提交成功" });
    }
    return Json(new { success = false, message = "数据格式错误" });
}

方法二：手动序列化为扁平键值对格式 #

如果你不想改用JSON格式提交，可以手动把嵌套对象转成MVC绑定器能识别的扁平键值对（就像你提到的orderInfo.time、products[0].id这种格式）。不过这种方式对于复杂结构来说比较繁琐，适合简单场景：

var flatData = {};
flatData['orderInfo.time'] = '2018-04-01';
flatData['orderInfo.phone'] = '111122223333';
flatData['products[0].id'] = 1;
flatData['products[0].count'] = 1;
flatData['products[1].id'] = 2;
flatData['products[1].count'] = 2;

$.ajax({
  url: '/YourController/SubmitOrder',
  type: 'POST',
  data: flatData, // 直接提交扁平键值对
  success: function(response) {
    // 处理回调
  }
});

这种方式不需要修改后端的模型和Action，因为格式完全匹配MVC默认的绑定规则。

方法三：自定义模型绑定器（不推荐，仅特殊场景使用） #

如果因为某些限制不能修改前端代码，可以在后端自定义模型绑定器来解析嵌套的JSON数据。不过这种方式需要编写额外的绑定逻辑，维护成本较高，除非必要不建议使用。

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