如何通过MVC 3中的jQuery加载传递一个对象数组?

时间:2012-11-12 23:24:10

标签: c# asp.net-mvc asp.net-mvc-3 jquery

我不打算使用ajax jQuery方法。我想将.load()方法用于div。这是我的javascript方法的样子:

function PartialViewLoadArray(aName, aValue, aGuid, aName2, aValue2, aGuid2) {

    modelArray = [];

    modelArray.push({ Name: aName, Value: aValue, Guid: aGuid });
    modelArray.push({ Name: aName2, Value: aValue2, Guid: aGuid2 });

    $('#examplediv').load(
        '/Example/PartialByModelArray/',
        { ModelArray: modelArray },
        function () {
            alert('the load has completed!');
        }
    );
}

以下是控制器上的操作:

public PartialViewResult PartialByModelArray(ExamplePartialArrayModel aModel)
{
    return PartialView("_ExamplePartialByArray", aModel);
}

我的阵列模型:

public class ExamplePartialArrayModel
{
    public ExamplePartialModel[] ModelArray { get; set; }
}

上述模型中包含的模型:

public class ExamplePartialModel
{
    private string _Name;
    private int? _Value;
    private string _Guid;

    public string Name
    {
        get { return this._Name; }
        set { this._Name = value; }
    }

    public int? Value
    {
        get { return this._Value; }
        set { this._Value = value; }
    }

    public string Guid
    {
        get { return this._Guid; }
        set { this._Guid = value; }
    }
}

我知道如果我使用上下文和字符串编写器等手动渲染局部视图,我可以让这个div加载内容,但在我看来好像我应该能够使这个load()语句工作。为什么MVC没有选择这些数据?什么是非常奇怪的是,当我在我的动作的第一行设置一个断点时,它向我展示了数组中的两个项目 - 但是它们的所有属性都是null。如何确定数组中的项目数量但不绑定它们的值?到底是怎么回事?我很神秘。

1 个答案:

答案 0 :(得分:2)

问题是数据是作为表单数据发布的,而jquery以默认模型绑定器无法理解的格式执行此操作。在我的测试中,我使用fiddler来查看数据是以这种格式发布的:

ModelArray[0][Name]  : name1
ModelArray[0][Value] : value1
ModelArray[0][Guid]  : guid1
ModelArray[1][Name]  : name2
ModelArray[1][Value] : value2
ModelArray[1][Guid]  : guid2

解决此问题的最简单方法是以json格式发布数据:

function PartialViewLoadArray(aName, aValue, aGuid, aName2, aValue2, aGuid2) {
    var modelArray = [];

    modelArray.push({ Name: aName, Value: aValue, Guid: aGuid });
    modelArray.push({ Name: aName2, Value: aValue2, Guid: aGuid2 });

    $.ajax({
        type: 'POST',
        url: '/home/PartialByModelArray/',
        contentType: 'application/json',
        data: { ModelArray: modelArray },
        success: function (response) {
            $('#examplediv').replaceWith(response);
        }
    });
}

请注意,此代码使用json2库对json数据进行编码,您的控制器操作应使用[HttpPost]属性进行标记。

我不确定你为什么不想使用ajax方法,但是你也可以看一下将表单数据编码为更友好的mvc格式或编写自定义模型绑定器的方法,但是似乎需要付出更多的努力。 This post更多地解释了这个问题,可能会给你一些想法。