最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

一步一步封裝自己的HtmlHelper組件BootstrapHelper（二）

 更新時(shí)間：2016年09月14日 08:55:41   作者：懶得安分  
一步一步封裝自己的HtmlHelper組件：BootstrapHelper，系列文章第二篇，感興趣的小伙伴們可以參考一下

前言：上篇介紹了下封裝BootstrapHelper的一些基礎(chǔ)知識(shí)，這篇繼續(xù)來(lái)完善下。參考HtmlHelper的方式，這篇博主先來(lái)封裝下一些常用的表單組件。關(guān)于BootstrapHelper封裝的意義何在，上篇評(píng)論里面已經(jīng)討論得太多，這里也不想過(guò)多糾結(jié)。總之一句話：凡事有得必有失，就看你怎么去取舍。有興趣的可以看看，沒(méi)興趣的權(quán)當(dāng)博主講了個(gè)“笑話”吧。

BootstrapHelper系列文章目錄

C#進(jìn)階系列——一步一步封裝自己的HtmlHelper組件：BootstrapHelper

C#進(jìn)階系列——一步一步封裝自己的HtmlHelper組件：BootstrapHelper（二）

C#進(jìn)階系列——一步一步封裝自己的HtmlHelper組件：BootstrapHelper（三：附源碼）

一、新增泛型的BootstrapHelper

上篇博主只定義了一個(gè)BootstrapHelper的普通類(lèi)型去繼承HtmlHelper，由于考慮到需要使用lamada的方式去定義組件，博主又增加了一個(gè)BootstrapHelper的泛型類(lèi)型。于是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>
 /// 使用指定的視圖上下文和視圖數(shù)據(jù)容器來(lái)初始化 BootstrapHelper 類(lèi)的新實(shí)例。
 /// </summary>
 /// <param name="viewContext">視圖上下文</param>
 /// <param name="viewDataContainer">視圖數(shù)據(jù)容器</param>
 public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer)
 : base(viewContext, viewDataContainer)
 { }

 /// <summary>
 /// 使用指定的視圖上下文、視圖數(shù)據(jù)容器和路由集合來(lái)初始化 BootstrapHelper 類(lèi)的新實(shí)例。
 /// </summary>
 /// <param name="viewContext">視圖上下文</param>
 /// <param name="viewDataContainer">視圖數(shù)據(jù)容器</param>
 /// <param name="routeCollection">路由集合</param>
 public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection)
 : base(viewContext, viewDataContainer, routeCollection)
 { }
 }

 /// <summary>
 /// 表示支持在強(qiáng)類(lèi)型視圖中呈現(xiàn) Bootstrap 控件。
 /// </summary>
 /// <typeparam name="TModel"></typeparam>
 public class BootstrapHelper<TModel> : BootstrapHelper
 {
 /// <summary>
 /// 使用指定的視圖上下文和視圖數(shù)據(jù)容器來(lái)初始化 <![CDATA[Net.Web.Mvc.BootstrapHelper<TModel>]]> 類(lèi)的新實(shí)例。
 /// </summary>
 /// <param name="viewContext">視圖上下文。</param>
 /// <param name="viewDataContainer">視圖數(shù)據(jù)容器。</param>
 public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer)
 : base(viewContext, viewDataContainer)
 { }

 /// <summary>
 /// 使用指定的視圖上下文、視圖數(shù)據(jù)容器和路由集合來(lái)初始化 <![CDATA[Net.Web.Mvc.BootstrapHelper<TModel>]]> 類(lèi)的新實(shí)例。
 /// </summary>
 /// <param name="viewContext">視圖上下文。</param>
 /// <param name="viewDataContainer">視圖數(shù)據(jù)容器。</param>
 /// <param name="routeCollection">路由集合。</param>
 public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection)
 : base(viewContext, viewDataContainer, routeCollection)
 { }
 }
}

我們的Bootstrap對(duì)象也定義成泛型對(duì)象

public abstract class BootstrapWebViewPage<TModel> : System.Web.Mvc.WebViewPage<TModel>
 {
 //在cshtml頁(yè)面里面使用的變量
 public BootstrapHelper<TModel> Bootstrap { get; set; }

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

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

這樣做的意義就是為了在cshtml頁(yè)面里面可以使用@Bootstrap.TextBoxFor(x => x.Name)這種寫(xiě)法。這個(gè)后面介紹，這里先埋個(gè)伏筆。

二、TextBoxExtensions

TextBoxExtensions.cs的實(shí)現(xiàn)代碼如下：

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文本框的所有擴(kuò)展
 /// </summary>
 public static class TextBoxExtensions
 {
 /// <summary>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本框標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="name">表單元素的name屬性值</param>
 /// <returns>返回input type='text'標(biāo)簽</returns>
 public static MvcHtmlString TextBox(this BootstrapHelper html, string name)
 {
 return InputExtensions.Helper(html, InputType.Text, null, name, null, false, null);
 }

 /// <summary>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本框標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="id">id</param>
 /// <param name="name">表單元素的name屬性值</param>
 /// <returns>返回input type='text'標(biāo)簽</returns>
 public static MvcHtmlString TextBox(this BootstrapHelper html, string id, string name)
 {
 return InputExtensions.Helper(html, InputType.Text, id, name, null, false, null);
 }

 /// <summary>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本框標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="name">單元素的name屬性值</param>
 /// <param name="value">表單元素的value值</param>
 /// <returns>返回input type='text'標(biāo)簽</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>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本框標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="name">單元素的name屬性值</param>
 /// <param name="value">表單元素的value值</param>
 /// <param name="placeholder">bootstrap自帶的文本框的提示輸入值</param>
 /// <returns>返回input type='text'標(biāo)簽</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>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本框標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="name">單元素的name屬性值</param>
 /// <param name="value">表單元素的value值</param>
 /// <param name="htmlAttributes">額外屬性</param>
 /// <returns>返回input type='text'標(biāo)簽</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>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本框標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="name">表單元素的name屬性值</param>
 /// <param name="value">表單元素的value值</param>
 /// <param name="placeholder">bootstrap自帶的文本框的提示輸入值</param>
 /// <param name="htmlAttributes">額外屬性</param>
 /// <returns>返回input type='text'標(biāo)簽</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擴(kuò)展方法集合
 /// </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)
 {
 //定義標(biāo)簽的名稱
 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的類(lèi)型
 tag.MergeAttribute("type", HtmlHelper.GetInputTypeString(inputType));
 //添加默認(rèn)樣式
 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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</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標(biāo)簽的樣式</param>
 /// <param name="isCheck">是否選中</param>
 /// <param name="isDisabled">是否禁用</param>
 /// <param name="oAttributes">額外標(biāo)簽</param>
 /// <returns>返回radio標(biāo)簽</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)
 {
 //定義標(biāo)簽的名稱
 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());
 }

 //通過(guò)表達(dá)式取當(dāng)前的屬性值
 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、考慮到項(xiàng)目中所有基于bootstrap的TextBox文本框都有一個(gè)class="form-control"樣式，所以在封裝文本框的時(shí)候直接將它放到了標(biāo)簽里面。當(dāng)然，如果你的項(xiàng)目里面不需要這么用，或者自定義了文本框樣式，這里也可以寫(xiě)入自己的樣式，這樣就不用每次聲明文本框的時(shí)候都去添加這些樣式了。

2、TextBoxFor()方法里面融合了使用lamada的方式生成文本框，上面聲明的泛型BootstrapHelper類(lèi)型對(duì)象就派上用場(chǎng)了，通過(guò)反射和泛型去讀取lamada里面的屬性名和屬性值，這里只定義了一個(gè)方法，如果還需要其他重載，可以自己新增方法。

3、在使用的時(shí)候又遇到一個(gè)問(wèn)題，由于BootstrapHelper是繼承至HtmlHelper類(lèi)型，那么MVC里面原來(lái)封裝的一些HtmlHelper的擴(kuò)展方法對(duì)于我們的Bootstrap對(duì)象也是可以直接調(diào)用的，所以很多重載可能出現(xiàn)重復(fù)和找不到對(duì)應(yīng)的重載，比如：

這樣的話很容易會(huì)出現(xiàn)如下錯(cuò)誤：

那么，既然問(wèn)題出現(xiàn)了，我們就要想辦法解決。博主想到的一種解決方案是：將view的web.config里面的Html對(duì)象所在的命名空間注釋掉。比如：

這樣的話就能夠解決我們上面的問(wèn)題，運(yùn)行效果：

將上面的命名空間注釋掉之后，在cshtml頁(yè)面里面我們將不能再使用Html變量的相關(guān)擴(kuò)展方法，如果你自己的Helper夠用，不用原生的擴(kuò)展方法問(wèn)題應(yīng)該也不大。

三、RadioExtensions和CheckboxExtensions

關(guān)于bootstrap里面的radio和checkbox組件，博主參考了下http://v3.bootcss.com/css/里面的寫(xiě)法，進(jìn)行了如下封裝：

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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="name">name屬性</param>
 /// <returns>返回radio標(biāo)簽</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string name)
 {
 return Radio(html, null, name, null, null, null, false, false, null);
 }

 /// <summary>
 /// 返回表單radio標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="id">id</param>
 /// <param name="name">name屬性</param>
 /// <returns>返回radio標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="id">id</param>
 /// <param name="name">name屬性</param>
 /// <param name="isCheck">是否選中</param>
 /// <returns>返回radio標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="id">id</param>
 /// <param name="name">name屬性</param>
 /// <param name="value">input的value值</param>
 /// <returns>返回radio標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="id">id</param>
 /// <param name="name">name屬性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">顯示文本</param>
 /// <returns>返回radio標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</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標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</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標(biāo)簽的樣式</param>
 /// <returns>返回radio標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</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標(biāo)簽的樣式</param>
 /// <param name="isCheck">是否選中</param>
 /// <returns>返回radio標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</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標(biāo)簽的樣式</param>
 /// <param name="isCheck">是否選中</param>
 /// <param name="isDisabled">是否禁用</param>
 /// <returns>返回radio標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</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標(biāo)簽的樣式</param>
 /// <param name="isCheck">是否選中</param>
 /// <param name="isDisabled">是否禁用</param>
 /// <param name="oAttributes">額外標(biāo)簽</param>
 /// <returns>返回radio標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="name">name屬性</param>
 /// <returns>返回CheckBox標(biāo)簽</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string name)
 {
 return CheckBox(html, null, name, null, null, null, false, false, null);
 }

 /// <summary>
 /// 返回表單CheckBox標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="id">id</param>
 /// <param name="name">name屬性</param>
 /// <returns>返回CheckBox標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="id">id</param>
 /// <param name="name">name屬性</param>
 /// <param name="isCheck">是否選中</param>
 /// <returns>返回CheckBox標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="id">id</param>
 /// <param name="name">name屬性</param>
 /// <param name="value">input的value值</param>
 /// <returns>返回CheckBox標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</param>
 /// <param name="id">id</param>
 /// <param name="name">name屬性</param>
 /// <param name="value">input的value值</param>
 /// <param name="text">顯示文本</param>
 /// <returns>返回CheckBox標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</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標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</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標(biāo)簽的樣式</param>
 /// <returns>返回CheckBox標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</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標(biāo)簽的樣式</param>
 /// <param name="isCheck">是否選中</param>
 /// <returns>返回CheckBox標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</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標(biāo)簽的樣式</param>
 /// <param name="isCheck">是否選中</param>
 /// <param name="isDisabled">是否禁用</param>
 /// <returns>返回CheckBox標(biāo)簽</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標(biāo)簽
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例</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標(biāo)簽的樣式</param>
 /// <param name="isCheck">是否選中</param>
 /// <param name="isDisabled">是否禁用</param>
 /// <param name="oAttributes">額外標(biāo)簽</param>
 /// <returns>返回CheckBox標(biāo)簽</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放到了一起，調(diào)用的時(shí)候傳入對(duì)應(yīng)的label文本即可，使用如下：

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

得到的結(jié)果：

四、ButtonExtensions

關(guān)于bootstrap的按鈕樣式，bootstrap官網(wǎng)上面也有詳細(xì)的說(shuō)明。比如常見(jiàn)的按鈕類(lèi)型由普通按鈕、提交按鈕、重置按鈕；常見(jiàn)的按鈕樣式主要有如下幾種：

另外，按鈕的大小也有分類(lèi)：

基于此，我們將bootstrap類(lèi)型的按鈕做了如下封裝

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>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法擴(kuò)展的 HTML 幫助器實(shí)例。</param>
 /// <param name="text">顯示在按鈕上的文本。</param>
 /// <param name="icon">圖標(biāo)的css類(lèi)。</param>
 /// <returns>一個(gè) Bootstrap Button元素。</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon)
 {
 return Button(html, text, icon, null);
 }

 /// <summary>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法擴(kuò)展的 HTML 幫助器實(shí)例。</param>
 /// <param name="text">顯示在按鈕上的文本。</param>
 /// <param name="icon">圖標(biāo)的css類(lèi)。</param>
 /// <param name="type">按鈕類(lèi)型。</param>
 /// <returns>一個(gè) Bootstrap Button元素。</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type)
 {
 return Button(html, text, icon, type, null);
 }

 /// <summary>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法擴(kuò)展的 HTML 幫助器實(shí)例。</param>
 /// <param name="text">顯示在按鈕上的文本。</param>
 /// <param name="icon">圖標(biāo)的css類(lèi)。</param>
 /// <param name="htmlAttributes">一個(gè)對(duì)象，其中包含要為該元素設(shè)置的 HTML 特性。</param>
 /// <returns>一個(gè) 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>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法擴(kuò)展的 HTML 幫助器實(shí)例。</param>
 /// <param name="text">顯示在按鈕上的文本。</param>
 /// <param name="icon">圖標(biāo)的css類(lèi)。</param>
 /// <param name="type">按鈕類(lèi)型。</param>
 /// <param name="htmlAttributes">一個(gè)對(duì)象，其中包含要為該元素設(shè)置的 HTML 特性。</param>
 /// <returns>一個(gè) 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>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法擴(kuò)展的 HTML 幫助器實(shí)例。</param>
 /// <param name="text">顯示在按鈕上的文本。</param>
 /// <param name="icon">圖標(biāo)的css類(lèi)。</param>
 /// <param name="cssClass">按鈕樣式。</param>
 /// <returns>一個(gè) Bootstrap Button元素。</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonClass cssClass)
 {
 return Button(html, text, icon, cssClass, null);
 }

 /// <summary>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法擴(kuò)展的 HTML 幫助器實(shí)例。</param>
 /// <param name="text">顯示在按鈕上的文本。</param>
 /// <param name="icon">圖標(biāo)的css類(lèi)。</param>
 /// <param name="cssClass">按鈕樣式。</param>
 /// <param name="htmlAttributes">一個(gè)對(duì)象，其中包含要為該元素設(shè)置的 HTML 特性。</param>
 /// <returns>一個(gè) 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>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">此方法擴(kuò)展的 HTML 幫助器實(shí)例。</param>
 /// <param name="text">顯示在按鈕上的文本。</param>
 /// <param name="icon">圖標(biāo)的css類(lèi)。</param>
 /// <param name="type">按鈕類(lèi)型。</param>
 /// <param name="cssClass">按鈕樣式。</param>
 /// <returns>一個(gè) 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>
 /// 通過(guò)使用指定的 HTML 幫助器和窗體字段的名稱，返回文本 Bootstrap Button 元素。
 /// </summary>
 /// <param name="html">擴(kuò)展方法實(shí)例。</param>
 /// <param name="text">顯示在按鈕上的文本。</param>
 /// <param name="icon">圖標(biāo)的css類(lèi)。</param>
 /// <param name="type">按鈕類(lèi)型。</param>
 /// <param name="cssClass">按鈕樣式。</param>
 /// <param name="htmlAttributes">一個(gè)對(duì)象，其中包含要為該元素設(shè)置的 HTML 特性。</param>
 /// <returns>一個(gè) 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按鈕類(lèi)型
 /// </summary>
 public enum ButtonType
 {
 /// <summary>
 /// 普通按鈕
 /// </summary>
 Button,
 /// <summary>
 /// 提交按鈕
 /// </summary>
 Submit,
 /// <summary>
 /// 重置按鈕
 /// </summary>
 Reset
 }

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

1、將按鈕的類(lèi)型、樣式、大小定義成了枚舉類(lèi)型，這樣使用起來(lái)更加方便；

2、生成按鈕必須的參數(shù)有text和icon，保證按鈕的基本構(gòu)成。

3、使用

<div>
@Bootstrap.Button("測(cè)試按鈕", "glyphicon-ok",ButtonClass.Primary)
@Bootstrap.Button("提交", "glyphicon-ok", ButtonType.Submit, ButtonClass.Success, null, ButtonSize.lg)
 </div>

五、總結(jié)

以上封裝了幾個(gè)常用的表單組件，還剩下幾個(gè)留在下篇吧。上文只是一個(gè)初始版本，很多地方可能并不完善，如果有什么不當(dāng)或者可以優(yōu)化的地方，還望斧正。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論

商都县| 全州县| 凤翔县| 福海县| 婺源县| 株洲县| 甘肃省| 桐城市| 黎川县| 海盐县| 五常市| 建昌县| 平遥县| 泸溪县| 澄江县| 绵阳市| 黄冈市| 剑河县| 潜江市| 平潭县| 栾城县| 金坛市| 古浪县| 藁城市| 菏泽市| 永定县| 大兴区| 高州市| 曲阜市| 民勤县| 夹江县| 红桥区| 灵璧县| 沅陵县| 汾西县| 屏山县| 宣武区| 昭平县| 肇东市| 新宁县| 兴义市|