asp.net-mvc - 将另一个 "Pet"添加到模型表单

Question

简化示例。

我有一个有几个字段的模型:

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

UI 需要允许用户添加任意​​数量的新宠物。 Pet 条目的 UI 是一个 MVC 模板 _petEditor.cshtml

客户端，如何将新宠物添加到模型的宠物集合中，然后从 _petEditor.cshtml 为宠物添加一组新字段？

当用户提交表单时，MVC 将获得一个添加了所有宠物的模型。

Answer 1

您可以使用 javascript 动态创建用于回发的索引输入。例如，创建一组虚拟输入，当您单击“添加宠物”按钮时，这些输入会被克隆和显示(假设宠物属性显示在 id='Pets' 的表中)

<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());
}