Динамическая сетка из ASP.NET MVC

Question

Я пытаюсь сделать форму типа сетки тот динамический и изменения, чтобы ответить на количество YoungFFs и числа YFFCompetencies

Там будет список YoungFFs вниз слева и список YFFCompetencies в верхней части с возможностью отмечать в соответствующих полях в сетке.

Я могу сгенерировать динамический список 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 из них, один для представления ячейки таблицы, один для строки таблицы и один для самой таблицы.

Именование вашего класса и имущества немного запутанно, поэтому я упростил приведенный ниже код, чтобы показать список сотрудников и список навыков по всем, с флажками для выбора навыков, связанных с каждым сотрудником. Вы просматриваете модели должны быть

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 
} 

Ваш метод GET будет затем (упрощенный)

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); 
     ....