将 JSON 数组绑定到 ASP.NET MVC 3 中的列表的模型问题

我在将 JSON 数组绑定到 MVC 3 中的 C# 列表的模型中遇到问题。

我有一个叫做 a 的对象DockState。它看起来像这样：

[Serializable]
public class DockState
{
    public bool Closed { get; set; }
    public bool Collapsed { get; set; }
    public string DockZoneID { get; set; }
    public int ExpandedHeight { get; set; }
    public Unit Height { get; set; }
    public int Index { get; set; }
    public Unit Left { get; set; }
    public bool Pinned { get; set; }
    public bool Resizable { get; set; }
    public string Tag { get; set; }
    public string Text { get; set; }
    public string Title { get; set; }
    public Unit Top { get; set; }
    public string UniqueName { get; set; }
    public Unit Width { get; set; }
}

我的操作方法接受停靠状态列表，如下所示：

public JsonResult SaveDockStates(List<DockState> dockStates)

在客户端上，我正在构建一个 JSON 对象数组，其中包含与 C# 相同的所有属性DockState目的。然后，我使用操作方法中参数的属性将此数组分配给它自己的 JSON 对象，如下所示：

function get_allDockStates()
{
    var allRadDocks = []; // declare array.
    var allRadControls = $telerik.radControls; // use telerik API to obtain all controls.

    // loop through all telerik controls.
    for (var i = 0; i < allRadControls.length; i++)
    {
        var element = allRadControls[i];

        // Check if control is a rad dock element.
        if (Telerik.Web.UI.RadDock && element instanceof Telerik.Web.UI.RadDock)
        {
            // Build a JSON object containing the same properties as the C# DockState
            // object. Leaving out a couple that should just be null anyway. Add new
            // JSON object to array.
            Array.add(allRadDocks,
            {
                UniqueName: element._uniqueName,
                DockZoneID: element._dockZoneID,
                Width: element._width,
                Height: element._height,
                ExpandedHeight: element._expandedHeight,
                Top: element._top,
                Left: element._left,
                Resizable: element._resizable,
                Closed: element._closed,
                Collapsed: element._collapsed,
                Pinned: element._pinned,
                Title: element._title,
                Index: element._index
            });
        }
    }
    // Return the array.
    return allRadDocks;
}

// This function is fired by the rad dock controls when they are moved.
function positionChanged(sender, e)
{
    // obtain the array of dock states.
    var dockStates = get_allDockStates();
    // Make ajax call to MVC action method to save dock states.
    jQuery.ajax({
        data: { dockStates: dockStates },
        type: 'POST',
        dataType: 'json',
        url: '/AjaxServices/DashboardService/SaveDockStates'
    });
}

不幸的是，当进行 AJAX 调用时，会发生一些相当奇怪的事情。它击中了动作方法和我的List<DockState>里面确实有物品。

http://www.codetunnel.com/content/images/dockStateListInstantiated.jpg http://www.codetunnel.com/content/images/dockStateListInstantiated.jpg

但是，列表中的项目都是默认的。这意味着它们的所有值都是默认值，而不是请求中提交的值。

http://www.codetunnel.com/content/images/dockStatesDefaultValues.jpg http://www.codetunnel.com/content/images/dockStatesDefaultValues.jpg

我不确定为什么列表包含正确数量的项目，但所有项目似乎只不过是实例化的。它们的属性未设置为 JSON 数组中的值。该请求肯定包含正确的数据，如下所示：

http://www.codetunnel.com/content/images/dockStatesFormData.jpg http://www.codetunnel.com/content/images/dockStatesFormData.jpg

难道我做错了什么？表单数据格式是否错误？默认的模型绑定器有问题吗？

更新（测试达林·季米特洛夫的答案）

我发现 JSON 被未使用的旧脚本覆盖。我已经删除了，现在JSON.stringify工作正常。这是请求负载。

http://www.codetunnel.com/content/images/dockStatesJsonStringify.jpg http://www.codetunnel.com/content/images/dockStatesJsonStringify.jpg

好多了。但是现在当我调试时，我的列表中的项目为零。尽管我很欣赏您的努力，但这似乎并没有解决问题:)

尝试发送 JSON 请求：

jQuery.ajax({
    // TODO: Never hardcode urls like this => always use URL helpers
    // when you want to generate an url in an ASP.NET MVC application
    url: '/AjaxServices/DashboardService/SaveDockStates',
    type: 'POST',
    data: JSON.stringify({ dockStates: dockStates }),
    contentType: 'application/json; charset=utf-8',
    success: function(result) {
        // TODO: process the results
    }
});

The JSON.stringify方法本身内置于现代浏览器中。如果您想支持旧版浏览器，您需要包含json2.js http://www.json.org/js.html脚本到您的页面。