c# - ¿Cómo saber las casillas de verificación seleccionadas desde el método de acción Crear HttpPost?

asp.net-mvc asp.net-core

Question

Tengo una relación de muchos a muchos entre el Student y el Course . El conjunto de entidades de enlace es Enrollment . En aras de la simplicidad, todos se definen de la siguiente manera.

Modelos

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

Controladores

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

Puntos de vista

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

Preguntas

¿Cómo saber las casillas de verificación seleccionadas desde el método de acción Create HttpPost?

Answer 1

Puede usar plantillas de editor para hacer esto.

Primero, cree una nueva clase para la selección del curso y actualice su modelo de vista para tener una colección de esa clase.

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

No necesita copiar y pegar todas las propiedades de su modelo de entidad a su modelo de vista. El modelo de vista solo necesita aquellas propiedades que la vista necesita absolutamente . Supongo que desea asignar cursos a un estudiante específico

Ahora vaya a su ~/Views/YourControllerName y cree un directorio llamado EditorTemplates. Cree un nuevo archivo de afeitar allí y asigne el nombre SelectedCource.cshtml

Pegue este código en el nuevo archivo

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

Ahora en su acción GET, cree un objeto del modelo de vista, cargue la colección SelectedCourses y envíela a la vista.

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

Ahora en su vista principal ( Create.cshtml ) que está fuertemente EditorFor , use el método de ayuda EditorFor en la propiedad SelectedCourses .

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

La plantilla del Editor ejecutará el código en el archivo de la plantilla del editor para cada elemento de la colección SelectedCourses. Entonces tendrá el nombre del curso y una casilla de verificación visible para el usuario.

En su método de acción HttpPost, puede usar el mismo modelo de vista que el parámetro. Cuando se envía el formulario, puede recorrer los elementos en la propiedad SelectedCourses y verificar el valor de la propiedad IsSelected . El usuario de los cursos seleccionados en la interfaz de usuario tendrá un true valor.

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

Seleccionar previamente algunas casillas de verificación en la carga de la página

A veces, desea seleccionar previamente algunas casillas de verificación cuando se carga la página (Ej .: Para su pantalla de edición, desea mostrar los cursos ya guardados como marcados). Para hacer esto, simplemente necesita establecer la propiedad IsSelected del objeto SelectedCourse correspondiente en verdadero en su método de acción GET.

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

El código anterior seleccionará previamente las casillas de verificación para Swift e IOS .