将另一个“宠物”添加到模型表单中

Question

简化示例。

我有一个模型，它有几个字段：

OwnerFirstName

OwnerLastName

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

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

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

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

Answer 1

您可以使用javascript动态创建回发的索引输入。例如，创建一组虚拟输入，当您单击“添加宠物”按钮时，克隆并显示这些输入（假设宠物属性显示在id ='Pets'的表中）<div id="NewPet" style="display:none">&nbsp; <tr>&nbsp; &nbsp; <td><input type="text" name="Pets[#].Type value /></td>&nbsp; &nbsp; <td><input type="text" name="Pets[#].Breed value /></td>&nbsp; &nbsp; <td>.....</td> // more properties of Pet&nbsp; &nbsp; <td><input type="hidden" name="Pets[#].Index" value ="%"/></td>&nbsp; </tr></div>请注意使用虚拟索引器来防止将其发回和脚本$('#AddButton').click(function() {&nbsp; var index = (new Date()).getTime();&nbsp;&nbsp; var clone = $('#NewPet').clone();&nbsp; // Update the index of the clone&nbsp; clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));&nbsp; clone.html($(clone).html().replace(/"%"/g, '"' + index&nbsp; + '"'));&nbsp; $('#Pets tbody').append(clone.html());}

Answer 2

，脚本的最后一行有一个错误，$('...').append(clone.html());我应该假设OP选择了这个。另请注意，如果您还希望能够删除，那么设置var index为现有项目的数量将不起作用（您可能最终使用相同的索引器），因此您可以使用var index = (new Date()).getTime();索引器始终是唯一值。