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％（例如数组的基于零的索引），但你明白了。

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

2 个答案: