首页 > 代码库 > MVC中CheckBoxList的3种实现方式
MVC中CheckBoxList的3种实现方式
比如,当为一个用户设置角色的时候,角色通常以CheckBoxList的形式呈现。用户和角色是多对多关系:
using System.Collections.Generic;using System.ComponentModel.DataAnnotations;namespace MvcApplication2.Models{ public class User { public int Id { get; set; } [Display(Name = "用户名")] 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 = "角色名")] public string Name { get; set; } public IList<User> Users { get; set; } }}
在界面中包括:用户的信息,所有角色,当前选中角色的Id。所以,与为用户设置角色界面对应的View Model大致这样:
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> /// 为用户设置初始角色Id /// </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> /// 根据前端视图选择的角色Id,给UserVm的UserRoles属性重新赋值 /// </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); } //获取所有的角色 private List<Role> GetAllRoles() { return new List<Role>() { new Role(){Id = 1, Name = "管理员"}, new Role(){Id = 2, Name = "库管员"}, new Role(){Id = 3, Name = "财务主管"}, new Role(){Id = 4, Name = "销售主管"}, new Role(){Id = 5, Name = "人力主管"} }; } }}
方法一:通过在视图页编码的方式
@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(a.Id)) { <input type="checkbox" name="SelectedRoleIds" value=http://www.mamicode.com/"@a.Id" id="@a.Id" checked="checked"/> <label for="@a.Id">@a.Name</label> } else { <input type="checkbox" name="SelectedRoleIds" value=http://www.mamicode.com/"@a.Id" id="@a.Id" /> <label for="@a.Id">@a.Name</label> } </li> } </ul> <br/> <input type="submit" value=http://www.mamicode.com/"为用户设置角色"/>}@section scripts{ @Scripts.Render("~/bundles/jqueryval")}
效果如图:
方法二:通过NuGet的MvcCheckBoxList扩展
→工具--库程序包管理器--程序包管理器控制台
→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, //所有角色 r => r.Id, //value值 r => r.Name, //显示值 r => r.UserRoles, //用户当前角色 Position.Horizontal //CheckboxList排列方向 ) <br/> <input type="submit" value=http://www.mamicode.com/"为用户设置角色"/>}@section scripts{ @Scripts.Render("~/bundles/jqueryval")}
效果如图:
方法三:通过自定义扩展方法
MVC扩展生成CheckBoxList并水平排列
MVC生成CheckBoxList并对其验证
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。