Nuevo control para edición de números enteros y decimales.

Una vez terminado el Formulario, se impone la creación de controles para editar diferentes tipos de datos. Aquí les dejo un nuevo Control para ingresar número enteros y decimales, con dos estilos diferentes de edición y validación incluida.

Este control es básicamente un Textbox que implementa la interface IScriptControl por lo tanto necesita de un ScriptManager presente en la página.
Se ha extendido su funcionalidad para que solo puedan ingresarse datos numéricos, anulando por lo tanto la posibilidad de teclear letras.
Como veremos mas adelante podremos programar la cantidad de enteros y decimales deseados, algún caracter para el relleno de espacios y la validación, que va desde un rango de valores, hasta una función definida por el usuario.
Pero vamos a la definición en ASPX y veamos sus propiedades.

<MM2:Numero ID="Empleado_AlMo_Salario" runat="server" Enteros ="6" Decimales ="2"  Tipo="Fox" RangoDesde="10" RangoHasta ="50"  PermiteCero = "false" Validando="ValidandoNumero"></MM2:Numero>

Aquí vemos la definición del control, si bien las propiedades son bastante explícitas, les dejo a modo de referencia esta pequeña tabla.

Propiedad Tipo Descripción Defecto
Enteros Integer Cantidad de enteros que posee el número a editar. 8
Decimales Integer Cantidad de decimales que posee el número a editar. 2
Tipo Calc/Fox Estilo de tipeo: Calc=cursor fijo. Fox=cursor libre. Fox
Relleno String Caracter con el cual se rellenaran los espacios vacíos. Espacio
PermiteNegativos Boolean Indica si el usuario puede presionar el signo menos para hacer negativo el número. True
CssError String Indica el StyleSheet que se usará cuando la validación del control de error. Erroneo
PermiteCero Boolean Indica si se puede dejar en cero el valor del control.(validación) True
RangoDesde Decimal Indica el valor mínimo posible para el control.(validación) Decimal.MinValue
RangoHasta Decimal Indica el valor Máximo posible para el control.(validación) Decimal.MaxValue
Validando String Indica el nombre de la función en JavaScript que se ejecutará al validar el control. vacío

La validación de este control se produce automáticamente cunado pierde el foco o cuando es asignado un valor a través del método set_value(). También puede forzarse la validación programáticamente invocando el método Validar().
Aquí vemos un ejemplo de una función para validar el control de manera personalizada.

       function ValidandoNumero(sender, e) {
            if (e.Valor == 15) {
                e.Erroneo = true
                e.Mensaje = "-No puede ser 15";
            }
        }

En este caso si el valor del control es quince, devolverá un error que se presentaré en el title del input,y se cambiará el className al asignado en la propiedad CssError.

Por último este control expone la propiedad EsValido, que indica si pasó la validación con éxito o no. Puede ser consultada en cualquier momento para conocer su estado y, por ejemplo, disparar alguna acción.

Como siempre les dejo la Librería MoniMisi2 para que se bajen con este control y todo lo desarrollado hasta ahora.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s