Aggiungere dinamicamente campi al modulo rasoio

Question

Ho un modulo Razor con un elenco/tabella di elementi a cui aggiungere gli elementi in modo dinamico. È possibile selezionare gli elementi da un menu a discesa, fare clic su "Aggiungi" e l'elemento dal menu a discesa verrà aggiunto all'elenco. Mi piacerebbe che tutto questo fosse inviato tramite POST quando invio il mio modulo e il metodo HttpPost del mio controller può gestire l'input.

C'è un modo per aggiungere campi dinamicamente ed essere ancora in grado di accettarli come argomenti nella funzione HttpPost?

Answer 1

Ogni casella combinata/campo nascosto/casella di testo/... inclusa nell'elemento <form> viene pubblicata su submit. Non ha molta importanza se li crei on-fly o li avessi pronti di default. La più grande differenza, tuttavia, è che con quelli creati dinamicamente non si può davvero utilizzare quell'associazione perfetta a cui siamo abituati. Dovrai eseguire anche la validazione ecc. Manualmente.

allora avrete un metodo come questo:

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

FormCollection on MSDN

Answer 2

La prima risposta è corretta in quanto è possibile iterare su una collezione modulo per ottenere i valori dei campi inseriti in modo dinamico all'interno il tuo elemento di forma. Volevo solo aggiungere che è possibile utilizzare un po 'di vincolante.

Il codice seguente accetta un elenco dinamico di caselle di testo che sono state pubblicate rispetto all'azione. Ogni casella di testo in questo esempio aveva lo stesso nome di dynamicField. MVC li lega piacevolmente a una serie di stringhe.

completa .NET Fiddle: https://dotnetfiddle.net/5ckOGu

codice di esempio (snippet per chiarezza) aggiungendo dinamicamente Fields

  @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> 

codice di esempio l'azione accettando i campi dinamici in un post.

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

schermo di uscita