Prefacio: los dos artículos anteriores encapsulan algunos componentes básicos de formulario, y este artículo continúa encapsulando varios otros componentes según el arranque. A diferencia del artículo anterior, hay varios componentes en este artículo que requieren soporte para ciertos archivos JS.
Catálogo de artículos de la serie Bootstraphelper
Serie C# Advanced - Encapsular su propio componente htmlhelper paso a paso: bootstraphelper
C# Serie Advanced - Encapsula su propio componente HTMLHelper paso a paso: Bootstraphelper (ii)
C# Serie avanzada: encapsula su propio componente HTMLHELPER paso a paso: Bootstraphelper (3: con código fuente)
1. NumberBoxExtensions
NumberboxExtensions es un cuadro de texto digital basado en el estilo de arranque. Está encapsulado por Spinner, un componente digital autoincrito introducido por el blogger. Aquellos que no entienden el componente Spinner pueden consultar el segundo componente introducido en http://www.vevb.com/article/88490.htm.
A través de la introducción anterior, sabemos que la inicialización del Spinner de componentes autocuidas no requiere escribir ningún código JS. Se puede inicializar directamente configurando el atributo de datos en el HTML. Esto trae una gran comodidad a nuestra encapsulación. Solo necesitamos pasar los parámetros de inicialización comúnmente utilizados como parámetros del método de extensión, y luego convertirlo en el atributo de datos correspondiente en segundo plano y devolverlo a la parte delantera.
Sin más ADO, ponga primero el código fuente encapsulado.
utilizando System; usando System.Collections.Generic; Uso de System.Linq; usando System.web; usando System.web.mvc; Namespace BootStraPextensions {public static class NumberBoxExtensions {/// <<summary> /// generar un cuadro de texto numérico //// </sumario> /// <param name = "html"> instancia de método de extensión <//////////////////////////////////////////////////m está name = "id"> id </param> /// <surns> return el cuadro de texto de número </devuelve> public static mvchtmlString numberTextBox (este bootstraphelper html, string id) {return numberTextBox (html, id, null, null, null, null); } //// <summary> /// Generar un cuadro de texto numérico //// </summary> /// <param name = "html"> ejemplo de método de extensión </param> /// <param name = "id"> id </mam> /// <param name = "value"> Valor de cuadro de texto </param> //// <deurn> devuelve el cuadro de texto numérico <///numérico numer Bootstraphelper html, ID de cadena, valor de objeto) {return numberTextBox (html, id, valor, nulo, nulo, nulo); } //// <summary> /// Generar un cuadro de texto numérico //// </sumario> /// <param name = "html"> instancia de método de extensión </mam> /// <param name = "valor"> el valor del cuadro de texto <//param> /// <param name = "min"> el valor mínimo de autogrowth </param> // <param name = "max"> Maximume valora <Elvierte> return el cuadro de texto numérico </devuelve> public static mvchtmlString numberTextBox (este bootstraphelper html, valor de objeto, int? min, int } //// <summary> /// Generar un cuadro de texto numérico //// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> id </aam> /// <param name = "valor"> valor de cuadro de texto </param> /// <param name = "min" Min autogrowth <//param name name = " AutoGrowth </Param> /// <surns> Return el cuadro de texto Número </devuelve> public static mvchtmlString numberTextBox (este bootstraphelper html, ID de cadena, valor de objeto, int? min, int? max) {return numberTextBox (html, id, valor, min, max, null, null); } //// <summary> /// Generar un cuadro de texto de número //// <</summary> /// <param name = "html"> instancia de método de extensión </mam> /// <param name = "id"> id </mam> /// <param name = "value"> el valor del cuadro de texto </param> //// <param name = "min" name = "max"> máximo de autogrowth </marc> /// <param name = "step"> número autogrowth </param> /// <remurns> return el cuadro de texto numérico </devuelve> public static mvchtmlString numberTextBox (este bootstraphelper html, id id de cadena, valor de objeto, int? min, int max, paso, nulo); } //// <summary> /// Generar el cuadro de texto del número //// </sumario> /// <param name = "html"> Ejemplo de método de extensión </param> /// <param name = "id"> id </param> /// <param name = "valor"> valor de cuadro de texto </param> /// <param name = "min"> min selfgrowth </param> /// <<<ronor AutoGrowth </param> /// <param name = "step"> número autogrowth </param> /// <param name = "regla"> regla de autogrowth </param> /// <deurn> return el cuadro de texto numérico </devuelve> public static mvchtmlString numberTextBox (este bootstraphelper html, string id, valor de objeto, int? int? int? mAx, int? {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-confontrol text-center' value = '1' data-min = '-10' data-max = '10 'data-step =' 2 'data-rule =' cantidad '> "); sb.append ("<input type = 'text' class = 'Form-Control Text-Center'"); if (? } if (value! = null) {sb.append ("value = '"). append (value.toString ()). append ("'"); } else {sb.append ("valor = '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 (regla! = null) {sb.append ("data-rule = '"). append (regla.ToString ()). append ("'"); } else {sb.append ("data-rule = 'cantidad'"); } sb.append ("/>"); sb.append ("<span class = 'input-group-addon'>"); sb.append ("<a href = 'javascript ;;' class = 'spin-up' data spin = 'up'> <i class = 'fa fa-caret-up'> </i> </a>"); sb.append ("<a href = 'javascript :;' class = 'spin-down' data spin = 'down'> <i class = 'fa fa-caret-down'> </i> </a>"); sb.append ("</span>"); tag.innerhtml = sb.ToString (); return mvchtmlString.create (tag.ToString ()); }} public enum spinningrule {predeterminados, moneda, cantidad, porcentaje, mes, día, hora, minuto, segundo,}}Además de ID y valor, los parámetros requeridos para la inicialización del componente son principalmente min, máximo, paso, regla, etc., correspondientes a la minuto de datos del componente, datos-max, paso de datos, regularidad de datos y otros parámetros.
El uso es bastante simple. Primero, consulte los archivos JS y CSS relevantes en la página correspondiente, y luego llámelo así en CSHTML:
Copie el código de la siguiente manera: @bootstrap.numberTextBox (nulo, "1", 1, 10, 2, nulo)
Obtenga el resultado:
Esto es mucho más conveniente que copiar una gran pieza de código HTML cada vez. ¿Te sientes un poco conmovido?
2. DateTimeBoxExtensions
Con los componentes digitales anteriores como base, el siguiente paso es encapsular los componentes de tiempo. El blogger también planea usar el atributo de datos para inicializarlo, pero después de buscar mucho tiempo, no hay forma de inicializar el atributo de datos en el DataTimePicker. No hay forma, por lo que el blogger solo inicializará el atributo de datos por sí mismo.
1. Plan inicial
Creemos un nuevo archivo: Bootstrap-DateTiMepicker-helper.js. El código interior es el siguiente
$ (function () {var DataTimeDefault = {locale: 'zh-cn', // chino cultura}; $ .each ($ (". date"), function (index, item) {var data = $ (item) .data (); var param = $ .extend ({}, dataTimeDefault, data || {}); $ (item) .datetimePicker (parámetro); });});Luego escriba el código HTML como este
<div class = 'Input-Group Data' data-format = "yyyyy-mm-dd" data-maxdate = "2017-01-10" data-mindate = "2010-01-10"> <input type = 'text'/> <span> <span> </span> </span> </div> </div>
Parece que no hay problema, y al principio el blogger pensó que no había problema. ¡Pero las cosas fueron en contra de mis deseos! Hay una cosa que el blogger no ha considerado, es decir, los nombres de atributos obtenidos por el método Data () en jQuery se convertirán en minúsculas. Es decir, el Data-MaxDate escrito en HTML, pero el resultado obtenido a través del método Data () se convierte en MaxDate, como se muestra en la figura a continuación:
Luego, cuando se inicializa el DataTiMepicker, se informa una excepción JS. Este método no funciona.
2. Plan de mejora
Dado que el método anterior no funciona, necesitamos mejorarlo. ¿Hay algún parámetro en el método Data () que pueda evitar que sea minúscula? Después de buscar, no pude encontrar ninguna respuesta. Al final, no había forma, el blogger planeó transformarlo por su cuenta, por lo que el código JS se convirtió en este:
$ (function () {var DetaTimeDefault = {format: 'aaa yyyy-mm-dd', // fecha de formato, solo la fecha local: 'zh-cn', // chino cultura maxdate: '2017-01-01', // fecha máxima mentalidad: '2010-01-01', // mínimo mínimo Viewmode: 'Days', DoubleDate: Detaldo, Detaldo, Discalvate, False, False, Falso, Falso, falso, falso, falso, falso, falso, falso, falso, falso, falso, falso, falso, falso, falso, falso, falso, falso, falso, fals. habilitados: falso,}; $ .extend ({}, DataTimeDefault, Data || {});El principio es comparar los resultados obtenidos por el método Data () con el nombre del atributo del DataTimeDefault después de la conversión minúscula. Si lo mismo es verdadero, el atributo de datos en el HTML se sobrescribirá. Después de depurar varias veces, básicamente no encontré problemas.
Escribir el código como este puede resolver nuestros problemas anteriores, pero nuestra variable DatetimeDefault debe contener suficientes parámetros predeterminados para lograr el propósito de la cobertura. Por supuesto, solo hay unos pocos parámetros que generalmente se modifican en el proyecto, y solo algunos atributos predeterminados que a menudo necesitamos cambiar aquí se agregan aquí.
De acuerdo, con lo anterior como la base teórica, nuestro DatateMeBox se encapsulará fácilmente. Simplemente suba el código.
usando System; usando System.Collections.Generic; Usando System.Linq; usando System.web; usando System.web.mvc; Namespace BootStraPextensions {public static class dateTimeBoxExtensions {/// <<summary> ////generar fechor control /// </sumario> /// <param name = "html"> extensión de método </instancia de parámetro <//////////////ID = "ID" Etiqueta de cuadro </param> /// <<runebray> Devuelve la etiqueta HTML que renderiza el control de fechas </devuelve> public static static mvchtmlString dateTimeBox (este bootstraphelper html, string id) {return datTimeBox (html, id, null, null, null, null, null); } //// <summary> /// Generar control de fecha //// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> id de cuadro de texto etiqueta </param> /// <param name = "valor"> valor predeterminado de la etiqueta de texto </param> /// <devuelve> devolver la etiqueta html que renders renders el control de la fecha </devuelve el cuadro de la fecha de la fecha de la fecha. MvchtmlString DateTimeBox (este bootstraphelper html, string id, valor de objeto) {return dateTimeBox (html, id, valor, nulo, null, null, null); } //// <summary> /// Generar control de fecha /// <</summary> /// <param name = "html"> instancia de método de extensión </mam> /// <param name = "id"> id de cuadro de texto </param> /// <param name = "valor"> valor predeterminado del cuadro de texto etiqueta </param> // <param name = "format"> de format para la pantalla de visual name = "format"> <param name = "maxDate"> Valor mínimo de la fecha </param> /// <param name = "Mindate"> Valor máximo de la fecha </param> /// <<vuelve> return la etiqueta HTML que renderiza el control de fechas </returns> public static mvchtmlString de tiempo de retiro (esta bootstraphelper html, string id, string id, string mvChtmlString scotebox (string format, string mvchtate, string mvchtate, string format, string mvchtate box Mindate) {return dateTimeBox (html, id, valor, formato, maxDate, Mindate, NULL, NULL); } //// <summary> /// Generar control de fecha /// <</summary> /// <param name = "html"> ejemplo de método de extensión </param> /// <param name = "id"> id de cuadro de texto </param> /// <param name = "valor"> valor predeterminado de la etiqueta de cuadro de texto </param> // <param name = "format" name = "maxDate"> Valor mínimo de la fecha </param> /// <param name = "Mindate"> Valor máximo de la fecha </param> /// <param name = "ViewMode"> Browse Mode of Date Control </Param> /// <Param name = "showclear"> el botón Clear Boots se muestra </Param> //// <devuelve> devuelve la etiqueta html que los rendores de la fecha </devuelve el control público </devuelve el control público </devuelve el control público </devuelve el control público </devuelve el control público </devuelve el control público </devuelve el control de la fecha. MvchtmlString DateTimeBox (este bootstraphelper html, ID de cadena, valor de objeto, formato de cadena, string maxDate, string mindate, string ViewMode, Bool? ShowClear) {tagBuilder tag = new tagBuilder ("div"); tag.merGeatTribute ("clase", "fecha del grupo de entrada"); if (! String.ISNULLOREMPTY (format)) {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 ("<input type = 'text' class = 'Form-Control'"); if (? } if (value! = null) {sb.append ("value = '"). append (value.toString ()). append ("'"); } sb.append ("/>"). append ("<span class = 'input-group-addon'>") .append ("<span class = 'glyphicon glyphicon-calendar'> </span>") .append ("</span>"); tag.innerhtml = sb.ToString (); return mvchtmlString.create (tag.ToString ()); }}}Entonces nuestra página CSHTML solo necesita hacer referencia a nuestros JS y CSS
<Link href = "~/content/bootstrap-datetiMepicker/css/bootstrap-datetiMepicker.css" rel = "Stylesheet"/> <script src = "/content/bootstrap-dateTiMepicker/js/momento-with-be-behales.js"> </script> <scrito> src = "~/content/bootstrap-dateTiMepicker/js/bootstrap-dateTiMepicker-helper.js"> </script>
Luego úsalo directamente
<div> @bootstrap.datetimeBox ("starttime", null, null, null, null, null) </div> <div> @bootstrap.datetimeBox ("endtime", null, null, null, null, null, null) </div>Obtener resultados
3. TextareExtensions
La encapsulación del campo de texto TextAREA es relativamente simple, porque su estructura es similar a la del cuadro de texto. Damos directamente el código fuente de encapsulación.
usando System; usando System.Collections.Generic; Uso de System.Linq; usando System.Web; Uso de System.Web.MVC; Namespace BootStraPextensions {public static class textareExtensions {/// <<summary> /// textarea text flow name = "id"> id </param> /// <surnen> html etiqueta </svierte> public static mvchtmlString textAREABEX (este bootstraphelper html, string id) {return textAREABOX (html, id, null, null, null); } //// <summary> /// TextArea Text Field //// </summary> /// <param name = "html"> instancia de método de extensión </sam> /// <param name = "id"> id </mam> /// <param name = "valor"> valor de valor </param> /// <param name = "cssclass"> style </param> /// <<<rurnsurs> html tagml MvchtmlString textAREABOX (este bootstraphelper html, ID de cadena, valor de objeto, cadena cssclass) {return textAREABOX (html, id, valor, cssclass, null, null); } //// <rummary> /// textareA TEXT Field //// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> id </param> /// <<param name = "valor"> valor de valor </param> /// <param name = "cssclass"> estilo </amam> /// <<<mam name " ROWS </marr> /// <<surnsurn> html etiqueta </surnsurs> public static mvchtmlString textAReaBox (este bootstraphelper html, string id, valor de objeto, string cssclass, int? ROWS) {return textAREABOX (html, id, valor, cssclass, raws, null); } //// <rummary> /// textareA TEXT Field //// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> id </param> /// <<param name = "valor"> valor de valor </param> /// <param name = "cssclass"> estilo </amam> /// <<<mam name " ROWS </param> /// <param name = "cols"> Número de columnas </param> /// <<devoluciones> etiqueta html </devuelve> public static mvchtmlString textAbox (este bootstraphelper html, ident de identificación, valor de objeto, string csssClass, int tag.AddcssClass ("formulario-control"); if (? } if (value! = null) {tag.merGeatTribute ("value", value.ToString ()); } if (! String.IsNullorEmpty (cssclass)) {tag.addcssclass (cssclass); } if (filas! = null) {tag.merGeatTribute ("Rows", Rows.ToString ()); } if (cols! = null) {tag.merGeatTribute ("cols", cols.ToString ()); } return mvchtmlString.Create (tag.ToString ()); }}}Solo se admiten unos pocos parámetros más simples filas y cols. Si su proyecto tiene algunas necesidades especiales, como inicializarse en un cuadro de edición de texto enriquecido, también puede mejorarlo usted mismo.
Cómo usar
<div> @bootstrap.TextAreaBox ("id", "", "", 3, 5) </div>Hay una pregunta que mencionar aquí, es decir, la escribimos directamente, pero el resultado es:
Parece que nuestro atributo Cols no funciona. Resulta que mientras su etiqueta se agrega con el estilo class = 'Form-Control', llenará todo el DIV y la solución también es muy simple. Por ejemplo, podemos procesar en el DIV:
Copie el código de la siguiente manera: <iv> @bootstrap.TextAreaBox ("", "", "", 3, 5) </div>
Dado que el atributo COLS no funciona, se puede considerar que el COLS en los parámetros se elimina.
4. SelectExtensions
Es hora del cuadro desplegable Seleccionar enredado nuevamente. ¿Por qué dices que está enredado? Porque hay muchos problemas a considerar al encapsularlo, como:
¿Cómo manejar los valores de la opción estática? ¿Cómo pasarlos al fondo? ¿Está encapsulado la selección original o encapsulado en métodos y eventos de selección basados en ciertos componentes (como SELECT2)?
Más tarde, lo pensé, ¿cuál es el propósito de la encapsulación? ¿No es solo ser más conveniente de usar? Si está muy duro, ¿será conveniente usarlo? Afortunadamente, estaba directamente encapsulado en la selección más simple. El blogger tiene la intención de hacer esto:
Si es una opción estática, escriba directamente la etiqueta Seleccionar nativa; Si se trata de una opción dinámica, pase la URL correspondiente al fondo y genere la opción después de obtener los datos. El código encapsulado es el siguiente:
utilizando System; usando System.Collections.Generic; Uso de System.Linq; usando System.web; usando System.Web.MVC; Namespace BootStoreTapExtensions {public static classectextensions {//// <rummary> /// return select tag ////// </summary> /// <param name = "html"> extension Method Instance </param> ///// <<<</"ID" Id "Id" /// <<deurns> Seleccionar etiqueta </devuelto> public static mvchtmlString selectbox (este bootstraphelper html, ID de cadena) {return selectbox (html, id, null, null, null, null, null); } /// <summary> /// Return select tag/// </summary> /// <param name="html">Extension method instance</param> /// <param name="id">Tag id</param> /// <param name="value">Tag selected value</param> /// <returns>select tag</returns> public static MvcHtmlString SelectBox(this BootstrapHelper html, ID de cadena, valor de objeto) {return selectbox (html, id, valor, nulo, nulo, nulo, nulo); } //// <summary> /// return Select Etiqueta //// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> etiqueta id </param> /// <<param name "> value de etiqueta seleccionada Value </param> /// <param name =" cssclass "> tag syle </param> // <<<<turnalts de tags selects> MvchtmlString selectbox (este bootstraphelper html, identificación de cadena, valor de objeto, cadena cssclass) {return selectbox (html, id, valor, cssclass, null, null, null); } //// <summary> /// return Seleccionar etiqueta /// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> etiqueta id </param> /// <param name "> value" valera seleccionada </param> /// <param name = "cssclass"> etiqueta estilo </param> /// <<<<<<<Rewer name </param> /// <param name = "CSSclass"> Tag Style <//param> /// <<<</ <<<<</name de la etiqueta. Data </param> /// <param name = "url"> URL para solicitar datos </param> //// <param name = "textfield"> show campo </param> /// <param name = "valuefield"> value campo </param> /// <<remurns> select tag </returns> public static mvchtmlstring selectbox (este bootsTraphelper html, string id, string id, string cssClas string textfield, string valuefield) {return selectbox (html, id, valor, cssclass, url, null, textfield, vallefield); } //// <summary> /// return Select Etiqueta //// </summary> /// <param name = "html"> instancia de método de extensión </param> /// <param name = "id"> etiqueta id </param> /// <param name = "valor"> value de etiqueta seleccionado </param> /// <param name = "cssclass"> etiqueta estilo </param> // <<<<<<<Rewer de param name " URL </param> /// <param name = "param"> parámetros solicitados </param> /// <param name = "textfield"> show campos </param> /// <param name = "valuefield"> value fields </sam> /// <param name = "valuefield"> value fields </param> // <param name = "valuefield"> value fields <///////////"namefield <" namefield name = "múltiple"> es opción múltiple </amam> /// <surns> select Etiqueta <///returns> public static mvchtmlString selectbox (este bootstraphelper html, string id, valor de objeto, cadena cssclass, string url, string param, string textfield, boolfield, bool múltiple = falso) {tagBuilder tag = tagbuilder ("select");;; tag.AddcssClass ("formulario-control"); if (? } 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 (vallefield)) {tag.merGeatTribute ("Data-Value-Field", vallefield); } if (! String.isNullorEmpty (textField)) {tag.merGeatTribute ("Data-Text-Field", TextField); } if (múltiple) {tag.merGeatTribute ("múltiple", "múltiple"); } return mvchtmlString.Create (tag.ToString ()); }}}Luego, el front-end usa JS para inicializarse, y debe haber un archivo js utility.combobox.js:
(function ($) {// 1. Define el método de extensión jQuery ComboBox $ .fn.combobox = function (options, param) {if (typeof options == 'string') {return $ .fn.combobox.methods [opciones] (this, param);} // 2 fusione los parámetros pasados cuando llaman y predeterminados opciones de parámetros = $ .extend ({{},,,, $ .fn.comBobox.Defaults, Opciones || opción.text (option.placeholder); options.onbeforLoad.call (Target, Options.Param); (i, elemento) (OPTION.onChange) {$ .getjson (url, function (data) {jq.empty (); var option = $ ('<pection> </option>); opción.attr (' valor ',' '); opción Elemento [JQ.ATTR ('Valorfield')]); }}; // 6. Lista de parámetros predeterminada $ .fn.combobox.defaults = {url: null, param: null, data: null, valuefield: 'value', textField: 'text', posteholder: 'por favor seleccione', onborLoad: function (param) {}, onloadSuccess: function () {}, OnChange: function (value) {}}; // Este párrafo se agrega recientemente, y el método de inicialización $ (documento) .Ready (function () {$ ('select'). Cada (function () {var $ comboBox = $ (this); $ .fn.combobox.call ($ combox, $ comboBox.data ();})});}) (jQuery);Este archivo JS proviene de un artículo anterior del blogger //www.vevb.com/article/92595.htm
Entonces la llamada front-end
<div> @bootstrap.selectbox ("sel", null, null, "/home/getDept", null, "nombre", "id") </div>5. Resumen
En este punto, la primera versión de nuestro bootstraphelper se ha completado básicamente, y los componentes del paquete principal son los siguientes:
Por supuesto, a todos le gusta el código fuente que más comparten. Dirección del código fuente
Si cree que este artículo puede ayudarlo, recomiéndolo.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.