c# - 如何从 HttpPost Create 操作方法中知道选中的复选框？

Question

Student 和 Course 之间存在多对多关系。链接实体集是 Enrollment。为简单起见，均定义如下。

模型

public class Course
{
    public int Id { get; set; }
    public string Title { get; set; }

    public virtual ICollection<Enrollment> Enrollments { get; set; }
}

public class Enrollment
{
    public int Id { get; set; }
    public int StudentId { get; set; }
    public int CourseId { get; set; }

    public virtual Student Student { get; set; }
    public virtual Course Course { get; set; }
}

public class Student
{
    public int Id { get; set; }
    public string Name { get; set; }

    public virtual ICollection<Enrollment> Enrollments { get; set; }
}

View 模型

public class StudentCourseVM
{
    public Student Student { get; set; }
    public IEnumerable<Course> SelectedCourses { get; set; }
    public IEnumerable<Course> AvailableCourses { get; set; }
}

Controller

    public IActionResult Create()
    {
        var availableCourses = context.Courses;
        return View(new StudentCourseVM { AvailableCourses = availableCourses });
    }


    [HttpPost]
    public async Task<IActionResult> Create(StudentCourseVM sc)
    {
        if (ModelState.IsValid)
        {
            // What should I do here?
            // ======================
            await context.SaveChangesAsync();
            return RedirectToAction("Index");
        }
        return View(sc);
    }

观看次数

@model MasterDetails.ViewModels.StudentCourseVM
<form asp-action="Create">
    <div>
        <label asp-for="@Model.Student.Name"></label>
        <input asp-for="@Model.Student.Name" />
    </div>
    <div>
        <label asp-for="@Model.Student.Enrollments"></label><br />
        @foreach (var course in Model.AvailableCourses)
        {
            <input type="checkbox" name="@course.Title" id="@course.Id" /> @course.Title <br />
        }
    </div>
    <input type="submit" value="Create" />
</form>

问题

如何从 HttpPost Create 操作方法中知道选中的复选框？

Answer 1

您可以使用编辑器模板来执行此操作。

首先，为类(class)选择创建一个新类并更新您的 View 模型以拥有该类的集合。

public class SelectedCourse
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool IsSelected { get; set; }
}

public class StudentCourseVM
{
    public int StudentId { set; get; }       
    public IEnumerable<SelectedCourse> SelectedCourses { get; set; }
}

您不需要将实体模型中的所有属性复制并粘贴到 View 模型中。 View 模型只需要 View 绝对需要的那些属性。我假设您想为特定学生分配类(class)

现在转到您的 ~/Views/YourControllerName 并创建一个名为 EditorTemplates 的目录。在那里创建一个新的 razor 文件并命名为 SelectedCource.cshtml

将这段代码粘贴到新文件中

@model SelectedCourse
<label>@Model.Name</label>
<input asp-for="IsSelected"/>
<input type="hidden" asp-for="Id" />

现在在您的 GET 操作中，创建 View 模型的对象，加载 SelectedCourses 集合并将其发送到 View 。

public IActionResult Create()
{
    // I hard coded the student id and the courses here.
    // you may replace it with real data.
    var vm = new StudentCourseVM { StudentId = 12 }; 
    //Assuming we are assigning courses to the student with id 12
    vm.SelectedCourses = new List<SelectedCourse>()
    {
        new SelectedCourse {Id = 1, Name = "CSS"},
        new SelectedCourse {Id = 2, Name = "Swift"},
        new SelectedCourse {Id = 3, Name = "IOS"},
        new SelectedCourse {Id = 4, Name = "Java"}
    };
    return View(vm);
}

现在在 StudentCourseVM 的强类型主视图 (Create.cshtml) 中，在 SelectedCourses 属性上使用 EditorFor 辅助方法。

@model StudentCourseVM
<form asp-action="Create">   
    @Html.EditorFor(f=>f.SelectedCourses)
    <input type="hidden" asp-for="StudentId"/>
    <input type="submit"/>
</form>

编辑器模板将为 SelectedCourses 集合中的每个项目执行编辑器模板文件中的代码。因此，用户可以看到类(class)名称和复选框。

在您的 HttpPost 操作方法中，您可以使用相同的 View 模型作为参数。提交表单后，您可以遍历 SelectedCourses 属性中的项目，检查 IsSelected 属性值。用户在 ui 中选择的类(class)将具有 true 值。

[HttpPost]
public IActionResult Create(StudentCourseVM model)
{
    var studentId = model.StudentId; 
    foreach (var modelSelectedCourse in model.SelectedCourses)
    {
        if (modelSelectedCourse.IsSelected)
        {
            //this one is selected. Save to db
        }
    }
    // to do : Return something
}

在页面加载时预选一些复选框

有时您希望在页面加载时预先选择一些复选框(例如:对于您的编辑屏幕，您希望将已保存的类(class)显示为已选中)。为此，您只需在 GET 操作方法中将相应 SelectedCourse 对象的 IsSelected 属性设置为 true。

public IActionResult Edit(int id)
{
    // I hard coded the student id and the courses here.
    // you may replace it with real data.
    var vm = new StudentCourseVM { StudentId = id }; 
    //Assuming we are assigning courses to the student with id 12
    vm.SelectedCourses = new List<SelectedCourse>()
    {
        new SelectedCourse {Id = 1, Name = "CSS"},
        new SelectedCourse {Id = 2, Name = "Swift", IsSelected = true },
        new SelectedCourse {Id = 3, Name = "IOS", IsSelected = true },
        new SelectedCourse {Id = 4, Name = "Java"}
    };
    return View(vm);
}

以上代码将预先选中Swift 和IOS 的复选框。