Question

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

我们通过查找 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" />

将发布如下：

Post Data - People%5B0%5D.FirstName=George&People%5B1%5D.FirstName=Abraham&People%5B2%5D.FirstName=Thomas

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

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

Post Data - People%5B0%5D.FirstName=George&People%5B1%5D.FirstName=Abraham&People%5B2%5D.FirstName=Thomas&FirstName=John

模型装订器不会拾取它。

问：如何在通过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

你可以install这样的Html.BeginCollectionItem实用程序：

PM> Install-Package BeginCollectionItem

然后将您的收藏品部分视图包装成如下：

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

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

<tr>
    <input type="hidden" name="people.index" autocomplete="off" 
                     value="132bfe2c-75e2-4f17-b54b-07e011971d78">
    <td><input class="text-box single-line" type="text" value="Abraham"
                 id="people_132bfe2c-75e2-4f17-b54b-07e011971d78__FirstName" 
               name="people[132bfe2c-75e2-4f17-b54b-07e011971d78].FirstName"></td>
    <td><input class="text-box single-line"  type="text" value="Lincoln"
                 id="people_132bfe2c-75e2-4f17-b54b-07e011971d78__LastName"  
               name="people[132bfe2c-75e2-4f17-b54b-07e011971d78].LastName"></td>            
</tr>

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

Form Data - with GUIDs

利用 DefaultModelBinder ，允许非连续指数为explained by Phil Haack：

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

马上你的模型应该很好，但你也可以添加和删除项目。

进一步阅读

动态集合的MVC模型绑定

这是一个MVCE

1 个答案: