鑑於

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

如果動態創建輸入元素，你需要模仿的方式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％（對陣列從零開始如索引），但你的想法。

Answer 2

不完全知道你想要做什麼，但如果你想在視圖中顯示的電話號碼列表，你這樣做：

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

什麼是你想實現你的jQuery功能？