Prefacio: El artículo anterior presenta algunos conocimientos básicos sobre la encapsulación de bootstraphelper, y este artículo continúa mejorando. Refiriéndose al método htmlhelper, este blogger primero encapsulará algunos componentes de formularios de uso común. Ha habido demasiada discusión en los comentarios anteriores sobre cuál es el significado de la encapsulación de Bootstraphelper, y no quiero preocuparme demasiado por eso. En resumen, todo tiene ganancias y pérdidas, depende de cómo elija. Si está interesado, puede echar un vistazo. Si no está interesado, puede decir una "broma" del blogger.
Catálogo de artículos de la serie Bootstraphelper
Serie C# Advanced - Encapsular su propio componente htmlhelper paso a paso: bootstraphelper
C# Serie Advanced - Encapsula su propio componente HTMLHelper paso a paso: Bootstraphelper (ii)
C# Serie avanzada: encapsula su propio componente HTMLHELPER paso a paso: Bootstraphelper (3: con código fuente)
1. Agregue un nuevo bootstraphelper genérico
En el artículo anterior, el blogger solo definió un tipo ordinario bootstraphelper para heredar htmlhelper. Dado que considerando la necesidad de usar Lamada para definir componentes, el blogger agregó un tipo genérico Bootstraphelper. Entonces Bootstraphelper se volvió así.
usando System; usando System.Collections.Generic; Uso de System.Linq; usando System.web; Usando System.Web.MVC; Uso de System.Web.Routing; Namespace BootSTrapExtensions {public class bootstraPhelper: system.web.mvc.htmlhelper {//// <rummary> ////////////////////Ote de ver la nueva institución de la nueva institución del bootsTraphel contenedor. /// </summary> /// <param name = "ViewContext"> ViewContainer </param> /// <param name = "ViewDatAcontainer"> ViewDataContainer </param> public bootstraphelper (ViewContext ViewContext, IviewDataContainer): Base (ViewContext, ViewDataContainer) {{{} Nueva instancia de la clase Bootstraphelper con el contexto de vista especificado, ViewDatacontainer y Route Collection. /// </summary> /// <param name = "ViewContext"> Ver contexto </param> /// <param name = "ViewDataContainer"> View Data Container </Param> /// <param name = "Routecollection"> Route Collection </amam> Publicstraphelper (ViewContextExtEntext, iv ViewDatacontainer Base (ViewContext, ViewDataContainer, Routecollection) {}} //// <summary> /// indica que los controles de arranque son compatibles con vistas fuertemente escrita. /// </summary> /// <typparam name = "tmodel"> </pypeParam> public class bootstraphelper <tmodel>: bootstraphelper {//// <summary> /// inicializar una nueva instancia del contexto de visión especificada y el contexto de visión especificada. /// </summary> /// <param name = "ViewContext"> Ver contexto. </param> /// <param name = "ViewDataContainer"> Ver contenedor de datos. </param> public bootstraphelper (ViewContext ViewContext, iviewDataContainer): base (ViewContext, ViewDataContainer) {} //// <summary> /// Inicializar una nueva instancia de <! [CDATA [net.web.mvc.Bootstraphelper <Tmodel>]] Class utilizando el contexto de la vista especificada, el contexto de la vista especificada, la colección de vistas, y enruta la colección y ruta. /// </summary> /// <param name = "ViewContext"> Ver contexto. </param> /// <param name = "ViewDataContainer"> Ver contenedor de datos. </param> /// <param name = "Routecollection"> Colección de ruta. </param> public bootstraphelper (ViewContext ViewContext, IviewDataContainer ViewDataContainer, Routecollection Routecollection): Base (ViewContext, ViewDataContainer, Routecollection) {}}}Nuestro objeto Bootstrap también se define como un objeto genérico
Public Abstract Class BootstrapWebViewPage <TModel>: System.Web.MVC.WebViewPage <TModel> {// Variables utilizadas en CSHTML Página Public Bootstraphelper <Tmodel> Bootstrap {get; colocar; } /// <summary> /// Inicializar objeto Bootstrap /// </summary> public anulación void inithelpers () {base.inithelpers (); Bootstrap = new Bootstraphelper <TModel> (ViewContext, this); } public anulación void ejecutute () {// tirar nueva NotiMplementException (); }}El significado de esto es usar @bootstrap.textboxfor (x => x.name) en la página CSHTML. Esto se introduce más tarde, vamos a presionar aquí.
2. TextBoxExtensions
El código de implementación de TextBoxExtensions.cs es el siguiente:
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> /// mediante el uso de html especificado el nombre del campo Helper y formulario, devuelve la etiqueta del cuadro de texto //// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "name"> el valor de atributo de nombre del elemento de formulario </param> /// <devuelve> devuelve type de entrada = 'text' etiqueta </axt 'tage </axt' thele de mvchtmlString (mvchtmlString (thatsetmlString (TEXTOBE (devuelve Bootstraphelper html, nombre de cadena) {return inPutextensions.helper (html, inputType.text, null, nombre, nulo, falso, nulo); } //// <summary> /// mediante el nombre de html especificado del campo Helper y formulario, devuelve la etiqueta del cuadro de texto ///// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> id </param> /// <param name = "name"> el valor de atributo del nombre del elemento de formul type = 'text' etiqueta </svierte> public static mvchtmlString textbox (este bootstraphelper html, ID de cadena, nombre de cadena) {return inPutextensions.helper (html, inputType.text, id, nombre, nulo, falso, null); } //// <summary> /// Devuelve la etiqueta del cuadro de texto utilizando el nombre de campo Html HTML especificado ///// </summary> /// <param name = "html"> Método de extensión Instance de método </param> /// <param name = "name"> Nombre de elemento Atributo Atributo Valor </Param> /// <Param name = "Valor de forma" Etiqueta </devuelve> public static static mvchtmlString TextBox (este bootstraphelper html, ident de cadena, nombre de cadena, valor de objeto) {return inPutextensions.helper (html, inputType.text, id, nombre, valor, falso, nulo); } //// <summary> /// Devuelve la etiqueta del cuadro de texto utilizando el nombre de campo Html HTML especificado //// </summary> /// <param name = "html"> Método de extensión instancia de método </param> /// <param name = "name"> Valor de nombre de nombre de elemento único Valor </param> /// <param name = "valor"> forma de elemento valor </param> /// <<<name " name = "PlaceHolder"> Bootstrap El valor de entrada de pedido </param> /// <surns> return type de entrada = 'text' etiqueta </devuelve> public static mvchtmlString textBox (este bootstraphelper html, string id, name de cadena, valor de objeto, string placeLeTer) {idcricional <string, objeto> atributes = new diccionary <string, object> () (); if (! string.isnullorempty (marcador de posición)) {atributes.add ("marcador de posición", marcador de posición); } return inputextensions.helper (html, inputType.text, id, nombre, valor, falso, atributos); } //// <summary> /// Devuelve la etiqueta del cuadro de texto utilizando el nombre de campo Html HTML especificado //// </sumario> /// <param name = "Html"> Método extendido Instance de método </maming> /// <param name = "name"> Valor de nombre de nombre de elemento único Valor </param> /// <Param name = "valor"> Forma de elemento Valor </param> /// <<<name "Nombre de su elemento Atributo Valor </Param> /// <Param Name =" Valor "> Valor de elemento de formulario </Param> /// <<<name". name = "htmlattributes"> Atributo adicional </param> /// <<devuelve> devuelve type de entrada = 'text' etiqueta </devuelve> public static mvchtmlString TextBox (este bootstraphelper html, string id, name de cadena, valor de objeto, objeto htmlattributes) {idicular <string> atributes = = atributes = = Bootstraphelper.anonymousObjectToHtMlattributes (htmlattributes); return inputextensions.helper (html, inputType.text, id, nombre, valor, falso, atributos); } //// <summary> /// mediante el nombre de html especificado del campo Helper y formulario, devuelve la etiqueta del cuadro de texto ///// </sumario> /// <<param name = "html"> instancia de método de extensión </param> /// <<param name "> el valor de nombre de nombre del elemento de formulario </param> /// <param name =" valor "> el valor del valor de la forma de la forma de nombre 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) {idicular <string, objeto> atributes = bootstraphelper.anonyMousObjectToHtMlattributes (htmlattributes); if (! string.isnullorempty (marcador de posición)) {atributes.add ("marcador de posición", marcador de posición); } return inputextensions.helper (html, inputType.text, id, nombre, valor, falso, atributos); } Public static mvchtmlString textbox para <tmodel, tproperty> (este bootstraphelper <TModel> html, expresión <func <tmodel, tproperty >> expresión) {var model = (tmodel) html.viewdata.model; String Propertyname; valor del objeto; InPutextensions.getValueByExpression <tmodel, tproperty> (expresión, modelo, out PropertyName, valor de salida); return inputextensions.helper (html, inputType.text, Propertyname, Propertyname, valor, falso, nulo); }}}InPiTExtensions.cs
utilizando System; usando System.Collections.Generic; Uso de System.Linq; usando System.Linq.Expressions; usando System.Reflamection; usando System.web; Uso de System.Web.MVC; Namespace BootStraPextensions {/// <<summary> /// COLECCIÓN DE MÉTODO DE EMPLEZA DE ENTRADA DE ENTRADO Helper (bootstraphelper html, inputType inputType, ID de cadena, nombre de cadena, valor de objeto, bool isCheck, idicular <string, object> htmlattributes) {// Definir el nombre de la etiqueta etiqueta etiqueta etiqueta = nueva etiqueta tagBuilder ("input"); if (htmlattributes == null) {htmlattributes = new Dictionary <string, object> (); } // Agregar nombre if (! String.isNullorEmpty (name)) {htmlattributes.add ("nombre", nombre); } // Agregar id if (! String.isNullorEmpty (id)) {htmlattributes.add ("id", id); } // Agregar valor if (value! = Null) {htmlattributes.add ("valor", value.ToString ()); } // Agregar tipo de entrada Tag.MerGeatTribute ("Tipo", htmlhelper.getInputTyPestring (inputType)); // agregar etiqueta de estilo predeterminado.AddcssClass ("form-control"); tag.mergeAttributes (htmlattributes); if (inputType == inputType.Radio || inputType == inputType.Checkbox) {if (isCheck) tag.merGeatTribute ("comprobado", "comprobado"); } return mvchtmlString.Create (tag.ToString ()); } //// <summary> /// Devuelve la etiqueta de radio de formulario //// </sumario> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> id </param> /// <<param name = "name"> name attribute attribute </param> /// <param name = "valor"> valor de entrada </param> /// <<mam name "n. <Param name = "LabelClass"> estilo de etiqueta de etiqueta </marr> /// <param name = "isCheck"> si está seleccionado </param> /// <param name = "isDisabled"> discapacitar </param> /// <param name = "oattributes"> etiqueta adicional </param> /// <devuelve> return tag </return> public mvchtmlstring checkBox (boxeBaxt (bootsMlaMl, bootsMlaMl, bootSloper. InputType InputType, ID de cadena, nombre de cadena, valor de objeto, texto de cadena, String LaborClass, Bool IsCheck, Bool ISDISABLED, Idictionary <String, Object> Htmlattributes) {// Defina el nombre de la etiqueta 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 (? } 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 (isDisable) {sbinput.append ("discapacitado"); } sbinput.append (" />"); if (! String.isNullorEmpty (text)) {sbinput.append (text); } tag.innerhtml = sbinput.ToString (); tag.mergeAttributes (htmlattributes); return mvchtmlString.create (tag.ToString ()); } // Obtenga el valor de la propiedad actual a través de una expresión pública void estática getValueByExpression <tModel, tproperty> (expresión <func <tmodel, tproperty >> expresión, modelo tmodel, out string propertyName, out objeto valor) {memberExpression cuerpo = (memberexpression) expresión.body; var lamadaname = (Body.Member es PropertyInfo)? Body.Member.Name: Null; Propertyname = Lamadaname; valor = nulo; 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 (modelo, null); }}}}1. Teniendo en cuenta que todos los cuadros de texto de cuadros de texto basados en Bootstrap en el proyecto tienen un estilo de clase = "Control de forma", por lo que al encapsular el cuadro de texto, se coloca directamente en la etiqueta. Por supuesto, si su proyecto no necesita usar esto, o si ha personalizado el estilo de cuadro de texto, también puede escribir su propio estilo aquí, por lo que no necesita agregar estos estilos cada vez que declare el cuadro de texto.
2. El método TextBoxFor () combina el uso de Lamada para generar cuadros de texto. El objeto de tipo Bootstraphelper genérico declarado anteriormente es útil. El nombre del atributo y el valor del atributo en Lamada se leen a través de la reflexión y los genéricos. Solo se define un método aquí. Si se requieren otras sobrecargas, puede agregar nuevos métodos usted mismo.
3. Otro problema se encontró al usarlo. Dado que Bootstraphelper hereda al tipo htmlhelper, algunos de los métodos de extensión HTMLHELPER originalmente encapsulados en MVC también pueden llamarse directamente para nuestro objeto Bootstrap. Por lo tanto, se pueden duplicar muchas sobrecargas y la sobrecarga correspondiente no se puede encontrar, como:
De esta manera, los siguientes errores se causan fácilmente:
Entonces, dado que surge el problema, necesitamos encontrar una manera de resolverlo. Una solución en la que pensó el blogger es: comentar el espacio de nombres donde el objeto HTML en el web.config de la vista. Por ejemplo:
De esta manera, podemos resolver los problemas anteriores y ejecutar el siguiente efecto:
Después de comentar el espacio de nombres anterior, ya no podremos usar los métodos de extensión relevantes de la variable HTML en la página CSHTML. Si su propio ayudante es suficiente, no debería ser un gran problema sin los métodos de extensión nativa.
3. Radioextensiones y Textensiones de checkbox
Con respecto a los componentes de radio y casilla de verificación en Bootstrap, el blogger se refirió al método de escritura en http://v3.bootcss.com/css/ y lo encapsuló de la siguiente manera:
Radioextensions.cs
utilizando System; usando System.Collections.Generic; Uso de System.Linq; usando System.Web; Usando System.Web.MVC; Namespace BootStrapExtensions {public static class RadioExtensions {/// <<summary> /// return Form Radio Tag ///// </summary> /// <param name = "html"> Método de extensión </param> /// <name de radio = "nombre" name " Atributo </param> /// <<devuelve> return Radio etiqueta </svoldS> public static mvchtmlString Radio (este bootstraphelper html, nombre de cadena) {return radio (html, null, name, null, null, null, null, falso, falso, 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, identificación de cadena, nombre de cadena) {return Radio (html, id, nombre, nulo, nulo, nulo, nulo, falso, falso, nulo); } /// <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 radio static mvchtmlString (este bootstraphelper html, identificación de cadena, nombre de cadena, bool ischeck) {return radio (html, id, nombre, nulo, nulo, nulo, isCheck, falso, null); } //// <summary> /// Devuelve la etiqueta de radio de formulario ///// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> id </param> //// <param name = "name"> name attribution </param> /// <amam name = "valor"> valor de entrada </param> /// <<rurters> returns return MvChtmlString Radio (este bootstraphelper html, identificación de cadena, nombre de cadena, valor de objeto) {return radio (html, id, nombre, valor, nulo, nulo, falso, falso, nulo); } //// <summary> /// return form de radio etiqueta //// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> id </param> //// <param name = "name"> name attribute attribute <Elvierte> return Radio etiqueta </surnsurs> public static static mvchtmlString Radio (este bootstraphelper html, identificación de cadena, nombre de cadena, valor de objeto, texto de cadena) {radio return (html, id, nombre, valor, texto, nulo, falso, falso, nulo); } //// <summary> /// return form de radio etiqueta //// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> id </param> //// <param name = "name"> name attribute attribute <param name = "ischeck"> si está seleccionado </amam> /// <surns> return Radio Etiqueta </devuelve> public static static mvchtmlString radio (este bootstraphelper html, string id, string name, valor de objeto, texto de cadena, bool ischeck) {return radio (html, id, nombre, valor, texto, ischeck, false, null); } //// <summary> /// return form de radio etiqueta //// </summary> /// <param name = "html"> ejemplo de método de extensión </param> /// <param name = "id"> id </param> //// <param name = "name"> name attribute attribute <Param name = "LabelClass"> Etiqueta de etiqueta estilo </param> /// <<devuelve> return Radio etiqueta </surnesurs> public static static mvchtmlString Radio (este bootstraphelper html, ID de cadena, nombre de cadena, valor de objeto, texto de cadena, cadena etiqueta classs) {return Radio (html, id, nombre, valor, texto, etiqueta de etiqueta, falso, falso, falso, null); } //// <summary> /// return form de radio etiqueta //// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> id </param> //// <param name = "name"> name attribute attribute <param name = "text"> name = "LabelClass"> estilo de etiqueta de etiqueta </mam> /// <param name = "ischeck"> si seleccionar </amam> /// <deurns> return Radio Tag </surnsurn> public static mvchtmlString radio (este bootstraphelper html, id id de cadena, nombre de cadena, valor de objeto, static text, string labelClass, bool ischeck) nombre, valor, texto, etiqueta class, isCheck, falso, nulo); } //// <summary> /// return form de radio etiqueta //// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> id </param> //// <param name = "name"> name attribute attribute <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 isDisable) {Radio de retorno (html, id, nombre, valor, texto, etiqueta classs, isCheck, isDisable, 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"> estilo de etiqueta </param> /// <param name = "isCheck"> si </param> /// <param name = "isDisabled"> discapacitar </amam> /// <param name = "oattributes"> extra etiqueta </param> /// <rurder> return tag <//devuelve> public Mvchtmlstring radio (este bootstraphmll, strin radio, remon Nombre, valor de objeto, texto de cadena, String LabelClass, Bool IsCheck, Bool IsDisable, 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, nombre, valor, texto, etiqueta classs, isCheck, isDisable, htmlattributes); }}}CheckboxExtensions.cs
usando System; usando System.Collections.Generic; Usando System.Linq; usando System.web; usando System.web.mvc; Namespace BootStraPextensions {public static class checkboxExtensions {/// <<summary> /// Devuelve la etiqueta de cuadros de cheque de formulario /// </sumario> /// <param name = "html"> Método de parámetro </escalo de parámetro> ///////////////Anumy " Atributo </param> /// <<runebray> devuelve la etiqueta de la casilla de verificación </devuelve> la casilla de verificación MVCHTMLString public static (este bootstraphelper html, name de cadena) {casilla de verificación de retorno (html, null, name, null, null, null, false, false, null); } //// <summary> /// Devuelve la etiqueta de control de la casilla de verificación de formulario //// </summary> /// <<param name = "html"> instancia de método de extensión </mam> /// <param name = "id"> id </mam>/// <par param name "> name attribute Atribution </param> /// <devuelve> devuelve la etiqueta de cheques <///devuelve> public static mvchtmlSlSlSlTring Atribution </Param> //// <devuelve> devuelve la etiqueta de cheques <///devuelve> public static mvchtmlSlSlSlSlSlSlSlString AtriBeS html, ID de cadena, nombre de cadena) {Return CheckBox (html, id, nombre, nulo, nulo, nulo, falso, falso, nulo); } /// <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> casilla de verificación MVCHTMLString (este bootstraphelper html, ID de cadena, nombre de cadena, nombre de cadena, bool isCheck) {casilla de verificación de retorno (html, id, nombre, nulo, nulo, isCheck, falso, null); } //// <<summary> /// return form de casilla de verificación Etiqueta ///// </summary> /// <param name = "html"> instancia de método de extensión </mam> /// <param name = "id"> id </mam> //// <param name = "name" name Atribution Atribute Casilla de verificación mvchtmlString (este bootstraphelper html, identificación de cadena, nombre de cadena, valor de objeto) {casilla de verificación de return (html, id, nombre, valor, nulo, nulo, falso, falso, nulo); } /// <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> /// <<devoluciones> Return CheckBox Etiqueta </Devierte> Public static mvchtmlString Checkbox (este bootstraphelper html, identificación de cadena, nombre de cadena, valor de objeto, texto de cadena) {casilla de verificación de retorno (html, id, nombre, valor, texto, nulo, falso, falso, 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 = "ischeck"> si está seleccionado </amam> /// <<rompess> devuelve la etiqueta de casilla de verificación <//devuelve> public static static mvchtmlString CheckBox (este bootstraphelper html, string id, name de cadena, valor de objeto, texto de cadena, bool ischeck) {return checkbox (html, id, nombre, valor, texto, null, ischeck, falso, nelle) {return checkbox (html, id, nombre, valor, texto, null, ischeck, falso, nelle) {return checkbox (html, id, nombre, valor, texto, null, ischeck, falso, nelul } /// <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"> Estilo de etiqueta de etiqueta </marr> /// <<deude> return de casilla de verificación </devuelve> public static mvchtmlString Checkbox (este bootstraphelper html, id id, name de cadena, valor de objeto, string text, string selloClass) {return checkbox (html, id, nombre, valor, texto, falso, falso, falso, neco de cadena) {return CheckBox (html, id, nombre, valor, text, falso, falso, falso, neco de la cadena) } //// <summary> /// return form de casilla de verificación Tag //// </summary> /// <param name = "html"> Ejemplo de método de extensión </param> /// <param name = "id"> id </param> /// <<param name = "name"> name attribute attribute </param> /// <param name = "valor"> valor de entrada </param> /// <<mam name "n. <Param name = "LabelClass"> estilo de etiqueta </param> /// <param name = "isCheck"> si comprobar </param> /// <remurns> return de la casilla de verificación </devuelve> public static mvchtmlString checkbox (este bootstraphelper html, string id, name de cadena, valor de objeto, texto, string etiqueta classass, bool ischeck) {boxe de devolución de chechBox (name, nombre, nombre, nombre, nombre de name, nombre de string, string text, string etiqueta, bool ischeck) {boxeBox de devolución (seroz Texto, 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"> estilo de etiqueta de etiqueta </param> /// <param name = "isCheck"> ¿está seleccionado </param> /// <param name = "isDisable"> Disable </param> /// <<rurnsurn> return CheckBox Etiqui isCheck, bool isDisable) {return checkbox (html, id, nombre, valor, texto, etiqueta classs, isCheck, isDisable, 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"> estilo de etiqueta </param> /// <param name = "etiqueta classs"> estilo de etiqueta </param> /// <param name = "ischeck"> es seleccionado </aam> /// <param name = "isDisabled"> inable </param> /// <param name = "oattributes"> extra etiqueta </param> // <<<<<turnment de return stating> return stating> Casilla de verificación mvchtmlString (este bootstraphelper html, identificación de cadena, nombre de cadena, valor de objeto, texto de cadena, cadena etiqueta classs, bool isCheck, bool isDisable, object Oattributes) {idicular <string, object> htmlattributes = null; if (oattributes! = null) {htmlattributes = bootstraphelper.anonyMousObjectToHtMlattributes (Oattributes); } else {htmlattributes = new Dictionary <string, object> (); } return inputextensions.checkbox (html, inputType.Checkbox, id, nombre, valor, texto, etiqueta classs, isCheck, isDisable, htmlattributes); }}}El blogger reúne la etiqueta y la casilla de verificación, y pasa el texto de la etiqueta correspondiente al llamar, y lo usa de la siguiente manera:
<div> @bootstrap.radio ("aa", "bb", "cc", "dd", null, true, false, null) </div> <div> @bootstrap.radio ("fd", "cc", "cc", "ccc", "france", "radioinline", verdadero, falso, null) @bootstrap.radio (",", ",", digna (",", ", null) "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, falso, null) @bootstrap.checkbox ("erer", "cc2", "cc", "italiano", "control en la casilla de verificación", verdadero, falso, nulo) </div>Resultados obtenidos:
4. Butonextensions
Con respecto al estilo de botón de Bootstrap, hay instrucciones detalladas en el sitio web oficial de Bootstrap. Por ejemplo, los tipos de botones comunes incluyen botones ordinarios, botones de envío y botones de reinicio; Los estilos de botones comunes son principalmente los siguientes:
Además, el tamaño del botón también está clasificado:
Según esto, hemos encapsulado el botón de tipo bootstrap de la siguiente manera
Butonextensions.cs
Usando System; usando System.Collections.Generic; Uso de System.Linq; usando System.Web; Usando System.Web.MVC; Namespace BootStraPextensions {public static class ButtonExtensions {//// <summary> /// Devuelve el elemento de botón Bootstrap de texto utilizando el nombre de campo HTML especificado y formulario. /// </summary> /// <param name = "html"> La instancia HTML Helper extendida por este método. </param> /// <param name = "text"> texto que se muestra en el botón. </param> /// <param name = "icon"> class CSS icon. </param> /// <mirante> un elemento de botón Bootstrap. </devuelto> botón público mvchtmlString (este bootstraphelper html, texto de cadena, icono de cadena) {botón de retorno (html, texto, icono, nulo); } /// <summary> /// Devuelve el elemento del botón Bootstrap de texto utilizando el nombre HTML HTML especificado y el nombre del campo de formulario. /// </summary> /// <param name = "html"> La instancia HTML Helper extendida por este método. </param> /// <param name = "text"> texto que se muestra en el botón. </param> /// <param name = "icon"> class CSS icon. </param> /// <param name = "type"> Tipo de botón. </param> /// <mirante> un elemento de botón Bootstrap. </devuelto> botón público mvchtmlString (este bootstraphelper html, texto de cadena, icono de cadena, tipo buttonype) {botón de retorno (html, texto, icono, tipo, nulo); } /// <summary> /// Devuelve el elemento del botón Bootstrap de texto utilizando el nombre HTML HTML especificado y el nombre del campo de formulario. /// </summary> /// <param name = "html"> La instancia HTML Helper extendida por este método. </param> /// <param name = "text"> texto que se muestra en el botón. </param> /// <param name = "icon"> class CSS icon. </param> /// <param name = "htmlattributes"> Un objeto que contiene los atributos HTML para establecer el elemento. </param> /// <mirante> un elemento de botón Bootstrap. </devuelto> botón público mvchtmlString (este bootstraphelper html, texto de cadena, icono de cadena, objeto htmlattributes) {botón return (html, text, icon, buttonype.button, htmlattributes); } /// <summary> /// Devuelve el elemento del botón Bootstrap de texto utilizando el nombre HTML HTML especificado y el nombre del campo de formulario. /// </summary> /// <param name = "html"> La instancia HTML Helper extendida por este método. </param> /// <param name = "text"> texto que se muestra en el botón. </param> /// <param name = "icon"> class CSS icon. </param> /// <param name = "type"> Tipo de botón. </param> /// <param name = "htmlattributes"> Un objeto que contiene los atributos HTML para establecer el elemento. </param> /// <mirante> un elemento de botón Bootstrap. </devuelto> botón público mvchtmlString (este bootstraphelper html, texto de cadena, icono de cadena, tipo buttonype, objeto htmlattributes) {botón de retorno (html, texto, icono, type, buttonclass.default, null); } /// <summary> /// Devuelve el elemento del botón Bootstrap de texto utilizando el nombre HTML HTML especificado y el nombre del campo de formulario. /// </summary> /// <param name = "html"> La instancia HTML Helper extendida por este método. </param> /// <param name = "text"> texto que se muestra en el botón. </param> /// <param name = "icon"> class CSS icon. </param> /// <param name = "cssclass"> estilo del botón. </param> /// <mirante> un elemento de botón Bootstrap. </devuelto> botón público mvchtmlString (este bootstraphelper html, texto de cadena, icono de cadena, botón CSSClass) {botón de retorno (html, texto, icono, cssclass, null); } /// <summary> /// Devuelve el elemento del botón Bootstrap de texto utilizando el nombre HTML HTML especificado y el nombre del campo de formulario. /// </summary> /// <param name = "html"> La instancia HTML Helper extendida por este método. </param> /// <param name = "text"> texto que se muestra en el botón. </param> /// <param name = "icon"> class CSS icon. </param> /// <param name = "cssclass"> estilo del botón. </param> /// <param name = "htmlattributes"> Un objeto que contiene los atributos HTML para establecer el elemento. </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> /// 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="cssClass">Button style. </param> /// <returns>A Bootstrap Button element. </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> /// Return the text Bootstrap Button element by using the specified HTML helper and form field name. /// </summary> /// <param name="html">Extension method instance. </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="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, 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 button style/// </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 button type//// </summary> public enum ButtonType { /// <summary> /// Normal button/// </summary> Button, /// <summary> /// Submit button/// </summary> Submit, /// <summary> /// Reset button/// </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>5. Resumen
以上封装了几个常用的表单组件，还剩下几个留在下篇吧。上文只是一个初始版本，很多地方可能并不完善，如果有什么不当或者可以优化的地方，还望斧正。
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.