ASP.NET MVC3 - Aggiunta dinamica di un elemento all'array sull'oggetto

Question

Sto lavorando a un sito Web in cui l'utente deve essere in grado di compilare un modulo di espansione dinamico.

vorrei aggiungere una riga con campi in grigio e quando l'utente attiva uno di quelli campo il seguente javascript aggiungerei la linea

<tr class="unSelected"> 
    <input name="id[]"> 
    <input name="blabla[]"> 
</tr> 

$('.unSelected').focusin(function() { 
    if ($(this).hasClass('unSelected')) { 
    var row = $(this).clone(true); 
    $(this).after(row); 
    $(this).removeClass('unSelected'); 
    } 
}); 

ma come si potrebbe fare questo usando rasoio e asp.net , in quanto gli oggetti non verranno automaticamente autogenerati?

Answer 1

In ASP.NET MVC, se si dispone di una classe di modello come:

public class PageModel 
{ 
    public Collection<RowItem> RowItems { get; set; } 
} 

public class RowItem 
{ 
    public int Id {get;set;} 
    public string MoreFields { get; set; } 
} 

E il tuo javascript aggiunge file in questo modo:

<script type="text/javascript"> 
    var currentRowIndex = 0; 

    $(document).ready(function() { 
     SetFocusEventForInputs('unSelected0'); 
    }); 

    function SetFocusEventForInputs(className) { 
     var inputSelector = '.' + className; 

     $(inputSelector).focusin(function() { 
      AddNewRowTo(this); 
      $(inputSelector).unbind('focusin').removeClass(className); 
     }); 
    } 

    function AddNewRowTo(sendingInputField) { 
     currentRowIndex++; 
     var className = 'unSelected' + currentRowIndex; 
     var collectionNamePrefix = 'RowItems[' + currentRowIndex + '].'; 

     var idField = $('<input/>').attr('name', collectionNamePrefix + 'Id').attr('type', 'text').attr('class', className); 
     var moreFields = $('<input/>').attr('name', collectionNamePrefix + 'MoreFields').attr('type', 'text').attr('class', className); 

     var cell = $('<td></td>').append(idField).append(moreFields); 
     var row = $('<tr></tr>').append(cell); 

     $(sendingInputField).parents("tr").after(row); 

     SetFocusEventForInputs(className); 
    } 
</script> 
<table> 
    <tr> 
     <td> 
      <input name="RowItems[0].Id" type="text" class="unSelected0" /> 
      <input name="RowItems[0].MoreFields" type="text" class="unSelected0" /> 
     </td> 
    </tr> 
</table> 

Il legante modello predefinito in MVC dovrebbe risolverlo bene quando viene pubblicato

[HttpPost] 
public ActionResult YourPostActionHere(PageModel model) 
{ 
    var count = model.RowItems.Count(); 
    etc... 
} 

Answer 2

Puoi farlo allo stesso modo, perché nell'esempio di codice sopra, stai usando jQuery che è anche supportato (ovviamente) con ASP.NET MVC.

Forse non ti capisco, ma non vedo alcun codice PHP nell'esempio di codice sopra.

Answer 3

quello che vuoi fare è uno script lato client che non dipende da PHP o Asp.Net, quindi non importa quale sia il tuo codice è scritto da. questo dovrebbe funzionare anche in Asp.Net mvc.

se si desidera raccogliere i nuovi dati di controllo per utilizzarli sul lato server, è possibile recuperarli tramite JavaScript e assegnarli in un campo nascosto accessibile dal lato server. puoi utilizzare un campo nascosto salvando i valori in una stringa e separati da qualsiasi delimitatore.

Answer 4

Ti mancano solo i tag dello script? Come gli altri hanno detto, javascript è indipendente dalla piattaforma.

<tr class="unSelected"> 
    <input name="id[]"> 
    <input name="blabla[]"> 
</tr> 

<script src="/Scripts/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $().ready(function() { 
     $('.unSelected').focusin(function() { 
      if ($(this).hasClass('unSelected')) { 
       var row = $(this).clone(true); 
       $(this).after(row); 
       $(this).removeClass('unSelected'); 
      } 
     }); 
    }); 
</script>