創建在執行時增長的動態表單

我在 MVC 應用程序中的 asp.net 核心中工作。我正在使用基於模型創建視圖和控制器的腳手架功能。以下是我正在使用的模型：

class ShoppingList
{
   public int ShoppingListId { get; set; }
   public string Name { get; set; }
   public List<string> ListItems { get; set; }            
}

通過視圖向使用者顯示的表單僅顯示名稱欄位。我希望表單能夠顯示列表項的欄位，然後如果使用者想要添加另一個列表項，他們可以點擊一個按鈕來添加另一個欄位。他們在執行時決定要添加多少購物清單項目。

這是我正在使用的剃須刀 cshtml 表單：

<form asp-action="Create">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
       <div class="form-group">
          <label asp-for="Name" class="control-label"></label>
          <input asp-for="Name" class="form-control" />
          <span asp-validation-for="Name" class="text-danger"></span>
       </div>
    <div class="form-group">
    <input type="submit" value="Create" class="btn btn-default" />
    </div>
</form>

是否有捷徑可尋？我不想硬編碼一個數字。

如果你想允許使用者在客戶端添加一個新的表單元素，你需要使用 javascript 來用你想要添加的新元素更新 DOM。要列出現有項目，您可以使用編輯器模板。混合這兩個會給你一個動態的形式。下面是一個基本的實現。

要使用編輯器模板，我們需要為屬性類型創建一個編輯器模板。string對於更像通用類型的類型，我不會這樣做。我會創建一個自定義類來表示列表項。

public class Item
{
   public string Name { set; get; }
}
public class ShoppingList
{
   public int ShoppingListId { get; set; }
   public string Name { get; set; }
   public List<Item> ListItems { get; set; }

   public ShoppingList()
   {
       this.ListItems=new List<Item>();
   }
}

現在，創建一個名為 or 的目錄EditorTemplates並~/Views/YourControllerName創建~/Views/Shared/一個名為的視圖，該視圖Item.cshtml將具有以下程式碼

@model  YourNameSpaceHere.Item
<input type="text" asp-for="Name" class="items" />

現在在您的 GET 控制器中，創建 ShoppingList 的對象並發送到視圖。

public IActionResult ShoppingList()
{
   var vm = new ShoppingList() {  };
   return View(vm);
}

現在在主視圖中，您所要做的就是呼叫 EditorFor 方法

@model YourNamespace.ShoppingList
<form asp-action="ShoppingList" method="post">
   <input asp-for="Name" class="form-control" />
   <div class="form-group" id="item-list">
       <a href="#" id="add">Add</a>
       @Html.EditorFor(f => f.ListItems)
   </div>
   <input type="submit" value="Create" class="btn btn-default" />
</form>

標記具有用於添加新項目的錨標記。所以當使用者點擊它時，我們需要添加一個新的 input 元素，其 name 屬性值的格式為ListItems[indexValue].Name

$(function () {

  $("#add").click(function (e) {
      e.preventDefault();
      var i = $(".items").length;
      var n = '<input type="text" class="items" name="ListItems[' + i + '].Name" />';
      $("#item-list").append(n);
  });

});

因此，當使用者點擊時，它會向 DOM 添加一個具有正確名稱的新輸入元素，並且當您點擊送出按鈕時，模型綁定將正常工作，因為我們為輸入提供了正確的名稱屬性值。

[HttpPost]
public IActionResult ShoppingList(ShoppingList model)
{
   //check model.ListItems
   // to do : return something
}

如果您想預載入一些現有項目（用於編輯螢幕等），您所要做的就是載入 ListItems 屬性，編輯器模板將負責為每個項目呈現正確的名稱屬性值的輸入元素。

public IActionResult ShoppingList()
{
   var vm = new ShoppingList();
   vm.ListItems = new List<Item>() { new Item { Name = "apple" } }
   return View(vm);
}

引用自：https://stackoverflow.com/questions/46854085