Добавить список вложенных моделей в родительскую модель перед созданием в представлении

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 отправляется на контроллер с 1 элементом в списке Phones, который содержит введенный номер телефона.

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% (например, индексация массива с нуля), но вы понимаете,.