在asp.net核心中的複選框列表

Question

我是非常新的asp.net核心。如何在asp.net核心中創建複選框列表？作爲例子，列表顯示課程，學生可以選擇他們感興趣的課程。

Answer 1

<asp:CheckBoxList ID="CheckBoxList1" runat="server"> 
     <asp:ListItem>Electronics</asp:ListItem> 
     <asp:ListItem>Electricals</asp:ListItem> 
     <asp:ListItem>Civil</asp:ListItem> 
     <asp:ListItem>Mechanical</asp:ListItem> 
    </asp:CheckBoxList> 

Answer 2

下面是如何使用ASP.NET MVC和ASP.NET核心

型號複選框一個完整的例子：

public class Student 
    { 
     public Student() 
     { 
      Courses = new HashSet<Course>(); 
     } 
     [Key] 
     public int Id { get; set; } 

     [Required] 
     [Display(Name = "Student Name")] 
     public string Name { get; set; } 

     public virtual ICollection<Course> Courses { get; set; } 
    } 

public class Course 
    { 
     public Course() 
     { 
      Students = new HashSet<Student>(); 
     } 
     [Key] 
     public int Id { get; set; } 

     [Required] 
     [Display(Name = "Course Name")] 
     public string Name { get; set; } 
     public virtual ICollection<Student> Students { get; set; } 

    } 

控制器：

public class StudentsController : Controller 
      { 
       private readonly CheckBoxListDbConetxt _dbConetxt = new CheckBoxListDbConetxt(); 


     [HttpGet] 
     public IActionResult CreateStudent() 
       { 

        ViewBag.AllCourses = _dbConetxt.Courses.ToList(); 
        return View(); 
       } 

       // POST: Students/Create 
       [HttpPost] 
       [ValidateAntiForgeryToken] 
       public IActionResult CreateStudent(Student student, List<int> selectedCourses) 
       { 
        if (ModelState.IsValid) 
        { 
         if (selectedCourses != null) 
         { 
          foreach (var item in selectedCourses) 
          { 
           Course course = _dbConetxt.Courses.Find(item); 
           student.Courses.Add(course); 
          } 
         } 

         _dbConetxt.Students.Add(student); 
         _dbConetxt.SaveChanges(); 
         return RedirectToAction("Index"); 
        } 

        ViewBag.AllCourses = _dbConetxt.Courses.ToList(); 
        return View(student); 
       } 
} 

在View：

<div class="form-group"> 
      <div class="col-md-2 input-label"> 
       <label class="control-label">Course</label> 
      </div> 

      <div class="col-md-10 input-box"> 
       <div class="form-control"> 
        @{ 
         var count = Enumerable.Count(ViewBag.AllCourses); 
         foreach (var item in ViewBag.AllCourses) 
         { 
          <input type="checkbox" name="selectedCourses" value="@item.Id" /> 
          @item.Name 
          if (--count > 0) 
          { 
           @:| 
         } 
         } 
        } 

</div> 

Answer 3

爲了讓瀏覽器渲染你需要類型複選框的元素複選框：

<input id="checkBox" name="checkbox" type="checkbox"> 

要創建的複選框項目的清單，你只需渲染這些元素的多個。

Asp.net核心通過允許您使用剃刀語法表達循環來簡化此操作。您可以將以下內容放入cshtml文件中以呈現例如10複選框項目：

@for (int i = 0; i < 10; i++) 
{ 
     <input type="checkbox" /> 
     <br /> 
} 

最後，您可以使用Asp.net標籤助手來進一步簡化所需html的創建。

該示例假定您有一個名爲Student的模型，該模型具有屬性IsEnrolled。

@model Student 

@for (int i = 0; i < 10; i++) 
{ 
     <input asp-for="IsEnrolled" /> 
     <br /> 
} 

由於使用輸入標籤助手（asp-for），呈現給瀏覽器的html自動包含id和名稱HTML屬性。更重要的是，標籤助手通過評估IsEnrolled屬性的基礎數據類型來自動設置type =複選框。