ASP.NET MVC 模型绑定与 jQuery ajax 请求答案

【问题标题】：ASP.NET MVC Model Binding with jQuery ajax requestASP.NET MVC 模型绑定与 jQuery ajax 请求
【发布时间】：2013-10-10 14:46:11
【问题描述】：

我的 MVC 代码中有一个服务器端对象，如下所示：

class Person
{
  public long Id { get; set; }

  public string Name { get; set; }

  public IList<Friend> Friends { get; set; } 
}

class Friend
{
  public long Id { get; set; }

  public string Name { get; set; }
}

从 jQuery 客户端，我发出一个 ajax 请求并发送以下数据（为了便于阅读而引入了换行符）：

var personId = $(...
var personName = $(...

var friends = []; // array of associative arrays

for (var i = 0; i < _friends.length; i++) // _friends is is a global array object and is different from friends below
{
  var friendId = $(...
  var friendName = $(...)

  friends[i] = { 'Id' : friendId, 'Name' : friendName };
}

... 以此类推将值放入变量中

请注意，我正在发送应该进入 Person.Friends 的内容，IList<T> 作为 JavaScript 数组，其中数组的每个元素都是一个关联列表，其属性类似于服务器端 Friend 类。

这是我的 ajax 请求：

$.ajax('/Strings/JsonCreateNew', 
  { 
    cache: false, async: false, type: 'POST', 
    data: { 
        'Id' : personId, 
        'Name' : personName, 
        'Friends' : friends}, 
    dataType: 'json', 
    error: SaveNewFriendClientSideHandler.OnError, 
    success: SaveNewFriendClientSideHandler.OnSuccess 
  });

在我的控制器中，只要我有一个FormCollection 来接收数据，我就会得到我的所有数据，但我想绑定到强类型的 Person 对象，所以如果我更改我的控制器定义：

[HttpPost]
public ActionResult JsonCreateNew(FromCollection person)
{
  // I get all the data in the person.AllKeys property
  return new EmptyResult();
}

到：

[HttpPost]
public ActionResult JsonCreateNew(Person person)
{
  // the default ASP.NET MVC model binder isn't able to bind to this
  // in fact, the routing module does not even route the request to this
  // action, so this action never gets fired.
  return new EmptyResult();
}

我仍然可以获得我的所有数据，但我仍然非常关心IList<Friend>。

它在Person 对象中作为一个数组接收，该数组具有正确数量的Friends 对象和正确的属性名称（Name 和Id）但是每个@987654335 的两个属性的值@对象为null或0，即即使有客户端发送的值也不初始化。

请帮忙。

【问题讨论】：

标签： jquery asp.net-mvc model-binding

【解决方案1】：

在 MVC 中有一个错误，他们拒绝修复如果集合属性名称以它不绑定的类型名称开头。改变

    public IList<Friend> Friends { get; set; }

收件人：

    public IList<Friend> Biscuits { get; set; }

只是暂时的。它会起作用的。

【讨论】：

酷！听起来不错。我会试一试并回帖。 :-)
将其重命名为 MyFriends 是否可行？这将对其进行足够的更改，以使该属性不再以类型名称开始 ...
我不记得是开始还是结束。但是试试看。

【解决方案2】：

我认为它会起作用：

var p = { 'Id' : personId, 'Name' : personName, 'Friends' : friends };
$.ajax('/Strings/JsonCreateNew', 
  { 
    type: 'POST', 
    data: JSON.Stringify({ person : p }), 
    contentType : "application/json",
    dataType: 'json', 
    error: SaveNewFriendClientSideHandler.OnError, 
    success: SaveNewFriendClientSideHandler.OnSuccess 
  });

如果你只想遍历它们，我更喜欢 IEnumerable 而不是 IList

编辑测试用例：

var friends = new Array();
friends.push({ Id: "1", Name: "A" });
friends.push({ Id: "2", Name: "B" });
var p = { 'Id': 5, 'Name': "Mohammad", 'Friends': friends };

$(document).ready(function () {

  $.ajax('/Home/JsonCreateNew',
  {
      type: 'POST',
      data: JSON.stringify({ person: p }),
      contentType: "application/json",
      dataType: 'json',
      error: function () { alert("f"); },
      success: function () { alert("s"); }
  });

});

【讨论】：

那根本行不通。事实上，这甚至破坏了 ajax 请求的发送。
@WaterCoolrv2 我添加了一个测试，它可以工作，我在服务器端操作中获取人员对象
@WaterCoolerv2 您必须将 'contentType: "application/json"' 和 'JSON.stringify()' 添加到您的 ajax 请求中，当我删除它们时，我也会在服务器上收到空值
对我来说，控制台报告 JSON.Stringify is not a function。获取 JSON 对象需要包含什么内容吗？
@WaterCoolrv2 你用的是什么浏览器？（你是否在 stringify 中使用小写的 s。可能是拼写错误）

【解决方案3】：

您必须指定内容类型：contentType: "application/json"。 @MohammadRB 解决方案包含它，但即使您不对帖子数据进行字符串化，它也应该可以工作。

【讨论】：