如何从HttpPost创build操作方法中知道选中的checkbox？

我与Student之间有多对多的关系。 链接实体集是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; } } 

的ViewModels

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

控制器

  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操作方法中选中的checkbox？

Answer 1

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

首先，为课程select创build一个新课程，并更新您的视图模型以获得该课程的集合。

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

您不需要将实体模型中的所有属性复制并粘贴到视图模型中。 视图模型只需要视图绝对需要的那些属性 。 我假设你想把课程分配给一个特定的学生

现在去你的~/Views/YourControllerName并创build一个名为EditorTemplates的目录。 在那里创build一个新的razor文件，并命名为SelectedCource.cshtml

将此代码粘贴到新文件

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

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

 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强types化的主视图（ 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> 

Editor模板将在SelectedCourses集合中的每个项目的编辑器模板文件中执行代码。 所以你将有课程名称和checkbox可见的用户。

在您的HttpPost操作方法中，您可以使用与参数相同的视图模型。 提交表单时，可以循环SelectedCourses属性中的项目，检查IsSelected属性值。 用户在ui中select的课程将具有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 } 

在页面加载时预先select一些checkbox

有时你想在页面加载时预先select一些checkbox（例如：对于你想要显示已经保存的课程的编辑屏幕）。 为此，只需在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); } 

上面的代码将预先selectSwift和IOS的checkbox。