在模型表单中添加另一个“宠物”答案

【问题标题】：Adding another "Pet" to a Model Form在模型表单中添加另一个“宠物”
【发布时间】：2014-07-24 10:48:35
【问题描述】：

简化示例。

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

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

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

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

当用户提交表单时，MVC 会得到一个添加了所有 Pets 的模型。

【问题讨论】：

如果你想在表单上一个一个动态添加宠物，你可能只能手动完成。
请包含 petEditor.cshtml 和您包含它的简化视图（删除与问题无关的内容）。它有助于更清楚地解决问题。
-1 你需要提供一些代码。

标签： asp.net-mvc asp.net-mvc-4 razor

【解决方案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());
}

【讨论】：

为什么有两行正在克隆？
另外，添加隐藏的“Pets[#].Index”有什么作用？我的模型中没有 Index 属性
@AbdulAhmad。回发集合时，DefaultModelBinder 要求索引器启动和归零并且是连续的。添加Pets[#].Index（可以只是Pets.Index）允许ModelBinder使用非连续索引器（实际上索引器可以是"ABC", "XYZ"而不是0, 1, 2）。只要Index 的值与属性名称索引器（方括号之间的位）匹配，那么集合就会成功发布。索引不是您模型的属性（也不应该是）。它只是ModelBinder 内部使用的一个属性。
@AbdulAhmad，脚本的最后一行有错误，应该是 $('...').append(clone.html()); 我假设 OP 选择了这个。另请注意，如果您还希望能够删除，那么将var index 设置为现有项目的数量将不起作用（您最终可能会使用相同的索引器），因此您可以使用var index = (new Date()).getTime();，因此索引器始终是唯一值。
我不完全明白为什么，但对于我的虚拟索引器，我不能使用 Collection[#].Index 作为名称。只有在为虚拟索引器使用名称 Collection.Index 时，它才对我有用。