將字段動態添加到剃鬚刀表格

Question

我有一個剃鬚刀窗體，其中包含我想動態添加項目的項目列表/表格。您可以從下拉列表中選擇項目，單擊「添加」，然後將下拉列表中的項目添加到列表中。然後，當我提交表單並且我的控制器的HttpPost方法可以處理輸入時，我希望通過POST發送所有這些內容。

有沒有辦法動態地添加字段，仍然能夠接受它們作爲HttpPost函數中的參數？

Answer 1

<form>元素中包含的每個combobox/hiddenfield/textbox/...都會在提交時發佈。如果您在運行中創建它們或將它們默認爲就緒，則無關緊要。然而，最大的區別在於，對於動態創建的那些，您無法真正利用我們習慣的那種整潔的綁定。您還必須手動執行驗證等。

然後你就會有這樣的方法：

public ActionResult HandleMyPost(FormCollection form) 
{ 
    // enumerate through the FormCollection, perform validation etc. 
} 

FormCollection on MSDN

Answer 2

第一個答案是在正確的，你可以遍歷一個集合的形式獲得內的動態插入字段的值你的表單元素。我只想補充一點，你可以利用的一些的整齊綁定。

下面的代碼接受針對該操作發佈的文本框的動態列表。此示例中的每個文本框都與dynamicField具有相同的名稱。 MVC很好地將這些綁定到一個字符串數組中。

完整.NET小提琴：https://dotnetfiddle.net/5ckOGu

示例代碼（片段爲清楚起見）動態地添加樣本場

  @using (Html.BeginForm()) 
      { 
       @Html.AntiForgeryToken() 

       <div id="fields"></div> 

       <button>Submit</button> 
      } 


      <div style="color:blue"><b>Data:</b> @ViewBag.Data</div> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      var $fields = $('#fields'); 
      $('#btnAddField').click(function(e) { 
       e.preventDefault(); 
       $('<input type="text" name="dynamicField" /><br/>').appendTo($fields); 
      }); 
     }); 

    </script> 

示例代碼從動作接受在後的動態字段。

[HttpPost] 
    public ActionResult Index(string[] dynamicField) 
    { 
     ViewBag.Data = string.Join(",", dynamicField ?? new string[] {}); 
     return View(); 
    } 

輸出

的屏幕截圖