Kapitulieren Sie Ihre eigene HTMLHelper -Komponente Schritt für Schritt Bootstraphelper (ii)

Vorwort: Der vorherige Artikel führt zu grundlegenden Kenntnissen über die Einkapselung von Bootstraphelper und dieser Artikel wird weiterhin verbessert. In Bezug auf die HTMLHelper -Methode wird dieser Blogger zunächst einige häufig verwendete Formularkomponenten zusammenfassen. In den vorherigen Kommentaren wurde zu viel Diskussion darüber gegeben, was die Bedeutung der Bootstriphelper -Kapselung ist, und ich möchte mich nicht zu sehr Sorgen machen. Kurz gesagt, alles hat Gewinne und Verluste, es hängt davon ab, wie Sie wählen. Wenn Sie interessiert sind, können Sie einen Blick darauf werfen. Wenn Sie nicht interessiert sind, können Sie einfach einen "Witz" des Bloggers sagen.

Artikelkatalog für BootStrapsraphelper -Serien

C# Advanced Series - STOTSTRAPHELPER SCHRITTEN SIE SEINEN HTMLHELPER -Komponente Schritt für Schritt ein.

C# Advanced Series - Einkapseln Sie seine eigene HTMLHelper -Komponente Schritt für Schritt: Bootstreraphelper (ii)

C# Advanced Series - STOTTRAPHELPER (3: mit Quellcode) einkapseln Sie seine eigene HTMLHelper -Komponente.

1. Fügen Sie einen neuen generischen Bootsstropraphelper hinzu

Im vorherigen Artikel definierte der Blogger nur einen Startstockstruphelper -gewöhnlichen Typ, um HtmlHelper zu erben. Da die Bloggerin die Notwendigkeit berücksichtigt, Lamada zum Definieren von Komponenten zu verwenden, fügte der Blogger einen stafer generischen Typ hinzu. So wurde Bootstraphelper so.

 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 Kontext und Datencontainer anzeigen. /// </summary> /// <param name = "viewContext"> ViewContainer </param> /// <param name = "viewDatacontainer"> viewDatacontainer </param> public bootStraphelper (ViewContext ViewContext, IviewDatacontaN): Basis (ViewContex): Basis (viewContex) {//saddConTex) {//is SUBERT (viewContex) {//is SUDERSUCHE (ViewConText, viewDatDatacontaNer) {////suadconte-/suchdat.//- Neue Instanz der Bootstreraphelper -Klasse mit dem angegebenen Ansichtskontext, ViewDatacontainer und Routensammlung. /// </summary> /// <param name = "viewContext"> Ansichtskontext </param> /// <param name = "viewDatacontainer"> Datencontainer anzeigen Base (ViewContext, ViewDatacontainer, RouteCollection) {}} /// <summary> /// zeigt an, dass Bootstrap -Steuerelemente in stark tippten Ansichten unterstützt werden. /// </summary> /// <typeparam name = "tmodel"> </typeparam> bootStraphelper public class <tmodel>: BootsstreapHelper {/// <summary> /// Initialisieren einer neuen Instanz des <! [CDATA [net.meb.mvc.Boots contapht- und -Boots -contapht und -Boots -Datenträger. Behälter. /// </summary> /// <param name = "viewContext"> Ansichtskontext. </param> /// <param name = "viewDatacontainer"> Datencontainer anzeigen. </param> public bootStraphelper (ViewContext ViewContext, iviewDatacontainer): Base (ViewContext, ViewDatacontainer) {} /// <summary> /// Initialisieren Sie eine neue Instanz des <! [CDATA [net.web.mvc.Booth -Data concent -concent -concent -concent. /// </summary> /// <param name = "viewContext"> Ansichtskontext. </param> /// <param name = "viewDatacontainer"> Datencontainer anzeigen. </param> /// <param name = "RouteCollection"> Routensammlung. </param> public bootStraphelper (ViewContext ViewContext, iviewDatacontainer viewDatacontainer, RouteCollection RouteCollection): Basi

Unser Bootstrap -Objekt ist auch als generisches Objekt definiert

 public Abstract Class BootstrapWebViewPage <TModel>: System.Web.Mvc.WebViewPage <TModel> {// Variablen, die in der CSHTML -Seite public bootstraphelper <Tmodel> bootstrap {get; Satz; } /// <summary> /// stootstrap -Objekt initialisieren /// </summary> public override void inithelpers () {Base.inithelpers (); Bootstrap = new BootStraphelper <TModel> (ViewContext, this); } public override void execute () {// neue NotimplementedException (); }}

Die Bedeutung davon ist die Verwendung @bootstrap.textboxFor (x => x.name) in der CSHTML -Seite. Dies wird später eingeführt. Lassen Sie uns hier eine Vorahnung legen.

2. TextBoxextensionen

Der Implementierungscode von textBoxextensions.cs ist wie folgt:

 Verwenden von System; system.collectionss.generic; Verwendung von System.linq; Verwendung von System.linq.Expressions; Verwendung von System.reflection; Verwendung von System.Web; Verwendung von System.Web.mvc; <summary> /// Durch Verwendung des angegebenen HTML den Namen des Helfer- und Formularfeldes geben Sie das Textfeld -Tag /// </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "name"> Der Name des Namens -Attribut -Wertes der Form. TextBox (this bootStRAPHELPER HTML, String -Name) {return Inputextensions.helper (html, inputType.text, null, null, 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 </zurückgibt> public static mvchtmlstring textBox (dieses BootStRAPHELPER HTML, String -ID, String -Name) {return Inputextens.helper (html, inputType.text, id, name, null, false, null); } /// <summary> /// gibt das Textfeld -Tag mit dem angegebenen HTML -Helfer und Formfeldname /// </summary> /// <param name = "html"> Instanz der Erweiterung Methode </param> // <Paramame = "Name"> einzelne Elementname -Attribut -Wert </// <// <param> -TROTORS NACHSETTURS. Tag </returns> public static mvchtmlstring textBox (dieses BootStRAPHELPER HTML, String -ID, String -Name, Objektwert) {return inputextensions.helper (html, inputType.text, id, name, value, false, null); } /// <summary> /// gibt das Textfeld -Tag mit dem angegebenen HTML -Helfer und Formularfeldname /// </summary> /// <param name = "html"> Instanz der Erweiterungsmethode </param> /// <param name = "Name"> einzelner Elementname -Attribut -Wert </// <param> // /// <Param> //// <Param> //// <param> " name = "placeholder"> bootstraps Eingabeaufgabewert </param> /// <Ctripps> Eingabe type type = 'text' tag </zurückgibt> public static mvchtmlstring Textbox (dieses BootStRAPHELPER HTML, String -ID, String -Name, Objektwert, String Placeholder) {idectionary <String, Objekt> Attribute = New Dictionary, Object, Objectary <String, Object> Attributs = Neue Düsterung, Objekt> (). if (! string.isnullorEmpty (Platzhalter)) {Attribute.Add ("Platzhalter", Platzhalter); } return Inputextensions.helper (html, inputType.text, id, Name, Wert, Falsch, Attribute); } /// <summary> /// gibt das Textfeld -Tag mit dem angegebenen HTML -Helfer und Formularfeldname /// </summary> /// <param name = "html"> Instanz der erweiterten Methode </param> /// <param name = "Name"> einzelne Elementname -Attribut -Wert -Wert -Wert </// <param>//// <param> /// <param> /// </// </// </// <///). name = "htmlattributes"> zusätzliches Attribut </param> /// <Ctrippings> Eingabetypen zurückgegeben. BootStraphelper.AnonymeObjecttoHtmlAttributes (htmlattributes); return inputextensions.helper (html, inputType.text, id, name, Wert, false, Attribute); } /// <summary> /// Mithilfe des angegebenen HTML den Namen des Helfer- und Formularfeldes geben Sie die Textfeldbezeichnung zurück /// </summary> /// <param name = "html"> Erweiterungsmethode Instanz </param> /// <param name = "name"> Der Name des Formulars. 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> Attribute = BootStraphelper.AnonymeoBjectToHtMlATTRIBUTes (htmlattributes); if (! string.isnullorEmpty (Platzhalter)) {Attribute.Add ("Platzhalter", Platzhalter); } return Inputextensions.helper (html, inputType.text, id, Name, Wert, Falsch, Attribute); } public static mvchtmlString textBoxFor <tmodel, tProperty> (dieses BootStRapraphelper <TModel> html, Expression <func <Tmodel, TProperty >> Expression) {var model = (tmodel) html.viewData.model; String PropertyName; Objektwert; Inputextensions.getValuebyExpression <tmodel, tProperty> (Expression, Modell, Out PropertyName, out value); return Inputextensions.helper (HTML, InputType.text, PropertyName, PropertyName, Value, False, NULL); }}}

Inputextensionen.cs

 Verwenden von System; Verwendung von System.Collectionss.generic; Verwendung von System.linq; Verwendung von System.linq.Expressions; Verwendung von System.reflection; Verwendung von System.Web; Verwendung von System.web.mvc; Namespace bootStrapextensions {/// <summary> ///// ///// // bootStrap -Form -Elemente -Eingangsverlängerungsverlängerung //// </// </summary> public> publicling -publicling -publicLing -Struktur -Struktur -Struktur -Struktur -Struktur -Struktur -Station -Verfahrens -Verfahrens -Method -Methods -Verfasser -Methode -Verfahrens -Verfahren: Helfer (BootStRAPHELPER HTML, InputType InputType, String -ID, String -Name, Objektwert, Bool ISCHECK, IDictionary <String, Objekt> htmlattributes) {// Definieren Sie den Namen des Tags tagbuilder tag = new Tagbuilder ("input"); if (htmlattributes == null) {htmlattributes = new Dictionary <String, Object> (); } // Name fügen Sie if (! String.IsnullorEmpty (Name)) {htmlattributes.add ("Name", Name); } // id if (! String.isnullorEmpty (id)) {htmlattributes.add ("id", id); } // Wert hinzufügen if (value! = Null) {htmlattributes.add ("value", value.toString ()); } // Eingabetyp -Tag addieren. // Standardstil tag. tag.Mergeattributes (htmlattributes); if (inputType == inputType.radio || inputType == InputType.CheckBox) {if (iSSCECK) tag.Mergeattribute ("Checked", "Checked"); } return mvchtmlstring.create (tag.toString ()); } /// <summary> /// RECHTEN SIE DAS FODIONS -TAGN // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id </param> // <param name = "name" name "name" name <// // <// <///value "> sted" <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, Objektwert, String -Text, String -LabelClass, Bool ISHECK, BOOL ISDIENDIEND, IDictionary <String, Objekt> htmlattributes) {// Definieren Sie den Namen des Tags tagbuilder tag = new Tagbuilder ("Label"). if (! string.isnullorempy (LabelClass)) {htmlattributes.add ("Klasse", LabelClass); } System.Text.StringBuilder SBInput = New System.Text.StringBuilder (); var strinputType = htmlHelper.getInputTypestring (InputType); SBInput.Append ("<input type = '"). append (strinputType) .Append ("'"); if (! string.isnullorempy (name)) {sBInput.Append ("name = '") .Append (name) .Append ("'"); } if (! string.isnullorEmpty (id)) {sBInput.Append ("id = '") .Append (id) .Append ("'"); } if (value! } if (isSheck) {sBInput.Append ("checked = 'checked'"); } if (isdisabled) {sBInput.Append ("deaktiviert"); } SBInput.Append (" />"); if (! string.isnullorEmpty (text)) {SBInput.Append (text); } tag.innerHtml = sBInput.toString (); tag.Mergeattributes (htmlattributes); return mvchtmlstring.create (Tag.ToString ()); } // Erhalten Sie den aktuellen Eigenschaftswert durch einen Ausdruck public static void GetValuebyExpression <tmodel, tProperty> (Expression <func <tmodel, tProperty >> Expression, TModel -Modell, out String Eigenschaft, Out -Objektwert) {memberexpression body = (memBerexpression) Expression. var lamadaname = (Body.Member ist PropertyInfo)? Body.Member.Name: NULL; PropertyName = Lamadaname; Wert = null; System.Reflection.PropertyInfo [] lstPropertyInfo = typeof (tmodel) .getProperties (BindingFlags.Public | BindingFlags.instance); var ofind = lstPropertyInfo.FirstordeFault (x => x.name == lamadaname); if (vonind! = null) {value = ofind.getValue (Modell, null); }}}}

1. Wenn man bedenkt, dass alle auf Bootstrap-basierten Textbox-Textfelder im Projekt einen Class = "Form-Control" -Stil haben. Bei der Einkapselung des Textfelds wird es also direkt in das Etikett platziert. Wenn Ihr Projekt dies nicht verwenden muss oder Sie den Textfeldstil angepasst haben, können Sie hier auch Ihren eigenen Stil schreiben, damit Sie diese Stile nicht jedes Mal hinzufügen müssen, wenn Sie das Textfeld deklarieren.

2. Die textBoxFor () -Methode kombiniert die Verwendung von Lamada zum Generieren von Textfeldern. Das oben deklarierte generische Bootstraphelper -Objekt ist nützlich. Der Attributname und der Attributwert in Lamada werden durch Reflexion und Generika gelesen. Hier wird nur eine Methode definiert. Wenn andere Überladungen erforderlich sind, können Sie selbst neue Methoden hinzufügen.

3. Ein weiteres Problem wurde bei der Verwendung aufgetreten. Da BootStraphelper den HTMLHelper -Typ erbt, können einige der ursprünglich in MVC eingekapselten HTMLHelper -Erweiterungsmethoden auch für unser Bootstrap -Objekt direkt aufgerufen werden. Daher können viele Überladungen dupliziert werden und die entsprechende Überlastung kann nicht gefunden werden, wie beispielsweise:

Auf diese Weise können die folgenden Fehler leicht verursacht werden:

Da das Problem auftritt, müssen wir einen Weg finden, es zu lösen. Eine Lösung, an die der Blogger dachte, ist: Kommentieren Sie den Namespace, in dem das HTML -Objekt in der web.config der Ansicht. Zum Beispiel:

Auf diese Weise können wir die oben genannten Probleme lösen und den folgenden Effekt ausführen:

Nachdem wir den oben genannten Namespace ausgezeichnet haben, können wir die relevanten Erweiterungsmethoden der HTML -Variablen auf der CSHTML -Seite nicht mehr verwenden. Wenn Ihr eigener Helfer ausreicht, sollte dies ohne die nativen Erweiterungsmethoden kein großes Problem sein.

3.. Radioxtensionen und Kontrollkästchen

In Bezug auf die Radio- und Checkbox -Komponenten in Bootstrap bezog sich der Blogger auf die Schreibmethode in http://v3.bootcss.com/css/ und verkapulierte sie wie folgt:

Radioextensions.cs

 Verwenden von System; system.collectionss.generic; Verwendung von System.LinQ; Verwendung von System.web; Verwendung von System.web.mvc; Namespace BootStrapextensions {public static class Radioextensions {/// <summary> ////// Attribut </param> /// <zurückgegeben> RETURAL RADIO TAG </RETURESS> PUBLIC STATIC MVCHTMLSTRING -Radio (dieses Bootstreraphelper Html, String -Name) {return radio (html, null, null, null, null, null, null, null, false, false, null); } /// <summary> /// RECHTEN SIE DAS FODIC -Tag // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id </param> // <param name = "name" HTML, String -ID, String -Name) {return radio (html, id, name, null, null, null, null, false, false, null); } /// <summary> /// Das Formular Radio -Tag // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id <// // <param name = "name" Tag </zurückgibt> öffentliches statisches MVCHTMLString -Radio (dieses Bootsstraphelper HTML, String -ID, String -Name, Bool ISHECK) {return radio (html, id, null, null, null, null, null, iSCheck, false, null); } /// <summary> /// Return Das Formular Radio -Tag // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id </param> // <param name = "name" name "name" name </param> // <// </value "> preis"> value "> preis"> value "> preis"> preis "> preis"> parby "> parby"> parby "> parby"> "° C."> "kennzeichnungen"> "returns"> return MVCHTMLString -Radio (dieses BootStraphen -HTML, String -ID, String -Name, Objektwert) {return Radio (HTML, ID, Name, Wert, NULL, NULL, FALSE, FALSE, NULL); } /// <summary> /// radio radio tag // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id </param> // <param name = "name" <Ctrippings> Return Radio Tag </retektiert> öffentliches statisches MVCHTMLString -Radio (dieses Bootsstreraphelper HTML, String -ID, String -Name, Objektwert, String -Text) {return Radio (HTML, ID, Name, Wert, Text, Null, False, False, Null); } /// <summary> /// radio radio tag // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id </param> // <param name = "name" <param name = "iSCECKECK"> ob es ausgewählt ist </param> /// <zurückgegeben> Radio -Tag zurücksend </zurückgibt> öffentliches statisches mvchtmlstring -Radio (dieser Bootsstrafel -HTML, String -ID, String -Name, Objektwert, Stringtext, Bool ISCHECK) {RETCORE Radio (html, id, id, namens, text, text, text, null } /// <summary> /// radio radio tag // </summary> /// <param name = "html"> Erweiterungsmethode Beispiel </param> // <param name = "id"> id </param> // <param name = "name" 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> /// radio radio tag // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id </param> // <param name = "name" <param name = "text"> name = "labelClass"> Stil des Etiketts -Tags </param> /// <param name = "iScECK"> Ob aus auswählt </param> /// <returns> return radio tag </zurückgibt> public static static MVCHTMLString -Radio (dieses BootSraphelper HTML, String ID, String -Name, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt, Objekt. ID, Name, Wert, Text, Labelklasse, Isscheck, Falsch, NULL); } /// <summary> /// radio radio tag // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id </param> // <param name = "name" <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 ISSCECK, bool isdisabled) {return radio (html, id, name, value, text, labelclass, iSheck, isdisabled, null); } /// <summary> /// zurück zum Formular Radio -Tag // </summary> /// <param name = "html"> Erweiterungsmethode Beispiel </param> // <param name = "id"> id </param> // <param name = "name" <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, Zeichenfolge Name, Objektwert, Stringtext, String -LabelClass, bool iSCheck, bool isdisabled, Object OatTtributes) {Idictionary <String, Objekt> htmlattributes = null; if (oatTtributes! } else {htmlattributes = new Dictionary <String, Object> (); } return Inputextensions.CheckBox (HTML, InputType.radio, ID, Name, Wert, Text, Labelklasse, ISSCECK, ISDIENDED, HTMLATTRIBUTE); }}}

Checkboxextensions.cs

 Verwenden von System; Verwendung von System.Collectionss.generic; Verwendung von System.LinQ; Verwendung von System.Web; Verwendung von System.Web.mvc; Namespace BootStrapextensions {public statische Klasse Checkboxextensions {/// <summary> /////Strankitiert das Formular -Checkbox -Tag ///20 /// <param name = "htm. Name = "Name"> Name Attribut </param> /// <zurückgegeben> Rückgabe des CheckBox -Tags </zurückgibt> public static mvchtmlString -Kontrollkästchen (dieses BootStRAPHELPER HTML, Zeichenfolge Name) {Rückgabe -Kontrollkästchen (HTML, Null, Name, Null, Null, Null, Falsch, Falsch, Falsch, Null, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL, NULL); } /// <summary> /// Das Checkbox -Tag des Formulars zurückgeben /// </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id </param> // <param name = "name BootStRapraphelper HTML, String -ID, String -Name) {Rückgabe -Kontrollkästchen (HTML, ID, Name, NULL, NULL, NULL, FALSE, FALSE, NULL); } /// <summary> /// Das Checkbox -Tag des Formulars zurückgeben /// </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id <// Param> // <param name = "name" name "name ordnungssattribut </// <param. Tag </returns> public static mvchtmlString -Kontrollkästchen (dieses BootStRAPHELPER HTML, String -ID, String -Name, Bool ISHECK) {Rückgabe -Kontrollkästchen (HTML, ID, Name, Null, Null, Null, ISCHECK, FALSE, NULL); } /// <summary> /// Return Form Checkbox Tag // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id <//param> // <param name = "name" name "name" name "name </param> // <// <//). MVCHTMLString -Kontrollkästchen (dieses BootStRapraphelper HTML, String -ID, String -Name, Objektwert) {Rückgabe -Kontrollkästchen (HTML, ID, Name, Wert, NULL, NULL, FALSE, FALSE, NULL, NULL); } /// <summary> /// Return Form Checkbox Tag // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id </param> // <param name = "name" name "name"> name </caram> /// <// <param> sted " /// <zurückgegeben> Kontrollkästchen zurückgeben </retektiert> public static mvchtmlString -Kontrollkästchen (dieses BootStRAPHELPER HTML, String -ID, String -Name, Objektwert, String -Text) {Rückgabekontrolle (HTML, ID, Name, Wert, Text, Null, False, False, Null); } /// <summary> /// Return Form Checkbox Tag // </summary> /// <param name = "html"> Erweiterungsmethode Beispiel </param> // <param name = "id"> id </param> // <param name = "name" <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"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id </param> // <param name = "name"> name "name <// // // <// <params <param name = "text"> name = "labelClass"> Etikett -Tag -Stil </param> /// <zurückgegeben> Kontrollkästchen zurückgegeben. } /// <summary> /// Return Form Checkbox Tag // </summary> /// <param name = "html"> Erweiterungsmethode Beispiel </param> // <param name = "id"> id </param> // <param name = "name" <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, Wert, Text, Labelklasse, Isscheck, Falsch, NULL); } /// <summary> /// Return Form Checkbox Tag // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id </param> // <param name = "name"> name "name <// // // <// <params <param name = "labelClass"> Stil des Etiketts -Tags </param> /// <param name = "iSCECK"> Ist es ausgewählt. Bool ISCHECK, BOOL ISDISABED) {Rückgabekontrollkästchen (HTML, ID, Name, Wert, Text, Labelklasse, ISCHECK, ISDIENDED, NULL); } /// <summary> /// zurück zum Formular CheckBox Tag // </summary> /// <param name = "html"> Erweiterungsmethodeinstanz </param> // <param name = "id"> id <//param> // <param name = "name /// <param name = "labelClass"> Stil von Etikett </param> /// <param name = "labelClass"> Stil von Etikett </param> /// <param name = "iSceck"> ist es ausgewählt </param> // <param name = "isdisabled"> Disable </param> // <param name = "OATTTRIBUTS"> "> -Reting"> -Reting "> -Reting"> -Reting "> -Reting"> -Reting "> -Reting"> -Reting "> -Reting"> -Reting ">" OATTTRIBUTS ">"> "> ///// <param> actributes"> Tag </zurückgibt> public static mvchtmlString -Kontrollkästchen (dieses BootStRAPHELPER -HTML, String -ID, String -Name, Objektwert, String -Text, String -LabelClass, Bool ISCHECK, Bool isdisabled, Object OatTributes) {Idictionary <String, Objekt> htmlatTributes = null; if (oatTtributes! } else {htmlattributes = new Dictionary <String, Object> (); } return Inputextensions.CheckBox (HTML, InputType.CheckBox, ID, Name, Wert, Text, Labelklasse, ISSCECK, ISDIENDED, HTMLATTRIBUTE); }}}

Der Blogger stellt das Etikett und das Kontrollkästchen zusammen und übergibt den entsprechenden Etikettentext beim Aufrufen und verwendet es wie folgt:

 <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 ("Dere", "CC2", "CC2", "CC2", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ""and @Bootstrap.Checkbox ("Erer", "CC2", "CC", "Italian", "CheckBox-Inline", True, False, Null) </div>

Ergebnisse erhalten:

4. ButtoneXTensions

In Bezug auf den Button -Stil von Bootstrap finden Sie detaillierte Anweisungen auf der offiziellen Website von Bootstrap. Zu den gemeinsamen Tastentypen gehören beispielsweise normale Schaltflächen, Sendentasten und Zurücksetzen von Schaltflächen. Gemeinsame Knopfstile sind hauptsächlich wie folgt:

Zusätzlich wird die Größe der Schaltfläche auch klassifiziert:

Basierend darauf haben wir die Taste des Bootstrap -Typs wie folgt eingekapselt

ButtoneXTensions.cs

 Verwenden von System; Verwendung von System.Collectionss.generic; Verwendung von System.LinQ; Verwendung von System.Web; Verwendung von System.Web.mvc; Namespace BootStrapextensions {public statische Klasse buttoneXtensions {/// <summary> /// Das Textbootstastelelement zurückgeben, indem Sie den festgelegten HTML -Helper- und Formfeldname verwenden. /// </summary> /// <param name = "html"> Die nach dieser Methode erweiterte HTML -Helferinstanz. </param> /// <param name = "text"> text wird auf der schaltfläche angezeigt. </param> /// <param name = "icon"> icon CSS -Klasse. </param> /// <zurückgegeben> ein Bootstrap -Tastelelement. </returns> public static mvchtmlString -Schaltfläche (diese Bootsstraphelper HTML, Stringtext, String -Symbol) {Return -Schaltfläche (HTML, Text, Symbol, NULL); } /// <summary> /// Geben Sie das Taste des Text Bootsstraps mit dem angegebenen HTML -Helfer- und Formularfeldnamen zurück. /// </summary> /// <param name = "html"> Die nach dieser Methode erweiterte HTML -Helferinstanz. </param> /// <param name = "text"> text wird auf der schaltfläche angezeigt. </param> /// <param name = "icon"> icon CSS -Klasse. </param> /// <param name = "type"> Schalttyp. </param> /// <zurückgegeben> ein Bootstrap -Tastelelement. </zurückgibt> public static mvchtmlString -Schaltfläche (dieses Bootsstraphelper HTML, String -Text, String -Symbol, TasteType -Typ) {Return -Schaltfläche (HTML, Text, Symbol, Typ, NULL); } /// <summary> /// Geben Sie das Taste des Text Bootsstraps mit dem angegebenen HTML -Helfer- und Formularfeldnamen zurück. /// </summary> /// <param name = "html"> Die nach dieser Methode erweiterte HTML -Helferinstanz. </param> /// <param name = "text"> text wird auf der schaltfläche angezeigt. </param> /// <param name = "icon"> icon CSS -Klasse. </param> /// <param name = "htmlattributes"> Ein Objekt, das die HTML -Attribute enthält, die für das Element festgelegt werden sollen. </param> /// <zurückgegeben> ein Bootstrap -Tastelelement. </return> public static mvchtmlString -Schaltfläche (dieses Bootsstraphelper HTML, String -Text, String -Symbol, Objekt htmlattributes) {Returntaste (HTML, Text, Icon, ButtonType.button, htmlattributes); } /// <summary> /// Geben Sie das Taste des Text Bootsstraps mit dem angegebenen HTML -Helfer- und Formularfeldnamen zurück. /// </summary> /// <param name = "html"> Die nach dieser Methode erweiterte HTML -Helferinstanz. </param> /// <param name = "text"> text wird auf der schaltfläche angezeigt. </param> /// <param name = "icon"> icon CSS -Klasse. </param> /// <param name = "type"> Schalttyp. </param> /// <param name = "htmlattributes"> Ein Objekt, das die HTML -Attribute enthält, die für das Element festgelegt werden sollen. </param> /// <zurückgegeben> ein Bootstrap -Tastelelement. </return> public static mvchtmlString -Schaltfläche (dieses BootStRAPHELPER HTML, String -Text, String -Symbol, TasteType -Typ, Objekt htmlattributes) {Return -Schaltfläche (HTML, Text, Symbol, Typ, ButtonClass.Default, NULL); } /// <summary> /// Geben Sie das Taste des Text Bootsstraps mit dem angegebenen HTML -Helfer- und Formularfeldnamen zurück. /// </summary> /// <param name = "html"> Die nach dieser Methode erweiterte HTML -Helferinstanz. </param> /// <param name = "text"> text wird auf der schaltfläche angezeigt. </param> /// <param name = "icon"> icon CSS -Klasse. </param> /// <param name = "CSSCASS"> Tastenstil. </param> /// <zurückgegeben> ein Bootstrap -Tastelelement. </return> public static mvchtmlString -Schaltfläche (diese BootsstrapHelper HTML, Stringtext, String -Symbol, TasteClass CSSCASS) {Returntaste (HTML, Text, Icon, CSSCLASS, NULL); } /// <summary> /// Geben Sie das Taste des Text Bootsstraps mit dem angegebenen HTML -Helfer- und Formularfeldnamen zurück. /// </summary> /// <param name = "html"> Die nach dieser Methode erweiterte HTML -Helferinstanz. </param> /// <param name = "text"> text wird auf der schaltfläche angezeigt. </param> /// <param name = "icon"> icon CSS -Klasse. </param> /// <param name = "CSSCASS"> Tastenstil. </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> /// 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>

五、总结

以上封装了几个常用的表单组件，还剩下几个留在下篇吧。上文只是一个初始版本，很多地方可能并不完善，如果有什么不当或者可以优化的地方，还望斧正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。