将 HTML/Razor 表单中的集合数据发送/发布到 MVC 操作参数模型

Question

我正在开展一个项目，使用 ASP.NET MVC 5 帮助学生和顾问选择下学期的最佳课程。第一步是让学生从列表中选择他已经学习过的课程。显示列表的控制器是：

public ActionResult AddCourseVM (int? id)
    {
        Student student = db.Students.Find(id);
        // List<BaseCourse> potentialCourses = student.StudentConcentration.RequiredCourses.ToList();
        List<BaseCourse> potentialCourses = db.BaseCourses.ToList();
        AddCourseViewModel vModel = new AddCourseViewModel(student, potentialCourses);

        List<Course> listCourses = new List<Course>();

        foreach(BaseCourse baseC in potentialCourses)
        {
            Course c = new Course();
            c.BaseCourse = baseC;
            c.Student = student;
            listCourses.Add(c);
        }

        vModel.PossibleCourses = listCourses;

        return View("AddCourseVM", vModel);
    }

ViewModel 是：

public class AddCourseViewModel
{
    public Student Student { get; set; }
    public List<BaseCourse> AvailCourses { get; set; }
    public List<Course> PossibleCourses { get; set; }

    public AddCourseViewModel(Student s, List<BaseCourse> c)
    {
        Student = s;
        AvailCourses = c;
        PossibleCourses = new List<Course>();
    }

    public AddCourseViewModel()
    {
        Student = new Student();
        AvailCourses = new List<BaseCourse>();
        PossibleCourses = new List<Course>();
    }
}

Course 对象是课程的特定实例（对于给定的学生，在某个学期等），BaseCourse 对象是课程目录中的各个课程。

我正在使用此视图在列表中显示可能的课程：

    @model CMPSAdvising.ViewModels.AddCourseViewModel
@{
    ViewBag.Title = "AddCourseVM";
}

<h2>Add Courses</h2>

<div>
    <p>Name: @Model.Student.FirstName @Model.Student.LastName</p>
    <p>W#: @Model.Student.WNumber</p>
</div>

<div>
        <p>Select the Courses You Have Taken</p>
</div>
<div>
    @using (Html.BeginForm("AddCourseVM","Students"))
    {
        @Html.AntiForgeryToken();
        <div>
            <table class="table table-bordered">
                <tr>
                    <th>Course</th>
                    <th>Department</th>
                    <th>Number</th>
                    <th>Check if Taken</th>
                    <th>Semester</th>
                    <th>Grade</th>
                </tr>
                @foreach (var course in Model.PossibleCourses)
                {
                    <tr>
                        <td>@course.BaseCourse.Name</td>
                        <td>@course.BaseCourse.CourseNumber</td>
                        <td>@course.BaseCourse.CourseNumber</td>
                        <td>@Html.CheckBoxFor(s => course.Selected)</td>
                        <td>@Html.TextBoxFor(m => course.Semester)</td>
                        <td>@Html.TextBoxFor(g => course.Grade)</td>
                    </tr>
                }
            </table>
            <input type="submit" value="Save Classes Taken" class="btn btn-default" />
        </div>
    }
</div>

最后是当用户点击按钮时接收 POST 的控制器：

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult AddCourseVM (AddCourseViewModel vModel)
    {
        Student stu = vModel.Student;
        foreach (Course c in vModel.PossibleCourses)
        {
            if (c.Selected)
            {
                stu.CoursesTaken.Add(c);
            }
        }

        db.Entry(stu).State = EntityState.Modified;
        db.SaveChanges();

        return RedirectToAction("ListTakenCourses", new { id = stu.ID });
    }

我的问题是 AddCourseViewModel 对象 (vModel) 返回 null。我想从网页中获取 ViewModel 作为对象，或者至少获取已检查的课程列表和学生 ID。

Answer 1

我相信there is an app for that called the BeginCollectionItem HtmlHelper。它是discussed briefly with references here，基于blog article written by Steve Sanderson a few years ago。

问题在于，与表单集合的模型绑定与在 MVC 中与标量输入的模型绑定并不完全相同。您的收藏需要一个索引器，as discussed here。如果它没有按预期绑定，请检查被渲染的表单输入的名称属性，并将它们与后模型（动作参数）类中的属性名称和结构进行比较。

从外观上看，看起来更像这样的 HTML 输出应该会导致 action 参数不为空：

<tr>
    <td>HTTP 101</td>
    <td>HTP-101</td>
    <td>HTP-101</td>
    <td><input type="checkbox" name="PossibleCourses[0].Selected" /></td>
    <td><input type="text" name="PossibleCourses[0].Semester"></td>
    <td><input type="text" name="PossibleCourses[0].Grade"></td>
</tr>
<tr>
    <td>MVC 101</td>
    <td>MVC-101</td>
    <td>MVC-101</td>
    <td><input type="checkbox" name="PossibleCourses[1].Selected" /></td>
    <td><input type="text" name="PossibleCourses[1].Semester"></td>
    <td><input type="text" name="PossibleCourses[1].Grade"></td>
</tr>

...等等，下面的剃须刀应该输出：

@for (var i = 0; i <= Model.PossibleCourses.Count; i++)
{
    var course = Model.PossibleCourses[i];
    <tr>
        <td>@course.BaseCourse.Name</td>
        <td>@course.BaseCourse.CourseNumber</td>
        <td>@course.BaseCourse.CourseNumber</td>
        <td>@Html.CheckBox(string.Format("PossibleCourses[{0}].Selected", i),
            course.Selected)</td>
        <td>@Html.TextBox(string.Format("PossibleCourses[{0}].Semester", i),
            course.Semester)</td>
        <td>@Html.TextBox(string.Format("PossibleCourses[{0}].Grade", i),
            course.Grade)</td>
    </tr>
}

注意表单输入元素的名称属性如何对应于动作参数模型中可索引 (List<Course>) 属性的名称，以及包含在集合中的索引 (Course) 属性名称。这是帮助模型绑定器弄清楚如何使用数据填充动作参数类实例的一种方法，方法是使输入名称属性与方法参数属性名称匹配。

您还可以使用 GUID（或任何字符串）作为索引器，这是 BeginItemCollection 在内部所做的。以下内容还应该有助于模型绑定器能够填充 action 参数，以便它不会作为 null 出现在 action 方法中：

@foreach (var course in Model.PossibleCourses)
{
    var indexer = Guid.NewGuid(); // or possibly course.CourseId
    <tr>
        <td>@course.BaseCourse.Name</td>
        <td>@course.BaseCourse.CourseNumber</td>
        <td>@course.BaseCourse.CourseNumber</td>
        <td>@Html.Hidden("PossibleCourses.index", indexer)
            @Html.CheckBox(string.Format("PossibleCourses[{0}].Selected", indexer),
            course.Selected)</td>
        <td>@Html.TextBox(string.Format("PossibleCourses[{0}].Semester", indexer),
            course.Semester)</td>
        <td>@Html.TextBox(string.Format("PossibleCourses[{0}].Grade", indexer),
            course.Grade)</td>
    </tr>
}

所有重要的是对应于动作参数类中的集合项的每组表单元素必须共享相同的索引器，并且索引器必须与对应于不同集合项的其他表单元素组不同动作参数类。 reading this question and its answer可以理解这个解决方案的一个示例。