在视图中创建之前将嵌套模型列表添加到父模型

Question

假设我有一些视图模型设置如下：

public class User
{
    public string Name {get; set;}
    public IList<Phone> Phones {get; set;}
}    
public class Phone
{
    public string Number {get; set;}
}

我的视图设置如下：

@(form){
<div>

@Html.EditorFor(model => model.Name)
<!-- Should be dynamic creation of phone numbers -->
<a id="AddBtnPhone">add</a>
<ul id="PhoneList">
</ul>

<input type="submit"/>
</div>
}
<script>

$(function(){
  $('#AddBtnPhone').click(function(){
    //What do I do here?
  });
});

</script>

如何动态添加电话号码，以便在发布此表单时，它们都在列表集合中？我不知道如何设置我的视图。

场景：

当用户单击添加时，包含接受电话号码的文本框的列表项将添加到PhoneList。单击提交时，模型User 将发布到控制器，其中Phones 列表中包含输入的电话号码的1 个元素。

Answer 1

不完全确定您要做什么，但如果您想在视图中显示电话号码列表，请执行以下操作：

<ul id="PhoneList">
@foreach (var p in Model.Phones) {
    <li>@p.Number</li>
}
</ul>

你想用你的 jquery 函数实现什么？

Answer 2

当您动态创建输入元素时，您需要模仿 MVC 命名表单元素的方式，以便启动模型绑定。

例如，如果您有一个包含 3 个电话号码的列表并让 MVC 将它们呈现出来，它们将如下所示：

<input type="texbox" name="Phones[0].Number" />
<input type="texbox" name="Phones[1].Number" />
<input type="texbox" name="Phones[2].Number" />

所以你需要模仿它。像这样的：

$('#AddBtnPhone').click(function(){
    var $phoneList = $('#PhoneList');
    var numberOfExistingElements = $phoneList.children('.phone').length;
    $phoneList.append('input')
       .attr('type','textbox')
       .attr('name', 'Phones[' + numberOfExistingElements+1 + '].Number')
       .addClass('phone');    
});

这是我想出来的（未经测试），所以它可能不是 100%（例如数组的从零开始的索引），但你明白了。