asp.net核心中的復選框

Question

我在asp.net核心中是新手。 如何在ASP.NET Core中創建復選框列表？ 例如，列表顯示課程，學生可以選擇自己感興趣的課程。

Answer 1

這是有關如何在ASP.NET MVC和ASP.NET Core中使用復選框的完整示例。

型號：

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

在視圖中：

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

要使瀏覽器呈現一個復選框，您需要一個類型為checkbox的元素：

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

要創建復選框項目列表，您只需渲染多個這些元素即可。

Asp.net核心通過允許您使用razor語法表達循環來簡化此過程。 您可以在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和name HTML屬性。 此外，標記助手通過評估IsEnrolled屬性的基礎數據類型來自動設置type = checkbox。

Answer 3

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