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

の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アクションメソッド内から選択したチェックボックスを知るには？

Answer 1

エディタテンプレートを使用してこれを行うことができます。

まず、コース選択のための新しいクラスを作成し、そのクラスのコレクションを持っているあなたのビューモデルを更新します。

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

を与える新しいファイルあなたGETアクションで今すぐ

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

にこのコードを貼り付け、ビューモデルのオブジェクトを作成し、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に型付けされたメインビュー（ 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コレクション内の各項目のエディタテンプレートファイルでコードを実行します。コース名とチェックボックスがユーザーに表示されます。あなたのHttpPostアクションメソッドで

、あなたはパラメータと同じビューモデルを使用することができます。フォームが送信されると、SelectedCoursesプロパティの項目をループして、IsSelectedのプロパティ値を確認できます。 uiで選択したコースユーザーは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 
} 

ページのロードの事前選択するいくつかのチェックボックス

時にはあなたは、ページのロード時（例、いくつかのチェックボックスを選択する前にしたい：あなたの編集画面についてすでに表示したいです保存されたコースはチェックされています）。これを行うには、対応するSelectedCourseオブジェクトのIsSelectedプロパティをGETアクションメソッドで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); 
} 

上記のコードは、スウィフトとIOSのチェックボックスを選択し、事前になります。