使用 $.post 将对象集合传递给 MVC 控制器答案

【问题标题】：Passing a collection of objects to MVC controller using $.post使用 $.post 将对象集合传递给 MVC 控制器
【发布时间】：2011-07-17 22:26:45
【问题描述】：

我们正在尝试使用 json 和 jQuery .post 函数将一组对象从我们的页面发送到我们的控制器（MVC 3）。下面是我们的js代码以及控制器和对象的定义。

问题是当对象被适当地发送到我们的控制器时，它的成员变量并没有被填充。 “Coords”列表具有适当数量的“Coord”对象，但每个 Coord 对象的成员变量都填充为零（非空）而不是我们传入的值。请参见屏幕截图：

你知道我们的实现有什么问题吗？

提前致谢！

Coord1 = { "X": 100, "Y": 200 };
Coord2 = { "X": 300, "Y": 400 };

zoneData = { "Color": "#D8F834", "Name": "new zone", "Coords": [Coord1, Coord2] }

$.post("/Demo/SaveZone", zoneData, function (resp) {
     alert(resp);
}, "json");





[HttpPost]
public ActionResult SaveZone(ZoneViewModel zvm)
{
     Zone z;

     z = AutoMapper.Mapper.Map<ZoneViewModel, Zone>(zvm);

     _db.Zone.Attach(z);
     _db.SaveChanges();

     return View();
}


public class ZoneViewModel
{

    public int Id { get; set; }
    public string Name { get; set; }
    public string Color { get; set; }

    public CoordViewModel[] Coords { get; set; }

}


public class CoordViewModel
{
    public int Id { get; set; }
    public int X { get; set; }
    public int Y { get; set; }

}

【问题讨论】：

你下载了mvc源码，给它添加了一个项目ref，并单步执行了默认的模型绑定代码吗？
你能在firebug/fiddler里面显示httppost body吗

标签： jquery json asp.net-mvc-3

【解决方案1】：

可能最简单的方法是使用 JSON 请求：

var coord1 = { X: 100, Y: 200 };
var coord2 = { X: 300, Y: 400 };
var zoneData = { 
    Color: '#D8F834', 
    Name: 'new zone', 
    Coords: [ coord1, coord2 ] 
};

$.ajax({
    url: '/Demo/SaveZone',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(zoneData),
    success: function(resp) {
        alert(resp);
    }
});

JSON.stringify 方法将 javascript 对象序列化为 JSON 字符串。它作为本机方法内置于现代浏览器中。如果您想支持没有此方法的旧版浏览器，您需要包含json2.js 脚本，该脚本检查浏览器是否原生支持它，如果不支持，则提供实现。

现在一切都应该正确绑定了：

下面是成功请求的样子：

【讨论】：

我们尝试了这个，以及各种不同的调整，但仍然没有成功。这些 .X 和 .Y 值继续作为零发布。
@Ben Finkel，您使用了 完全相同的代码，如我的回答中所示？因为我刚刚在我的电脑上测试过它并且效果很好。所以当你说它不起作用时，你在这里让我感到非常惊讶。
是的，我看到你的屏幕并且很困惑。我剪切并粘贴了您的代码，但没有运气。同样的问题。
@Ben Finkel，您在 FireBug 中看到了什么？ AJAX 请求中发送到服务器的内容是什么？我已经上传了一个成功请求应该是什么样子的屏幕截图。您的 CoordViewModel 的 X 和 Y 属性是否实际上具有您在问题中显示的公共 getter 和 setter？
在另一台 PC 上我们已经完成了这项工作，所以这一定是我的配置问题。谢谢达林！

【解决方案2】：

我的猜测：

public List<CoordViewModel> Coords { get; set; }

（我承认这是在黑暗中拍摄）

【讨论】：

好主意，不过运气不好。谢谢！