Three implementation methods of CheckBoxList in MVC

For example, when a role is set for a user, the role is usually displayed as a CheckBoxList. The user and role have many-to-many relationships:

Using System. collections. generic; using System. componentModel. dataAnnotations; namespace MvcApplication2.Models {public class User {public int Id {get; set;} [Display (Name = "username")] public string Name {get; set ;} public IList <Role> Roles {get; set ;}} using System. collections. generic; using System. componentModel. dataAnnotations; namespace MvcApplication2.Models {public class Role {public int Id {get; set;} [Display (Name = "Role Name")] public string Name {get; set ;} public IList <User> Users {get; set ;}}}

 

The interface includes user information, all roles, and the Id of the selected role. Therefore, the View Model corresponding to the role interface for the user is roughly as follows:

using System.Collections.Generic;namespace MvcApplication2.Models{    public class UserVm    {        public User User { get; set; }        public List<Role> AllRoles { get; set; }        public List<Role> UserRoles { get; set; }        public int[] SelectedRoleIds { get; set; }    }}

 

HomeController:

Using System. collections. generic; using System. linq; using System. web. mvc; using MvcApplication2.Models; namespace MvcApplication2.Controllers {public class HomeController: controller {// <summary> /// set the initial role Id for the user /// </summary> /// <returns> </returns> public ActionResult Index () {UserVm userVm = new UserVm (); userVm. user = new User () {Id = 1, Name = "Darren"}; userVm. allRoles = GetAllRoles (); userVm. selectedRoleIds = new [] {1, 4}; List <Role> currentUserRoles = new List <Role> (); foreach (var item in userVm. selectedRoleIds) {var temp = GetAllRoles (). where (u => u. id = item ). firstOrDefault (); currentUserRoles. add (temp);} userVm. userRoles = currentUserRoles; return View (userVm) ;}/// <summary> /// role Id selected based on the front-end View, assign a new value to the UserRoles attribute of UserVm /// </summary> /// <param name = "userVm"> </param> /// <returns> </returns> [httpPost] public ActionResult Index (UserVm userVm) {userVm. allRoles = GetAllRoles (); List <Role> newUserRoles = new List <Role> (); foreach (var item in userVm. selectedRoleIds) {var temp = GetAllRoles (). where (u => u. id = item ). firstOrDefault (); newUserRoles. add (temp);} userVm. userRoles = newUserRoles; return View (userVm);} // obtain the private List of all roles <Role> GetAllRoles () {return new List <Role> () {new Role () {Id = 1, Name = "Administrator"}, new Role () {Id = 2, Name = "Database Manager"}, new Role () {Id = 3, name = "financial supervisor"}, new Role () {Id = 4, Name = "sales supervisor"}, new Role () {Id = 5, name = "HR supervisor "}};}}}

 

Method 1: encoding the view page

@ Using MvcCheckBoxList. Model @ model MvcApplication2.Models. UserVm @ {ViewBag. Title = "Index"; Layout = "~ /Views/Shared/_ Layout. cshtml ";}@ using (Html. beginForm () {@ Html. hiddenFor (m => m. user. id) <br/> @ Html. labelFor (m => m. user. name) @ Html. editorFor (m => m. user. name) @ Html. validationMessageFor (m => m. user. name) <br/> <ul style = "list-style: none;"> @ foreach (var a in Model. allRoles) {<li> @ if (Model. selectedRoleIds. contains (. id) {<input type = "checkbox" name = "SelectedRoleIds" value = "@. id "id =" @. id" Checked = "checked"/> <label for = "@. id "> @. name </label>} else {<input type = "checkbox" name = "SelectedRoleIds" value = "@. id "id =" @. id "/> <label for =" @. id "> @. name </label >}</li >}</ul> <br/> <input type = "submit" value = "set role for user"/>}@ section scripts {@ Scripts. render ("~ /Bundles/jqueryval ")}

 

Effect

 

Method 2: Expand through MvcCheckBoxList of NuGet

→ Tool-library Package Manager-Package Manager Console
→ Install-package MvcCheckBoxList

@ Using MvcCheckBoxList. Model @ model MvcApplication2.Models. UserVm @ {ViewBag. Title = "Index"; Layout = "~ /Views/Shared/_ Layout. cshtml ";}@ using (Html. beginForm () {@ Html. hiddenFor (m => m. user. id) <br/> @ Html. labelFor (m => m. user. name) @ Html. editorFor (m => m. user. name) @ Html. validationMessageFor (m => m. user. name) <br/> @ Html. checkBoxListFor (m => m. selectedRoleIds, m => m. allRoles, // all roles r => r. id, // value r => r. name, // display value r => r. userRoles, // the Position of the current user role. horizontal // CheckboxList) <br/> <p Ut type = "submit" value = "set roles for users"/>}@ section scripts {@ Scripts. Render ("~ /Bundles/jqueryval ")}

 

Effect

 

Method 3: Customize the Extension Method

 

MVC extension to generate CheckBoxList and arrange them horizontally

MVC generates and verifies the CheckBoxList