MVC 模型绑定与动态集合

Question

根据关于ASP.NET Wire Format for Model Binding to Arrays, Lists, Collections, Dictionaries的开创性 Scott Hanselman 文章：

我们通过查找来读入属性 索引必须从零开始并且不间断parameterName[index].PropertyName

所以这个 HTML：

<input type="text" name="People[0].FirstName" value="George" />
<input type="text" name="People[1].FirstName" value="Abraham" />
<input type="text" name="People[2].FirstName" value="Thomas" />

它将像这样发布：

但是，如果我通过 AJAX 将一个新人加载到我的模型中，我会丢失将该人构建到模型中的上下文并获得以下输出：

<input type="text" name="FirstName" value="New" />

这不会被模型活页夹拾取。

问：通过 AJAX 动态添加新元素时，如何保留表达式树？

这是一个MVCE

模型： /Model/Person.cs

public class PersonViewModel
{
    public List<Person> People { get; set; }
}
public class Person
{
    public String FirstName { get; set; }
    public String LastName { get; set; }
}

控制器： Controllers/PersonController.cs

[HttpGet]
public ActionResult Index()
{
    List<Person> people = new List<Person> {
        new Person { FirstName = "George" , LastName = "Washington"},
        new Person { FirstName = "Abraham" , LastName = "Lincoln"},
        new Person { FirstName = "Thomas" , LastName = "Jefferson"},
    };
    PersonViewModel model = new PersonViewModel() {People = people};
    return View(model);
}

[HttpPost]
public ActionResult Index(PersonViewModel model)
{
    return View(model);
}

public ActionResult AddPerson(String first, String last)
{
    Person newPerson = new Person { FirstName = first, LastName = last };
    return PartialView("~/Views/Person/EditorTemplates/Person.cshtml", newPerson);
}

看法： Views/Person/Index.cshtml

@model PersonViewModel

@using (Html.BeginForm()) {
    <table id="table">
        <thead>
            <tr>
                <th>@Html.DisplayNameFor(model => model.People.First().FirstName)</th>
                <th>@Html.DisplayNameFor(model => model.People.First().LastName)</th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.People.Count; i++)
            {
                @Html.EditorFor(model => model.People[i])
            }
        </tbody>
    </table>

    <input type="button" value="Add Person" id="add"/>
    <input type="submit" value="Save" />
}

<script type="text/javascript">

    $("#add").click(function() {
        var url = "@Url.Action("AddPerson")?" + $.param({ first: "", last: "" });
        $.ajax({
            type: "GET",
            url: url,
            success: function(data) {
                $("#table tbody").append(data);
            }
        });
    });

</script>

看法： Views/Person/EditorTemplates/Person.cshtml

@model Person

<tr>
    <td>@Html.EditorFor(model => model.FirstName)</td>
    <td>@Html.EditorFor(model => model.LastName)</td>
</tr>

注意：删除我不希望在此处解决的项目时还有其他复杂性。我只想添加一个元素并知道它与其他属性一起属于嵌套上下文。

Answer 1

您可以像这样安装该Html.BeginCollectionItem实用程序：

PM> Install-Package BeginCollectionItem

然后像这样包装您的收藏项部分视图：

PM> Install-Package BeginCollectionItem

这将生成一个 GUID 驱动的集合，如下所示：

@model Person
<tr>
    @using (Html.BeginCollectionItem("people"))
    {
        <td>@Html.EditorFor(model => model.FirstName)</td>
        <td>@Html.EditorFor(model => model.LastName)</td>
    }
</tr>

现在我们得到如下所示的已发布表单数据：

这利用了DefaultModelBinder，它允许非顺序索引，如Phil Haack所解释的：

好消息是，通过引入额外的隐藏输入，您可以允许使用任意索引。只需为.Index我们需要绑定到列表的每个项目提供一个带有后缀的隐藏输入。这些隐藏输入中的每一个的名称都是相同的，这将为模型绑定器提供一个很好的索引集合，以便在绑定到列表时进行查找。

马上，您的模型应该可以很好地构建，但您还可以添加和删除项目。

进一步阅读

• 使用 Html.BeginCollectionItem 帮助程序传递集合的局部视图
• 向控制器提交多次调用数据的相同局部视图？
• 模型绑定到列表 - Phil Haack