Динамически добавлять поля к форме бритвы

Question

У меня есть форма бритвы со списком/таблицей элементов, которые я бы хотел динамически добавлять в элементы. Вы можете выбрать элементы из раскрывающегося списка, нажать «Добавить», и элемент из раскрывающегося списка будет добавлен в список. Я бы хотел, чтобы все это было отправлено через POST, когда я отправляю свою форму, и мой метод контроллера HttpPost может обрабатывать входные данные.

Есть ли способ динамически добавлять поля и по-прежнему принимать их в качестве аргументов в функции HttpPost?

Answer 1

Каждый комбобокс/скрытое поле/текстовое поле/..., которое входит в элемент <form>, отправляется на отправку. Не имеет значения, создаете ли вы их на лету или готовите по умолчанию. Однако самое большое различие заключается в том, что с динамически созданным вы не можете использовать ту опрятную привязку, к которой мы привыкли. Вам также придется выполнять проверку и т. Д. Вручную.

Тогда вы будете иметь метод, как это:

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

FormCollection on MSDN

Answer 2

Первый ответ является правильным в том, что вы можете перебрать коллекцию формы, чтобы получить значения динамически вставляемых полей в ваш элемент формы. Я просто хотел добавить, что вы можете использовать опрятной привязки.

Приведенный ниже код принимает динамический список текстовых полей, которые были отправлены против действия. Каждое текстовое поле в этом примере имеет то же имя, что и dynamicField. MVC прекрасно связывает их с массивом строк.

Full .NET Fiddle: 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(); 
    } 

Скриншот выхода