Passo per passo: imballaggio del proprio componente HtmlHelper BootstrapHelper (due)

Introduzione: nel capitolo precedente sono stati introdotti alcuni concetti di base per l'encapsulation di BootstrapHelper, in questo articolo proseguiremo per perfezionare. Seguendo il metodo di HtmlHelper, il blogger inizierà a encapsulare alcuni componenti di formulario comuni. Riguardo al significato dell'encapsulation di BootstrapHelper, è stato discusso troppo nel commento dell'articolo precedente, non voglio entrare in dettagli qui. In sintesi: ogni cosa ha i suoi pro e contro, dipende da come li valuti. Chi è interessato può dare un'occhiata, chi non è interessato può considerare che il blogger abbia fatto una 'barzelletta'.

Indice degli articoli della serie BootstrapHelper

Serie avanzata di C#: passo dopo passo per封装自己的HtmlHelper组件：BootstrapHelper

Serie avanzata di C#: passo dopo passo per封装自己的HtmlHelper组件：BootstrapHelper（due）

Serie avanzata di C#: passo dopo passo per封装自己的HtmlHelper组件：BootstrapHelper（tre：con codice sorgente）

1. Aggiunta di BootstrapHelper generico

Nell'articolo precedente, l'autore ha definito un tipo normale di BootstrapHelper per ereditare HtmlHelper, considerando la necessità di definire componenti utilizzando il modo lambda, l'autore ha aggiunto anche un tipo generico di BootstrapHelper. Pertanto, BootstrapHelper è diventato così.

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>
 /// Inizializza una nuova istanza della classe BootstrapHelper utilizzando il contesto visivo specificato e il contenitore dei dati di visualizzazione.
 /// </summary>
 /// <param name="viewContext">Contesto visivo</param>
 /// <param name="viewDataContainer">Contenitore dei dati di visualizzazione</param>
 public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer)
 : base(viewContext, viewDataContainer)
 { }
 /// <summary>
 /// Inizializza una nuova istanza della classe BootstrapHelper utilizzando il contesto visivo specificato, il contenitore dei dati di visualizzazione e l'insieme di rotte.
 /// </summary>
 /// <param name="viewContext">Contesto visivo</param>
 /// <param name="viewDataContainer">Contenitore dei dati di visualizzazione</param>
 /// <param name="routeCollection">Insieme di rotte</param>
 public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer, RouteCollection routeCollection)
 : base(viewContext, viewDataContainer, routeCollection)
 { }
 }
 /// <summary>
 /// Rappresenta il supporto per la presentazione di controlli Bootstrap in una vista a tipo forte.
 /// </summary>
 /// <typeparam name="TModel"></typeparam>
 public class BootstrapHelper<TModel> : BootstrapHelper
 {
 /// <summary>
 /// Inizializza una nuova istanza della classe <![CDATA[Net.Web.Mvc.BootstrapHelper<TModel>]]> utilizzando il contesto visivo specificato e il contenitore dei dati di visualizzazione.
 /// </summary>
 /// <param name="viewContext">Contesto visivo.</param>
 /// <param name="viewDataContainer">视图数据容器。</param>
 public BootstrapHelper(ViewContext viewContext, IViewDataContainer viewDataContainer)
 : base(viewContext, viewDataContainer)
 { }
 /// <summary>
 /// Inizializza una nuova istanza della classe <![CDATA[Net.Web.Mvc.BootstrapHelper<TModel>]]> utilizzando il contesto visivo specificato, il contenitore dei dati di visualizzazione e l'insieme di rotte.
 /// </summary>
 /// <param name="viewContext">Contesto visivo.</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>
 Restituisce l'etichetta del campo di testo utilizzando l'aiutante HTML specificato e il nome del campo del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 /\<param name="name">Il valore dell'attributo name dell'elemento del modulo</param>
 /// <returns>Restituisce l'etichetta 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>
 Restituisce l'etichetta del campo di testo utilizzando l'aiutante HTML specificato e il nome del campo del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 /\<param name="name">Il valore dell'attributo name dell'elemento del modulo</param>
 /// <returns>Restituisce l'etichetta 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>
 Restituisce l'etichetta del campo di testo utilizzando l'aiutante HTML specificato e il nome del campo del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 /\<param name="name">Il valore dell'attributo name dell'elemento singolo</param>
 /\<param name="value">Il valore dell'elemento del modulo</param>
 /// <returns>Restituisce l'etichetta 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>
 Restituisce l'etichetta del campo di testo utilizzando l'aiutante HTML specificato e il nome del campo del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 /\<param name="name">Il valore dell'attributo name dell'elemento singolo</param>
 /\<param name="value">Il valore dell'elemento del modulo</param>
 /// <param name="placeholder">Valore di input di suggerimento del campo di testo di bootstrap</param>
 /// <returns>Restituisce l'etichetta 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>
 Restituisce l'etichetta del campo di testo utilizzando l'aiutante HTML specificato e il nome del campo del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 /\<param name="name">Il valore dell'attributo name dell'elemento singolo</param>
 /\<param name="value">Il valore dell'elemento del modulo</param>
 /// <param name="htmlAttributes">Proprietà aggiuntive</param>
 /// <returns>Restituisce l'etichetta 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>
 Restituisce l'etichetta del campo di testo utilizzando l'aiutante HTML specificato e il nome del campo del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 /\<param name="name">Il valore dell'attributo name dell'elemento del modulo</param>
 /\<param name="value">Il valore dell'elemento del modulo</param>
 /// <param name="placeholder">Valore di input di suggerimento del campo di testo di bootstrap</param>
 /// <param name="htmlAttributes">Proprietà aggiuntive</param>
 /// <returns>Restituisce l'etichetta 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;
 oggetto 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>
 /// Collezione di metodi di estensione per gli elementi di input del modulo Bootstrap
 /// </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)
 {
 // definire il nome del tag
 TagBuilder tag = new TagBuilder("input");
 if (htmlAttributes == null)
 {
 htmlAttributes = new Dictionary<string, object>();
 }
 // aggiungere name
 if (!string.IsNullOrEmpty(name))
 {
 htmlAttributes.Add("name", name);
 }
 // aggiungere id
 if (!string.IsNullOrEmpty(id))
 {
 htmlAttributes.Add("id", id);
 }
 // aggiungere value
 if (value != null)
 {
 htmlAttributes.Add("value", value.ToString());
 }
 // aggiungere il tipo di input
 tag.MergeAttribute("type", HtmlHelper.GetInputTypeString(inputType));
 // aggiungere lo stile predefinito
 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>
 /// Restituisce il tag del radio bottone del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <param name="labelClass">Stile dell'etichetta label</param>
 // <param name="isCheck">Se selezionato</param>
 // <param name="isDisabled">Se disabilitato</param>
 // <param name="oAttributes">Etichetta aggiuntiva</param>
 /// <returns>Restituisce il tag 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)
 {
 // definire il nome del 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());
 }
 //Through the expression to get the current property value
 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、Tenendo conto che tutti i TextBox basati su bootstrap nel progetto hanno uno stile class="form-control", quando si impacchettano i campi di testo, li si mette direttamente all'interno del tag. Naturalmente, se nel tuo progetto non è necessario farlo così, o hai definito uno stile di campo di testo personalizzato, puoi scrivere il tuo stile qui, in modo che non sia necessario aggiungere questi stili ogni volta che si dichiara un campo di testo.

2、Il metodo TextBoxFor() integra l'uso di lambda per generare il campo di testo, e l'oggetto BootstrapHelper di tipo generico dichiarato sopra può essere utilizzato, leggendo il nome e il valore delle proprietà all'interno di lambda tramite reflection e generici. Qui è definito solo un metodo, se sono necessarie altre sovraccariche, è possibile aggiungerne di nuove.

3、Quando si utilizza, si incontra un altro problema, poiché BootstrapHelper eredita da HtmlHelper, quindi alcune estensioni di HtmlHelper封装在MVC possono essere utilizzate direttamente per l'oggetto Bootstrap, il che può causare sovrapposizioni e impossibilità di trovare il sovraccarico corretto, ad esempio:

Questo può portare facilmente a errori come quelli seguenti:

Quindi, poiché è emerso un problema, dobbiamo cercare di risolverlo. Una soluzione che l'autore ha pensato è: commentare lo spazio dei nomi dell'oggetto Html presente nel file web.config della view. Ad esempio:

In questo modo, possiamo risolvere il problema che abbiamo affrontato in precedenza, effetto del runtime:

Dopo aver rimossi i commenti dello spazio dei nomi superiori, non potremo più utilizzare i metodi di estensione relativi a Html nelle pagine cshtml. Se il tuo Helper è sufficiente, non dovrebbe essere un problema evitare l'uso delle estensioni originali.

Terzo, RadioExtensions e CheckboxExtensions

Riguardo ai componenti radio e checkbox di bootstrap, l'autore ha consultato il seguente indirizzo http://v3.bootcss.com/css/ per l'elaborazione e ha effettuato la seguente encapsulazione:

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>
 /// Restituisce il tag del radio bottone del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="name">Proprietà name</param>
 /// <returns>Restituisce il tag radio</returns>
 public static MvcHtmlString Radio(this BootstrapHelper html, string name)
 {
 return Radio(html, null, name, null, null, null, false, false, null);
 }
 /// <summary>
 /// Restituisce il tag del radio bottone del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 /// <returns>Restituisce il tag 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>
 /// Restituisce il tag del radio bottone del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="isCheck">Se selezionato</param>
 /// <returns>Restituisce il tag 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>
 /// Restituisce il tag del radio bottone del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 /// <returns>Restituisce il tag 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>
 /// Restituisce il tag del radio bottone del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 /// <returns>Restituisce il tag 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>
 /// Restituisce il tag del radio bottone del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <param name="isCheck">Se selezionato</param>
 /// <returns>Restituisce il tag 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>
 /// Restituisce il tag del radio bottone del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <param name="labelClass">Stile dell'etichetta label</param>
 /// <returns>Restituisce il tag 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>
 /// Restituisce il tag del radio bottone del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <param name="labelClass">Stile dell'etichetta label</param>
 // <param name="isCheck">Se selezionato</param>
 /// <returns>Restituisce il tag 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>
 /// Restituisce il tag del radio bottone del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <param name="labelClass">Stile dell'etichetta label</param>
 // <param name="isCheck">Se selezionato</param>
 // <param name="isDisabled">Se disabilitato</param>
 /// <returns>Restituisce il tag 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>
 /// Restituisce il tag del radio bottone del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <param name="labelClass">Stile dell'etichetta label</param>
 // <param name="isCheck">Se selezionato</param>
 // <param name="isDisabled">Se disabilitato</param>
 // <param name="oAttributes">Etichetta aggiuntiva</param>
 /// <returns>Restituisce il tag 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>
 // Restituisce il tag CheckBox del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="name">Proprietà name</param>
 // <returns>Restituisce il tag CheckBox</returns>
 public static MvcHtmlString CheckBox(this BootstrapHelper html, string name)
 {
 return CheckBox(html, null, name, null, null, null, false, false, null);
 }
 /// <summary>
 // Restituisce il tag CheckBox del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <returns>Restituisce il tag 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>
 // Restituisce il tag CheckBox del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="isCheck">Se selezionato</param>
 // <returns>Restituisce il tag 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>
 // Restituisce il tag CheckBox del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <returns>Restituisce il tag 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>
 // Restituisce il tag CheckBox del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <returns>Restituisce il tag 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>
 // Restituisce il tag CheckBox del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <param name="isCheck">Se selezionato</param>
 // <returns>Restituisce il tag 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>
 // Restituisce il tag CheckBox del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <param name="labelClass">Stile dell'etichetta label</param>
 // <returns>Restituisce il tag 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>
 // Restituisce il tag CheckBox del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <param name="labelClass">Stile dell'etichetta label</param>
 // <param name="isCheck">Se selezionato</param>
 // <returns>Restituisce il tag 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>
 // Restituisce il tag CheckBox del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <param name="labelClass">Stile dell'etichetta label</param>
 // <param name="isCheck">Se selezionato</param>
 // <param name="isDisabled">Se disabilitato</param>
 // <returns>Restituisce il tag 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>
 // Restituisce il tag CheckBox del modulo
 /// </summary>
 // <param name="html">Esempio di metodo esteso</param>
 // <param name="id">Proprietà id</param>
 // <param name="name">Proprietà name</param>
 // <param name="value">Valore dell'input</param>
 // <param name="text">Testo da visualizzare</param>
 // <param name="labelClass">Stile dell'etichetta label</param>
 // <param name="isCheck">Se selezionato</param>
 // <param name="isDisabled">Se disabilitato</param>
 // <param name="oAttributes">Etichetta aggiuntiva</param>
 // <returns>Restituisce il tag 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);
 }
 }
}

Il blogger ha messo insieme label e checkbox, è sufficiente passare il testo del label corrispondente durante la chiamata, come segue:

<div class="radio">
 @Bootstrap.Radio("aa", "bb", "cc", "dd", null, true, false, null)
 </div>
 <div>
 @Bootstrap.Radio("fd", "cc", "cc", "Francia", "radio-inline", true, false, null)
 @Bootstrap.Radio("dfer", "cc", "cc", "Regno Unito", "radio-inline", true, false, null)
 @Bootstrap.Radio("erer", "cc", "cc", "Italia", "radio-inline", true, false, null)
 </div>
 <div>
 @Bootstrap.CheckBox("fd", "cc2", "cc", "Francia", "checkbox-inline", true, false, null)
 @Bootstrap.CheckBox("dfer", "cc2", "cc", "Regno Unito", "checkbox-inline", true, false, null)
 @Bootstrap.CheckBox("erer", "cc2", "cc", "Italia", "checkbox-inline", true, false, null)
 </div>

Il risultato ottenuto:

Quarto, ButtonExtensions

Riguardo allo stile del pulsante di bootstrap, il sito web ufficiale di bootstrap ha anche una spiegazione dettagliata. Ad esempio, i tipi di pulsante comuni includono pulsante normale, pulsante di invio, pulsante di ripristino; gli stili di pulsante comuni includono i seguenti tipi:

Inoltre, la dimensione del pulsante è anche classificata:

Sulla base di questo, abbiamo reso il bottone di tipo bootstrap come segue

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>
 /\ Utilizzando l'aiutante HTML specificato e il nome del campo della finestra, restituisce il testo dell'elemento pulsante Bootstrap.
 /// </summary>
 /\<param name="html">Esempio di assistente HTML esteso da questo metodo.</param>
 /\<param name="text">Testo visualizzato sul pulsante.</param>
 /\<param name="icon">Classe CSS dell'icona.</param>
 /// <returns>Un elemento di pulsante Bootstrap.</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon)
 {
 return Button(html, text, icon, null);
 }
 /// <summary>
 /\ Utilizzando l'aiutante HTML specificato e il nome del campo della finestra, restituisce il testo dell'elemento pulsante Bootstrap.
 /// </summary>
 /\<param name="html">Esempio di assistente HTML esteso da questo metodo.</param>
 /\<param name="text">Testo visualizzato sul pulsante.</param>
 /\<param name="icon">Classe CSS dell'icona.</param>
 /\<param name="type">Tipo del pulsante.</param>
 /// <returns>Un elemento di pulsante Bootstrap.</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonType type)
 {
 return Button(html, text, icon, type, null);
 }
 /// <summary>
 /\ Utilizzando l'aiutante HTML specificato e il nome del campo della finestra, restituisce il testo dell'elemento pulsante Bootstrap.
 /// </summary>
 /\<param name="html">Esempio di assistente HTML esteso da questo metodo.</param>
 /\<param name="text">Testo visualizzato sul pulsante.</param>
 /\<param name="icon">Classe CSS dell'icona.</param>
 /\<param name="htmlAttributes">Un oggetto che contiene le caratteristiche HTML da impostare per l'elemento.</param>
 /// <returns>Un elemento di pulsante Bootstrap.</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, object htmlAttributes)
 {
 return Button(html, text, icon, ButtonType.Button, htmlAttributes);
 } 
 /// <summary>
 /\ Utilizzando l'aiutante HTML specificato e il nome del campo della finestra, restituisce il testo dell'elemento pulsante Bootstrap.
 /// </summary>
 /\<param name="html">Esempio di assistente HTML esteso da questo metodo.</param>
 /\<param name="text">Testo visualizzato sul pulsante.</param>
 /\<param name="icon">Classe CSS dell'icona.</param>
 /\<param name="type">Tipo del pulsante.</param>
 /\<param name="htmlAttributes">Un oggetto che contiene le caratteristiche HTML da impostare per l'elemento.</param>
 /// <returns>Un elemento di pulsante Bootstrap.</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>
 /\ Utilizzando l'aiutante HTML specificato e il nome del campo della finestra, restituisce il testo dell'elemento pulsante Bootstrap.
 /// </summary>
 /\<param name="html">Esempio di assistente HTML esteso da questo metodo.</param>
 /\<param name="text">Testo visualizzato sul pulsante.</param>
 /\<param name="icon">Classe CSS dell'icona.</param>
 /\<param name="cssClass">Stile del pulsante.</param>
 /// <returns>Un elemento di pulsante Bootstrap.</returns>
 public static MvcHtmlString Button(this BootstrapHelper html, string text, string icon, ButtonClass cssClass)
 {
 return Button(html, text, icon, cssClass, null);
 }
 /// <summary>
 /\ Utilizzando l'aiutante HTML specificato e il nome del campo della finestra, restituisce il testo dell'elemento pulsante Bootstrap.
 /// </summary>
 /\<param name="html">Esempio di assistente HTML esteso da questo metodo.</param>
 /\<param name="text">Testo visualizzato sul pulsante.</param>
 /\<param name="icon">Classe CSS dell'icona.</param>
 /\<param name="cssClass">Stile del pulsante.</param>
 /\<param name="htmlAttributes">Un oggetto che contiene le caratteristiche HTML da impostare per l'elemento.</param>
 /// <returns>Un elemento di pulsante Bootstrap.</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>
 /\ Utilizzando l'aiutante HTML specificato e il nome del campo della finestra, restituisce il testo dell'elemento pulsante Bootstrap.
 /// </summary>
 /\<param name="html">Esempio di assistente HTML esteso da questo metodo.</param>
 /\<param name="text">Testo visualizzato sul pulsante.</param>
 /\<param name="icon">Classe CSS dell'icona.</param>
 /\<param name="type">Tipo del pulsante.</param>
 /\<param name="cssClass">Stile del pulsante.</param>
 /// <returns>Un elemento di pulsante Bootstrap.</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>
 /\ Utilizzando l'aiutante HTML specificato e il nome del campo della finestra, restituisce il testo dell'elemento pulsante Bootstrap.
 /// </summary>
 /\<param name="html">Esempio di istanza di metodo esteso.</param>
 /\<param name="text">Testo visualizzato sul pulsante.</param>
 /\<param name="icon">Classe CSS dell'icona.</param>
 /\<param name="type">Tipo del pulsante.</param>
 /\<param name="cssClass">Stile del pulsante.</param>
 /\<param name="htmlAttributes">Un oggetto che contiene le caratteristiche HTML da impostare per l'elemento.</param>
 /// <returns>Un elemento di pulsante Bootstrap.</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 pulsante di stile
 /// </summary>
 public enum ButtonClass
 {
 /// <summary>
 /// </summary> 
 /// </summary>
 DEFAULT,
 /// <summary>
 /// </summary> 
 /// </summary>
 PRIMARIO,
 /// <summary>
 /// </summary> 
 /// </summary>
 SUCCESS,
 /// <summary>
 /// </summary> 
 /// </summary>
 INFO,
 /// <summary>
 /// </summary> 
 /// </summary>
 AVVERTENZA,
 /// <summary>
 /// </summary> 
 /// </summary>
 DANGER,
 /// <summary>
 /// </summary> 
 /// </summary>
 Link
 }
 /// <summary>
 /// Tipo di pulsante bootstrap
 /// </summary>
 public enum ButtonType
 {
 /// <summary>
 /// </summary>
 /// </summary>
 Button,
 /// <summary>
 /// </summary>
 /// </summary>
 Submit,
 /// <summary>
 /// Ripristina il pulsante
 /// </summary>
 Reset
 }
 public enum ButtonSize
 { 
 lg,
 nm,
 sm,
 xs
 }
}

1、Il tipo, lo stile e la dimensione del pulsante sono definiti come tipo enumerativo, il che rende l'uso più conveniente;

2、Per creare un pulsante è necessario specificare i parametri text e icon, garantendo la struttura base del pulsante.

3、Utilizzo

<div>
@Bootstrap.Button("Pulsante di test", "glyphicon-ok", ButtonClass.Primary)
@Bootstrap.Button("Invia", "glyphicon-ok", ButtonType.Submit, ButtonClass.Success, null, ButtonSize.lg)
 </div>

V, Sommario

In questo articolo sono stati封装了一些常用的表单组件，还有一些留到下篇文章吧。上文只是一个初始版本，很多地方可能并不完善，如果有不当或者可以优化的地方，还望指正。

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente il tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato dagli utenti di Internet autonomamente, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.