ASP.NET MVC3: agregar dinámicamente un elemento a la matriz en el objeto

Question

Estoy trabajando en un sitio web donde el usuario debería poder completar un formulario de expansión dinámico.

me gustaría añadir una fila con los campos en gris y cuando el usuario sitúa el foco en uno de los campo de la siguiente javascript añadiría la línea

<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'); 
    } 
}); 

pero ¿Cómo se podría hacer esto utilizando la maquinilla de afeitar y asp.net , ya que los objetos no se autogenerarán entonces?

Answer 1

En ASP.NET MVC, si usted tiene una clase modelo como:

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

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

Y javascript añade filas de este 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> 

El aglutinante modelo por defecto en MVC debe resolverlo bien cuando se publique

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

Answer 2

Puede hacerlo de la misma manera, porque en el ejemplo de código anterior, está utilizando jQuery que también es compatible (por supuesto) con ASP.NET MVC.

Quizás no te entiendo, pero no veo ningún código PHP en el ejemplo de código anterior.

Answer 3

lo que quiere hacer es un script del lado del cliente que no dependa de PHP o Asp.Net, por lo que no importa para qué está escrito el código. esto debería funcionar en Asp.Net mvc también.

si desea recopilar los nuevos datos de control para utilizarlos en el servidor, puede recopilarlos mediante JavaScript y asignarlos en un campo oculto al que se puede acceder desde el servidor. puede usar un campo oculto guardando los valores en una cadena y separados por cualquier delimitador.

Answer 4

¿Es posible que te falten las etiquetas de scripts? Como dijeron los otros, javascript es independiente de la plataforma.

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