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的控制 ...

随机推荐

多线程 or I/O复用select/epoll
1:多线程模型适用于处理短连接,且连接的打开关闭非常频繁的情形,但不适合处理长连接.线程模型默认情况下,在Linux下每个线程会开8M的栈空间,在TCP长连接的情况下,以2000/分钟的请求为例,几乎 ...
安装mysql-python报错解决办法
报错: 按照网上的办法,安装mysql-connector-c-6.1.10-winx64.msi和MySQL-python-1.2.3.win-amd64-py2.7 .exe都不行,又源码安装My ...
编译原理之正则表达式转NFA
本文转载自http://chriszz.sinaapp.com/?p=257 输入一个正则表达式,输出一个NFA. 我的做法:输入一个字符串表示正则,输出则是把输出到一个.dot文件中并将dot文件编 ...
CCF CSP 201512-3 画图
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201512-3 画图问题描述用 ASCII 字符来画图是一件有趣的事情,并形成了一门被称为 ...
vim中E121:无法打开并写入文件解决办法
1.使用命令 :w !sudo tee % 保存即可. 其中: 冒号(:)表示我们处于vim的退出模式: 感叹号(!)表示我们正在运行shell命令: sudo和tee都是shell命令: %表示从 ...
Java设计模式 - 持续更新
注意,此博客来源于我的 OneNote 笔记本因此属于图片形式进行展示,这意味着你可以: 不经过我的同意进行保存不经过我的同意进行发布我仍然希望搬运时留一个网址指明来处:我的博客园多谢!以下是 ...
线程池--ThreadPoolExecutor
线程池的实现原理 1)如果当前运行的线程少于corePoolSize,则创建新线程来执行任务(注意,执行这一步骤需要获取全局锁). 2)如果运行的线程等于或多于corePoolSize,则将任务加入 ...
mysql数据库查询表中相邻数据的差值
select a.time ,a.sum - b.sum sum,a.time,b.time from ( rownum,) t order by time) a, ( rownum ,) t ORD ...
一列道出yield和生成器的真谛
均匀大小的块 def chunks(l, n): """Yield successive n-sized chunks from l.""" ...
[BZOJ4700]适者(CDQ分治+DP/李超线段树)
如果没有秒杀,就是经典的国王游戏问题,按t/a从小到大排序即可. 考虑删除两个数i<j能给答案减少的贡献:S[i]*T[i]+P[i-1]*A[i]-A[i]+S[j]*T[j]+P[j-1]* ...

MVC扩展生成CheckBoxList并水平排列

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

随机推荐

热门专题