Добавление еще одного "питомца" в модельную форму

Question

Упрощенный пример.

У меня есть модель, которая имеет несколько полей:

OwnerFirstName
OwnerLastName
List<Pet> Pets (Pet is a few string fields)

Пользовательский интерфейс должен позволять пользователю добавлять любое количество новых домашних животных. Пользовательский интерфейс для записи Pet является шаблоном MVC _petEditor.cshtml

На стороне клиента, как мне добавить нового питомца в коллекцию питомцев модели, а затем добавить новый набор полей для питомца из _petEditor.cshtml?

Когда пользователь отправляет форму, MVC получит модель со всеми добавленными домашними животными.

Answer 1

Вы можете использовать javascript для динамического создания индексированных входов для обратной отправки. В качестве примера создайте фиктивный набор входов, которые клонируются и отображаются при нажатии кнопки "Добавить питомца" (предполагается, что свойства питомца отображаются в таблице с id= "Домашние животные")

<div id="NewPet" style="display:none">
  <tr>
    <td><input type="text" name="Pets[#].Type value /></td>
    <td><input type="text" name="Pets[#].Breed value /></td>
    <td>.....</td> // more properties of Pet
    <td><input type="hidden" name="Pets[#].Index" value ="%"/></td>
  </tr>
</div>

Обратите внимание на использование фиктивного индексатора для предотвращения его публикации

И сценарий

$('#AddButton').click(function() {
  var index = (new Date()).getTime(); 
  var clone = $('#NewPet').clone();
  // Update the index of the clone
  clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
  clone.html($(clone).html().replace(/"%"/g, '"' + index  + '"'));
  $('#Pets tbody').append(clone.html());
}