c# – 如何从HttpPost Create操作方法中了解所选复选框？

我和学生之间有多对多的关系.链接实体集是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操作方法中了解所选复选框？

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

首先,为课程选择创建一个新类,并更新您的视图模型以获得该类的集合.

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并创建一个名为EditorTemplates的目录.在那里创建一个新的剃刀文件并命名为SelectedCource.cshtml

将此代码粘贴到新文件中

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

现在,在您的GET操作中,创建视图模型的对象,加载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);
}

现在,在主视图(Create.cshtml)中强烈输入StudentCourseVM,在SelectedCourses属性上使用EditorFor helper方法.

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

编辑器模板将在编辑器模板文件中为SelectedCourses集合中的每个项执行代码.因此,您将拥有课程名称和用户可见的复选框.

在HttpPost操作方法中,您可以使用与参数相同的视图模型.提交表单时,您可以遍历SelectedCourses属性中的项目,检查IsSelected属性值.用户在ui中选择的课程将具有真正的价值.

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

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

有时您希望在页面加载时预先选择一些复选框(例如：对于您的编辑屏幕,您要显示已保存的课程已选中).为此,您只需在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的复选框.