Prefácio: O artigo anterior apresenta algum conhecimento básico sobre o encapsulação do bootstraphelper, e este artigo continua sendo aprimorado. Referindo -se ao método HTMLHelper, este blogueiro encapsulará primeiro alguns componentes de formulários comumente usados. Houve muita discussão nos comentários anteriores sobre qual é o significado do encapsulamento do bootstraphelper, e não quero me preocupar muito com isso. Em suma, tudo tem ganhos e perdas, depende de como você escolhe. Se você estiver interessado, pode dar uma olhada. Se você não estiver interessado, pode apenas dizer uma "piada" do blogueiro.
Catálogo de artigos da série BootStraphelper
C# Série avançada - encapsular seu próprio componente htmlhelper passo a passo: bootstraphelper
C# Série avançada - encapsula seu próprio componente htmlhelper passo a passo: bootstraphelper (ii)
C# Série avançada - encapsular seu próprio componente htmlhelper passo a passo: bootstraphelper (3: com código -fonte)
1. Adicione um novo bootstraphelper genérico
No artigo anterior, o blogueiro definiu apenas um tipo comum de bootstraphelper para herdar htmlhelper. Desde que considera a necessidade de usar o Lamada para definir componentes, o blogueiro adicionou um tipo genérico de bootstraphelper. Então Bootstraphelper se tornou assim.
usando o sistema; usando o sistema.Collection.Genic; usando o System.Linq; usando o System.web; usando o System.web.mvc; usando o System.web.Routing; namespace bootstrapextensions {public class BootStraphelper: System.web.mvc.htmlHelper {////////0tSofty SOPTSTHELY> SSUST.Web.mvc.htmlHelper {///////0tSaflary> spec.web.mvc.htmlHelper) e visualize o contêiner de dados. /// </summary> /// <param name="viewContext">ViewContainer</param> /// <param name="viewDataContainer">ViewDataContainer</param> public BootstrapHelper(ViewContext viewContext, IViewDataContainer) : base(viewContext, viewDataContainer) { } /// <summary> /// Initialize a Nova instância da classe Bootstraphelper com o contexto de visualização especificado, o ViewDatacontainer e o Route Collection. /// </summary> /// <param name = "ViewContext"> View Context </param> /// <param name = "ViewDatacontainer"> View Data Container </amam> /// <param name = "Routecollection"> Route Collection </param> public bootstrapHelper (ViewContetCoToToTeCollection "> IVEWLO Base (ViewContext, ViewDatacontainer, RouteCollection) {}} /// <summary> /// indica que os controles de bootstrap são suportados em visualizações fortemente digitadas. /// </summary> /// <typeParam name = "tmodel"> </typeeParam> public classe bootstraphelper <Tmodel>: bootstraphelper {/// <summary> ///ijuting uma nova instância do <! [CDATA [net.web.mvc.BoTSTHELPER <tm. /// </summary> /// <param name = "ViewContext"> View Context. </param> /// <param name = "ViewDatacontainer"> Exibir contêiner de dados. </param> public bootstraphelper (ViewContext ViewContext, IViewDatacontainer): Base (ViewContext, ViewDatacontainer) {} /// <summary> // Initialize uma nova instância do <! [Cdata [net.web.mvc.bootsstraphelper <tmodel>] /// </summary> /// <param name = "ViewContext"> View Context. </param> /// <param name = "ViewDatacontainer"> Exibir contêiner de dados. </param> /// <param name = "routeCollection"> coleção de rota. </param> public bootstraphelper (ViewContext ViewContext, IViewDACAContainer ViewDatAcontainer, RouteCollection RouteCollection): Base (ViewContext, ViewDatacontainer, RouteCollection) {}}}Nosso objeto de bootstrap também é definido como um objeto genérico
Classe de abstração pública bootstrapwebviewPage <Tmodel>: System.Web.MVC.WebViewPage <TModel> {// Variáveis usadas na página CSHTML Public Public Bootstraphelper <Tmodel> bootstrap {get; definir; } /// <summary> /// inicialize o objeto de bootstrap /// </summary> substituir public void inithelPers () {base.inithelpers (); Bootstrap = new bootstraphelper <Tmodel> (ViewContext, este); } public substituir void Execute () {// lança new notimplementEdException (); }}O significado disso é usar @bootstrap.textboxfor (x => x.name) na página cshtml. Isso é introduzido mais tarde, vamos colocar um prenúncio aqui.
2. TextBoxExtensions
O código de implementação do TextBoxExtensions.cs é o seguinte:
usando o sistema; usando o System.Collection.Genic; Usando System.Linq; Usando System.Linq.Expressions; Usando System.Reflection; Usando System.web; Usando System.web.mvc; Usando System.web.mvc.html; Namespace bootstrapExtsions {//1xoxxoxxox. <summary> /// Usando o html especificado O nome do campo Helper e Formulário, retorne a tag da caixa de texto /// </summary> /// <param name = "html"> Método de extensão Instância </param> // <param name = "name"> o nome do atributo do formulário 'elemento </param> // <rusts> return inpster in type typen typ = typen' tignet 'tag' e tag TextBox (este bootstraphelper html, nome da string) {return inputextensions.helper (html, inputtype.text, null, nome, nulo, falso, nulo); } /// <summary> /// Usando o html especificado o nome do campo Helper e Formulário, retorne a etiqueta da caixa de texto /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id idan> // param // param <param>"> type = 'text' tag </returns> public static mvchtmlstring textbox (este bootstraphelper html, string id, nome da string) {return inputextensions.helper (html, inputType.text, id, nome, null, false, null); } /// <summary> /// Retorna a tag da caixa de texto usando o auxiliar html e formulário especificado Nome do campo /// </summary> /// <param name = "html"> Método de extensão Instância </param> /// <param name = "name"> single element valupit </am param> // param> ////<param name = "name"> single element value </param> // <param> nome = "" " tag </lacks> public estático mvchtmlstring textbox (este bootstraphelper html, string id, nome da string, valor do objeto) {return inputextensions.helper (html, inputType.text, name, value, false, null); } /// <summary> /// Retorna a tag da caixa de texto usando o auxiliar HTML e formulário de campo especificado Nome /// </summary> /// <param name = "html"> Método de extensão Instância </param> /// <param name = "name"> single element valor </amam> // param> " name = "espaço reservado"> Valor de entrada imediata do bootstrap </am Param> /// <lorpns> retorna a entrada de entrada = 'text' tag </returns> public static mvchtmlstring textbox (este bootstraphelper html, string id, nome da string, valor do objeto, string straceholder) {idictiary <, string; if (! string.isnullorEmpty (espaço reservado)) {attritutes.add ("espaço reservado", espaço reservado); } retornar inputextensions.helper (html, inputtype.text, id, nome, valor, false, atributos); } /// <summary> /// Retorna a tag da caixa de texto usando o nome do campo HTML especificado e o nome do campo /// </summary> /// <param name = "html"> Instância do método estendido </amam> /// <param name = "name"> single element valuition </param // param> name = ""> name "> name"> single element valor </param> /////080) name = "htmlattributes"> atributo extra </param> /// <lorpns> retorna entrada de entrada = 'text' tag </returns> public static mvchtmlstring textbox (este bootstraphelper html, string id, nome do objeto, objeto htmlatrributes) {idhictionary <ctrics,, objeto, nome do objeto, objeto htmlatrributes) {idhictionary, Bootstraphelper.anonymousObjectToHtMlattributes (htmlattributes); return inputextensions.helper (html, inputtype.text, id, nome, valor, false, atributos); } /// <summary> /// Usando o html especificado o nome do campo Helper e Formulário, retorne a etiqueta da caixa de texto /// </summary> /// <param name = "html"> Extensão da instância </param> //// <param name = "name"> o valor do nome do formulário do formulário <// param> /////amul> /// <param name = ""> o valor do nome do formulário <// param> /////ampo 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> atributes = bootstraphelper.anonymousObjectToHtMlattributes (htmlattributes); if (! string.isnullorEmpty (espaço reservado)) {attritutes.add ("espaço reservado", espaço reservado); } retornar inputextensions.helper (html, inputtype.text, id, nome, valor, false, atributos); } public estático mvchtmlString TextBoxfor <tmodel, tproperty> (este bootstraphelper <Tmodel> html, expressão <func <tmodel, tproperty >> expressão) {var modelo = (tmodel) html.ViewData.model; String PropertyName; valor do objeto; Inputextensions.getValuEByExpression <tmodel, tProperty> (Expressão, modelo, out PropertyName, OUT Valor); return inputextensions.helper (html, inputtype.text, propriedadeName, propriedadeName, valor, false, nulo); }}}Inputextensions.cs
using System;using System.Collections.Generic;using System.Linq;using System.Linq.Expressions;using System.Reflection;using System.Web;using System.Web.Mvc;namespace BootstrapExtensions{ /// <summary> /// Bootstrap form element Input extension method collection/// </summary> public static class InputExtensions { public static MVCHTMLSTRING HINPER (Bootstraphelper HTML, InputType inputType, ID da sequência, nome da sequência, valor do objeto, bool ischeck, idicticário <string, object> htmlattributes) {// define o nome do tagbuilder = newbuilder ("" Input); if (htmlattributes == null) {htmlattributes = novo dicionário <string, object> (); } // Adicione o nome if (! String.isnullorEmpty (nome)) {htmlattributes.add ("nome", nome); } // Adicione ID if (! String.isnullorEmpty (id)) {htmlattributes.add ("id", id); } // Adicione valor if (value! = Null) {htmlattributes.add ("value", value.toString ()); } // Adicione o tipo de entrada tag.MerGeattribute ("TIPO", htmlHelper.getInputTyPestring (inputType)); // Adicionar tag de estilo padrão.addcssclass ("form-control"); tag.MergeAtTributes (htmlattributes); if (inputType == inputType.radio || inputType == inputType.checkBox) {if (isCheck) tag.MerGeattribute ("verificado", "verificado"); } retornar mvchtmlstring.create (tag.toString ()); } /// <summary> /// retorna a tag de rádio do formulário /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> // <param name = "name"> name "> attributo </param> // <nome do time =" /// <param name = "LabelClass"> estilo da etiqueta tag </am Param> /// <param name = "isCheck"> se ele é selecionado </am Param> /// <param name = "isdisabled"> desabille </amam> /// param name = "Oattributes"> tag extra </param> // <retornar Return TAGG <Br retornm> Caixa de seleção (bootstraphelper html, inputType inputType, string id, nome da string, valor do objeto, texto string, string LabelClass, bool ischeck, bool isdisabled, idictioy <string, object> htmlattributes) {// define o nome do nome tagbuilder tag = novo tagbuilder ("" if (! string.isnullorEmpty (LabelClass)) {htmlattributes.add ("class", LabelClass); } System.text.stringbuilder sbinput = new system.text.stringbuilder (); var strinputType = htmlHelper.getInputTyPestring (inputType); sbinput.append ("<type de entrada = '"). Append (strInputType) .append ("'"); if (! string.isnullorEmpty (nome)) {sbinput.append ("name = '") .append (nome) .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 ("desativado"); } sbinput.append (" />"); if (! string.isnullorEmpty (text)) {sbinput.append (text); } tag.innerhtml = sbinput.tostring (); tag.MergeAtTributes (htmlattributes); retornar mvchtmlstring.create (tag.toString ()); } // Obtenha o valor da propriedade atual por meio de uma expressão public estática void getValuEByExpression <tmodel, tProperty> (Expressão <func <tmodel, tproperty >> expressão, modelo tmodel, out string propriedadeName, out valor do objeto) {memberexpression body = (memberexpression) expression.bodybody; var lamadaname = (Body.Member é 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, nulo); }}}}1. Considerando que todas as caixas de texto da caixa de texto baseadas em inicialização no projeto têm um estilo de classificação de class = "formulário-controle"; portanto, ao encapsular a caixa de texto, ele é colocado diretamente no rótulo. Obviamente, se o seu projeto não precisar usá -lo, ou você tiver personalizado o estilo da caixa de texto, também pode escrever seu próprio estilo aqui, para não precisar adicionar esses estilos toda vez que declarar a caixa de texto.
2. O método textBoxfor () combina o uso do Lamada para gerar caixas de texto. O objeto do tipo genérico de bootstraphelper declarado acima é útil. O nome do atributo e o valor do atributo em Lamada são lidos por meio de reflexão e genéricos. Apenas um método é definido aqui. Se outras sobrecargas forem necessárias, você poderá adicionar novos métodos.
3. Outro problema foi encontrado ao usá -lo. Como o bootstraphelper herda o tipo Htmlhelper, alguns dos métodos de extensão HTMLHelper originalmente encapsulados no MVC também podem ser chamados diretamente para nosso objeto de bootstrap. Portanto, muitas sobrecargas podem ser duplicadas e a sobrecarga correspondente não pode ser encontrada, como:
Dessa forma, os seguintes erros são causados facilmente:
Portanto, como o problema surge, precisamos encontrar uma maneira de resolvê -lo. Uma solução que o blogueiro pensou é: comente o espaço para nome em que o objeto HTML no web.config da visualização. por exemplo:
Dessa forma, podemos resolver os problemas acima e executar o seguinte efeito:
Depois de comentar o espaço para nome acima, não poderemos mais usar os métodos de extensão relevantes da variável HTML na página CSHTML. Se seu próprio ajudante for suficiente, não deve ser um grande problema sem os métodos de extensão nativa.
3. Extensões de radiografia e caixa de verificação
Em relação aos componentes de rádio e caixa de seleção no Bootstrap, o blogueiro se referiu ao método de escrita em http://v3.bootcss.com/css/ e encapsulou da seguinte forma:
Radioxtensions.cs
Usando o sistema; usando o System.Collection.Genic; usando o System.Linq; usando o System.web; usando o System.web.mvc; namespace bootstrapextensions {public static class Radioxtensions {/// <summary> /// Retornar o Radio Radio Tag ////sumery> /////umen Nome = "Html>" HTML> atributo </param> /// <lorpns> Retornar tag de rádio </returns> public static mvchtmlString Radio (este bootstraphelper html, nome da string) {retornar rádio (html, nulo, nome, nulo, nulo, nulo, nulo, falso, false, nulo); } /// <summary> /// retorna a tag de rádio do formulário /// </summary> /// <param name = "html"> Instância do método de extensão </am param> /// <param name = "id"> id </paramch> // <param name = "name"> name attribute </param> // <rortS> retornar a tag </lorpTring </"name"> name "> name </param> // <recuperação> retornar a tag </lorpT) html, string id, nome da string) {retorna rádio (html, id, nome, nulo, nulo, nulo, nulo, falso, falso, nulo); } /// <summary> /// retorna a tag de rádio do formulário /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> // <param name = "name"> name attition </param> // <param name = " tag </leturns> public static mvchtmlSting Radio (este bootstraphelper html, string id, nome da string, bool ischeck) {retornar rádio (html, id, nome, nulo, nulo, nulo, ischeck, falso, nulo); } /// <summary> /// Retornar a tag de rádio do formulário /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </am param> // <param name = "name"> name "> attributo </param> // <param> MVCHTMLSTRING RADIO (Este bootstraphelper html, string ID, nome da string, valor do objeto) {retornar rádio (html, id, nome, valor, nulo, nulo, falso, falso, nulo); } /// <summary> /// Retornar o formulário de rádio Tag /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> // <param name = "name"> name att att </tribui> // param = "TEMPTE =" "> input <amput =" name "> name> <lorpns> Retornar tag de rádio </returns> public static mvchtmlstring Radio (este bootstraphelper html, string id, nome da string, valor do objeto, text de string) {retornar rádio (html, id, nome, valor, texto, nulo, nulo, false, false, null); } /// <summary> /// Retornar o formulário de rádio Tag /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> // <param name = "name"> name att att </tribui> // param = "TEMPTE =" "> input <amput =" name "> name> <param name = "ischeck"> se ele foi selecionado </am> /// <lorpns> retornar tag de rádio </returns> public static mvchtmlstring Radio (este bootstraphelper html, string id) norma, names, text, text, text, textheck) {return radio (html, nome, name, valor, valor, valor, text, names; } /// <summary> /// Retornar a tag de radio de formulário /// </summary> /// <param name = "html"> método de extensão Exemplo </am Param> /// <param name = "id"> id </param> // <param name = "name"> name attrition <// param <param) // <param name = "name"> name> <param name="labelClass">Label tag style</param> /// <returns>Return radio tag</returns> public static MvcHtmlString Radio(this BootstrapHelper html, string id, string name, object value, string text, string labelClass) { return Radio(html, id, name, value, text, labelClass, false, false, null); } /// <summary> /// Retornar o formulário de rádio Tag /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> // <param name = "name"> name att att </tribui> // param = "TEMPTE =" "> input <amput =" name "> name> <param name = "text"> name = "LabelClass"> estilo da etiqueta tag </am param> /// <param name = "isCheck"> se deve selecionar </am param> /// <lorpns> retornar tag de rádio </returns> public static mvchtmlstring radio (this bootstrafelper html, string id) strad) id, nome, valor, texto, gravador, ischeck, falso, nulo); } /// <summary> /// Retornar o formulário de rádio Tag /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> // <param name = "name"> name att att </tribui> // param = "TEMPTE =" "> input <amput =" 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 ischeck, bool isdisabled) {return Radio (html, id, nome, valor, texto, gravador, ischeck, isdisabled, null); } /// <summary> /// retorna para formar tag de rádio /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> // <param name = "name"> name "> attribute </param> // <nome do time =" /// <param name = "LabelClass"> estilo de etiqueta </param> /// <param name = "ischeck"> se </param> /// <param name = "isDisabled"> desabille </amm> // <param name = "oattributes"> tag extra </param> // <rortS> retornar tag de rádio </returns> html, string id, nome da string, valor do objeto, texto da string, string LabelClass, bool ischeck, bool isdisabled, objeto oattributes) {idictionary <string, object> htmlattributes = null; if (Oattributes! = null) {htmlattributes = bootstraphelper.anonymousObjectToHtmlattributes (Oattributes); } else {htmlattributes = novo dicionário <string, object> (); } retornar inputextensions.checkBox (html, inputtype.radio, id, nome, valor, texto, LabelClass, ischeck, isdisabled, htmlattributes); }}}Checkboxextensions.cs
Usando o sistema; usando o System.Collection.Genic; usando o System.Linq; usando o System.web; usando o System.web.mvc; namespace bootstrapextensions {public static CheckboxExtensions {/// <Param Summary> /// Retorna a caixa de seleção Tag ////urty////0ty/sement> /// Retorna a caixa de seleção Tag ////sumery> ////0ty> "Hangml" Hangml ")") ///04///0ténsenstl) name = "Nome"> Nome atributo </am Param> /// <lorpts> Retorna a tag de caixa de seleção </returns> public static mvchtmlstring caixa de seleção (este bootstraphelper html, nome da string) {retorna caixa de seleção (html, nulo, nome, nulo, nulo, nulo, nulo, falso, falso, null); } /// <summary> /// Retornar a tag de caixa de seleção Formulário /// </summary> /// <param name = "html"> Método de extensão Instância </param> /// <param name = "id"> id </param> /// <param name = "name"> name "> name </param> // // </param> return tag <bretMbox <br retorn tag </" name "> name"> name </param> // // <lorts> Bootstraphelper html, string id, nome da string) {retorna caixa de seleção (html, id, nome, nulo, nulo, nulo, falso, falso, nulo); } /// <summary> /// retorna a tag de caixa de seleção do formulário /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> /// param <nome "name"> name </param> ////am param> ///scheck> name = "name"> name </param> ////am Param> " tag </lortns> public static mvchtmlstring caixa de seleção (este bootstraphelper html, string id, nome da string, bool ischeck) {retorna caixa de seleção (html, id, nome, nulo, nulo, ischeck, falso, nulo); } /// <summary> /// Retornar Tag da caixa de seleção Formulário /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id <lamel> /// param name = "name"> name "> attributo </param> // <param> MVCHTMLSTRING Caixa de seleção (este bootstraphelper html, string ID, nome da string, valor do objeto) {Retornar caixa de seleção (html, id, nome, valor, nulo, nulo, false, false, nulo); } /// <summary> /// Retornar Tag da caixa de seleção Formulário /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </am param> /// <nome do nome "Nome" Nome "> Nome <//////am param =///name" no nome "> name"> name "> //m param <param> /// <Trackns> Retornar a tag de caixa de seleção </returns> public estática mvchtmlstring caixa de seleção (este bootstraphelper html, string id, nome da string, valor do objeto, text de string) {retorna caixa de seleção (html, id, nome, valor, texto, nulo, false, nulo); } /// <summary> /// Retornar Tag da caixa de seleção Formulário /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> // <param name = "name"> name "> attributo </param> // <nome do time =" /// <param name = "ischeck"> se ele é selecionado </am Param> /// <lorpns> retorna a tag de caixa de seleção </returns> public estático mvchtmlstring caixa de seleção (esta caixa de bootstraphelper html, string id, nome da sequência, valor do objeto, text de string, bootsull) {caixa de seleção de retorno (html idml, string, nome do objeto, text de string, bootsll) {caixa de seleção de retorno (html } /// <summary> /// Retornar Tag da caixa de seleção Formulário /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> // <param name = "name"> name "> attributo </param> // <nome do time =" /// <param name = "text"> name = "LabelClass"> etiqueta de etiqueta </am param> /// <lorpns> Retornar tag de caixa de seleção </returns> public estático mvchtmlstring caixa de seleção (time de bootstraphcls html, nome de string, nome da string, text, textclass) {caixa de seleção de retorno (htsl, hml, string, nome do objeto, nome da string, textclass) {Return Check (hml, hml, string, nome do objeto, nome da string, textclass) {recuperação de retorno (ht (ht } /// <summary> /// Retornar a tag da caixa de seleção Formulário /// </summary> /// <param name = "html"> método de extensão Exemplo </am Param> /// <param name = "id"> id </param> // <param name = "name"> name Attribute </param> // <nome = ""> "> input <amput name =" name "> name>/param> // <nome da time" /// <param name = "LabelClass"> estilo de etiqueta </param> /// <param name = "ischeck"> se deseja verificar </am Param> /// <lorpns> retornar tag de caixa Nome, valor, texto, LabelClass, Ischeck, False, NULL); } /// <summary> /// Retornar Tag da caixa de seleção Formulário /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> // <param name = "name"> name "> attributo </param> // <nome do time =" /// <param name = "LabelClass"> estilo da etiqueta tag </param> /// <param name = "ischeck"> é selecionado </am param> /// <param name = "isDisabled"> desabille </am param> // <retorna> retornar a caixa de seleção </returns> public static mvatic mVchtmlTringBoTHBOTPHOTPHEL (esta caixa de seleção de retorno </returns> LabelClass, Bool Ischeck, Bool IsDisabled) {Return Checkbox (HTML, ID, Nome, Valor, Texto, LabelClass, Ischeck, IsDisabled, NULL); } /// <summary> /// retorna para formar a tag de caixa de seleção /// </summary> /// <param name = "html"> Método de extensão Instância </param> /// <param name = "id"> id </am param> /// param <nome "name"> name> name </param> // param <mame> // // <param name = "name"> name </param> ///mame = ""> /// <param name = "LabelClass"> Style of Label </param> /// <param name = "LabelClass"> Style of Label </param> /// <param name = "isCheck"> é selecionado </amam> // <param name = "isdisabled"> desabille </param> // <param>/"OTRIBTUTUTES" Public Static MVCHTMLSTRING Caixa de seleção (este bootstraphelper HTML, ID da sequência, nome da string, valor do objeto, texto da string, String LabelClass, bool ischeck, bool isdisabled, object weattributes) {idictioy <string, objeto> htmlattributes = null; if (Oattributes! = null) {htmlattributes = bootstraphelper.anonymousObjectToHtmlattributes (Oattributes); } else {htmlattributes = novo dicionário <string, object> (); } retornar inputextensions.checkBox (html, inputtype.checkbox, id, nome, valor, texto, LabelClass, ischeck, isdisabled, htmlattributes); }}}O blogueiro monta a etiqueta e a caixa de seleção e passa o texto do rótulo correspondente ao ligar e o usa da seguinte maneira:
<div> @Bootstrap.Radio("aa", "bb", "cc", "dd", null, true, false, null) </div> <div> @Bootstrap.Radio("fd", "cc", "cc", "CCC", "France", "radio-inline", true, false, null) @Bootstrap.Radio("dfer", "cc", "cc", "UK", "radio-inline", true, false, null) </div> <div> @Bootstrap.CheckBox("fd", "cc2", "cc", "France", "checkbox-inline", true, false, null) @Bootstrap.CheckBox("dfer", "cc2", "cc", "UK", "checkbox-inline", true, Falso, null) @bootstrap.checkbox ("ERER", "CC2", "CC", "Italian", "Check-in-inline", verdadeiro, falso, nulo) </div>Resultados obtidos:
4. ButtOnextensions
Em relação ao estilo de botão de bootstrap, existem instruções detalhadas no site oficial da Bootstrap. Por exemplo, os tipos de botões comuns incluem botões comuns, botões de envio e botões de redefinição; Os estilos comuns dos botões são principalmente os seguintes:
Além disso, o tamanho do botão também é classificado:
Com base nisso, encapsulamos o botão do tipo de bootstrap, como segue
ButtOnextensions.cs
Usando o sistema; usando o System.Collection.Genic; usando o System.Linq; usando o System.Web; usando o System.Web.MVC; NameSpace BootStrapextensions {public static ButtOnextensions {/// <summary> //// Retornar o elemento do botão de texto de texto usando o campo HTML HTML especificado. /// </summary> /// <param name = "html"> a instância do auxiliar html estendida por esse método. </param> /// <param name = "text"> texto exibido no botão. </param> /// <param name = "ícone"> Classe CSS do ícone. </param> /// <Retorna> Um elemento de botão de bootstrap. </returns> Botão public estático MVCHTMLSTRING (este bootstraphelper html, texto da string, ícone da string) {botão Return (html, texto, ícone, nulo); } /// <summary> /// retorna o elemento do botão de inicialização de texto usando o auxiliar HTML especificado e o nome do campo de formulário. /// </summary> /// <param name = "html"> a instância do auxiliar html estendida por esse método. </param> /// <param name = "text"> texto exibido no botão. </param> /// <param name = "ícone"> Classe CSS do ícone. </param> /// <param name = "type"> tipo de botão. </param> /// <Retorna> Um elemento de botão de bootstrap. </returns> Botão estático public estático MVCHTMLSTRING (este bootstraphelper html, texto da string, ícone da string, ButtonType Type) {Botão Return (html, texto, ícone, tipo, nulo); } /// <summary> /// retorna o elemento do botão de inicialização de texto usando o auxiliar HTML especificado e o nome do campo de formulário. /// </summary> /// <param name = "html"> a instância do auxiliar html estendida por esse método. </param> /// <param name = "text"> texto exibido no botão. </param> /// <param name = "ícone"> Classe CSS do ícone. </param> /// <param name = "htmlattributes"> Um objeto que contém os atributos HTML para definir para o elemento. </param> /// <Retorna> Um elemento de botão de bootstrap. </returns> Botão public estático mvchtmlString (este bootstraphelper html, texto da sequência, ícone da string, objeto htmlattributes) {botão de retorno (html, texto, ícone, botão de botão.Button, htmlattributes); } /// <summary> /// retorna o elemento do botão de inicialização de texto usando o auxiliar HTML especificado e o nome do campo de formulário. /// </summary> /// <param name = "html"> a instância do auxiliar html estendida por esse método. </param> /// <param name = "text"> texto exibido no botão. </param> /// <param name = "ícone"> Classe CSS do ícone. </param> /// <param name = "type"> tipo de botão. </param> /// <param name = "htmlattributes"> Um objeto que contém os atributos HTML para definir para o elemento. </param> /// <Retorna> Um elemento de botão de bootstrap. </returns> Botão public estático mvchtmlString (este bootstraphelper html, texto de sequência, ícone da string, tipo de botão, tipo de objeto htmlattributes) {botão de retorno (html, text, ícone, tipo, buttonClass.default, null); } /// <summary> /// retorna o elemento do botão de inicialização de texto usando o auxiliar HTML especificado e o nome do campo de formulário. /// </summary> /// <param name = "html"> a instância do auxiliar html estendida por esse método. </param> /// <param name = "text"> texto exibido no botão. </param> /// <param name = "ícone"> Classe CSS do ícone. </param> /// <param name = "cssclass"> estilo de botão. </param> /// <Retorna> Um elemento de botão de bootstrap. </returns> Botão estático public estático MVCHTMLSTRING (este bootstraphelper html, texto da string, ícone da string, ButtonClass CSSCLASS) {Botão Return (html, texto, ícone, cSSClass, null); } /// <summary> /// retorna o elemento do botão de inicialização de texto usando o auxiliar HTML especificado e o nome do campo de formulário. /// </summary> /// <param name = "html"> a instância do auxiliar html estendida por esse método. </param> /// <param name = "text"> texto exibido no botão. </param> /// <param name = "ícone"> Classe CSS do ícone. </param> /// <param name = "cssclass"> estilo de botão. </param> /// <param name = "htmlattributes"> Um objeto que contém os atributos HTML para definir para o 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. Use
<div>@Bootstrap.Button("测试按钮", "glyphicon-ok",ButtonClass.Primary)@Bootstrap.Button("提交", "glyphicon-ok", ButtonType.Submit, ButtonClass.Success, null, ButtonSize.lg) </div>五、总结
以上封装了几个常用的表单组件，还剩下几个留在下篇吧。上文只是一个初始版本，很多地方可能并不完善，如果有什么不当或者可以优化的地方，还望斧正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。