如何使用jQuery在ASP.NET MVC表单中动态创建和管理数组？

在ASP.NET MVC中使用jQuery动态创建数组

在Web开发中，通常需要允许用户动态添加或删除表单元素，例如文本框或下拉列表。这在为复杂数据结构（如数组或列表）创建表单时尤其有用。

问题

当使用带有C#的ASP.NET MVC时，使用JavaScript动态创建表单数组字段可能会带来挑战。默认情况下，MVC中的FormCollection参数绑定只支持绑定到简单类型，如字符串或数字。但是，要绑定到数组或列表，需要一个表示集合的模型。

解决方案：动态生成表单控件

要将表单数组数据绑定到模型，必须使用Razor语法动态生成表单控件，确保它们具有适当的名称，以便可以正确绑定数据。这涉及使用for循环迭代集合中的项目，生成名称为“BatchProducts[0].Quantity”之类的输入字段。

更新模型

生成控件后，下一步是更新操作方法以接收与表单结构匹配的模型。需要将参数更新为表示数组或列表的强类型对象，例如“IList”。

动态添加和删除项目

如果要启用用户动态添加或删除数组中的元素，可以使用BeginCollectionItem辅助函数或HTML模板。BeginCollectionItem辅助函数允许在集合中的特定索引处插入模板，该模板可用于呈现新的表单行。同样，HTML模板提供了一种使用JavaScript动态添加新元素的方法。

使用BeginCollectionItem辅助函数的示例

对于集合中的每个元素，使用BeginCollectionItem辅助函数生成一个表单行，其中包含每个属性的输入字段。包含一个隐藏的输入字段，其中包含用于删除目的的元素索引。

<code class="language-csharp">@using (Html.BeginForm("Save", "ConnectBatchProduct", FormMethod.Post))
{
  @Html.HiddenFor(model => model.Product.Id)

  <table class="order-list">
    @for (int i = 0; i < Model.BatchProducts.Count; i++)
    {
      @Html.BeginCollectionItem("BatchProducts")
      <tr>
        <td>@Html.TextBoxFor(m => m.BatchProducts[i].Quantity)</td>
        <td>@Html.TextBoxFor(m => m.BatchProducts[i].BatchName)</td>
        <td>
          @Html.HiddenFor(m => m.BatchProducts[i].Index, new { Value = i })
          <a class="deleteRow"></a>
        </td>
      </tr>
      @Html.EndCollectionItem()
    }
  </table>

}</code>

使用HTML模板的示例

为集合中的行创建一个模板，并将其最初隐藏。然后，使用JavaScript克隆和修改模板，更新索引值，并将其附加到表中。

<code class="language-html"><div><p>通过实现这些技术，您可以创建具有动态数组的表单，使用户能够添加或删除元素并将数据发布回控制器进行处理。</p></div></code>

以上是如何使用jQuery在ASP.NET MVC表单中动态创建和管理数组？的详细内容。更多信息请关注PHP中文网其他相关文章！