Question

我试图创建一个动态的网格类型表单，并更改以响应YoungFF的数量和YFFC能力的数量

左边有一个YoungFF列表，顶部有一个YFFC能力列表，可以在网格的相应方框中打勾。

我可以生成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);
        ....

动态网格来自asp.net mvc

1 个答案: