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

Question

简化示例。我有一个模型，它有几个字段：OwnerFirstNameOwnerLastNameList<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">

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

}

Answer 2

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