MVC扩展生成CheckBoxList并水平排列

本篇体验生成CheckBoxList的几个思路，扩展MVC的HtmlHelper生成CheckBoxList，并使之水平排开。

通过遍历从控制器方法拿到的Model集合

□ 思路

比如为一个用户设置角色
1、拿到角色集合实例放到ViewBag中。
2、把该用户当前的角色ID集合也放到ViewBag中。
3、前台视图遍历所有角色，如果当前用户的角色ID包含在用户当前的角色ID集合中，就让checkbox为选中。还可以设置每行的checkbox的数量，而遍历动态生成checkbox的name属性设置成"ckb_" + item.ID，以方便后台读取。
4、后台控制器读取新的角色ID集合，保存到数据库。

1、拿到角色集合实例放到ViewBag中。

var roles = RoleService.LoadEntities(lambda表达式).ToList<Role>();

ViewBag.Roles = roles;

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

2、把该用户当前的角色ID集合也放到ViewBag中。

var existingRoleIds = (from r in 某个Model.Role

                    select r.ID).ToList<int>();

ViewBag.OleRoleIDs = existingRoleIds;

3、前台视图遍历所有角色

   1:  List<int> roleIds = (List<int>)ViewBag.OleRoleIDs;

   2:  for(int i = 0; i < ((List<Role>)ViewBag.Roles).Count(); i++)

   3:  {

   4:      var item = ((List<Role>)ViewBag.Roles)[i];

   5:      string name = "ckb_" + item.ID; //checkbox的name属性

   6:      if(i != 0 && i % 3 ==0) //每行有3个checkbox

   7:      {

   8:          <br />

   9:      }

  10:      if(roleIds.Contain(item.ID))

  11:      {

  12:          <span>

  13:              <input type="checkbox" checked="checked" id="@item.ID" name="@name" />

  14:              <label for="@item.ID">@item.RoleName</label>

  15:          </span>

  16:      }

  17:      else

  18:      {

  19:          <span>

  20:              <input type="checkbox" id="@item.ID" name="@name" />

  21:              <label for="@item.ID">@item.RoleName</label>

  22:          </span>

  23:      }

  24:  }

4、后台控制器读取新的角色ID集合，保存到数据库。

   1:  [HttpPost]

   2:  public ActionResult SomeActionMethod(FormCollection collection)

   3:  {

   4:      List<int> roleIds = new List<int>();

   5:      var temp = from key in collection.AllKeys

   6:                  where key.Contains("ckb_")

   7:                  select key;

8:

   9:       foreach(var item in temp)

  10:       {

  11:           if(Request.Form[item] == "on") //如果checkbox状态为被选中

  12:           {

  13:               roleIds.Add(int.Parse(item.Replace("ckb_","")));

  14:           }

  15:       }

16:

  17:       //TODO：调用服务层方法，删除原来所有的角色，添加新的角色

  18:       rreturn Content("ok");

  19:  }

通过扩展HtmlHelper方法

□ 有关城市的一个Model

   1:  namespace MvcCblist.Models

   2:  {

   3:      public class City

   4:      {

   5:          public int Sort { get; set; }

   6:          public string Name { get; set; }

   7:      }

   8:  }

□ 自定义一个CheckBoxListInfo，这个类型的集合实例传到视图，然后扩展方法根据这个类型的属性，把CheckBoxList渲染出来。

   1:  namespace MvcCblist.Models

   2:  {

   3:      public class CheckBoxListInfo

   4:      {

   5:          public string Value { get; private set; }

   6:          public string DisplayText { get; private set; }

   7:          public bool IsChecked { get; private set; }

8:

   9:          public CheckBoxListInfo(string value, string displayText, bool isChecked)

  10:          {

  11:              this.Value = value;

  12:              this.DisplayText = displayText;

  13:              this.IsChecked = IsChecked;

  14:          }

  15:      }

  16:  }

□ HomeController

   1:  using System;

   2:  using System.Collections.Generic;

   3:  using System.Linq;

   4:  using System.Web;

   5:  using System.Web.Mvc;

   6:  using MvcCblist.Models;

7:

   8:  namespace MvcCblist.Controllers

   9:  {

  10:      public class HomeController : Controller

  11:      {

  12:          public ActionResult Index()

  13:          {

  14:              List<City> cities = new List<City>()

  15:              {

  16:                  new City(){Sort = 1,Name = "济南市"},

  17:                  new City(){Sort = 2,Name = "青岛市"},

  18:                  new City(){Sort = 3,Name = "平度市"},

  19:                  new City(){Sort = 4, Name = "即墨市"},

  20:                  new City(){Sort = 5,Name = "威海市"},

  21:                  new City(){Sort = 6,Name = "淄博市"},

  22:                  new City(){Sort = 7, Name = "泰安市"}

  23:              };

24:

  25:              List<CheckBoxListInfo> infos = new List<CheckBoxListInfo>();

  26:              foreach (City item in cities)

  27:              {

  28:                  infos.Add(new CheckBoxListInfo(item.Sort.ToString(),string.Concat(item.Name,"-",item.Sort.ToString()),false));

  29:              }

  30:              ViewData["CheckBoxListOfCities"] = infos;

  31:              return View();

  32:          }

33:

  34:      }

  35:  }

36:

□ 自定义扩展方法

自定义扩展方法有3点需要注意：

1、命名空间用HtmlHelper一样的空间namespace System.Web.Mvc

2、静态类、静态方法

3、返回MvcHtmlString，就像其它内置帮助方法一样

   1:  using System.Collections.Generic;

   2:  using System.Text;

   3:  using System.Web.Routing;

   4:  using MvcCblist.Models;

5:

   6:  namespace System.Web.Mvc

   7:  {

   8:      public static class InputExtensions

   9:      {

  10:          //name对应input的属性name

  11:          public static MvcHtmlString CheckBoxList(this HtmlHelper htmlHelper, string name,

  12:              List<CheckBoxListInfo> listInfos, IDictionary<string, object> htmlAttributes)

  13:          {

  14:              if (string.IsNullOrEmpty(name))

  15:              {

  16:                  throw new ArgumentException("此参数不能为空","name");

  17:              }

  18:              if (listInfos == null)

  19:              {

  20:                  throw new ArgumentException("listInfos");

  21:              }

  22:              StringBuilder sb = new StringBuilder();

  23:              foreach (CheckBoxListInfo info in listInfos)

  24:              {

  25:                  TagBuilder builder = new TagBuilder("input");

  26:                  if (info.IsChecked)

  27:                  {

  28:                      builder.MergeAttribute("checked","checked");

  29:                  }

  30:                  builder.MergeAttributes(htmlAttributes);

  31:                  builder.MergeAttribute("type", "checkbox");

  32:                  builder.MergeAttribute("name",name);

  33:                  builder.InnerHtml = info.DisplayText;

  34:                  sb.Append(builder.ToString(TagRenderMode.Normal));

  35:                  sb.Append("<br />");

  36:              }

  37:              return new MvcHtmlString(sb.ToString());

  38:          }

39:

  40:          //重载方法：不含属性键值对集合

  41:          public static MvcHtmlString CheckBoxList(this HtmlHelper htmlHelper, string name,

  42:              List<CheckBoxListInfo> listInfos)

  43:          {

  44:              return htmlHelper.CheckBoxList(name, listInfos, null);

  45:          }

46:

  47:          //重载方法：从路由中拿数据

  48:          public static MvcHtmlString CheckBoxList(this HtmlHelper htmlHelper, string name,

  49:              List<CheckBoxListInfo> listInfos, object htmlAttributes)

  50:          {

  51:              return htmlHelper.CheckBoxList(name, listInfos,

  52:                  ((IDictionary<string, object>) new RouteValueDictionary(htmlAttributes)));

  53:          }

  54:      }

  55:  }

56:

□ Home/Index.cshtml视图

   1:  @using System.Web.UI.WebControls

   2:  @using MvcCblist.Models

   3:  @{

   4:      ViewBag.Title = "Index";

   5:      Layout = "~/Views/Shared/_Layout.cshtml";

   6:  }

7:

   8:  <h2>Index</h2>

9:

  10:  @Html.CheckBoxList("city", (List<CheckBoxListInfo>)ViewData["CheckBoxListOfCities"],null)

11:

效果：

这还不够，我们希望每行多显示几个checkbox。

完善扩展方法，使checkbox能水平排开，并可设置每行的个数

□ 考虑水平排开和每行显示个数的扩展方法

   1:  using System.Collections.Generic;

   2:  using System.Text;

   3:  using System.Web.Routing;

   4:  using MvcCblist.Models;

5:

   6:  namespace System.Web.Mvc

   7:  {

   8:      public static class InputExtensions

   9:      {

  10:         #region CheckBoxList

  11:          /// <summary>

  12:          /// CheckBoxList.

  13:          /// </summary>

  14:          /// <param name="htmlHelper">The HTML helper.</param>

  15:          /// <param name="name">The name.</param>

  16:          /// <param name="listInfo">CheckBoxListInfo.</param>

  17:          /// <returns></returns>

  18:          public static MvcHtmlString CheckBoxList(this HtmlHelper htmlHelper, string name, List<CheckBoxListInfo> listInfo)

  19:          {

  20:              return htmlHelper.CheckBoxList

  21:              (

  22:                  name,

  23:                  listInfo,

  24:                  (IDictionary<string, object>)null,

  25:                  0

  26:              );

  27:          }

  28:          /// <summary>

  29:          /// CheckBoxList.

  30:          /// </summary>

  31:          /// <param name="htmlHelper">The HTML helper.</param>

  32:          /// <param name="name">The name.</param>

  33:          /// <param name="listInfo">CheckBoxListInfo.</param>

  34:          /// <param name="htmlAttributes">The HTML attributes.</param>

  35:          /// <returns></returns>

  36:          public static MvcHtmlString CheckBoxList(this HtmlHelper htmlHelper, string name, List<CheckBoxListInfo> listInfo, object htmlAttributes)

  37:          {

  38:              return htmlHelper.CheckBoxList

  39:              (

  40:                  name,

  41:                  listInfo,

  42:                  (IDictionary<string, object>)new RouteValueDictionary(htmlAttributes),

  43:                  0

  44:              );

  45:          }

  46:          /// <summary>

  47:          /// CheckBoxList.

  48:          /// </summary>

  49:          /// <param name="htmlHelper">The HTML helper.</param>

  50:          /// <param name="name">The name.</param>

  51:          /// <param name="listInfo">The list info.</param>

  52:          /// <param name="htmlAttributes">The HTML attributes.</param>

  53:          /// <returns></returns>

  54:          public static MvcHtmlString CheckBoxList(this HtmlHelper htmlHelper, string name, List<CheckBoxListInfo> listInfo, IDictionary<string, object> htmlAttributes)

  55:          {

  56:              if (String.IsNullOrEmpty(name))

  57:              {

  58:                  throw new ArgumentException("必须给CheckBoxList一个Tag Name", "name");

  59:              }

  60:              if (listInfo == null)

  61:              {

  62:                  throw new ArgumentNullException("必须要设置List<CheckBoxListInfo> listInfo");

  63:              }

  64:              if (listInfo.Count < 1)

  65:              {

  66:                  throw new ArgumentException("List<CheckBoxListInfo> listInfo 至少要一组资料", "listInfo");

  67:              }

  68:              StringBuilder sb = new StringBuilder();

  69:              int lineNumber = 0;

  70:              foreach (CheckBoxListInfo info in listInfo)

  71:              {

  72:                  lineNumber++;

  73:                  TagBuilder builder = new TagBuilder("input");

  74:                  if (info.IsChecked)

  75:                  {

  76:                      builder.MergeAttribute("checked", "checked");

  77:                  }

  78:                  builder.MergeAttributes<string, object>(htmlAttributes);

  79:                  builder.MergeAttribute("type", "checkbox");

  80:                  builder.MergeAttribute("value", info.Value);

  81:                  builder.MergeAttribute("name", name);

  82:                  builder.InnerHtml = string.Format(" {0} ", info.DisplayText);

  83:                  sb.Append(builder.ToString(TagRenderMode.Normal));

  84:                  sb.Append("</br>");

  85:              }

  86:              return new MvcHtmlString(sb.ToString());

  87:          }

  88:          /// <summary>

  89:          /// CheckBoxList.

  90:          /// </summary>

  91:          /// <param name="htmlHelper">The HTML helper.</param>

  92:          /// <param name="name">The name.</param>

  93:          /// <param name="listInfo">The list info.</param>

  94:          /// <param name="htmlAttributes">The HTML attributes.</param>

  95:          /// <param name="direction">The direction.</param>

  96:          /// <param name="number">每行的显示个数.</param>

  97:          /// <returns></returns>

  98:          public static MvcHtmlString CheckBoxList(this HtmlHelper htmlHelper, string name, List<CheckBoxListInfo> listInfo, IDictionary<string, object> htmlAttributes, int number)

  99:          {

 100:              if (String.IsNullOrEmpty(name))

 101:              {

 102:                  throw new ArgumentException("必须给这些CheckBoxList一个Tag Name", "name");

 103:              }

 104:              if (listInfo == null)

 105:              {

 106:                  throw new ArgumentNullException("必须要设置List<CheckBoxListInfo> listInfo");

 107:              }

 108:              if (listInfo.Count < 1)

 109:              {

 110:                  throw new ArgumentException("List<CheckBoxListInfo> listInfo 至少要有一组资料", "listInfo");

 111:              }

 112:              StringBuilder sb = new StringBuilder();

 113:              int lineNumber = 0;

 114:              foreach (CheckBoxListInfo info in listInfo)

 115:              {

 116:                  lineNumber++;

 117:                  TagBuilder builder = new TagBuilder("input");

 118:                  if (info.IsChecked)

 119:                  {

 120:                      builder.MergeAttribute("checked", "checked");

 121:                  }

 122:                  builder.MergeAttributes<string, object>(htmlAttributes);

 123:                  builder.MergeAttribute("type", "checkbox");

 124:                  builder.MergeAttribute("value", info.Value);

 125:                  builder.MergeAttribute("name", name);

 126:                  builder.InnerHtml = string.Format(" {0} ", info.DisplayText);

 127:                  sb.Append(builder.ToString(TagRenderMode.Normal));

 128:                  if (number == 0)

 129:                  {

 130:                      sb.Append("<br />");

 131:                  }

 132:                  else if (lineNumber % number == 0)

 133:                  {

 134:                      sb.Append("<br />");

 135:                  }

 136:              }

 137:              return new MvcHtmlString(sb.ToString());

 138:          }

 139:          #endregion

 140:      }

 141:  }

 142:

□ Home/Index.cshtml视图

   1:  @using System.Web.UI.WebControls

   2:  @using MvcCblist.Models

   3:  @{

   4:      ViewBag.Title = "Index";

   5:      Layout = "~/Views/Shared/_Layout.cshtml";

   6:  }

7:

   8:  <h2>Index</h2>

9:

  10:  @Html.CheckBoxList("city", (List<CheckBoxListInfo>)ViewData["CheckBoxListOfCities"],null,3)

结果：

参考资料：

※ CheckBoxList Helper for MVC
※ Kevin Tseng

MVC扩展生成CheckBoxList并水平排列的更多相关文章

MVC生成CheckBoxList并对其验证
原文:MVC生成CheckBoxList并对其验证通过扩展方法,可以让CheckBox水平排列,生成CheckBoxList,正如"MVC扩展生成CheckBoxList并水平排列&quo ...
MVC 扩展 Html.ImageFor
Asp.Net MVC 扩展 Html.ImageFor 方法详解背景: 在Asp.net MVC中定义模型的时候,DataType有DataType.ImageUrl这个类型,但htmlhelpe ...
前端基于easyui的mvc扩展(续)
前端基于easyui的mvc扩展(续) 回顾及遗留问题上一篇讲解了基于easyui的mvc扩展的基本实现,已经降低了在mvc内使用easyui的难度,但是仍然还有一些问题: 当我们要给生成的控件设置 ...
Asp.net 面向接口可扩展框架之“Mvc扩展框架及DI”
标题“Mvc扩展框架及DI”有点绕口,我也想不出好的命名,因为这个内容很杂,涉及多个模块,但在日常开发又密不可分首先说Mvc扩展框架,该Mvc扩展就是把以前的那个Mvc分区扩展框架迁移过来,并优化整 ...
Bootstrap 表单和图片（内联表单，表单合组，水平排列，复选框和单选框，下拉列表，校验状态，添加额外的图标，控制尺寸，图片）
一．表单基本格式注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件包括:text.password.datetime.datetime-local.date.m ...
li 水平排列并自动填满 ul
找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...
IIS7 MVC网站生成、发布
imihiro IIS7 MVC网站生成.发布 (1)生成. 确保System.Web.Mvc.dll在bin目录下 (2)发布网站到文件系统 (3)在IIS中为网站添加应用程序池(一个虚拟目录,一个 ...
面向接口可扩展框架之“Mvc扩展框架及DI”
面向接口可扩展框架之“Mvc扩展框架及DI” 标题“Mvc扩展框架及DI”有点绕口,我也想不出好的命名,因为这个内容很杂,涉及多个模块,但在日常开发又密不可分首先说Mvc扩展框架,该Mvc扩展就是把 ...
MVC扩展ModelBinder使类型为DateTime的Action参数可以接收日期格式的字符串
原文:MVC扩展ModelBinder使类型为DateTime的Action参数可以接收日期格式的字符串如何让视图通过某种途径,把符合日期格式的字符串放到路由中,再传递给类型为DateTime的控制 ...

随机推荐

linux内核之accept实现
用户态对accept的标准用法: if ((client_fd = accept(sockfd, (struct sockaddr *)&remote_addr, &sin_size) ...
查找sqlserver数据库中，查询某值所表名和字段名
有时候我们想通过一个值知道这个值来自数据库的哪个表以及哪个字段,通过一个存储过程实现的.只需要传入一个想要查找的值,即可查询出这个值所在的表和字段名. 前提是要将这个存储过程放在所查询的数据库. CR ...
高版本SQL备份在低版本SQL还原问题
问题描述: 高版本SQL备份在低版本SQL还原问题(出现媒体簇的结构不正确) 分析原因: SQL版本兼容问题,SQL SERVER兼容级别是用作向下兼容用,高版本的SQL备份在低版本中不兼容 ...
KnockoutJs学习笔记（一）
由于工作需要,接触到了Knockout,但是之前对于前台开发真的是不太了解,只能是摸着石头过河,边学边实践了. Knockout的官方网站是:http://knockoutjs.com/.我也是跟着官 ...
一键复制功能 - Vue
经常遇到一键复制功能,简单记录一下.这里使用的是clipboard插件:https://clipboardjs.com/ 第一步安装:npm install clipboard --save 第二步 ...
SQL group 分组查询
1.使用group by进行分组查询在使用group by关键字时,在select列表中可以指定的项目是有限制的,select语句中仅许以下几项: 被分组的列为每个分组返回一个值得表达式,例如 ...
echart 打开新世界的大门
实时折线图 option = { backgroundColor:'#2B2B2B', tooltip: { trigger: 'axis' }, legend: { data:['频率'], tex ...
Observer 观察者
意图定义对象间的一种一对多的依赖关系 ,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新. 动机一致性,松耦合需要维护相关对象间的一致性.我们不希望为了维持一致性而使各类紧 ...
LoadRunner中Action的迭代次数的设置和运行场景中设置
LoadRunner中Action的迭代次数的设置和运行场景中设置 LoadRunner是怎么重复迭代和怎么增加并发运行的呢? 另外,在参数化时,对于一次压力测试中均只能用一次的资源应该怎么参数化呢? ...
Java 初相识
Java是如何出现的呢?这就要回到1991年,那时候随着单片机的发展,出现了很多微型的系统,Sun公司在这个时候就成立的一个项目组,成员就有我们熟知的“Java之父” 詹姆斯·高斯林,起初的目标是为了 ...

MVC扩展生成CheckBoxList并水平排列

MVC扩展生成CheckBoxList并水平排列的更多相关文章

随机推荐

热门专题