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.



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

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


5. Sobrecargamos la propiedad Text para validar en el servidor los valores almacenados en nuestro control.



        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;
        }
    }


6. Implementamos los m�todos para dibujar el control. Para ello sobrecargamos el m�todo Render para modificar el cogido html que genera nuestro control.



    protected override void Render(HtmlTextWriter output)


7. 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.



     ///
 
    /// 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(">");
        }
    }


8. 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.


    ///

    /// 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);
        }
    }

9. Con esto solo nos queda llamar al control desde nuestra p�gina con los par�metros necesarios para que se visualice a nuestro gusto.


<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.