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

随机推荐

Python基础 - MySQLdb模块
安装 pip install MySQLdb 使用去除一个数据库中所有的表 import MySQLdb def db_test(): conn = MySQLdb.connect(user='&l ...
TImage 显示资源中的图片、TResourceStream、资源文件
unit Unit5; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...
js中的call,apply,bind区别
在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...
LeetCode828. Unique Letter String
https://leetcode.com/problems/unique-letter-string/description/ A character is unique in string S if ...
Struts 2 Tutorial
Apache Struts 2 is an elegant, extensible framework for creating enterprise-ready Java web applicati ...
Ansible常见模块介绍
本节内容: ansible命令基础常见模块举例一.ansible命令基础语法: ansible <host-pattern> [-f forks] [-m module_name] ...
【转】Android开启网络调试的方法
方法是偶然看到的: Android 终端adbd服务需要开启5555号端口来建立于adb的连接,如果未开启5555端口,则不能通过网络调试查看是否可以网络调试: # netstat Android ...
常用网络命令（windows）
Ping命令的常用参数选项 ·ping IP –t 连续对IP地址执行Ping命令,直到被用户以Ctrl+C中断. ·ping IP -l 3000 指定Ping命令中的数据长度为3000字节,而 ...
Codeforces Round #239 (Div. 1) 二项式差分
C - Curious Array 思路:对于区间[l, r]每个数加上C(i - l + k, k), 可以在l处+1, 在r+1处-1, 然后做k+1次求前缀和操作,然后就可以写啦. 然后逐层求前 ...
DSP已经英雄迟暮了吗？FPGA才是未来的大杀器?
DSP技术,在某些人看来,或者已经面临着英雄迟暮的感觉,就我们当前所知道的.Freesacle.ADI.NXP早就停掉了新技术发展,而当前从大的方面说只剩下TI一家扛着Digital Si ...

MVC扩展生成CheckBoxList并水平排列

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

随机推荐

热门专题