来自asp.net mvc的动态网格

Question

我正在尝试制作一个动态的网格类型表单，并根据 YoungFF 的数量和 YFFCompetencies 的数量进行更改

左侧会有一个 YoungFF 列表，顶部有一个 YFFCompetencies 列表，可以在网格中的相应框中打勾。

我可以生成 YoungFF 的动态列表，但不知道从哪里开始生成动态列？

视图模型：

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