asp.net mvcでフォーム提出時に動的に作成されたフィールドを配列にバインドする方法は？

Question

私はjQueryを使用して動的に行を追加しているかみそりビューページにフォームを持っています。動的に作成されたフィールドを配列にバインドして、配列を1つずつ参照してデータベースのテーブルに挿入できるようにしたい。問題は、フィールドが配列ではなく個々のフィールドとして "FormCollection"に表示されることです。

ビューページの添付画像を参照してください：新しい行を追加する

jQueryのスクリプト：

$(function() { 
    var tableRowNum = 1; 
    $("#add-work-row").click(function() { 
     tableRowNum++; 
     var tableRow = "<tr>"; 
     tableRow += "<td><input name='works[" + (tableRowNum - 1) + "].workCover' type='checkbox' class='text' /></td>"; 
     tableRow += "<td><input name='works[" + (tableRowNum - 1) + "].workTitle' type='text' class='text work-title caps' /></td>"; 
     tableRow += "<td><input name='works[" + (tableRowNum - 1) + "].workComposers' type='text' class='text work-composer caps' /></td>"; 
     tableRow += "<td><input name='works[" + (tableRowNum - 1) + "].workPerformances' type='text' class='text work-performances' /></td>"; 
     tableRow += "<td><input name='works[" + (tableRowNum - 1) + "].workDuration' type='text' class='text work-duration input-duration' /></td>"; 
     tableRow += "<td><a href='#' class='delete-row'></a></td>"; 
     tableRow += "</tr>"; 
     $("#worksTable").append(tableRow); 
     return false; 
    }); 
}); 

コントローラのアクションは次のとおりです。新しいを追加するための

public ActionResult CreateReport(FormCollection form) 
{ 
    // works is null? 
    var works = form["works"];   
    foreach (var work in works) 
    { 
     // Do something     
    } 
    return null; 
} 

Answer 1

スクリプト行は次のようになります。

入力フィールド名に接頭辞worksがあることに注意してください。これは、MVCコントローラのアクションで使用されます。

また、worksPerformedCollectionは、 "Works Performed"セクションの行を含むviewmodelのプロパティの名前と同じです。

index（具体的には、works.worksPerformedCollection.index）は、1行あたりの入力をグループ化するために使用されます。 tableRowNumが連続している場合は必要ありませんが、そうでない場合は必要です。行を削除するUIの機能があるため、行番号が順番に並んでいない可能性があります。あなたは以下のクラスを持っているサーバー側で

「パフォーマンス詳細」セクションの入力フィールドが works.performanceDate、 works.performerNameとして指名されなければならない

$(function() { 
    var tableRowNum = 1; 
    $("#add-work-row").click(function() { 
     tableRowNum++; 
     var tableRow = "<tr>"; 
     // Index value for grouping (non-sequential) rows. 
     tableRow += "<td><input type='hidden' name='works.worksPerformedCollection.index' value=" + (tableRowNum - 1) + " /></td>"; 
     // Checkbox. 
     tableRow += "<td><input name='works.worksPerformedCollection[" + (tableRowNum - 1) + "].workCover' type='checkbox' class='text' value='true' />"; 
     tableRow += "<input type='hidden' name='works.worksPerformedCollection["+ (tableRowNum - 1) +"].workCover' value='false' /></td>"; 

     tableRow += "<td><input name='works.worksPerformedCollection[" + (tableRowNum - 1) + "].workTitle' type='text' class='text work-title caps' /></td>"; 
     tableRow += "<td><input name='works.worksPerformedCollection[" + (tableRowNum - 1) + "].workComposers' type='text' class='text work-composer caps' /></td>"; 
     tableRow += "<td><input name='works.worksPerformedCollection[" + (tableRowNum - 1) + "].performances' type='text' class='text work-performances' /></td>"; 
     tableRow += "<td><input name='works.worksPerformedCollection[" + (tableRowNum - 1) + "].duration' type='text' class='text work-duration input-duration' /></td>"; 
     tableRow += "<td><a href='#' class='delete-row'></a></td>"; 
     tableRow += "</tr>"; 
     $("#worksTable").append(tableRow); 
     return false; 
    }); 
}); 

など

。

public class PerformanceViewModel 
{ 
    [Required] 
    public DateTime PerformanceDate { get; set; } 

    [Required] 
    public string PerformerName { get; set; } 

    // ... 

    public IEnumerable<WorksPerformedViewModel> WorksPerformedCollection { get; set; } 
} 

public class WorksPerformedViewModel 
{ 
    public bool WorkCover { get; set; } 
    public string WorkTitle { get; set; } 
    public string WorkComposers { get; set; } 
    public int? Performances { get; set; } 
    public TimeSpan? Duration { get; set; } 
} 

これはMVCコントローラにあります。

[HttpPost] 
public ActionResult CreateReport(PerformanceViewModel works) 
{ 
    // ... 
} 

コントローラのアクションがworksとしてのviewmodelを受け入れることに注意してください - これは、クライアント側の入力フィールドに名前を付けるときに使用したのと同じ接頭辞です。