Prefácio: Os dois artigos anteriores encapsulam alguns componentes básicos do formulário, e este artigo continua a encapsular vários outros componentes baseados no bootstrap. Ao contrário do artigo anterior, existem vários componentes neste artigo que exigem suporte para certos arquivos JS.
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. NumberBoxExtensions
NumberBoxextensions é uma caixa de texto digital baseada no estilo de bootstrap. É encapsulado pelo Spinner, um componente digital de auto-incêndio introduzido pelo blogueiro. Aqueles que não entendem o componente Spinner podem conferir o segundo componente introduzido em http://www.vevb.com/article/88490.htm.
Através da introdução anterior, sabemos que a inicialização do spinner de componente auto-aumentador não requer a gravação de nenhum código JS. Ele pode ser inicializado diretamente configurando o atributo de dados no HTML. Isso traz grande conveniência ao nosso encapsulamento. Precisamos passar apenas os parâmetros de inicialização comumente usados como parâmetros do método de extensão e depois transformá -lo no atributo de dados correspondente em segundo plano e devolvê -lo ao front -end.
Sem mais delongas, coloque primeiro o código -fonte encapsulado.
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 numberboxExtensions {/// <summary> /// gera uma caixa de texto Número ////ugudo> /// <Param Nome = "HTMMMM" HOSTMML " name = "id"> id </param> /// <lorpts> retorna a caixa de texto numérico </lorpns> public static mvchtmlstring numberTextBox (este bootstraphelper html, string id) {return numberTextBox (html, id, null, null, null, null); } /// <summary> /// Gere uma caixa de texto numérico /// </summary> /// <param name = "html"> Exemplo de método de extensão </am Param> /// <param name = "id"> id </paramic> /// <param name = "value"> caixa de texto </am param> // <rortS> retornar o número nmérico Bootstraphelper html, string id, valor do objeto) {return numberTextBox (html, id, valor, nulo, nulo, nulo); } /// <summary> /// Gere uma caixa de texto numérico /// </summary> /// <param name = "html"> Instância do método de extensão </am param> /// <param name = "value"> o valor da caixa de texto </param> /// <param = "min"> o nome mínimo de auto-etgrow <//> <Trackns> Retorne a caixa de texto numérico </returns> public static mvchtmlstring numberTextBox (este bootstraphelper html, valor do objeto, int? min, int? } /// <summary> /// Gere uma caixa de texto numérico /// </summary> /// <param name = "html"> Instância do método de extensão </am param> /// <param name = "id"> id </param> /// <param name = "value"> Valor da caixa de texto </param> // <param> Auto-crescimento </am Param> /// <lorpns> Retorne a caixa de texto Número </returns> public estático mvchtmlString numberTextBox (este bootstraphelper html, string id, valor do objeto, int? } /// <summary> /// Generate a number text box/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id</param> /// <param name="value">The value of the text box</param> //// <param name="min">min self-growth</param> /// <param Nome = "Max"> Auto-crescimento máximo </am Param> /// <param name = "step"> número de auto-crescimento min, max, passo, nulo); } /// <summary> /// Gere caixa de texto de texto /// </summary> /// <param name = "html"> método de extensão Exemplo </am param> /// <param name = "id"> id </param> // <param name = "value"> text box Valor <///am param // param> // <param- name = "" "> Auto-crescimento </amul> /// <param name = "step"> número de autogrowth </param> /// <param name = "regra"> regra de auto-crescimento </am Param> /// <lorpns> retorna a caixa de texto Número </returns> public static mvchtmlstring numberxtBox (este bootstrapHelper html, string idml, strac regra) {tagbuilder tag = new Tagbuilder ("div"); tag.MerGeattribute ("Class", "Input-Group Spinner"); tag.MerGeattribute ("Data-Trigger", "Spinner"); System.Text.StringBuilder SB = new System.Text.StringBuilder (); //sb.append("Input Type = 'text' class = 'form-control text-center' value = '1' dados-min = '-10' data-max = '10 'data-step =' 2 'data-rule =' quantidade '> "); sb.append ("<type de entrada = 'text' class = 'form-control text-center'"); if (! string.isnullorEmpty (id)) {sb.append ("id = '"). Append (id) .append ("'"); } if (value! = null) {sb.append ("value = '"). Append (value.toString ()). Append ("'"); } else {sb.append ("value = '1'"); } if (min! = null) {sb.append ("data-min = '"). Append (min) .append ("'"); } if (max! = null) {sb.append ("data-max = '"). Append (max) .append ("'"); } if (step! = null) {sb.append ("data-step = '"). Append (step) .append ("'"); } if (regra! = null) {sb.append ("data-rule = '"). Append (regra.toString ()). Append ("'"); } else {sb.append ("Data-rule = 'Quantity'"); } sb.append ("/>"); sb.append ("<span class = 'input-group-addon'>"); sb.append ("<a href = 'javascript ;;' class = 'spin-up' data-spin = 'up'> <i class = 'fa fa fa-caret-up'> </i> </a>"); sb.append ("<a href = 'javascript :;' class = 'spin-down' data-spin = 'down'> <i class = 'fa fa fa-caret-down'> </i> </a>"); sb.append ("</span>"); tag.innerhtml = sb.toString (); retornar mvchtmlstring.create (tag.toString ()); }} Public Enum SpinningRule {Padrões, moeda, quantidade, porcentagem, mês, dia, hora, minuto, segundo,}}}Além de ID e valor, os parâmetros necessários para a inicialização do componente são principalmente min, max, etapa, regra etc., correspondentes aos dados do componente-min, dados-max, dados de dados, regra de dados e outros parâmetros.
O uso é bastante simples. Primeiro, consulte os arquivos JS e CSS relevantes na página correspondente e depois chame -o assim no CSHTML:
Copie o código da seguinte forma: @bootstrap.numberTextBox (null, "1", 1, 10, 2, null)
Obtenha o resultado:
Isso é muito mais conveniente do que copiar uma grande parte do código HTML sempre. Você está se sentindo um pouco emocionado?
2. DATETIMEBOXEXTENTIONS
Com os componentes digitais acima como base, a próxima etapa é encapsular os componentes do tempo. O blogueiro também planeja usar o atributo de dados para inicializá -lo, mas depois de procurar por um longo tempo, não há como inicializar o atributo de dados no DataTimePicker. Não há como, então o blogueiro inicializará apenas o atributo de dados sozinho.
1. Plano inicial
Vamos criar um novo arquivo: bootstrap datetimepicker-helper.js. O código dentro é o seguinte
$ (function () {var datetimEDefault = {Locale: 'zh-cn', // cultura chinesa}; $ .ECH ($ (". DATE"), function (índice, item) {var data = $ (item) .data (); var param = $ .ext (},}, dataDeTeFault, dados | });});Em seguida, escreva o código HTML como este
<div class = 'input-group date' data-format = "yyyy-mm-dd" data-maxdate = "2017-01-10" data-mindate = "2010-01-10"> <input type = 'text'/> <span> <span> </span> </span> </div>
Parece que não há problema e, a princípio, o blogueiro pensou que não havia problema. Mas as coisas foram contra meus desejos! Há uma coisa que o blogueiro não considerou, ou seja, os nomes de atributos obtidos pelo método Data () no jQuery serão convertidos em minúsculas. Ou seja, o Data-maxdate escrito em HTML, mas o resultado obtido através do método Data () se torna maxdate, como mostrado na figura abaixo:
Então, quando o DateTimepicker é inicializado, uma exceção do JS é relatada. Este método não funciona.
2. Plano de melhoria
Como o método acima não funciona, precisamos melhorá -lo. Existem parâmetros no método Data () que podem impedir que ele seja minúsculo? Depois de pesquisar, não consegui encontrar nenhuma resposta. No final, não havia como o blogueiro planejá -lo por conta própria, então o código JS se tornou assim:
$ (function () {var datetimEDefault = {format: 'yyyy-mm-dd', // formatação de data, apenas a data de localidade: 'zh-cn', // cultura chinesa maxdate: '2017-01-01', // maximum date: '2010-01-01', //imumin EnabledDates: false,}; $ .extend ({}, datetimedefault, dados || {});O princípio é comparar os resultados obtidos pelo método Data () com o nome do atributo do DATETIMEDefault após a conversão em minúsculas. Se o mesmo for verdadeiro, o atributo de dados no HTML será substituído. Depois de depurar várias vezes, basicamente não encontrei problemas.
Escrever o código como esse pode realmente resolver nossos problemas acima, mas nossa variável DATETIMEDefault precisa conter parâmetros padrão suficientes para alcançar o objetivo da cobertura. Obviamente, existem apenas alguns parâmetros que geralmente são modificados no projeto e apenas alguns atributos padrão que geralmente precisamos mudar são adicionados aqui.
Ok, com o exposto acima como base teórica, nosso DataTimeBox será facilmente encapsulado. Basta fazer upload do código.
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 datetimeboxExtensions {/// <summary> /// Gerate Date Control ////sumery> /// Param- Name = "HTY> HTOMML> // GERE DATA DATA //// Summar da tag de caixa de texto </amul> /// <lorpns> retorne a tag html que renderiza o controle de data </lortns> public estático mvchtmlstring datetimebox (este bootstraphelper html, string id) {return datetimebox (html, id, null, null, null, null, null); } /// <summary> /// Generate date control/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">id of text box tag</param> /// <param name="value">Default value of text box tag</param> /// <returns>Return the html tag that renders the date control</returns> public static Mvchtmlstring datetimebox (este bootstraphelper html, string id, valor do objeto) {return datetimebox (html, id, valor, nulo, nulo, nulo, nulo); } /// <summary> /// gerar controle de data /// </summary> /// <param name = "html"> Instância do método de extensão </am param> /// <param name = "id"> id de texto da caixa de texto </am param> /// <nome "name =" value "> Valor padrão da caixa de texto </param> ////////lame> /// <nome <nome" "> name="format"> <param name="maxDate">Minimum value of date</param> /// <param name="minDate">Maximum value of date</param> /// <returns>Return the html tag that renders the date control</returns> public static MvcHtmlString DateTimeBox(this BootstrapHelper html, string id, object value, string format, string maxDate, String Mindate) {return datetimebox (html, id, valor, formato, maxdate, mente, nulo, nulo); } /// <summary> /// gerar controle de data /// </summary> /// <param name = "html"> método de extensão Exemplo </am param> /// <param name = "id"> id de texto da caixa de texto </am param> /// <param name = "value"> Valor padrão do texto name = "maxdate"> Valor mínimo da data </param> /// <param name = "Mindate"> Valor máximo da data </amp> /// <param name = "ViewMode"> Browse Modo de Data Controle </param> /// <param name = "Showclear"> O botão transparente é exibido que tag </param> /// Returns> MVCHTMLSTRING DATETIMEBOX (Este bootstraphelper html, string ID, valor do objeto, formato de string, string maxdate, string mente, string viewMode, bool? ShowClear) {tagbuilder tag = new Tagbuilder ("div"); tag.MerGeattribute ("classe", "Data do grupo de entrada"); if (! string.isnullorEmpty (formato)) {tag.merGeattribute ("Data-format", formato); } if (! string.isnullorEmpty (maxdate)) {tag.MerGeattribute ("data-maxdate", maxdate); } if (! string.isnullorEmpty (Mindate)) {tag.merGeattribute ("Data-Mindate", Mindate); } if (! String.isNullorEmpty (ViewMode)) {tag.MerGeattribute ("Data-viewMode", ViewMode); } if (showclear! = null) {tag.MerGeattribute ("Data-ShowClear", ShowClear.toString ()); } System.Text.StringBuilder SB = new System.Text.StringBuilder (); sb.append ("<type de entrada = 'text' class = 'form-control'"); if (! string.isnullorEmpty (id)) {sb.append ("id = '"). Append (id) .append ("'"); } if (value! = null) {sb.append ("value = '"). Append (value.toString ()). Append ("'"); } sb.append ("/>"). Append ("<span class = 'input-group-addon'>") .append ("<span class = 'glyphicon glyphicon-calendário'> </span>") .append ("</span>); tag.innerhtml = sb.toString (); retornar mvchtmlstring.create (tag.toString ()); }}}Então nossa página CSHTML só precisa fazer referência ao nosso JS e CSS
<link href = "~/content/bootstrap-dateTimepicker/css/bootstrap-datetimepicker.css" rel = "stylesheet"/> <script src = "~/content/bootstrap-dateTimepicker/js/moment-with-cales.js"> </script> </script> </script> src = "~/content/bootstrap-dateTimepicker/js/bootstrap-datetimepicker-helper.js"> </script>
Em seguida, use -o diretamente
<div> @bootstrap.dateTimebox ("starttime", null, null, null, null, null) </div> <div> @bootstrap.datetimebox ("endtime", nulo, nulo, nulo, nulo, nulo, nulo) </div>Obtenha resultados
3. Texteextensions
O encapsulamento do campo de texto textarea é relativamente simples, porque sua estrutura é semelhante à da caixa de texto. Vamos fornecer diretamente o código -fonte do encapsulamento.
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 texteeextensions {/// <summary> //// textarea text field // </suty> ////08Senst) //// textarea field ////sumary> ////08Senst) //// textarea field ////sumary> ////08Senst) /////11Stemeea "> name = "id"> id </param> /// <lorpns> tag html </lorpns> public static mvchtmlstring texeaxox (este bootstraphelper html, string id) {return texeaxox (html, id, null, null, null); } /// <summary> /// TextAtea Text Field /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> id </param> // <param name = "value"> value </param>///<param name = "cssclas estático mvchtmlstring textareabox (este bootstraphelper html, string id, valor do objeto, string cSSCLASS) {return texeTeabox (html, id, valor, cSSClass, nulo, nulo); } /// <summary> /// TextEa Text Field /// </summary> /// <param name = "html"> Instância do método de extensão </am param> /// <param name = "id"> id </param> // <param name = "value"> value </param> ///am name = "cssclass"> "> linhas </param> /// <Returns> tag html </lortns> public estático mvchtmlstring textareabox (este bootstraphelper html, string id, valor do objeto, string csSclass, int? linhas) {return textareabox (html, id, valor, cssclass, robes, nl); } /// <summary> /// TextEa Text Field /// </summary> /// <param name = "html"> Instância do método de extensão </am param> /// <param name = "id"> id </param> // <param name = "value"> value </param> ///am name = "cssclass"> "> linhas </param> /// <param name = "cols"> número de colunas </param> /// <lorpns> html tag </returns> public static mvchtmlstring texeaxox (tagberthermerstert html, string, valor de objeto, string csScLass, int? tag.addcssclass ("form-control"); if (! string.isnullorEmpty (id)) {tag.MerGeattribute ("id", id); } if (value! = null) {tag.MerGeattribute ("value", value.toString ()); } if (! string.isnullorEmpty (cSSClass)) {tag.addcssclass (cssclass); } if (linhas! = null) {tag.MerGeattribute ("linhas", linhas.toString ()); } if (cols! = null) {tag.MerGeattribute ("cols", cols.toString ()); } retornar mvchtmlstring.create (tag.toString ()); }}}Apenas algumas linhas e cols mais simples de parâmetros são suportados. Se o seu projeto tiver algumas necessidades especiais, como inicializar em uma rica caixa de edição de texto, você também pode melhorá -lo.
Como usar
<div> @bootstrap.textareabox ("id", "", "", 3, 5) </div>Há uma pergunta a mencionar aqui, ou seja, escrevemos diretamente, mas o resultado é:
Parece que nosso atributo cols não funciona. Acontece que, desde que sua tag seja adicionada ao estilo de class = 'formulário', ela preencherá toda a div e a solução também é muito simples. Por exemplo, podemos fazer algum processamento na div:
Copie o código da seguinte forma: <div> @bootstrap.textareabox ("", "", "", 3, 5)
Como o atributo cols não funciona, os cols nos parâmetros podem ser considerados removidos.
4. SelectExtensions
É hora da caixa suspensa selecionada emaranhada novamente. Por que você diz que está emaranhado? Porque há muitos problemas a serem considerados ao encapsulá -lo, como:
Como lidar com os valores da opção estática? Como passá -los para o fundo? É encapsulado, a seleção original ou encapsulada em métodos e eventos selecionados com base em determinados componentes (como o Select2)?
Mais tarde, pensei sobre isso: qual é o objetivo do encapsulamento? Não é apenas para ser mais conveniente de usar? Se for selado com muita força, será conveniente usar? Felizmente, foi diretamente encapsulado na seleção mais simples. O blogueiro pretende fazer isso:
Se for uma opção estática, escreva diretamente a tag de seleção nativa; Se for uma opção dinâmica, passe o URL correspondente para o plano de fundo e gerar a opção após obter os dados. O código encapsulado é o seguinte:
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 selectExtensions {/// <summary> /// Return Tag /// </Summary> // <Param Name = "Html"> Extensão id </param> /// <Returns> Selecione Tag </returns> public static mvchtmlString SelectBox (este bootstraphelper html, string id) {return SelectBox (html, id, null, null, null, null, null); } /// <summary> /// Retorno Selecione Tag /// </summary> /// <param name = "html"> Instância do método de extensão </am param> /// <param name = "id"> tag id </params> select tag </param name = "value"> tag Selected Value </param> // <lusts> tag </returns> html, string id, valor do objeto) {return SelectBox (html, id, valor, nulo, nulo, nulo, nulo); } /// <summary> /// Retornar Selecione Tag /// </summary> /// <param name = "html"> Instância do método de extensão </param> /// <param name = "id"> tag id </param> // <param name = "value"> tag Selected Value </param> ///aman Name = "CSSCL estático mvchtmlString SelectBox (este bootstraphelper html, string ID, valor do objeto, string cSSClass) {return SelectBox (html, id, valor, cSSClass, nulo, nulo, nulo); } /// <summary> /// Retornar selecione Tag /// </summary> /// <param name = "html"> Método de extensão Instância </am Param> /// <param name = "id"> tag ID </amam> // <param name = "value"> tag Selected Value </param> ///am param> "CSSCLSLSLSLASS =" Tag "> Solicitando dados </amam> /// <param name = "url"> url para solicitar dados </am param> /// <param name = "textfield"> mostrar campo </am param> /// <param name = "valuefield"> campo de string </param> /// <lorpts> selecione tag </returns> public static mvchtmlTringBox (tholl, tag String url, string textfield, string valuefield) {return SelectBox (html, id, value, cSSClass, url, null, textfield, valuefield); } /// <summary> /// Retornar Selecione Tag /// </summary> /// <param name = "html"> Instância do método de extensão </am param> /// <param name = "id"> tag id </param> // <param name = "value"> tag Selected Value </param> ///am param> "CSSCLSLSLASS"> "> TAG"> url </param> /// <param name = "param"> parâmetros solicitados </param> /// <param name = "textfield"> mostrar campos </am Param> /// <param name = "valuefield"> value campos </param> /// <param name = "valuefield> fields </param> // param> //// <param =" Value "> name = "múltiplo"> é múltipla escolha </amp> /// <rortans> Selecione Tag </returns> public static mvchtmlString SelectBox (este bootstraphelper html, string id, valor do objeto, string csSclass, string url, string param, string textfield, bool múltiplo = false) {tagbuilder = tagbuilder = string, string, string textfield, bool múltiplo ") {tagbuilder = tagbuilder, tagbuilder, string, string, string textfield, bool múltipla") {tagbuilder = tagbuilder, tagbuilder, string, string, string textfield, bool múltipla ") {tagbuilder tag.addcssclass ("form-control"); if (! string.isnullorEmpty (id)) {tag.MerGeattribute ("id", id); } if (value! = null) {tag.MerGeattribute ("value", value.toString ()); } if (! string.isnullorEmpty (cSSClass)) {tag.addcssclass (cssclass); } if (! string.isnullorEmpty (url)) {tag.MerGeattribute ("data-url", url); } if (! string.isnullorEmpty (param)) {tag.MerGeattribute ("Data-param", param); } if (! string.isnullorEmpty (param)) {tag.MerGeattribute ("Data-param", param); } if (! string.isnullorEmpty (ValueField)) {tag.MerGeattribute ("Data-value-field", ValueField); } if (! string.isnullorEmpty (textfield)) {tag.MerGeattribute ("Data-text-field", textfield); } if (múltiplo) {tag.MerGeattribute ("múltiplo", "múltiplo"); } retornar mvchtmlstring.create (tag.toString ()); }}}Em seguida, o front-end usa o JS para inicializar, e é preciso haver um js utility.comBobox.js:
(function ($) {// 1. Definir método de extensão jQuery combnoBox $ .fn.comBOBOX = function (opções, param) {if (typeof opções == 'string') {return $ .fn.comBOBOX.Methods [options] (this, param);} // 2. Merge os parameters passados quando chamados e params. . Option.Text (Opção.Place); OptionSeLoD.Call (OptionS.Ponse); (Item) {varejo (Opções.OnChan) $ .getjson (url, function (dados) {jq.empty (); var option = $ ('<pution> </option>'); option.attr ('value', ''); option.text ('por favor selecione'); jq.append (option); $ .each (data, i, itens) {var = $ (' item [JQ.attr ('Valuefield')); }}; // 6. Lista de parâmetros padrão $ .fn.comBobox.Defaults = {url: null, param: null, dados: nulo, valuefield: 'value', textfield: 'text', placeholder: 'selecione', onBeForEload: function (param) {}, onloadsuccess: function {}}, wonthange; // Este parágrafo é adicionado recentemente e o método de inicialização $ (document) .ready (function () {$ ('select'). Cada (function () {var $ combbox = $ (this); $ .fn.comboBox.call ($ combbobox, $ combmoBox.data ());})});}) (jQuery);Este arquivo JS vem de um artigo anterior do blogger //www.vevb.com/article/92595.htm
Então a chamada do front-end
<div> @bootstrap.selectbox ("sel", null, null, "home/getdept", null, "nome", "id") </div>5. Resumo
Neste ponto, a primeira versão do nosso bootstraphelper foi basicamente concluída, e os principais componentes do pacote são os seguintes:
Obviamente, todo mundo gosta mais do código -fonte compartilhando. Endereço do código -fonte
Se você acha que este artigo pode ajudá -lo, recomendo.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.