Préface: L'article précédent présente des connaissances de base sur l'encapsulat de l'amorçage, et cet article continue d'être amélioré. Se référant à la méthode Htmlhelper, ce blogueur résumera d'abord certains composants de formulaire couramment utilisés. Il y a eu trop de discussions dans les commentaires précédents sur la signification de l'encapsulation de Bootstraphelper, et je ne veux pas trop m'inquiéter. En bref, tout a des gains et des pertes, cela dépend de la façon dont vous choisissez. Si vous êtes intéressé, vous pouvez jeter un œil. Si vous n'êtes pas intéressé, vous pouvez simplement dire une "blague" par le blogueur.
Catalogue d'article de la série Bootstraphelper
C # Série avancée - encapsuler son propre composant htmlhelper étape par étape: bootstraphelper
C # Série avancée - encapsule son propre composant htmlhelper étape par étape: bootstraphelper (ii)
C # Série avancée - encapsuler son propre composant HTMLHelper étape par étape: bootstraphelper (3: avec code source)
1. Ajouter un nouveau bootstraphelper générique
Dans l'article précédent, le blogueur n'a défini qu'un type ordinaire d'établissement pour hériter de Htmlhelper. Étant donné que l'on considère la nécessité d'utiliser Lamada pour définir des composants, le blogueur a ajouté un type générique d'amorçage. Donc, Bootstraphelper est devenu comme ça.
Utilisation du système; en utilisant System.Collections.Generic; Utilisation de System.Linq; Utilisation de System.Web; Utilisation de System.Web.Mvc; Utilisation de System.Web.Routing; Namespace BootstrapExtensions {public classe Bootstraphelper: System.Web.Mvc. conteneur. /// </summary> /// <param name = "ViewContext"> ViewContainer </ param> /// <param name = "ViewDatacontainer"> ViewDataContainer </AMAM> public bootstraphelper (ViewContext ViewContex La classe Bootstraphelper avec le contexte de vue spécifié, ViewDatacontainer et la collecte de routes. /// </summary> /// <param name = "ViewContext"> afficher le contexte </param> /// <param name = "ViewDatacontainer"> afficher le conteneur de données </ param> /// <paramn name = "RouteCollection"> Route Collection </ param> Public Bootstraphelper (ViewContex Base (ViewContext, ViewDatacontainer, RouteCollection) {}} /// <summary> /// indique que les contrôles bootstrap sont pris en charge dans des vues fortement typées. /// </summary> /// <typaram name = "tmodel"> </coptyparam> classe publique bootstraphelper <tmodel>: bootstraphelper {/// <summary> /// initialisez une nouvelle instance de la classe <! CDATA [net.web.mvc.bootsstraphelper <tmodel>]] /// </summary> /// <param name = "ViewContext"> Contexte de vue. </ param> /// <param name = "ViewDatacontainer"> Voir le conteneur de données. </ param> public bootstraphelper (ViewContext ViewContext, iViewDataContainer): Base (ViewContext, ViewDatacontainer) {} /// <summary> /// Initialize une nouvelle instance de la <! CDATA [net.web.mvc.bootstraphelPer <TModel>]> Classe en utilisant le contexte Spécifié View, View Data Conteger, et la collection d'itisité. /// </summary> /// <param name = "ViewContext"> Contexte de vue. </ param> /// <param name = "ViewDatacontainer"> Voir le conteneur de données. </ param> /// <param name = "RouteCollection"> Collection de route. </ param> public bootstraphelper (ViewContext ViewContext, iViewDatacontainer ViewDatacontainer, RouteCollection RouteCollection): Base (ViewContext, ViewDatacontainer, RouteCollection) {}}}Notre objet bootstrap est également défini comme un objet générique
Classe abstraite publique bootstrapwebViewPage <Tmodel>: System.web.mvc.webViewPage <TModel> {// Variables utilisées dans la page CSHTML Public Bootstraphelper <TModel> Bootstrap {get; ensemble; } /// <summary> /// Initialiser l'objet bootstrap /// </summary> public Override void IniTHELPERS () {base.inithelpers (); Bootstrap = new bootstraphelper <tmodel> (ViewContext, this); } public Override void execute () {// lance un nouveau NoTIMPLEDEDException (); }}La signification est d'utiliser @ bootstrap.TextBoxFor (x => x.name) dans la page cshtml. Ceci est introduit plus tard, allons-y une préfiguration ici.
2. TextBoxExtensions
Le code d'implémentation de TextBoxExtensions.cs est le suivant:
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> /// En utilisant le HTML spécifié le nom du champ d'assistance et de formulaire, renvoyez la boîte de texte TAG /// </summary> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "Name"> La valeur d'attribut de nom de l'élément de formulaire </ param> /// <retourne> Retour Type = 'Text' Tag </ Returns> Bootstraphelper html, nom de chaîne) {return inputextensions.helper (html, inputType.Text, null, name, null, false, null); } /// <summary> /// En utilisant le HTML spécifié le nom du champ d'aide et de formulaire, renvoyez l'étiquette de la zone de texte /// </ résumé> /// <param name = "HTML"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "Name"> La valeur d'attribut de nom de l'élément de formulaire </ paramd> type = 'text' balise </ returns> public static mvchtmlstring textbox (ce bootstraphelper html, string id, string name) {return inputextensions.helper (html, inputType.text, id, name, null, false, null); } /// <summary> /// Renvoie la balise de zone de texte en utilisant le nom de champ HTML et de formulaire HTML spécifié /// </ résumé> /// <Param Name = "HTML"> Extension Méthode Instance </ Param> /// <param name = "Name"> Nom d'élément unique Attribute Valeur </ param> /// <Param Name = "Value '> Form Element Value Tag </peepings> public static mvchtmlString TextBox (ce bootstraphelper html, chaîne id, nom de chaîne, valeur objet) {return inputextensions.helper (html, inputType.Text, id, name, valeur, false, null); } /// <summary> /// Renvoie la balise de zone de texte en utilisant le nom de champ HTML et de formulaire HTML spécifié /// </ résumé> /// <param name = "html"> Extension Méthode Instance </ Param> /// <param name = "Name"> Nom d'élément unique Attribut Valeur </ param> /// <param name = "Value"> Form Element Value </ Param> // <Param> name = "placeholder"> Valeur d'entrée de Bootstrap de Bootstrap </ param> /// <Awtourds> return entrée Type = 'Text' TAG </ RETOURS> public static mvchtmlString TextBox (This bootstraphelper html, string id, String Name, Object Value, String placeholder) {idictionary <string, objet> attributs = new Dictionary <String, objet> ();); if (! string.isnullorempty (placeholder)) {attributs.add ("placeholder", placeholder); } return inputextensions.helper (html, inputType.Text, id, nom, valeur, false, attributs); } /// <summary> /// Renvoie la balise de zone de texte en utilisant le nom de champ HTML HTML et le formulaire spécifié /// </ résumé> /// <param name = "HTML"> Instance de méthode étendue </ param> /// <param name = "Name"> Nom de l'élément unique name = "htmlattributes"> Attribut supplémentaire </ param> /// <retourne> return Type d'entrée = 'Text' tag </peeturns> public static mvchtmlstring textbox (ce bootstraphelper html, String id, String name, objet Valeur, objet htmlattributes) {iDictionary <String, objet> attributs = Bootstraphelper.anonymousobjecttohtmlattributes (htmlattributes); return inputextensions.helper (html, inputType.Text, id, nom, valeur, false, attributs); } /// <summary> /// En utilisant le HTML spécifié le nom du champ d'assistance et de formulaire, renvoyez l'étiquette de la zone de texte /// </ résumé> /// <param name = "HTML"> Instance de méthode d'extension </ param> /// <param name = "Name"> La valeur d'attribut de nom de l'élément de formulaire </ param> // </ <param name = "Value"> name = "placeholder"> La valeur d'entrée de l'invite de la zone de texte qui est livrée avec le bootstrap </ param> /// <param name = "htmlattributes"> Attributs supplémentaires </ param> /// <retourne> return d'entrée Type = 'TEXT' TAGLE </ RETOUR htmlattributes) {iDictionary <string, objet> attributs = bootstraphelper.anonymousObjectToHtmlattributes (htmlattributes); if (! string.isnullorempty (placeholder)) {attributs.add ("placeholder", placeholder); } return inputextensions.helper (html, inputType.Text, id, nom, valeur, false, attributs); } public static mvchtmlstring textboxfor <tmodel, tproperty> (ce bootstraphelper <tmodel> html, expression <func <tmodel, tproperty >> expression) {var modèle = (tmodel) html.viewdata.model; String PropertyName; valeur d'objet; Inputextensions.getValueByExpression <tmodel, tproperty> (expression, modèle, out PropertyName, out valeur); return inputextensions.helper (html, inputType.Text, propriétéName, propriétéName, valeur, false, null); }}}Inputextensions.cs
Utilisation du système; Utilisation de System.Collections.Generic; Utilisation de System.Linq; Utilisation de System.Linq.Expressions; Utilisation de System.Reflection; Utilisation de System.Web; Utilisation de System.Web.Mvc; Namespace Bootstrapextensions {/// <summary> /// Bootstrap Form Eleed Extension Method Collection /// </summary> Classée statique publique dans PuteXtensions Helper (bootstraphelper html, inputType InputType, String id, nom de chaîne, valeur de l'objet, bool ischeck, idictionary <string, objet> htmlattributes) {// définir le nom du balise tagBuilder tag = new tagBuilder ("input"); if (htmlattributes == null) {htmlattributes = new dictionary <string, object> (); } // Ajouter un nom if (! String.isnullorempty (name)) {htmlattributes.add ("name", name); } // ajouter id if (! String.isnullorempty (id)) {htmlattributes.add ("id", id); } // Ajouter une valeur if (valeur! = Null) {htmlattributes.add ("value", value.toString ()); } // Ajouter une entrée Type Tag.MergEattTribute ("Type", htmlhelper.getInutTypestring (InputType)); // Ajouter un style par défaut tag.addcssclass ("form-control"); Tag.MergEatTributes (htmlattributes); if (inputType == inputType.radio || inputType == inputType.Checkbox) {if (isCheck) tag.mergattribute ("vérifié", "vérifié"); } return mvchtmlString.create (tag.toString ()); } /// <summary> /// Renvoie le formulaire Radio TAG /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ Param> /// <param name = "valeur entrée </ param> // </ <Param =" text " <param name = "LabelClass"> Style de la balise d'étiquette </QUICI> /// <param name = "IsCheck"> Qu'il soit sélectionné </ param> /// <param name = "IsDisabled"> Disable </ param> /// <Param Name = "OATTRIBUTES"> Extra Tag </ Param> /// <</ RETOUR RADIO TAGE </Rorthing> Public STATIC MVCHTMTMTMTMSTRING (BOOTSTRAPHER (BOOTSTRAPHERS> PUBLIC STATIQUE MVCHTMTMTMTMLITS HTML, InputType InputType, String ID, nom de chaîne, valeur de l'objet, texte de chaîne, chaîne LabelClass, bool ischeck, bool isdisabled, idictionary <string, objet> htmlattributes) {// définir le nom du balise tagbuilder tag = new tagBuilder ("Label"); if (! string.isnullorempty (labelClass)) {htmlattributes.add ("class", labelClass); } System.Text.StringBuilder sbinput = new System.Text.StringBuilder (); var strinutType = htmlhelper.getInutTypestring (InputType); sbinput.append ("<input type = '"). append (strinutType) .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 ("handicap"); } sbinput.append ("/>"); if (! String.isnullOrEmpty (texte)) {sbinput.append (texte); } tag.innerhtml = sbinput.toString (); Tag.MergEatTributes (htmlattributes); return mvchtmlString.create (tag.toString ()); } // Obtenez la valeur actuelle de la propriété via une expression publique statique void getValueByExpression <tmodel, tproperty> (expression <func <tmodel, tproperty >> expression, TMODEL Model, out String PropertyName, outre objet Value) {memerexpression body = (memerexpression) expression.body; var Lamadaname = (Body.Member est propriétéInfo)? Body.Member.name: null; PropertyName = Lamadaname; valeur = 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 (modèle, null); }}}}1. Étant donné que toutes les zones de texte de la zone de texte basées sur Bootstrap dans le projet ont un style class = "form-control", donc lors de l'encapsulation de la zone de texte, il est directement placé dans l'étiquette. Bien sûr, si votre projet n'a pas besoin de l'utiliser, ou si vous avez personnalisé le style de zone de texte, vous pouvez également écrire votre propre style ici, afin que vous n'ayez pas besoin d'ajouter ces styles chaque fois que vous déclarez la zone de texte.
2. La méthode TextBoxFor () combine l'utilisation de Lamada pour générer des zones de texte. L'objet de type bootstraphelper générique déclaré ci-dessus est utile. Le nom d'attribut et la valeur d'attribut dans Lamada sont lus à travers la réflexion et les génériques. Une seule méthode est définie ici. Si d'autres surcharges sont nécessaires, vous pouvez ajouter vous-même de nouvelles méthodes.
3. Un autre problème a été rencontré lors de l'utilisation. Étant donné que Bootstraphelper hérite du type HTMLHELPER, certaines des méthodes d'extension HTMLHelper à l'origine encapsulées dans MVC peuvent également être appelées directement pour notre objet bootstrap. Par conséquent, de nombreuses surcharges peuvent être dupliquées et la surcharge correspondante ne peut être trouvée, telle que:
De cette façon, les erreurs suivantes sont facilement causées:
Ainsi, puisque le problème se pose, nous devons trouver un moyen de le résoudre. Une solution à laquelle le blogueur a pensé est: commentez l'espace de noms où l'objet HTML dans le web.config de la vue. Par exemple:
De cette façon, nous pouvons résoudre les problèmes ci-dessus et exécuter l'effet suivant:
Après avoir commenté l'espace de noms ci-dessus, nous ne pourrons plus utiliser les méthodes d'extension pertinentes de la variable HTML dans la page CSHTML. Si votre propre aide est suffisante, ce ne devrait pas être un gros problème sans les méthodes d'extension natives.
3. Radioextensions and CheckBoxExtensions
En ce qui concerne les composants de la radio et de la boîte à cocher dans Bootstrap, le blogueur a fait référence à la méthode d'écriture en http://v3.bootcss.com/css/ et a encapsulé comme suit:
Radioextensions.cs
Utilisation du système; Utilisation de System.Collections.Generic; Utilisation de System.Linq; Utilisation de System.Web; Utilisation de System.Web.mvc; Namespace BootstrapExtensions {Classe statique publique RadioExtensions {/// <résumé> /// Return Form Radio Tag /// </ Summary> /// <Param Name = "HTML"> Extension Méthode Instance </ Param> // <Param = "Nom"> Html "> Extension Méthode instance Instance </ Param> /// <Param =" Nom "> Html"> Extension Méthode Instance </ Param> /// <Nom = "NOM"> attribut </ param> /// <retourne> return radio balise </preminds> public static mvchtmlstring radio (ce bootstraphelper html, name de chaîne) {return radio (html, null, name, null, null, null, null, false, false, null); } /// <summary> /// Renvoie le formulaire Radio TAG /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "ID"> ID </ param> /// <param name = "Name"> nom d'attribut </ param> /// <retourne> Renvoie la bricolage de la radio </ptents> html, chaîne id, nom de chaîne) {return radio (html, id, nom, null, null, null, null, false, false, null); } /// <summary> /// Renvoie le formulaire Radio Tag /// </summary> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ param> /// <Param name = "IsCheck"> Il est sélectionné </ param> // <renvoie dans la radio = Radio MVCHTMLSTRING statique (ce bootstraphelper html, chaîne ID, nom de chaîne, bool ischeck) {return radio (html, id, nom, null, null, null, ischeck, false, null); } /// <summary> /// Renvoie le formulaire Radio Tag /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ param> /// <param name = "Valeur> STATIQUE </ param> /// <Retourds> Retourne la radio-étiquette </ Retourne> STATIQUE </ param> /// <RETOUR MVCHTMLSTRING Radio (Ce bootstraphelper html, chaîne ID, nom de chaîne, valeur d'objet) {return radio (html, id, nom, valeur, null, null, false, false, null); } /// <summary> /// return form form radio balise /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> attribut </ param> /// <param name = "valeur d'entrée </ param> // </ <param name =" text "> text </ //////////////// / <Ne retourne> return radio balise </preminds> public static mvchtmlstring radio (ce bootstraphelper html, chaîne id, nom de chaîne, valeur d'objet, texte de chaîne) {return radio (html, id, nom, valeur, texte, null, false, false, null); } /// <summary> /// return form radio balise /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> attribut </ param> /// <param name = "valeur entrée </ param> // </ <param </ param name = "isCheck"> Qu'il soit sélectionné </param> /// <retourds> return radio balise </peeturns> public static mvchtmlstring radio (ce bootstraphelper html, chaîne id, nom de chaîne, valeur d'objet, texte de chaîne, bool ischeck) {return radio (html, id, nom, valeur, text, null, ischeck, faux, null); } /// <summary> /// return form radio balise /// </ résumé> /// <param name = "html"> Exemple de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> attribut </ param> /// <param name = "valeur d'entrée </ param> // </ <param </ param name = "LabelClass"> Style de balise de label </param> /// <retourds> return radio balise </ returns> public static mvchtmlstring radio (ce bootstraphelper html, chaîne id, nom de chaîne, valeur d'objet, texte de chaîne, chaîne LabelClass) {return radio (html, id, nom, valeur, texte, labelclass, faux,, null); } /// <summary> /// return form radio balise /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> attribut </ param> /// <param name = "valeur entrée </ param> // </ <param </ param name = "text"> name = "LabelClass"> Style de la balise de label </ param> /// <param name = "isCheck"> Que ce soit à sélectionner </param> /// <retourne> return radio tag </peeping> public static mvchtmlString radio (ce bootstraphelper html, string id, string name, objet, texton, string LabelClclos nom, valeur, texte, labelClass, isCheck, false, null); } /// <summary> /// return form radio balise /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> attribut </ param> /// <param name = "valeur entrée </ param> // </ <param </ param name = "LabelClass"> Style de label </ param> /// <param name = "isCheck"> Est-ce qu'il est sélectionné </ param> /// <param name = "Isdisabled"> Disable </ param> /// <retourne> return radio balise </ returps> public static mvchtmlString radio (ce texte de chaîne Bootstraphel, ID de chaîne, String ID de chaîne bool isDisabled) {return radio (html, id, nom, valeur, texte, labelclass, isCheck, isDisabled, null); } /// <summary> /// retour à la radio formulaire ///// / sommaire> /// <param name = "html"> Exemple de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ param> /// <param name = "valeur entrée </ param> // </ <Param name =" Text " <param name = "LabelClass"> Style de Label </ Param> /// <param name = "ISCheck"> Si </ Param> /// <param name = "IsDisabled"> Disable </Aram> /// <Param Name = "OATTRIBUTES"> Extra Tag </Ar param> /// <fourts> RETOUR Radio Tag </ Returns> Public MvchTmlString Radio (This BootTaphel, STRACT MVCHTMLSTRAM id, nom de chaîne, valeur d'objet, texte de chaîne, chaîne LabelClass, bool isCheck, bool isdisabled, objet oattributes) {idictionary <string, objet> htmlattributes = null; if (OATTRIBUtes! = null) {htmlattributes = bootstraphelper.anonymousobjecttohtmlattributes (oattributes); } else {htmlattributes = new Dictionary <String, object> (); } return inputextensions.checkbox (html, inputtype.radio, id, nom, valeur, texte, labelClass, isCheck, isDisabled, htmlattributes); }}}CheckboxExtensions.cs
Utilisation du système; Utilisation de System.Collections.Generic; Utilisation de System.Linq; Utilisation de System.Web; Utilisation de System.Web.mvc; Namespace Bootstrapextensions {CHASSE STATIQUE PUBLIQUE STATIQUE TÉCHOCKEXTENSIONS {/// <summary> /// Renvoie le formulaire TAG TAG /// </ SUMMARY> /// <Name = "Html"> Instruction de méthode d'extension </ Param> attribut </ param> /// <returns> returns à cocher la boîte à cocher balise </ returns> public static mvchtmlString à cocher (ce bootstraphelper html, nom de chaîne) {return cochebox (html, null, name, null, null, null, false, false, null); } /// <summary> /// Renvoie le formulaire à cocher le formulaire balise /// </summary> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ param> /// <retourne> return la boîte à chèques </ revient> Bootstraphelper html, chaîne id, nom de chaîne) {return cocherbox (html, id, nom, null, null, null, false, false, null); } /// <summary> /// Renvoie le formulaire à cocher le formulaire balise /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ param> /// <Param name = "ischeck"> s'il est sélectionné TAG </peeturns> Public Static MVCHTMLSTRING Checkbox (This bootstraphelper html, String id, String Name, bool isCheck) {return checkbox (html, id, name, null, null, ischeck, false, null); } /// <summary> /// RETOUR FORME CHECKOX TAG /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ param> /// <param name = "Valeur d'entrée </ param> /// <returns> Return Check </ Retour Value </ STATIC STATIQUE </ Param> // <Returns> Return Check </ Retour Value </ STATIC STATIQUE </ Param> // <Returns> Return Check </ Retour Value </ STATIQUE STATIQUE </ Param> // <RetourneS> RETRIRD CHECK INDROX </ RETOURNACT INTRATIQU MVCHTMLSTRING CHOCKBOX (Ce bootstraphelper html, chaîne ID, nom de chaîne, valeur d'objet) {return Checkbox (html, id, nom, valeur, null, null, false, false, null); } /// <summary> /// return formulaire cocher la boîte à cocher balise /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ param> //// <param name = "valeur entrée </ param> // <<paramd name =" Text = / param >// >/ // // // // // Valeur d'entrée </ param> // <<paramy = "TEXTE <Aweaux> Return à cocher la boîte à cocher balise </premings> public static mvchtmlstring à cocher (ce bootstraphelper html, chaîne id, nom de chaîne, valeur d'objet, texte de chaîne) {return checkbox (html, id, nom, valeur, texte, null, false, false, false, null); } /// <summary> /// return formulaire cocher la boîte à cocher balise /// </ résumé> /// <param name = "html"> Exemple de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ Param> /// <param name = "valeur entrée </ param> // </ <Param name =" Text " <param name = "IsCheck"> Qu'il soit sélectionné </ param> /// <retourne> return la boîte à cocher TAG TAG </DROINTS> PUBLIC STATIQUE MVCHTMLSTRING Box (This Bootstraphelper HTML, String ID, String Name, Object Value, String Text, Bool isCheck) {retour à cocher la boîte à cock } /// <summary> /// return formulaire cocher la boîte à cocher balise /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ param> /// <param name = "valeur entrée </ param> // </ <Param =" Text = text </ Param >////////// / façon <param name = "Text"> name = "LabelClass"> Style de balise d'étiquette </ param> /// <retourne> return tokbox balise </peent returns> public static mvchtmlstring box box (this bootstraphelper html, string id, string name, objet valeur, chaîne text, labelclass) {return cocherbox (html, id, nom, valeur, texte, texte, labelclass), false, null); } /// <summary> /// return formulaire cocher la boîte à cocher balise /// </ résumé> /// <param name = "html"> Exemple de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ Param> /// <param name = "valeur entrée </ param> // </ <Param name =" Text " <param name = "LabelClass"> Style de Label </ Param> /// <param name = "ISCheck"> Que ce soit à cocher </ param> /// <Retourds> RETOUR DE LA BOIDE TAGE </ RETOURS> PUBLIC STATIQUE MVCHTMLSTRING Box (Ce Bootstraphelper Html, String ID, String Name, Valeur d'objet, Temps de chaîne, Name, Bool Ischeck) {Retour Checkbox (HTML, NAMECLOCK, BOOL ISCHECK) {Retour Checkbox (HTML, StringClos valeur, texte, labelClass, isCheck, false, null); } /// <summary> /// return formulaire cocher la boîte à cocher balise /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ param> /// <param name = "valeur entrée </ param> // </ <Param =" Text = text </ Param >////////// / façon <param name = "LabelClass"> Style de la balise d'étiquette </ param> /// <param name = "isCheck"> Est-ce qu'il est sélectionné </ param> /// <param name = "IsDisabled"> Disable </ param> /// <retourne> return tokbox tag </ returns> public static mvchtmlString coché, valeur de chaîne, text de la chaîne de traphe bool isCheck, bool isdisabled) {return checkbox (html, id, nom, valeur, texte, labelclass, isCheck, isDisabled, null); } /// <summary> /// Retour au formulaire cocher cocher balise /// </ résumé> /// <param name = "html"> Instance de méthode d'extension </ param> /// <param name = "id"> id </ param> /// <param name = "name"> nom d'attribut </ param> /// <param name = "valeur entrée </ param> // </ <Param =" text " <param name = "LabelClass"> Style de Label </ Param> /// <param name = "LabelClass"> Style de Label </ Param> /// <Param Name = "IsCheck"> est-il sélectionné </ param> /// <Param Name = "IsDisabled"> Disable </ Param> /// <Param Name = "OATTRIBUTS"> Tags supplémentaires </ param> /// <RetourneS> Retour Checkbox Tags "> Tags supplémentaires </amor MVCHTMLSTRING CHOCKBOX (Ce Bootstraphelper HTML, String ID, String Name, Object Value, String Text, String LabelClass, bool isCheck, bool isdisabled, objet oattributes) {idictionary <String, objet> htmlattributes = null; if (OATTRIBUtes! = null) {htmlattributes = bootstraphelper.anonymousobjecttohtmlattributes (oattributes); } else {htmlattributes = new Dictionary <String, object> (); } return inputextensions.checkbox (html, inputType.checkbox, id, nom, valeur, texte, labelClass, isCheck, isDisabled, htmlattributes); }}}Le blogueur met en place l'étiquette et la case, et passe le texte de l'étiquette correspondant lors de l'appel, et l'utilise comme suit:
<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" null) @ bootstrap.Radio ("dfer", "cc" Null) "cc", "UK", "radio-inline", true, false, null) </div> <div> @Bootstrap.CheckBox("fd", "cc2", "cc", "France", "checkbox-inline", true, false, null) @Bootstrap.CheckBox("dfer", "cc2", "cc", "UK", "checkbox-inline", true, false, null) @ Bootstrap.checkbox ("erer", "cc2", "cc", "italien", "checkbox-inline", true, false, null) </div>Résultats obtenus:
4. Buttonextensions
En ce qui concerne le style de bouton de bootstrap, il existe des instructions détaillées sur le site officiel de Bootstrap. Par exemple, les types de boutons communs comprennent des boutons ordinaires, des boutons de soumission et des boutons de réinitialisation; Les styles de bouton communs sont principalement les suivants:
De plus, la taille du bouton est également classée:
Sur la base de cela, nous avons encapsulé le bouton de type bootstrap comme suit
Buttonextensions.cs
Utilisation du système; Utilisation de System.Collections.Generic; Utilisation de System.Linq; Utilisation de System.Web; Utilisation de System.Web.Mvc; Namespace BootstrapExions {public Static Class ButtonExtensions {/// <summary> /// Renvoie l'élément de bouton Texte Bootstrap en utilisant le nom de champ HTML et de forme HTML spécifié. /// </summary> /// <param name = "html"> L'instance d'assistance HTML étendue par cette méthode. </ param> /// <param name = "Text"> Texte affiché sur le bouton. </ param> /// <param name = "icon"> Classe ICON CSS. </ param> /// <retourne> un élément de bouton bootstrap. </peeturns> Bouton MVCHTMLSTRING publique public (ce Bootstraphelper HTML, Text de chaîne, Icône String) {Button Return (html, texte, icône, null); } /// <summary> /// Renvoie l'élément de bouton de bootstrap de texte en utilisant l'assistance HTML spécifiée et le nom de champ de formulaire. /// </summary> /// <param name = "html"> L'instance d'assistance HTML étendue par cette méthode. </ param> /// <param name = "Text"> Texte affiché sur le bouton. </ param> /// <param name = "icon"> Classe ICON CSS. </ param> /// <param name = "type"> Type de bouton. </ param> /// <retourne> un élément de bouton bootstrap. </ returns> Bouton MVCHTMLString statique publique (ce bootstraphelper html, texte de chaîne, icône de chaîne, type ButtonType) {Button return (html, texte, icône, type, null); } /// <summary> /// Renvoie l'élément de bouton de bootstrap de texte en utilisant l'assistance HTML spécifiée et le nom de champ de formulaire. /// </summary> /// <param name = "html"> L'instance d'assistance HTML étendue par cette méthode. </ param> /// <param name = "Text"> Texte affiché sur le bouton. </ param> /// <param name = "icon"> Classe ICON CSS. </ param> /// <param name = "htmlattributes"> Un objet contenant les attributs HTML à définir pour l'élément. </ param> /// <retourne> un élément de bouton bootstrap. </ returns> Bouton MVCHTMLString statique public (Cet bootstraphelper html, texte de chaîne, icône de chaîne, objet htmlattributes) {Button return (html, texte, icon, boutontype.button, htmlattributes); } /// <summary> /// Renvoie l'élément de bouton de bootstrap de texte en utilisant l'assistance HTML spécifiée et le nom de champ de formulaire. /// </summary> /// <param name = "html"> L'instance d'assistance HTML étendue par cette méthode. </ param> /// <param name = "Text"> Texte affiché sur le bouton. </ param> /// <param name = "icon"> Classe ICON CSS. </ param> /// <param name = "type"> Type de bouton. </ param> /// <param name = "htmlattributes"> Un objet contenant les attributs HTML à définir pour l'élément. </ param> /// <retourne> un élément de bouton bootstrap. </peeturns> Bouton MVCHTMLString statique public (Cet bootstraphelper html, texte de chaîne, icône de chaîne, type ButtonType, objet htmlattributes) {Button return (html, texte, icône, type, Buttonclass.default, null); } /// <summary> /// Renvoie l'élément de bouton de bootstrap de texte en utilisant l'assistance HTML spécifiée et le nom de champ de formulaire. /// </summary> /// <param name = "html"> L'instance d'assistance HTML étendue par cette méthode. </ param> /// <param name = "Text"> Texte affiché sur le bouton. </ param> /// <param name = "icon"> Classe ICON CSS. </ param> /// <param name = "CSSClass"> Style de bouton. </ param> /// <retourne> un élément de bouton bootstrap. </peeturns> Bouton MVCHTMLSTRING publique public (ce Bootstraphelper HTML, Texte de chaîne, Icône String, ButtonClass CSSClass) {Button Return (html, texte, icône, CSSClass, NULL); } /// <summary> /// Renvoie l'élément de bouton de bootstrap de texte en utilisant l'assistance HTML spécifiée et le nom de champ de formulaire. /// </summary> /// <param name = "html"> L'instance d'assistance HTML étendue par cette méthode. </ param> /// <param name = "Text"> Texte affiché sur le bouton. </ param> /// <param name = "icon"> Classe ICON CSS. </ param> /// <param name = "CSSClass"> Style de bouton. </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>五、总结
以上封装了几个常用的表单组件，还剩下几个留在下篇吧。上文只是一个初始版本，很多地方可能并不完善，如果有什么不当或者可以优化的地方，还望斧正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。