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

Question

我正在开展一个项目，使用 ASP.NET MVC 5 帮助学生和导师选择下学期的最佳类(class)。第一步是让学生从列表中选择他已经选修的类(class)。显示列表的 Controller 是:

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 对象是类(class)的特定实例(对于给定的学生，在某个学期等)，BaseCourse 对象是类(class)目录中的各个类(class)。

我正在使用此 View 在列表中显示可能的类(class):

    @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 的 Controller :

[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 作为对象，或者至少获取已检查的类(class)列表和学生 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 .

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

从外观上看，看起来更像这样的 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>

...等等，下面的 Razor 应该输出:

@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) 属性名称。这是一种通过使输入名称属性与方法参数属性名称匹配来帮助模型绑定(bind)器确定如何使用数据填充操作参数类实例的方法。

您还可以使用 GUID(或与此相关的任何字符串)作为索引器，这是 BeginItemCollection 内部所做的。以下内容还应该有助于模型绑定(bind)器能够填充操作参数，以便它不会作为 null 进入操作方法:

@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>
}

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