一步一步封装自己的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 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
js document.write()使用介绍
Feb 21 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
jquery仿微信聊天界面
May 06 jQuery
JS验证全角与半角及相互转化的介绍
May 18 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
利用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实现图片压缩的两则实例
2014/07/19 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
理解JavaScript原型链
2016/10/25 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python实现人机五子棋
2020/03/25 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
客户服务经理岗位职责
2014/01/29 职场文书
学生安全责任书模板
2014/07/25 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers
MySQL 语句执行顺序举例解析
2022/06/05 MySQL