一步一步封装自己的HtmlHelper组件BootstrapHelper(二)

前言:上篇介绍了下封装BootstrapHelper的一些基础知识,这篇继续来完善下。参考HtmlHelper的方式,这篇博主先来封装下一些常用的表单组件。关于BootstrapHelper封装的意义何在,上篇评论里面已经讨论得太多,这里也不想过多纠结。总之一句话:凡事有得必有失,就看你怎么去取舍。有兴趣的可以看看,没兴趣的权当博主讲了个“笑话”吧。

BootstrapHelper系列文章目录

C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper

C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(二)

C#进阶系列——一步一步封装自己的HtmlHelper组件:BootstrapHelper(三:附源码)

一、新增泛型的BootstrapHelper

上篇博主只定义了一个BootstrapHelper的普通类型去继承HtmlHelper,由于考虑到需要使用lamada的方式去定义组件,博主又增加了一个BootstrapHelper的泛型类型。于是BootstrapHelper变成了这样。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace BootstrapExtensions
{
 public class BootstrapHelper : System.Web.Mvc.HtmlHelper
 {
 /// <summary>
 /// 使用指定的视图上下文和视图数据容器来初始化 BootstrapHelper 类的新实例。
 /// </summary>
 /// <param name="viewContext">视图上下文</param>
 /// <param name="viewDataContainer">视图数据容器</param>
 public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer)
 : base(viewContext, viewDataContainer)
 { }

 /// <summary>
 /// 使用指定的视图上下文、视图数据容器和路由集合来初始化 BootstrapHelper 类的新实例。
 /// </summary>
 /// <param name="viewContext">视图上下文</param>
 /// <param name="viewDataContainer">视图数据容器</param>
 /// <param name="routeCollection">路由集合</param>
 public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection)
 : base(viewContext, viewDataContainer, routeCollection)
 { }
 }

 /// <summary>
 /// 表示支持在强类型视图中呈现 Bootstrap 控件。
 /// </summary>
 /// <typeparam name="TModel"></typeparam>
 public class BootstrapHelper<TModel> : BootstrapHelper
 {
 /// <summary>
 /// 使用指定的视图上下文和视图数据容器来初始化 <![CDATA[Net.Web.Mvc.BootstrapHelper<TModel>]]> 类的新实例。
 /// </summary>
 /// <param name="viewContext">视图上下文。</param>
 /// <param name="viewDataContainer">视图数据容器。</param>
 public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer)
 : base(viewContext, viewDataContainer)
 { }

 /// <summary>
 /// 使用指定的视图上下文、视图数据容器和路由集合来初始化 <![CDATA[Net.Web.Mvc.BootstrapHelper<TModel>]]> 类的新实例。
 /// </summary>
 /// <param name="viewContext">视图上下文。</param>
 /// <param name="viewDataContainer">视图数据容器。</param>
 /// <param name="routeCollection">路由集合。</param>
 public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection)
 : base(viewContext, viewDataContainer, routeCollection)
 { }
 }
}

我们的Bootstrap对象也定义成泛型对象

public abstract class BootstrapWebViewPage<TModel> : System.Web.Mvc.WebViewPage<TModel>
 {
 //在cshtml页面里面使用的变量
 public BootstrapHelper<TModel> Bootstrap { get; set; }

 /// <summary>
 /// 初始化Bootstrap对象
 /// </summary>
 public override void InitHelpers()
 {
 base.InitHelpers();
 Bootstrap = new BootstrapHelper<TModel>(ViewContext, this);
 }

 public override void Execute()
 {
 //throw new NotImplementedException();
 }
 }

这样做的意义就是为了在cshtml页面里面可以使用@Bootstrap.TextBoxFor(x => x.Name)这种写法。这个后面介绍,这里先埋个伏笔。

二、TextBoxExtensions

TextBoxExtensions.cs的实现代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Reflection;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace BootstrapExtensions
{
 /// <summary>
 /// bootstrap TextBox文本框的所有扩展
 /// </summary>
 public static class TextBoxExtensions
 {
 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="name">表单元素的name属性值</param>
 /// <returns>返回input type='text'标签</returns>
 public static MvcHtmlString TextBox(this BootstrapHelper html, string name)
 {
 return InputExtensions.Helper(html, InputType.Text, null, name, null, false, null);
 }

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">表单元素的name属性值</param>
 /// <returns>返回input type='text'标签</returns>
 public static MvcHtmlString TextBox(this BootstrapHelper html, string id, string name)
 {
 return InputExtensions.Helper(html, InputType.Text, id, name, null, false, null);
 }

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="name">单元素的name属性值</param>
 /// <param name="value">表单元素的value值</param>
 /// <returns>返回input type='text'标签</returns>
 public static MvcHtmlString TextBox(this BootstrapHelper html, string id, string name, object value)
 {
 return InputExtensions.Helper(html, InputType.Text, id, name, value, false, null);
 }

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="name">单元素的name属性值</param>
 /// <param name="value">表单元素的value值</param>
 /// <param name="placeholder">bootstrap自带的文本框的提示输入值</param>
 /// <returns>返回input type='text'标签</returns>
 public static MvcHtmlString TextBox(this BootstrapHelper html, string id, string name, object value, string placeholder)
 {
 IDictionary<string, object> attributes = new Dictionary<string, object>();
 if (!string.IsNullOrEmpty(placeholder))
 {
 attributes.Add("placeholder", placeholder);
 }
 return InputExtensions.Helper(html, InputType.Text, id, name, value, false, attributes);
 }

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="name">单元素的name属性值</param>
 /// <param name="value">表单元素的value值</param>
 /// <param name="htmlAttributes">额外属性</param>
 /// <returns>返回input type='text'标签</returns>
 public static MvcHtmlString TextBox(this BootstrapHelper html, string id, string name, object value, object htmlAttributes)
 {
 IDictionary<string, object> attributes = BootstrapHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
 return InputExtensions.Helper(html, InputType.Text, id, name, value, false, attributes);
 }

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="name">表单元素的name属性值</param>
 /// <param name="value">表单元素的value值</param>
 /// <param name="placeholder">bootstrap自带的文本框的提示输入值</param>
 /// <param name="htmlAttributes">额外属性</param>
 /// <returns>返回input type='text'标签</returns>
 public static MvcHtmlString TextBox(this BootstrapHelper html, string id, string name, object value, string placeholder, object htmlAttributes)
 {
 IDictionary<string, object> attributes = BootstrapHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
 if (!string.IsNullOrEmpty(placeholder))
 {
 attributes.Add("placeholder", placeholder);
 }
 return InputExtensions.Helper(html, InputType.Text, id, name, value, false, attributes);
 }

 public static MvcHtmlString TextBoxFor<TModel, TProperty>(this BootstrapHelper<TModel> html, Expression<Func<TModel, TProperty>> expression)
 {
 var model = (TModel)html.ViewData.Model;
 string propertyName;
 object value;
 InputExtensions.GetValueByExpression<TModel, TProperty>(expression, model, out propertyName, out value);
 return InputExtensions.Helper(html, InputType.Text, propertyName, propertyName, value, false, null);
 }

 }
}

InputExtensions.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Reflection;
using System.Web;
using System.Web.Mvc;

namespace BootstrapExtensions
{
 /// <summary>
 /// Bootstrap表单元素Input扩展方法集合
 /// </summary>
 public static class InputExtensions
 {
 public static MvcHtmlString Helper(BootstrapHelper html, InputType inputType, string id, string name, object value, bool isCheck, IDictionary<string, object> htmlAttributes)
 {
 //定义标签的名称
 TagBuilder tag = new TagBuilder("input");
 if (htmlAttributes == null)
 {
 htmlAttributes = new Dictionary<string, object>();
 }
 //添加name
 if (!string.IsNullOrEmpty(name))
 {
 htmlAttributes.Add("name", name);
 }
 //添加id
 if (!string.IsNullOrEmpty(id))
 {
 htmlAttributes.Add("id", id);
 }
 //添加value
 if (value != null)
 {
 htmlAttributes.Add("value", value.ToString());
 }
 //添加input的类型
 tag.MergeAttribute("type", HtmlHelper.GetInputTypeString(inputType));
 //添加默认样式
 tag.AddCssClass("form-control");
 tag.MergeAttributes(htmlAttributes);

 if (inputType == InputType.Radio || inputType == InputType.CheckBox)
 {
 if (isCheck)
  tag.MergeAttribute("checked", "checked");
 }
 return MvcHtmlString.Create(tag.ToString());
 }

 /// <summary>
 /// 返回表单radio标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <param name="labelClass">label标签的样式</param>
 /// <param name="isCheck">是否选中</param>
 /// <param name="isDisabled">是否禁用</param>
 /// <param name="oAttributes">额外标签</param>
 /// <returns>返回radio标签</returns>
 public static MvcHtmlString CheckBox(BootstrapHelper html, InputType inputType, string id, string name, object value, string text, string labelClass, bool isCheck, bool isDisabled, IDictionary<string, object> htmlAttributes)
 {
 //定义标签的名称
 TagBuilder tag = new TagBuilder("label");
 if (!string.IsNullOrEmpty(labelClass))
 {
 htmlAttributes.Add("class", labelClass);
 }
 System.Text.StringBuilder sbInput = new System.Text.StringBuilder();
 var strInputType = HtmlHelper.GetInputTypeString(inputType);
 sbInput.Append("<input type='").Append(strInputType).Append("'");
 if (!string.IsNullOrEmpty(name))
 {
 sbInput.Append(" name = '").Append(name).Append("'");
 }
 if (!string.IsNullOrEmpty(id))
 {
 sbInput.Append(" id = '").Append(id).Append("'");
 }
 if (value != null)
 {
 sbInput.Append(" value = '").Append(value.ToString()).Append("'");
 }
 if (isCheck)
 {
 sbInput.Append(" checked = 'checked'");
 }
 if (isDisabled)
 {
 sbInput.Append(" disabled");
 }
 sbInput.Append(" />");
 if (!string.IsNullOrEmpty(text))
 {
 sbInput.Append(text);
 }
 tag.InnerHtml = sbInput.ToString();

 tag.MergeAttributes(htmlAttributes);
 return MvcHtmlString.Create(tag.ToString());
 }

 //通过表达式取当前的属性值
 public static void GetValueByExpression<TModel, TProperty>(Expression<Func<TModel, TProperty>> expression, TModel model, out string propertyName, out object value)
 {
 MemberExpression body = (MemberExpression)expression.Body;
 var lamadaName = (body.Member is PropertyInfo) ? body.Member.Name : null;
 propertyName = lamadaName;

 value = null;
 System.Reflection.PropertyInfo[] lstPropertyInfo = typeof(TModel).GetProperties(BindingFlags.Public | BindingFlags.Instance);
 var oFind = lstPropertyInfo.FirstOrDefault(x => x.Name == lamadaName);
 if (oFind != null)
 {
 value = oFind.GetValue(model, null);
 }
 }
 }
}

1、考虑到项目中所有基于bootstrap的TextBox文本框都有一个class="form-control"样式,所以在封装文本框的时候直接将它放到了标签里面。当然,如果你的项目里面不需要这么用,或者自定义了文本框样式,这里也可以写入自己的样式,这样就不用每次声明文本框的时候都去添加这些样式了。

2、TextBoxFor()方法里面融合了使用lamada的方式生成文本框,上面声明的泛型BootstrapHelper类型对象就派上用场了,通过反射和泛型去读取lamada里面的属性名和属性值,这里只定义了一个方法,如果还需要其他重载,可以自己新增方法。

3、在使用的时候又遇到一个问题,由于BootstrapHelper是继承至HtmlHelper类型,那么MVC里面原来封装的一些HtmlHelper的扩展方法对于我们的Bootstrap对象也是可以直接调用的,所以很多重载可能出现重复和找不到对应的重载,比如:

这样的话很容易会出现如下错误:

那么,既然问题出现了,我们就要想办法解决。博主想到的一种解决方案是:将view的web.config里面的Html对象所在的命名空间注释掉。比如:

这样的话就能够解决我们上面的问题,运行效果:

将上面的命名空间注释掉之后,在cshtml页面里面我们将不能再使用Html变量的相关扩展方法,如果你自己的Helper够用,不用原生的扩展方法问题应该也不大。

三、RadioExtensions和CheckboxExtensions

关于bootstrap里面的radio和checkbox组件,博主参考了下http://v3.bootcss.com/css/里面的写法,进行了如下封装:

RadioExtensions.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace BootstrapExtensions
{
 public static class RadioExtensions
 {
 /// <summary>
 /// 返回表单radio标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="name">name属性</param>
 /// <returns>返回radio标签</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string name)
 {
 return Radio(html, null, name, null, null, null, false, false, null);
 }

 /// <summary>
 /// 返回表单radio标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <returns>返回radio标签</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name)
 {
 return Radio(html, id, name, null, null, null, false, false, null);
 }

 /// <summary>
 /// 返回表单radio标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="isCheck">是否选中</param>
 /// <returns>返回radio标签</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name, bool isCheck)
 {
 return Radio(html, id, name, null, null, null, isCheck, false, null);
 }

 /// <summary>
 /// 返回表单radio标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <returns>返回radio标签</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name, object value)
 {
 return Radio(html, id, name, value, null, null, false, false, null);
 }

 /// <summary>
 /// 返回表单radio标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <returns>返回radio标签</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name, object value, string text)
 {
 return Radio(html, id, name, value, text, null, false, false, null);
 }

 /// <summary>
 /// 返回表单radio标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <param name="isCheck">是否选中</param>
 /// <returns>返回radio标签</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name, object value, string text, bool isCheck)
 {
 return Radio(html, id, name, value, text, null, isCheck, false, null);
 }

 /// <summary>
 /// 返回表单radio标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <param name="labelClass">label标签的样式</param>
 /// <returns>返回radio标签</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name, object value, string text, string labelClass)
 {
 return Radio(html, id, name, value, text, labelClass, false, false, null);
 }

 /// <summary>
 /// 返回表单radio标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <param name="labelClass">label标签的样式</param>
 /// <param name="isCheck">是否选中</param>
 /// <returns>返回radio标签</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name, object value, string text, string labelClass, bool isCheck)
 {
 return Radio(html, id, name, value, text, labelClass, isCheck, false, null);
 }

 /// <summary>
 /// 返回表单radio标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <param name="labelClass">label标签的样式</param>
 /// <param name="isCheck">是否选中</param>
 /// <param name="isDisabled">是否禁用</param>
 /// <returns>返回radio标签</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name, object value, string text, string labelClass, bool isCheck, bool isDisabled)
 {
 return Radio(html, id, name, value, text, labelClass, isCheck, isDisabled, null);
 }

 /// <summary>
 /// 返回表单radio标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <param name="labelClass">label标签的样式</param>
 /// <param name="isCheck">是否选中</param>
 /// <param name="isDisabled">是否禁用</param>
 /// <param name="oAttributes">额外标签</param>
 /// <returns>返回radio标签</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name, object value, string text, string labelClass, bool isCheck, bool isDisabled, object oAttributes)
 {
 IDictionary<string, object> htmlAttributes = null;
 if (oAttributes != null)
 {
 htmlAttributes = BootstrapHelper.AnonymousObjectToHtmlAttributes(oAttributes);
 }
 else
 {
 htmlAttributes = new Dictionary<string, object>();
 }
 return InputExtensions.CheckBox(html, InputType.Radio, id, name, value, text, labelClass, isCheck, isDisabled, htmlAttributes);
 }
 }
}

CheckboxExtensions.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace BootstrapExtensions
{
 public static class CheckBoxExtensions
 {
 /// <summary>
 /// 返回表单CheckBox标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="name">name属性</param>
 /// <returns>返回CheckBox标签</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string name)
 {
 return CheckBox(html, null, name, null, null, null, false, false, null);
 }

 /// <summary>
 /// 返回表单CheckBox标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <returns>返回CheckBox标签</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name)
 {
 return CheckBox(html, id, name, null, null, null, false, false, null);
 }

 /// <summary>
 /// 返回表单CheckBox标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="isCheck">是否选中</param>
 /// <returns>返回CheckBox标签</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, bool isCheck)
 {
 return CheckBox(html, id, name, null, null, null, isCheck, false, null);
 }

 /// <summary>
 /// 返回表单CheckBox标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <returns>返回CheckBox标签</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, object value)
 {
 return CheckBox(html, id, name, value, null, null, false, false, null);
 }

 /// <summary>
 /// 返回表单CheckBox标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <returns>返回CheckBox标签</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, object value, string text)
 {
 return CheckBox(html, id, name, value, text, null, false, false, null);
 }

 /// <summary>
 /// 返回表单CheckBox标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <param name="isCheck">是否选中</param>
 /// <returns>返回CheckBox标签</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, object value, string text, bool isCheck)
 {
 return CheckBox(html, id, name, value, text, null, isCheck, false, null);
 }

 /// <summary>
 /// 返回表单CheckBox标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <param name="labelClass">label标签的样式</param>
 /// <returns>返回CheckBox标签</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, object value, string text, string labelClass)
 {
 return CheckBox(html, id, name, value, text, labelClass, false, false, null);
 }

 /// <summary>
 /// 返回表单CheckBox标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <param name="labelClass">label标签的样式</param>
 /// <param name="isCheck">是否选中</param>
 /// <returns>返回CheckBox标签</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, object value, string text, string labelClass, bool isCheck)
 {
 return CheckBox(html, id, name, value, text, labelClass, isCheck, false, null);
 }

 /// <summary>
 /// 返回表单CheckBox标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <param name="labelClass">label标签的样式</param>
 /// <param name="isCheck">是否选中</param>
 /// <param name="isDisabled">是否禁用</param>
 /// <returns>返回CheckBox标签</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, object value, string text, string labelClass, bool isCheck, bool isDisabled)
 {
 return CheckBox(html, id, name, value, text, labelClass, isCheck, isDisabled, null);
 }

 /// <summary>
 /// 返回表单CheckBox标签
 /// </summary>
 /// <param name="html">扩展方法实例</param>
 /// <param name="id">id</param>
 /// <param name="name">name属性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">显示文本</param>
 /// <param name="labelClass">label标签的样式</param>
 /// <param name="isCheck">是否选中</param>
 /// <param name="isDisabled">是否禁用</param>
 /// <param name="oAttributes">额外标签</param>
 /// <returns>返回CheckBox标签</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, object value, string text, string labelClass, bool isCheck, bool isDisabled, object oAttributes)
 {
 IDictionary<string, object> htmlAttributes = null;
 if (oAttributes != null)
 {
 htmlAttributes = BootstrapHelper.AnonymousObjectToHtmlAttributes(oAttributes);
 }
 else
 {
 htmlAttributes = new Dictionary<string, object>();
 }
 return InputExtensions.CheckBox(html, InputType.CheckBox, id, name, value, text, labelClass, isCheck, isDisabled, htmlAttributes);
 }
 }
}

博主将label和checkbox放到了一起,调用的时候传入对应的label文本即可,使用如下:

<div class="radio">
 @Bootstrap.Radio("aa", "bb", "cc", "dd", null, true, false, null)
 </div>
 <div>
 @Bootstrap.Radio("fd", "cc", "cc", "法国", "radio-inline", true, false, null)
 @Bootstrap.Radio("dfer", "cc", "cc", "英国", "radio-inline", true, false, null)
 @Bootstrap.Radio("erer", "cc", "cc", "意大利", "radio-inline", true, false, null)
 </div>
 <div>
 @Bootstrap.CheckBox("fd", "cc2", "cc", "法国", "checkbox-inline", true, false, null)
 @Bootstrap.CheckBox("dfer", "cc2", "cc", "英国", "checkbox-inline", true, false, null)
 @Bootstrap.CheckBox("erer", "cc2", "cc", "意大利", "checkbox-inline", true, false, null)
 </div>

得到的结果:

四、ButtonExtensions

关于bootstrap的按钮样式,bootstrap官网上面也有详细的说明。比如常见的按钮类型由普通按钮、提交按钮、重置按钮;常见的按钮样式主要有如下几种:

另外,按钮的大小也有分类:

基于此,我们将bootstrap类型的按钮做了如下封装

ButtonExtensions.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace BootstrapExtensions
{
 public static class ButtonExtensions
 {
 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法扩展的 HTML 帮助器实例。</param>
 /// <param name="text">显示在按钮上的文本。</param>
 /// <param name="icon">图标的css类。</param>
 /// <returns>一个 Bootstrap Button元素。</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon)
 {
 return Button(html, text, icon, null);
 }

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法扩展的 HTML 帮助器实例。</param>
 /// <param name="text">显示在按钮上的文本。</param>
 /// <param name="icon">图标的css类。</param>
 /// <param name="type">按钮类型。</param>
 /// <returns>一个 Bootstrap Button元素。</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type)
 {
 return Button(html, text, icon, type, null);
 }

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法扩展的 HTML 帮助器实例。</param>
 /// <param name="text">显示在按钮上的文本。</param>
 /// <param name="icon">图标的css类。</param>
 /// <param name="htmlAttributes">一个对象,其中包含要为该元素设置的 HTML 特性。</param>
 /// <returns>一个 Bootstrap Button元素。</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, object htmlAttributes)
 {
 return Button(html, text, icon, ButtonType.Button, htmlAttributes);
 } 

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法扩展的 HTML 帮助器实例。</param>
 /// <param name="text">显示在按钮上的文本。</param>
 /// <param name="icon">图标的css类。</param>
 /// <param name="type">按钮类型。</param>
 /// <param name="htmlAttributes">一个对象,其中包含要为该元素设置的 HTML 特性。</param>
 /// <returns>一个 Bootstrap Button元素。</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type, object htmlAttributes)
 {
 return Button(html, text, icon, type, ButtonClass.Default, null);
 }

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法扩展的 HTML 帮助器实例。</param>
 /// <param name="text">显示在按钮上的文本。</param>
 /// <param name="icon">图标的css类。</param>
 /// <param name="cssClass">按钮样式。</param>
 /// <returns>一个 Bootstrap Button元素。</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonClass cssClass)
 {
 return Button(html, text, icon, cssClass, null);
 }

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法扩展的 HTML 帮助器实例。</param>
 /// <param name="text">显示在按钮上的文本。</param>
 /// <param name="icon">图标的css类。</param>
 /// <param name="cssClass">按钮样式。</param>
 /// <param name="htmlAttributes">一个对象,其中包含要为该元素设置的 HTML 特性。</param>
 /// <returns>一个 Bootstrap Button元素。</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonClass cssClass, object htmlAttributes)
 {
 return Button(html, text, icon, ButtonType.Button, cssClass, null);
 }

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法扩展的 HTML 帮助器实例。</param>
 /// <param name="text">显示在按钮上的文本。</param>
 /// <param name="icon">图标的css类。</param>
 /// <param name="type">按钮类型。</param>
 /// <param name="cssClass">按钮样式。</param>
 /// <returns>一个 Bootstrap Button元素。</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type, ButtonClass cssClass)
 {
 return Button(html, text, icon, type, cssClass, null);
 }

 /// <summary>
 /// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">扩展方法实例。</param>
 /// <param name="text">显示在按钮上的文本。</param>
 /// <param name="icon">图标的css类。</param>
 /// <param name="type">按钮类型。</param>
 /// <param name="cssClass">按钮样式。</param>
 /// <param name="htmlAttributes">一个对象,其中包含要为该元素设置的 HTML 特性。</param>
 /// <returns>一个 Bootstrap Button元素。</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type, ButtonClass cssClass, object htmlAttributes, ButtonSize size = ButtonSize.nm)
 {
 TagBuilder tag = new TagBuilder("button");
 IDictionary<string, object> attributes = BootstrapHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
 attributes.Add("type", type.ToString().ToLower());
 tag.AddCssClass("btn btn-" + cssClass.ToString().ToLower());
 tag.MergeAttributes(attributes);
 TagBuilder span = new TagBuilder("span");
 span.AddCssClass(icon.Substring(0, icon.IndexOf('-')) + " " + icon);
 if (size != ButtonSize.nm)
 {
 tag.AddCssClass("btn-" + size.ToString());
 }
 span.Attributes.Add("aria-hidden", "true");
 tag.InnerHtml = span.ToString() + text;
 return MvcHtmlString.Create(tag.ToString());
 }
 }

 /// <summary>
 /// bootstrap按钮样式
 /// </summary>
 public enum ButtonClass
 {
 /// <summary>
 ///
 /// </summary>
 Default,
 /// <summary>
 ///
 /// </summary>
 Primary,
 /// <summary>
 ///
 /// </summary>
 Success,
 /// <summary>
 ///
 /// </summary>
 Info,
 /// <summary>
 ///
 /// </summary>
 Warning,
 /// <summary>
 ///
 /// </summary>
 Danger,
 /// <summary>
 ///
 /// </summary>
 Link
 }

 /// <summary>
 /// bootstrap按钮类型
 /// </summary>
 public enum ButtonType
 {
 /// <summary>
 /// 普通按钮
 /// </summary>
 Button,
 /// <summary>
 /// 提交按钮
 /// </summary>
 Submit,
 /// <summary>
 /// 重置按钮
 /// </summary>
 Reset
 }

 public enum ButtonSize
 {
 lg,
 nm,
 sm,
 xs
 }
}

1、将按钮的类型、样式、大小定义成了枚举类型,这样使用起来更加方便;

2、生成按钮必须的参数有text和icon,保证按钮的基本构成。

3、使用

<div>
@Bootstrap.Button("测试按钮", "glyphicon-ok",ButtonClass.Primary)
@Bootstrap.Button("提交", "glyphicon-ok", ButtonType.Submit, ButtonClass.Success, null, ButtonSize.lg)
 </div>

五、总结

以上封装了几个常用的表单组件,还剩下几个留在下篇吧。上文只是一个初始版本,很多地方可能并不完善,如果有什么不当或者可以优化的地方,还望斧正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • asp.net 图片验证码的HtmlHelper

    一个图片验证码的HtmlHelper,原来的调用代码如下: 复制代码 代码如下: <img id="validateCode" mailto:src='@Url.Action(%22GetValidateCode%22)'/> <script language="javascript" type="text/javascript"> $(document).ready(function () { $("#vali

  • JS组件Bootstrap实现弹出框和提示框效果代码

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

  • Bootstrap Fileinput文件上传组件用法详解

    最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到我们平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传 上传中 4.boot

  • JS表格组件神器bootstrap table详解(基础版)

    一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

  • JS组件Bootstrap Select2使用方法详解

    在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的单选.多选.分组等功能这里就不多做介绍了,multiselect这方面是强项.重点介绍下select2的一些特性效果: 一.特性效果 1.多选效果 可以设置最多只能选几个 2.图文结合的效果 3.远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前 输入空格搜索出全部 滚动条滑动到底部

  • ASP.NET MVC4 HtmlHelper扩展类,实现分页功能

    1.扩展HtmlHelper类方法ShowPageNavigate public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount) { var redirectTo = htmlHelper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath; page

  • JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

  • ASP.NET MVC中HtmlHelper控件7个大类中各个控件使用详解

    HtmlHelper类在命令System.Web.Mvc.Html之中,主要由7个静态类组成,它们分别是FormExtensions类,InputExtensions类,LinkExtensions类,SelectExtensions类,TextExtensions类,ValidationExtensions类,RenderPartialExtensions类. 为了方便开发者使用HtmlHelper控件,在视图ViewPage类中设置了一个属性Html它就是HtmlHelper类型. 一.Fo

  • JS组件Bootstrap Table使用方法详解

    最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一.效果展示 二.BootStrap table简单介绍 bootStra

  • ASP.NET MVC HtmlHelper如何扩展

    一.ASP.NET 扩展方法三要素 (1).静态类 可以从下图看出,InputExtension首先是一个静态类: (2).静态方法 既然是静态类,那么其所有的方法必然都是静态方法,例如:public static MvcHtmlString CheckBox(): (3).this关键字 可以从方法名定义中看出,第一个参数都是this HtmlHelper htmlHelper,代表对HtmlHelper类的扩展: 二.通过 MVC  HtmlHelper扩展 实例简单说明扩展步骤 实例1.扩

随机推荐