ASP.NET MVC3 - Dynamiczne dodawanie elementu do tablicy na obiekcie

Question

Pracuję na stronie internetowej, na której użytkownik powinien być w stanie wypełnić dynamicznie rozwijającą się formę.

Chciałbym dodać wiersz z wyszarzone pola i gdy użytkownik daje skupienie na jednym z tych polu następujące javascript by dodać linię

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

ale jak można by to zrobić przy użyciu maszynki do golenia i ASP.NET , ponieważ obiekty nie zostaną automatycznie wygenerowane?

Answer 1

w ASP.NET MVC, jeśli masz klasę modelu, takich jak:

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

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

A JavaScript dodaje wiersze tak:

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

Domyślna modelu spoiwo w MVC powinien rozwiąż go dobrze, gdy zostanie opublikowany:

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

Answer 2

Możesz zrobić to w ten sam sposób, ponieważ w powyższym przykładzie kodu używasz jQuery, który jest również obsługiwany (oczywiście) z ASP.NET MVC.

Być może nie rozumiem cię, ale nie widzę żadnego kodu PHP w powyższym przykładzie kodu.

Answer 3

to, co chcesz zrobić, to skrypt po stronie klienta, który nie jest zależny od PHP ani Asp.Net, więc nie ma znaczenia, jaki kod jest pisany. to powinno działać również w Asp.Net mvc.

Jeśli chcesz zebrać nowe dane kontrolne, aby użyć go po stronie serwera, możesz zebrać je za pomocą JavaScript i przypisać je w ukrytym polu, do którego można uzyskać dostęp po stronie serwera. możesz użyć jednego ukrytego pola, zapisując wartości w jednym ciągu i oddzielone dowolnym ogranicznikiem.

Answer 4

Po prostu brakuje tagów skryptu? Jak powiedzieli inni, javascript jest niezależny od platformy.

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