ASP.NET MVC中JS对象转C#模型绑定失效问题求助

这个问题我之前踩过坑！核心原因是jQuery.load()传递参数的格式和ASP.NET MVC模型绑定器的期望格式不匹配，咱们来拆解一下：

先搞懂为什么@Html.Action能正常工作 #

当你用@Html.Action("MyTest", "Home", new { obj = Model })的时候，ASP.NET MVC在服务器端会把Model的每个属性都拆成带前缀的查询参数。比如如果你的TestObj有Name和Age两个属性，生成的URL会是这样的：

/Home/MyTest?obj.Name=张三&obj.Age=25

这种格式完全符合MVC模型绑定器的规则，它能自动识别obj.前缀，把对应的值映射到TestObj的属性上，所以绑定毫无问题。

你的JS代码哪里出问题了？ #

你用$('#TestDiv').load(url, { obj: jsModel })的时候，jQuery会把这个参数对象序列化成不符合要求的格式：

• 如果是GET请求（load默认是GET），它会把obj参数处理成obj=[object Object]，服务器端根本没法解析这个字符串成TestObj对象；
• 就算是POST请求，它也会把整个jsModel作为一个单一的表单字段发送，模型绑定器找不到对应属性的映射关系，只能返回默认值的TestObj。

解决方法有这几种，按需选择 #

方案一：平铺参数，模拟@Html.Action的格式 #

手动把jsModel的属性拆成带obj.前缀的键值对，让参数格式和服务器端生成的一致：

var jsModel = @Html.Raw(Json.Encode(Model));
function newHope() {
  var url = '@Url.Action("MyTest", "Home")';
  // 构造符合模型绑定规则的参数
  var params = {};
  for (var key in jsModel) {
    if (jsModel.hasOwnProperty(key)) {
      params['obj.' + key] = jsModel[key];
    }
  }
  $('#TestDiv').load(url, params);
}

这个方法适合简单的模型，参数格式和@Html.Action完全一致，绑定成功率100%。

方案二：改用POST请求发送JSON（推荐复杂模型） #

如果你的TestObj有嵌套对象、数组这类复杂结构，平铺参数会很麻烦，这时候直接发JSON是最优解：

var jsModel = @Html.Raw(Json.Encode(Model));
function newHope() {
  var url = '@Url.Action("MyTest", "Home")';
  $.ajax({
    url: url,
    type: 'POST',
    contentType: 'application/json; charset=utf-8', // 必须指定这个头
    data: JSON.stringify(jsModel), // 把对象转成JSON字符串
    success: function(result) {
      $('#TestDiv').html(result); // 把返回的局部视图塞进容器
    }
  });
}

别忘了给控制器方法加上[HttpPost]特性：

[HttpPost]
public ActionResult MyTest(TestObj obj) { 
  return PartialView("test2"); 
}

这种方式能完美支持各种复杂模型，模型绑定器会直接解析请求体里的JSON字符串，映射成TestObj对象。

方案三：用jQuery.param()生成查询字符串（GET请求快捷方式） #

如果是简单模型，也可以用jQuery.param()直接把对象转成符合要求的查询字符串，拼到URL后面：

var jsModel = @Html.Raw(Json.Encode(Model));
function newHope() {
  var url = '@Url.Action("MyTest", "Home")?' + $.param({ obj: jsModel });
  $('#TestDiv').load(url);
}

这个方法本质和方案一一样，只是用jQuery帮你做了参数拼接，简单场景下很省心。

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