ダイナミックグリッドのasp.net MVC

Question

から私は、グリッド型形態は、ダウンYoungFFsのリストがあるでしょう、ダイナミックでYoungFFsの数とYFFCompetencies

の数に対応するための変更のthatsにしようとしていますグリッド内の対応するボックスにチェックインする機能を備えています。

私はYoungFFの動的リストを生成できますが、動的列の生成の開始位置はわかりません。

のviewmodels：

public class AddTrainingViewModel 
{ 
    public int DrillId { get; set; } 
    public string DrillDate { get; set; } 
    public YoungFFDrillTrainingListViewModel[] YoungFFDrillTrainingListViewModels { get; set; } 
} 

public class YoungFFDrillTrainingListViewModel 
{ 
    public int YoungFFId { get; set; } 
    public string Name { get; set; } 
} 

コントローラー：

public ViewResult AddTraining(int drillId) 
{ 
    //Find Event 
    var selectedDrill = db.Drills.FirstOrDefault(t => t.DrillId == drillId); 

    //YoungFF List   
    DateTime today = DateTime.Today; 
    var youngffs = from s in db.YoungFFs 
     where s.BranchId == selectedDrill.DrillBranchId && s.Left == null 
     orderby s.LastName 
     select new 
     { 
      FirstName = s.FirstName, 
      LastName = s.LastName, 
      YoungFFId = s.YoungFFId, 
     }; 

    //Comptency List 
    var competencies = from s in db.YFFCompetencys 
     where s.Dormant == false 
     orderby s.YFFCompetencyName 
     select new 
     { 
      YFFCompetencyId = s.YFFCompetencyId, 
      YFFCompetencyName = s.YFFCompetencyName, 
     }; 

    AddTrainingViewModel viewModel = new AddTrainingViewModel 
    { 
     DrillId = selectedDrill.DrillId, 
     DrillDate = selectedDrill.DrillDate.ToLongDateString(), 
     YoungFFDrillTrainingListViewModels = 
      youngffs.Select(
       x => new YoungFFDrillTrainingListViewModel 
       { 
        YoungFFId = x.YoungFFId, 
        Name = x.FirstName + " " + x.LastName, 
       }).ToArray(), 
    }; 
    return View(viewModel); 
} 

ビュー、

@model YFA.ViewModels.AddTrainingViewModel 

@{ 
    ViewBag.Title = "Add Training for Drill"; 
} 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

     @Html.HiddenFor(model => model.DrillId) 
     <h3>Instructors</h3> 
     <div class="col-md-offset-1"> 
      @for (int i = 0; i < Model.YoungFFDrillTrainingListViewModels.Count(); i++) 
      { 
       <div class="form-group"> 
        <div class="row"> 
         @Html.HiddenFor(x => Model.YoungFFDrillTrainingListViewModels[i].YoungFFId) 
         <div class="col-md-2"> 
          @Html.LabelFor(x => Model.YoungFFDrillTrainingListViewModels[i].Name, Model.YoungFFDrillTrainingListViewModels[i].Name) 
         </div> 
        </div> 
       </div> 
      } 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-1 col-md-10"> 
       <input type="submit" value="Save" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
} 

<div> 
    @Html.ActionLink("Back to Drill List", "Index") 
</div> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

Answer 1

あなたのビューモデルが希望テーブル表示のた​​めの正しいものではなく、あなたがそれらの3を必要とします1つは表のセル、1つは表の行、もう1つは表そのものです。

あなたのクラスとプロパティの名前はちょっと混乱しますので、下のコードを単純化して従業員のリストとスキルのリストを表示し、各従業員に関連するスキルを選択するためのチェックボックスを表示します。あなたは、モデルがする必要が閲覧

あなたのGETメソッドは、その後、（単純化）されるだろう

public class SkillVM // represents a table cell 
{ 
    public int ID { get; set; } 
    public bool IsSelected { get; set; } 
} 
public class EmployeeVM // table row 
{ 
    public int ID { get; set; } 
    public string Name { get; set; } 
    public List<SkillVM> Skills { get; set; } // columns 
} 
public class EmployeeSkillVM // represents the table 
{ 
    public int ID { get; set; } 
    public string Date { get; set; } 
    public IEnumerable<string> SkillList { get; set; } // table headings 
    public List<EmployeeVM> Employees { get; set; } // table rows 
} 

public ViewResult AddTraining(int drillId) 
{ 
    // Get the skills (YFFCompetencys) 
    var skills = from s in db.YFFCompetencys.Where(...).OrderBy(...); 
    // Get the employees (YoungFFs) 
    var employees = db.YoungFFs.Where(...).OrderBy(...) 
    // Initialize view model 
    EmployeeSkillVM model = new EmployeeSkillVM() 
    { 
     ID = drillId, 
     .... 
     Employees = employees.Select(x => new EmployeeVM() 
     { 
      ID = x.ID, 
      Name = x.Name, 
      Skills = skills.Select(y => new SkillVM() 
      { 
       ID = y.ID 
      }).ToList() 
     }).ToList(), 
     SkillList = skills.Select(x => x.Name) 
    }; 
    // If editing existing data, then set the `IsSelected` property of SkillVM as required 
    return View(model); 
} 

とビューは、その後

@model EmployeeSkillVM 
... 
@using (Html.BeginForm()) 
{ 
    .... 
    @Html.HiddenFor(m => m.ID) 
    .... 
    <table> 
     <thead> 
      <tr> 
       <th></th> 
       @foreach(var skill in Model.SkillList) 
       { 
        <th>@skill</th> 
       } 
      </tr> 
     </thead> 
     <tbody> 
      @for(int i = 0; i < Model.Employees.Count; i++) 
      { 
       <tr> 
        <td> 
         @Html.HiddenFor(m => m.Employees[i].ID) 
         @Html.HiddenFor(m => m.Employees[i].Name) 
         @Html.DisplayFor(m => m.Employees[i].Name) 
        </td> 
        @for(int j = 0; j < Model.Employees[i].Skills.Count; j++) 
        { 
         <td> 
          @Html.HiddenFor(m => Model.Employees[i].Skills[j].ID) 
          @Html.CheckBoxFor(m => Model.Employees[i].Skills[j].IsSelected) 
         </td> 
        } 
       </tr> 
      } 
     </tbody> 
    </table> 
    <input type="submit" value="Save" /> 
} 

だろうとPOSTメソッド

public ActionResult AddTraining(EmployeeSkillVM model) 
{ 
    foreach(var employee in model.Employees) 
    { 
     // Get the ID's of the selected skills 
     var selected = employee.Skills.Where(x => x.IsSelected).Select(x => x.ID); 
     ....