Preface: The previous article introduces some basic knowledge about encapsulating BootstrapHelper, and this article continues to be improved. Referring to the HtmlHelper method, this blogger will first encapsulate some commonly used form components. There has been too much discussion in the previous comments about what the significance of BootstrapHelper encapsulation is, and I don’t want to worry too much about it. In short, everything has gains and losses, it depends on how you choose. If you are interested, you can take a look. If you are not interested, you can just say a "joke" by the blogger.
BootstrapHelper series article catalog
C# Advanced Series - Encapsulate its own HtmlHelper component step by step: BootstrapHelper
C# Advanced Series - Encapsulate its own HtmlHelper component step by step: BootstrapHelper (II)
C# Advanced Series - Encapsulate its own HtmlHelper component step by step: BootstrapHelper (3: with source code)
1. Add a new generic BootstrapHelper
In the previous article, the blogger only defined a BootstrapHelper ordinary type to inherit HtmlHelper. Since considering the need to use lamada to define components, the blogger added a BootstrapHelper generic type. So BootstrapHelper became like this.
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> /// Initialize a new instance of the BootstrapHelper class using the specified view context and view data container. /// </summary> /// <param name="viewContext">ViewContainer</param> /// <param name="viewDataContainer">ViewDataContainer</param> public BootstrapHelper(ViewContext viewContext, IViewDataContainer) : base(viewContext, viewDataContainer) { } /// <summary> /// Initialize a new instance of the BootstrapHelper class with the specified view context, viewdataContainer, and route collection. /// </summary> /// <param name="viewContext">View context</param> /// <param name="viewDataContainer">View data container</param> /// <param name="routeCollection">Route collection</param> public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection) : base(viewContext, viewDataContainer, routeCollection) { } } /// <summary> /// Indicates that Bootstrap controls are supported in strongly typed views. /// </summary> /// <typeparam name="TModel"></typeparam> public class BootstrapHelper<TModel> : BootstrapHelper { /// <summary> /// Initialize a new instance of the <![CDATA[Net.Web.Mvc.BootstrapHelper<TModel>]]> class using the specified view context and view data container. /// </summary> /// <param name="viewContext">View context. </param> /// <param name="viewDataContainer">View Data Container. </param> public BootstrapHelper(ViewContext viewContext, IViewDataContainer) : base(viewContext, viewDataContainer) { } /// <summary> /// Initialize a new instance of the <![CDATA[Net.Web.Mvc.BootstrapHelper<TModel>]]> class using the specified view context, view data container, and route collection. /// </summary> /// <param name="viewContext">View context. </param> /// <param name="viewDataContainer">View Data Container. </param> /// <param name="routeCollection">Route collection. </param> public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection) : base(viewContext, viewDataContainer, routeCollection) { } }}Our Bootstrap object is also defined as a generic object
public abstract class BootstrapWebViewPage<TModel> : System.Web.Mvc.WebViewPage<TModel> { //Variables used in cshtml page public BootstrapHelper<TModel> Bootstrap { get; set; } /// <summary> /// Initialize Bootstrap object/// </summary> public override void InitHelpers() { base.InitHelpers(); Bootstrap = new BootstrapHelper<TModel>(ViewContext, this); } public override void Execute() { //throw new NotImplementedException(); } }The meaning of this is to use @Bootstrap.TextBoxFor(x => x.Name) in the cshtml page. This is introduced later, let’s lay a foreshadowing here.
2. TextBoxExtensions
The implementation code of TextBoxExtensions.cs is as follows:
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 All extensions of TextBox TextBox TextBoxExtensions{ /// <summary> /// by using the specified HTML The name of the helper and form field, return the text box tag /// </summary> /// <param name="html">Extension method instance</param> /// <param name="name">The name attribute value of the form element</param> /// <returns>Return input type='text' tag</returns> public static MvcHtmlString TextBox(this BootstrapHelper html, string name) { return InputExtensions.Helper(html, InputType.Text, null, name, null, false, null); } /// <summary> /// By using the specified HTML The name of the helper and form field, return the text box label /// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">The name attribute value of the form element</param> /// <returns>Return input type='text' tag</returns> public static MvcHtmlString TextBox(this BootstrapHelper html, string id, string name) { return InputExtensions.Helper(html, InputType.Text, id, name, null, false, null); } /// <summary> /// Returns the text box tag by using the specified HTML helper and form field name /// </summary> /// <param name="html">Extension method instance</param> /// <param name="name">Single element name attribute value</param> /// <param name="value">Form element value</param> /// <returns>Returns input type='text' tag</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> /// Returns the text box tag by using the specified HTML helper and form field name /// </summary> /// <param name="html">Extension method instance</param> /// <param name="name">Single element name attribute value</param> /// <param name="value">Form element value</param> /// <param name="placeholder">Bootstrap's prompt input value</param> /// <returns>Return input type='text' tag</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> /// Returns the text box tag by using the specified HTML helper and form field name /// </summary> /// <param name="html">Extended method instance</param> /// <param name="name">Single element name attribute value</param> /// <param name="value">Form element value</param> /// <param name="htmlAttributes">Extra attribute</param> /// <returns>Returns input type='text' tag</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> /// By using the specified HTML The name of the helper and form field, return the text box label /// </summary> /// <param name="html">Extension method instance</param> /// <param name="name">The name attribute value of the form element</param> /// <param name="value">The value of the form element</param> /// <param name="placeholder">The prompt input value of the text box that comes with the bootstrap</param> /// <param name="htmlAttributes">Extra attributes</param> /// <returns>Return input type='text' tag</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 form element Input extension method collection/// </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) { //Define the name of the tag TagBuilder tag = new TagBuilder("input"); if (htmlAttributes == null) { htmlAttributes = new Dictionary<string, object>(); } //Add name if (!string.IsNullOrEmpty(name)) { htmlAttributes.Add("name", name); } //Add id if (!string.IsNullOrEmpty(id)) { htmlAttributes.Add("id", id); } //Add value if (value != null) { htmlAttributes.Add("value", value.ToString()); } //Add input type tag.MergeAttribute("type", HtmlHelper.GetInputTypeString(inputType)); //Add default style 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> /// Return the form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name="labelClass">Style of label tag</param> /// <param name="isCheck">Whether it is selected</param> /// <param name="isDisabled">Disable</param> /// <param name="oAttributes">Extra tag</param> /// <returns>Return radio tag</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) { //Define the name of the tag 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()); } //Get the current property value through an expression 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. Considering that all bootstrap-based TextBox text boxes in the project have a class="form-control" style, so when encapsulating the text box, it is directly placed in the label. Of course, if your project does not need to use this, or you have customized the text box style, you can also write your own style here, so you don’t need to add these styles every time you declare the text box.
2. The TextBoxFor() method combines the use of lamada to generate text boxes. The generic BootstrapHelper type object declared above comes in handy. The attribute name and attribute value in lamada are read through reflection and generics. Only one method is defined here. If other overloads are required, you can add new methods yourself.
3. Another problem was encountered when using it. Since BootstrapHelper inherits to the HtmlHelper type, some of the HtmlHelper extension methods originally encapsulated in MVC can also be called directly for our Bootstrap object. Therefore, many overloads may be duplicated and the corresponding overload cannot be found, such as:
In this way, the following errors are easily caused:
So, since the problem arises, we need to find a way to solve it. One solution that the blogger thought of is: comment out the namespace where the Html object in the view's web.config. for example:
In this way, we can solve the above problems and run the following effect:
After commenting out the above namespace, we will no longer be able to use the relevant extension methods of the Html variable in the cshtml page. If your own helper is enough, it should not be a big problem without the native extension methods.
3. RadioExtensions and CheckboxExtensions
Regarding the radio and checkbox components in bootstrap, the blogger referred to the writing method in http://v3.bootcss.com/css/ and encapsulated it as follows:
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> /// Return form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="name">name attribute</param> /// <returns>Return radio tag</returns> public static MvcHtmlString Radio(this BootstrapHelper html, string name) { return Radio(html, null, name, null, null, null, null, false, false, null); } /// <summary> /// Return the form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <returns>Return the radio tag</returns> public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name) { return Radio(html, id, name, null, null, null, null, false, false, null); } /// <summary> /// Return the form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="isCheck">Whether it is selected</param> /// <returns>Return the radio tag</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> /// Return the form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <returns>Return the radio tag</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> /// Return form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <returns>Return radio tag</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> /// Return form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name="isCheck">Whether it is selected</param> /// <returns>Return radio tag</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> /// Return form radio tag/// </summary> /// <param name="html">Extension method example</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name="labelClass">Label tag style</param> /// <returns>Return radio tag</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> /// Return form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name="text"> name="labelClass">Style of label tag</param> /// <param name="isCheck">Whether to select</param> /// <returns>Return radio tag</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> /// Return form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name="labelClass">Style of label</param> /// <param name="isCheck">Is it selected</param> /// <param name="isDisabled">Disable</param> /// <returns>Return radio tag</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> /// Return to form radio tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">display text</param> /// <param name="labelClass">style of label</param> /// <param name="isCheck">whether</param> /// <param name="isDisabled">disable</param> /// <param name="oAttributes">extra tag</param> /// <returns>return radio tag</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> /// Returns the form CheckBox tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="name">name attribute</param> /// <returns>Returns CheckBox tag</returns> public static MvcHtmlString CheckBox(this BootstrapHelper html, string name) { return CheckBox(html, null, name, null, null, null, false, false, null); } /// <summary> /// Return the form CheckBox tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <returns>Return the CheckBox tag</returns> public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name) { return CheckBox(html, id, name, null, null, null, false, false, null); } /// <summary> /// Return the form CheckBox tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="isCheck">Whether it is selected</param> /// <returns>Return the CheckBox tag</returns> public static MvcHtmlString CheckBox(this BootstrapHelper html, string id, string name, bool isCheck) { return CheckBox(html, id, name, null, null, isCheck, false, null); } /// <summary> /// Return form CheckBox tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <returns>Return CheckBox tag</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> /// Return form CheckBox tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> //// <param name="value">input value</param> /// <param name="text">Show text</param> /// <returns>Return CheckBox tag</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> /// Return form CheckBox tag/// </summary> /// <param name="html">Extension method example</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name="isCheck">Whether it is selected</param> /// <returns>Returns CheckBox tag</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> /// Return form CheckBox tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name="text"> name="labelClass">Label tag style</param> /// <returns>Return CheckBox tag</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> /// Return form CheckBox tag/// </summary> /// <param name="html">Extension method example</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name="labelClass">Style of label</param> /// <param name="isCheck">Whether to check</param> /// <returns>Return CheckBox tag</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> /// Return form CheckBox tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name="labelClass">Style of label tag</param> /// <param name="isCheck">Is it selected</param> /// <param name="isDisabled">Disable</param> /// <returns>Return CheckBox tag</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> /// Return to form CheckBox tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="name">name attribute</param> /// <param name="value">input value</param> /// <param name="text">Show text</param> /// <param name="labelClass">Style of label</param> /// <param name="labelClass">Style of label</param> /// <param name="isCheck">Is it selected</param> /// <param name="isDisabled">Disable</param> /// <param name="oAttributes">Extra tags</param> /// <returns>Return CheckBox tag</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); } }}The blogger puts label and checkbox together, and passes the corresponding label text when calling, and uses it as follows:
<div> @Bootstrap.Radio("aa", "bb", "cc", "dd", null, true, false, null) </div> <div> @Bootstrap.Radio("fd", "cc", "cc", "CCC", "France", "radio-inline", true, false, null) @Bootstrap.Radio("dfer", "cc", "cc", "UK", "radio-inline", true, false, null) </div> <div> @Bootstrap.CheckBox("fd", "cc2", "cc", "France", "checkbox-inline", true, false, null) @Bootstrap.CheckBox("dfer", "cc2", "cc", "UK", "checkbox-inline", true, false, null) @Bootstrap.CheckBox("erer", "cc2", "cc", "Italian", "checkbox-inline", true, false, null) </div>Results obtained:
4. ButtonExtensions
Regarding the button style of bootstrap, there are detailed instructions on the official website of bootstrap. For example, common button types include ordinary buttons, submit buttons, and reset buttons; common button styles are mainly as follows:
In addition, the size of the button is also classified:
Based on this, we have encapsulated the bootstrap type button as follows
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> /// Return the text Bootstrap Button element by using the specified HTML helper and form field name. /// </summary> /// <param name="html">The HTML helper instance extended by this method. </param> /// <param name="text">Text displayed on the button. </param> /// <param name="icon">icon css class. </param> /// <returns>A Bootstrap Button element. </returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon) { return Button(html, text, icon, null); } /// <summary> /// Return the text Bootstrap Button element by using the specified HTML helper and form field name. /// </summary> /// <param name="html">The HTML helper instance extended by this method. </param> /// <param name="text">Text displayed on the button. </param> /// <param name="icon">icon css class. </param> /// <param name="type">button type. </param> /// <returns>A Bootstrap Button element. </returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type) { return Button(html, text, icon, type, null); } /// <summary> /// Return the text Bootstrap Button element by using the specified HTML helper and form field name. /// </summary> /// <param name="html">The HTML helper instance extended by this method. </param> /// <param name="text">Text displayed on the button. </param> /// <param name="icon">icon css class. </param> /// <param name="htmlAttributes"> An object containing the HTML attributes to set for the element. </param> /// <returns>A Bootstrap Button element. </returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, object htmlAttributes) { return Button(html, text, icon, ButtonType.Button, htmlAttributes); } /// <summary> /// Return the text Bootstrap Button element by using the specified HTML helper and form field name. /// </summary> /// <param name="html">The HTML helper instance extended by this method. </param> /// <param name="text">Text displayed on the button. </param> /// <param name="icon">icon css class. </param> /// <param name="type">button type. </param> /// <param name="htmlAttributes"> An object containing the HTML attributes to set for the element. </param> /// <returns>A Bootstrap Button element. </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> /// Return the text Bootstrap Button element by using the specified HTML helper and form field name. /// </summary> /// <param name="html">The HTML helper instance extended by this method. </param> /// <param name="text">Text displayed on the button. </param> /// <param name="icon">icon css class. </param> /// <param name="cssClass">Button style. </param> /// <returns>A Bootstrap Button element. </returns> public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonClass cssClass) { return Button(html, text, icon, cssClass, null); } /// <summary> /// Return the text Bootstrap Button element by using the specified HTML helper and form field name. /// </summary> /// <param name="html">The HTML helper instance extended by this method. </param> /// <param name="text">Text displayed on the button. </param> /// <param name="icon">icon css class. </param> /// <param name="cssClass">Button style. </param> /// <param name="htmlAttributes"> An object containing the HTML attributes to set for the element. </param> /// <returns>A Bootstrap Button element. </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>五、总结
以上封装了几个常用的表单组件，还剩下几个留在下篇吧。上文只是一个初始版本，很多地方可能并不完善，如果有什么不当或者可以优化的地方，还望斧正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。