在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中文網其他相關文章！
