來自ASP.NET MVC的動態網格

Question

我正在嘗試使表格類型表格具有動態性並進行更改以響應YoungFF的數量和YFFCompetencies的數量

左側將有一個YoungFF列表，頂部將有一個YFFCompetency列表，並能夠在網格的相應框中打勾。

我可以生成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個視圖模型，一個代表一個表格單元格，一個代表表格行，一個代表表格本身。

您的班級和財產命名有點混亂，因此，我簡化了下面的代碼，以顯示向下列出的Employees列表和跨技能列表，以及用於選擇與每個員工相關聯的技能的復選框。 您認為模型需要

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