Question

假设我有一个这样的对象：

public class Widget
{
    public string Name { get; set; }
    public IEnumerable<Foo> Foos { get; set; }
}

public class Foo
{
    public string Name { get; set; }
}

我的控制器方法将它发送到这样的视图：

var widget = _dataAccess.GetWidget(someKey);
return View(widget);

我有一个看起来像这样的视图：

@model MyNamespace.Widget

@using(Html.BeginForm("Edit", "Widgets", FormMethod.Post, new { id = "the-form" }))
{
    <p>@Html.TextBoxFor</p>

    @foreach(var foo in Model.Foos)
    {
        <p>@Html.TextBoxFor(x => x.Foos.ToList()[Model.Foos.ToList().IndexOf(foo)])</p>   
    }

    <input type="button" value="Save Changes" id="the-button" />
}

<script type="text/javascript">
$(function () {
        $("#the-button").click(function () {
            $.ajax({
                url: '@Url.Action("Edit", "Widgets")',
                type: 'POST',
                data: JSON.stringify({ widget: serializeForm("the-form") }),

                // etc, etc, not important
            });
        });
    });
    function serializeForm(formId) {
        var formData = {};
        $.each($("#" + formId).serializeArray(), function(){
            formData[this.name] = $(this).val();
        });
        return formData;
    }
</script>

序列化为：

{ "widget": { "Name" : "value from textbox", "[0].Name" : "some value", "[1].Name" : "some other value" } }

当然，此处的序列化没有用，因为[0].Name不可用。有没有办法改变它，以便它序列化为Post方法控制器操作所期望的？即，像：

{ "widget":{"Name":"blah", "Foos":[ { "Name":"foo name 1"}, { "Name":"foo name 2"} ] }}

Answer 1

您可以将Foos输出为：

for (int i = 0; i < Model.Foos.Count(); i++) {
    <input type="text" name="Foos[@i].Name" value="@Model.Foos.ElementAt(i).Name" />
}

然后您可以轻松发布表单：

 $("#the-button").click(function () {
    $.ajax({
        url: '@Url.Action("Edit", "Widgets")',
        type: 'POST',
        data: $('this').closest('form').serialize(),

        // etc, etc, not important
    });
});

Phil Haack关于模型绑定列表的post深入解释了这一点。

使用JavaScript将表单数据集合序列化为模型

1 个答案: