Control numericUpDown para asp.net

Fecha: 21/Sep/2004 (18/9/2004)
Autor:
Andrés Giménez Muñoz

17/Oct/04: Segunda parte

 


Control numericUpDown para asp.net
Este artículo proporciona una introducción a la creación de un control Web para la introducción de datos numéricos similar al que ya existe para aplicaciones de ventanas. Con esto se facilita la creación de interfaces de usuario y mejoramos la validación de los datos que este introduce en nuestra aplicación.

Contenido
Introducción
Controles de Servidor ASP.Net
Creamos un control heredado de TextBox
Personalizamos nuestro control para obtener la funcionalidad deseada.
Conclusión

Introducción
NumericUpDown es un control ya clásico en aplicaciones de ventanas, que a veces se hecha de menos en aplicaciones ASP.NET. Consiste en un cuadro de texto en el que se le asocian dos botones para aumentar o disminuir el valor que contienen.

Para darle un mayor rendimiento a este control se le dará al navegador la máxima funcionalidad posible, con código en el cliente. Para evitar recargar la página un gran número de veces. Con el consiguiente desga de trabajo para el servidor y mayor velocidad en el cliente.

También se evitara utilizar funciones de cliente complejas para que el control funcione en el mayor número de navegadores posibles.

Controles de Servidor ASP.NET
Una de las grandes mejoras en la programación de páginas Web que introdujo ASP.NET son los controles de Servidor. Con los que podemos crear nuestras páginas Web como si se tratara de formularios de Windows. Con el Framework se aportan una gran cantidad de controles, con una gran funcionalidad y debidamente testeados. Con lo que a la hora de crear nuestros propios controles de servidor conviene el utilizar uno existente y modificarlo.

En nuestro caso utilizaremos el control TextBox que permite introducir una variable de tipo string desde un formulario Windows. Y lo modificaremos creando una clase hija en la que modificaremos y crearemos las clases más abajo descritas.

Creamos un control heredado de TextBox
Lo primero es crear una aplicación Web con un control heredado de TextBox para posteriormente poder modificarlo.

  1. Creamos una aplicación Web con una página aspx para poder probar nuestro control.

  2. Le agregamos un Control Web personalizado al que llamaremos numericUpDown. Deberemos tener un archivo numericUpDown.cs en el que este definida la clase numericUpDown.

  3. Definimos a nuestra clase numericUpDown como hija de la clase TextBox

    public class numericUpDown : System.Web.UI.WebControls.TextBox

  4. Introducimos en la pagina aspx de prueba la llamada a nuestro control. Para ello agregamos la cabecera a nuestra página aspx

    <%@ Register TagPrefix="cc1" Namespace="controls" Assembly="controls"%>

    Y la llamada a nuestro control

    <cc1:numericUpDown id="NumericUpDown1" runat="server"></cc1:numericUpDown>

Personalizamos nuestro control para obtener la funcionalidad deseada
  1. Definimos una estructura para definir la posición de los botones.

            ///


            /// Posición de los botones
            ///

            public enum PosButton
            {
                ///

                /// Los dos a la izquierda.
                ///

                LeftLeft,
                ///
                /// Uno a la izquierda otro a la derecha.
                ///

                LeftRigth,
                ///
                /// Los dos a la derecha.
                ///

                RigthRigth,
                ///
                /// Uno Arriba y el otro abajo.
                ///

                UpDown,
                ///
                /// Los dos arriba.
                ///

                UpUp,
                ///
                /// Los dos abajo.
                ///

                DownDown
            }
     
  2. Definimos la propiedad PositionButton, en la que guarde la posición de los botones. Esta propiedad toma los datos del ViewState para permitir que esta sea modificada mientras se ejecuta el formulario.

            public PosButton PositionButton
            {
                get

                {
                    object o = ViewState["PositionButton"];
                    return (o == null) ? PosButton.LeftLeft:(PosButton)o;
                }
                set
                {
                    base.ViewState["PositionButton"] = value;
                }
            }

  3. Definimos la propiedad PositionInverso, en la que definimos si los botones tienen que aparecer en la posición natural o en la invertida. public bool PositionInverso

            public bool PositionInverso
            {
                get
                {
                    object o = ViewState["PositionInverso"];
                    return (o == null) ? false : (bool) o;
                }

                set
                {
                    base.ViewState["PositionInverso"] = value;
                }
            }

  4. Definimos las propiedades ImageURLPlus y ImageURLMinus dode se define la URL de las imágenes que deben aparecer en los botones más y menos.



  5.         public string ImageUrlPlus
            {
                get
                {
                    object o = base.ViewState["ImageUrlPlus"];
                    return (o == null) ? String.Empty : (string) o;
                }

                set
                {
                    base.ViewState["ImageUrlPlus"] = value;
                }
            }
  6. Sobrecargamos la propiedad Text para validar en el servidor los valores almacenados en nuestro control.



  7.         public override string Text
            {
                get
                {
                    object o = ViewState["Text"];
                    string sText = (o == null) ? String.Empty :(string) o;
                    try
                    {
                    decimal valor = System.Convert.ToDecimal(sText);
                    if(valor > Maximun)
                        sText = System.Convert.ToString(Maximun);
                    else if(valor < Minimun)
                        sText = System.Convert.ToString(Minimun);
                }
                catch(System.Exception )
                {
                    sText = System.Convert.ToString(ValueDefaul);
                }
                return sText;
            }

            set
            {
                base.ViewState["Text"] = value;
            }
        }
  8. Implementamos los métodos para dibujar el control. Para ello sobrecargamos el método Render para modificar el cogido html que genera nuestro control.



  9.     protected override void Render(HtmlTextWriter output)
  10. A la hora de generar el código que pintan las imágenes debemos hacer que estas respondan al evento de cliente onclick, para que el navegador modifique el contenido del control sin necesidad de hacer postback. Para ello generamos la etiqueta img como aparece en el ejemplo.



  11.      ///  
        /// Pinta el boton más.
        ///

        ///  Programa de escritura HTML para escribir
        protected void RenderBotonesPlus(HtmlTextWriter output)
        {
            if(ImageUrlPlus == "")
            {
                output.Write(" ");
            }
            else
            {
                output.WriteBeginTag("img");
                output.WriteAttribute("src", ImageUrlPlus);
                output.WriteAttribute("border", "0");
                output.WriteAttribute("onclick", "javascript:IncrementaValor(" +
                     this.ClientID + ",1," + Maximun + "," +Minimun + "," + ValueDefaul + ");");
        output.Write(">");
            }
        }
  12. Ahora solo nos queda definir la función de cliente que modifica el valor del control en ese. Para ello sobrecargamos la función OnPreRender que se ejecuta antes de generar el código html para pintar el control.

    Existen varias funciones para insertar código de cliente en una página generada con ASP.NET. Las cuales pertenecen a la clase Page. A la cual tenemos acceso con la propiedad del mismo nombre que tienen todos los controles Web.

    Para insertar código de cliente vamos a utilizar un mecanismo que nos permite insertarlo una única vez, independientemente de las instancias de nuestro control que aparezcan en la página. Para ello utilizamos RegisterClientScriptBlock para registrar nuestro código en la página. Y IsClientScriptBlockRegistered para saber si dicho código esta ya insertado por otra instancia de nuestro control. Para ello lo hacemos según aparece en el codigo.


  13.     ///
        /// Inserta codigo javascript necesario para el control.
        ///

        protected override void OnPreRender(System.EventArgs e)
        {
            if(!this.Page.IsClientScriptBlockRegistered("numericUpDown_Valor"))
            {
                string sScript = @""
                    <script language=""javascript"">
                        function IncrementaValor(texto, Cantidad, maximun, minimun, valuedefault)
                            {
                                if(!isFinite(texto.value) || texto.value == """")
                                {
                                    texto.value = valuedefault;
                                }
                                indice = eval(texto.value);
                                indice = eval(indice+Cantidad);
                                if(indice > maximun)
                                    indice = maximun;
                                if(indice < minimun)
                                    indice = minimun;
                                texto.value = indice;
                            }
                     </script>";"
                this.Page.RegisterClientScriptBlock("os necesarios para que se visual, sScript);
            }
        }
  14. Con esto solo nos queda llamar al control desde nuestra página con los parámetros necesarios para que se visualice a nuestro gusto.


  15. <cc1:numericupdown id=NumericUpDown1 runat="server" ImageUrlMinus="images/down.png" ImageUrlPlus="images/up.png" PositionButton="RigthRigth"></cc1:numericupdown>

Conclusión
Con la construcción de sencillos controles Web, generalmente modificación de otros existentes, conseguimos una forma limpia de reutilizar nuestro código. Así como una forma fácil de implementar los clásicos controles de formularios de Windows en páginas Web. Consiguiendo una gran funcionalidad de estas.

Con ese ejemplo hemos visto como reutilizar la funcionalidad de otros controles ya existentes. Como implementar nuevas propiedades, con valores que no tienen por qué ser de tipo expanda, sino los valores de una enumeración. Y como insertar código de cliente en nuestras páginas y que este sea utilizado por varias instancias de nuestro control sin necesidad de que aparezca varias veces en esta.


ir al índice

Fichero con el código de ejemplo: andreschi_control_numeric_up_down.zip - 22 KB