ASP.NET MVC3 - オブジェクトの配列に動的に項目を追加する

Question

私は動的拡張フォームに記入できるWebサイトで作業しています。

私はグレー表示のフィールドを持つ行を追加し、ユーザーがこれらのフィールドのいずれかにフォーカスを与えたときに次のJavaScriptは、ライン

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

を追加しますが、1つは、この使用してかみそりとasp.netを行うだろうかオブジェクトは自動生成されませんから？

Answer 1

、：

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

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

をそして、あなたのjavascriptはそうのような行を追加します。

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

MVCのデフォルトのモデルバインダーがすべき投稿されたらうまく解決してください。

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

Answer 2

上記のコード例では、ASP.NET MVCで（もちろん）サポートされているjQueryを使用しているため、同じ方法で操作できます。

おそらく私はあなたを理解していませんが、上記のコード例ではPHPコードが表示されません。

Answer 3

あなたがしたいことは、PHPやAsp.Netに依存しないクライアント側スクリプトです。あなたのコードがどのようなものであるかは関係ありません。これはAsp.Net mvcでも機能します。

サーバー側で使用するために新しい制御データを収集する場合は、JavaScriptで収集し、サーバー側でアクセスできる隠しフィールドに割り当てることができます。 1つの文字列に値を保存し、区切り文字で区切って1つの非表示フィールドを使用できます。

Answer 4

スクリプトタグが欠落している可能性がありますか？他の人が言ったように、javascriptはプラットフォームに依存しません。あなたのようなモデルクラスがある場合

ASP.NET MVCで

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