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


Posted in Javascript onSeptember 14, 2016

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

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对象也是可以直接调用的,所以很多重载可能出现重复和找不到对应的重载,比如:

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

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

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

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

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

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

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

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

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

将上面的命名空间注释掉之后,在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>

得到的结果:

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

四、ButtonExtensions

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

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

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

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

基于此,我们将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>

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

五、总结

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

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

Javascript 相关文章推荐
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
Jun 09 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
浅析vue.js数组的变异方法
Jun 30 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
利用bootstrapValidator验证UEditor
Sep 14 #Javascript
JavaScript鼠标特效大全
Sep 13 #Javascript
javascript表单控件实例讲解
Sep 13 #Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 #Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 #Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 #Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 #Javascript
You might like
解析php中的escape函数
2013/06/29 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
python树莓派红外反射传感器
2019/01/21 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
.NET概念性的面试题
2012/02/29 面试题
党员个人思想汇报
2013/12/28 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
公司委托书格式范文
2014/10/09 职场文书
购房个人委托书范本
2014/10/11 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
Java 在线考试云平台的实现
2021/11/23 Java/Android