BIENVENIDO ALUMNO DE ICO AL CURSO DECEMBRINO DE ASP.NET

Introducción a Páginas ASP.NET

El Framework para páginas con formularios Web de ASP.NET es un modelo de programación de tiempo de ejecución con un lenguaje escalable y común, que puede usarse en el servidor para generar dinámicamente páginas Web. Pensado como una evolución lógica de ASP (ASP.NET proporciona compatibilidad de sintaxis con las páginas existentes), el Framework de páginas ASP.NET ha sido específicamente diseñado para solucionar algunas deficiencias claver del modelo previo. De forma particular, proporciona la habilidad de crear y utilizar controles UI reutilizables que pueden encapsular una funcionalidad común y, por tanto, reducir la cantidad de código que el desarrollador tiene que escribir, la habilidad de los desarrolladores para estructurar de forma clara las páginas en un estilo odenado (no código "spaghetti"), y la habilidad de las herramientas de desarrollo de proporcionar un potente soporte de diseño WISIWIG para las páginas (el código ASP existente en opaco para las herramientas). esta sección del tutorial proporciona un breve resumen del código de alto nivel de algunas de las características basicas de las páginas ASP.NET. Las siguientes secciones tratarán más a fondo detalles más específicos.

Escribiendo nuestra primera página ASP.NET

La páginas ASP.NET son archivos de texto con la extensión .aspx. Las páginas consisten en código y marcas y son compiladas y ejecutadas dinámicamente en el servidor para producir una traducción para el navegador (o dispositivo) cliente. Cuando un navegador hace una petición de un recurso .aspx, la rutina ASP.NET analiza y compila el fichero a una clase del Framework .NET.

Una página ASP.NET puede ser creada simplemente cambiándole la extensión de un fichero HTML por la extensión .aspx (no hace falta modificar el código). Por ejemplo, el siguiente ejemplo nos demuestra una sencilla página HTML que recoge un nombre de usuario y una preferencia de categoría y lugo realiza un postbak del formulario a la página que lo origina cuando se hace clic sobre el botón:

C# Intro1.aspx

Añadiendo Código Simple a una Página

ASP.NET proporciona compatibilidad de sintaxis con páginas ASP ya existentes. Esto incluye el soporte para los bloques de renderizado de código del tipo <% %> que se pueden metern entre el contenido HTML en un fichero .aspx. Estos bloques se ejecutan de forma descendente en el momento del "renderizado".

El siguiente ejemplo demuestra como los bloques de renderizamiento <% %> se pueden utilizar para hacer un bucle sobre un bloque de código HTML (incrementando el tamaño de la fuente en cada pasada):

C# Intro2.aspx

Los desarrolladores de páginas ASP.NET pueden utilizar los bloques <% %> de código para modificar dinámicamente la salida HTML tanto como pueden hacerlo actualmento con ASP. Por ejemplo, el siguiente ejemplo demuestra como los bloques <% %> de código pueden usarse para interpretar los resultados que nos envía un cliente

C# Intro3.aspx

Introducción a los Controles de Servidor de ASP.NET

Además de código y marcas, las páginas ASP.NET pueden contener controles de servidor, que son objetos programables del lado del servidor que típicamente representan un elemento para usuarios en la página, como un textbox o una imagen. Los controles de servidor participar en la ejecución de la página y producen sus propias etiquetas para el navegador cliente. La principal ventaja de los controles de servidor es que permiten a los desarrolladores obtener un comportamiento complejo a partir de componentes sencillos, reduciendo así dramáticamente la cantidad de código necesaria para crear una página Web dinámica.

Los controles de servidor se declaran en un fichero .aspx mediante etiquetas propias o etiquetas HTML intrínsecas que contienen el atributo runat="server". Las etiquetas HTML intrínsecas son manejadas con uno de los controles del "namespace" System.Web.UI.HtmlControls. A cualquier etiqueta que no corresponda a uno de los controles se le asigna el tipo System.Web.UI.HtmlControls.HtmlGenericControl

El siguiente ejemplo utiliza cuatro controles de servidor: <form runat=server>, <asp:textbox runat=server>, <asp:dropdownlist runat=server>, y <asp:button runat=server>. En tiempo de ejecución estos controles de servidor generan de forma automática el contenido HTML.

C# Intro4.aspx

Importante: Observar que los controles de servidor mantienen de forma automática entre viajes al servidor cuanquier valor insertado en el lado del cliente. Este estado del control no se almacena en el servidor (en lugar de eso se almacena en un campo <input type="hidden" de formulario que se envía y devuelve en las diferentes peticiones). Obsevar además que no es necesario ningún script del lado del cliente.

Además de soportar controles estádares de entrada HTML, ASP.NET permite a los desarrolladores utilizar controles personalizados más ricos en sus páginas. Por ejemplo, el siguiente ejemplo demuestra como el control <asp:adrotator> se puede utilizar para mostrar dinámicamente "ads" cambiantes en la página.

C# Intro5.aspx

Manejando Eventos de Controles de Servidor

Cada control de Servidor de ASP.NET es capaz de mostrar un modelo de objeto conteniendo propiedades, métodos y eventos. Los desarrolladores de ASP.NET utilizan este modelo de objeto para modificar de forma limpia e interactuar con la página.

El siguiente ejemplo nos demuestra como un desarrollador de páginas ASP.NET puede controlar el eventoOnClick del control <asp:button runat=server> control para manipular la propiedad Text del control <asp:label runat=server>.

C# Intro6.aspx

Este ejemplo simple es equivalente en funcionalidad al ejemplo "Intro3" mostrado anteriormente en esta sección. Sin embargo, cabe observar la mayor limpieza y simplicidad del código en la versión basada en controles de servidor. Así como veremos posteriormente en el tutorial, el Framework de páginas ASP.NET también muestra gran variedad de eventos a nivel de página, que podemos controlar para escribir código que se ejecute en un momento determinado durante el procesado de la página. Ejemplos de estos eventos son Page_Load y Page_Render.

Aplicando Estilos a Controles

La Web es un entorno flexible para las interfaces de usuario, con variaciones extremas en el aspecto de diferentes Web Sites. La adopción generalizada de "Cascading Style Sheets" (CSS) es la responsable de los ricos diseños que podemos encontrar en la Web. Todos los controles de servidor de ASP.NET y los controles de servidor web has sido diseñados para soportar los estilos CSS de primera clase.

Aplicando Estilos a Controles HTML

Las etiquetas estándar HTML soportan CSS a través del atributo "style" (estilo), que se puede fijar a una lista de parejas atributo/valor delimitada por puntos y comas. Si observamos el código fuente de la página devuelta al cliente, veremos que estos estilos se pasan al navegador en la representación de los controles.

C# Style1.aspx

CSS también defina un atributo de clase que puede puede fijarse a una definición de estilo CSS contenida en una sección <style>...</style> del documento. El atributo de clase hace más sencillo definir los estilos una vez y aplicarlos a diferentes etiquetas sin tener que redefinir el estilo. Los estilos en controles HTML de servidor también se pueden establecer de esta forma, tal y como muestra el siguiente ejemplo.

C# Style2.aspx

Cuando se analiza una página ASP.NET, la información de estilo se rellena dentro de una propiedad Style (del tipo CssStyleCollection) dentro de la clase System.Web.UI.HtmlControls.HtmlControl. Esta propiedad es, esencialmente, un diccionario que muestra los estilos del control como grupos de valores indexados por cadenas, para cada clave de "style-attibute". Por ejemplo, podemos usar el siguiente código para fijar y, consecuentemente, obtener el atributo de estilo "width " (ancho) de un control de servidor HtmlInputText.

<script language="C#" runat="server" >

    void Page_Load(Object sender, EventArgs E) {
        MyText.Style["width"] = "90px";
        Response.Write(MyText.Style["width"]);
    }

</script>

<input type="text" id="MyText" runat="server"/>

El siguiente ejemplo muestra cómo podemos manipular de forma programada el estilo de un control HTML de servidor mediante la propiedad de grupo de "Style" (estilos).

C# Style3.aspx

Aplicando Estilos a Controles Web de Servidor

Los controles Web de Sevidor proporcionan un nivel adicional de soporte para estilos, añadiendo varias propiedades fuertemente tipadas para los ajustes de estilos más usados, tales como color de fondo, nombre y tamaño de la fuente, etc. Estas propiedades de estilo representan un subconjunto de los comportamientos de estilo disponibles en HTML y se representan como propiedades llanas accesibles directamente a través de la clase base System.Web.UI.WebControls.WebControl. La ventaja de usar estas propiedades es que proporcionan comprovación en tiempo de compilación y finalización de declaraciones en herramientas de desarrollo como Microsoft Visual Studio .NET.

El siguiente ejemplo muesta un control WebCalendar con varios estilos aplicados a él (se incluye un calendatio sin estilos aplicados para contrastar). Observad que al fijar una propiedad que es un tipo de clase, por ejemplo Font, necesitamos usar la sintaxis de subpropiedad PropertyName-SubPropertyName.

C# Style4.aspx

El espacio de nombres System.Web.UI.WebControls incluye una clase base Style que encapsula los atributos de estilo comunes (las clases adicionales de estilo, como TableStyle y TableItemStyle heredan de esta clase base común). Varios controles Web de servidor dan acceso a ropiedades de este tipo para especificar el estilo de elementos individuales de representación del control. Por ejemplo, -- da acceso a propiedades de acceso como: DayStyle, WeekendDayStyle, TodayDayStyle, SelectedDayStyle, OtherMonthDayStyle y NextPrevStyle. Podemos fijar propiedades individuales para estos estilos mediante la sintaxis de subpropiedad PropertyName-SubPropertyName, como muestra el siguiente ejemplo.

C# Style5.aspx

Una sintaxis ligeramente diferente permite declarar cada propiedad de Style como un elemento hijo, anidado dentro de las etiquetas del control Web de servidor.

<ASP:Calendar ... runat="server">
    <TitleStyle BorderColor="darkolivegreen" BorderWidth="3"
            BackColor="olivedrab" Height="50px" />
</ASP:Calendar>

El siguiente ejemplo muestra una sintaxis alternativa, cuya funcionalidad es equivalente a la anterior.

C# Style6.aspx

De la misma forma que con los controles HTML de servidor, podemos aplicar estilos a controles Web de servidor mediante una definición de clase CSS. La clase base WebControl permite el acceso a una propiedad String llamada CssClass para establecer la clase estilo.

C# Style7.aspx

Si se establece un atributo en un control de servidor que no correspondo a una propiedad fuertemente tipada del control, el atributo y el valor se rellenan en el grupo Attributes del control. Por defecto, los controles de servidor representarán estos atributos sin modificarlos en el HTML devuelto al navegador cliente que los haya pedido. Ésto significa que los atributos de estilo y clase se pueden establecer directamente en controles Web de servidor. Ésto es especialmente útil para los controles de entrada de formulario estándares.

C# Style8.aspx

Los estilos de los controles Web de servidor se pueden establecer mediante código utilizando el método ApplyStyle de la clase base WebControl, cómo vemos en el siguiente código.

<script language="C#" runat="server">
    void Page_Load(Object Src, EventArgs E ) {
        Style style = new Style();
        style.BorderColor = Color.Black;
        style.BorderStyle = BorderStyle.Dashed;
        style.BorderWidth = 1;

        MyLogin.ApplyStyle (style);
        MyPassword.ApplyStyle (style);
        MySubmit.ApplyStyle (style);
    }
</script>

Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/>
Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" />
View:  <ASP:DropDownList id="MySelect" runat="server">  ...  </ASP:DropDownList>

El siguiente ejemplo ejemplifica el código anterior.

C# Style9.aspx

El Framework de Formularios Web incluye un conjunto de controles de servidor de validación que proporcionan una forma sencilla pero poderosa de comprobar los formularios de entrada en busca de errores y, si es necesario, mostrar mensajes al usuario. Los controles de validación se añaden a una página de Formularios Web de la misma forma que el resto de controles. Hay controles para tipos específicos de validación, por ejemplo comprobación de rango o coincidencia con patrones, además de un RequiredFieldValidator que asegura que un usuario no olvide rellenar un campo. Podemos "ligar" más de un control de validación a un control de entrada. Por ejemplo, podríamos especificar tanto que un campo es obligatorio y que debe contener un rango específico de valores.

Los controles de validación trabajan un limitado subconjunto de controles de servidor HTML y Web. Para cada control, una propiedad específica contiene el valor que se validará. La siguiente tabla muestra los controles de entrada que pueden ser validados.

Control	Propiedad de Validación
HtmlInputText	Value
HtmlTextArea	Value
HtmlSelect	Value
HtmlInputFile	Value
TextBox	Text
ListBox	SelectedItem.Value
DropDownList	SelectedItem.Value
RadioButtonList	SelectedItem.Value
FileUpload	FileName

Tipos de Controles de Validación

El formulario de validación más sencillo es un campo obligatorio. Si el usuario introduce un valor en el campo, es válido. Si todos los campos de la página son válidos, la página es válida. El siguiente ejemplo muestra el uso de RequiredFieldValidator.

C# RequiredFieldValidator

También hay controles de validación para tipos específicos de validación, cómo control de rango o coincidencia con un patrón. La siguiente tabla muestra los controles de validación.

Nombre del Control	Descripción
RequiredFieldValidator	Asegura que el usuario no se deja un campo
CompareValidator	Compara los datos que introduce el usuario con una constante o el valor de una propiedad de otro control mediante un operador de comparación (menor que, igual que, mayor que, etc.).
RangeValidator	Comprueba que la entrada del usuario se encuentra entre un límite superior y otro inferior. Podemos comprobar los rangos con parejas de números, caracteres alfabéticos o fechas. Los límites se pueden expresar como constantes.
RegularExpressionValidator	Comprueba que la entrada sigua un patrón definido como una expresión regula. Este tipo de validación nos permite comprobar secuencias predecibles de caracteres, tales como números de seguridad social, dirección de e-amil, números de teléfono, códigos postales, etc.
CustomValidator	Comprueba la entrada de usuario mediante lógica de validación que hemos programado nosotros. Este tipo de validación nos permite comprobar valores obtenidos en tiempo de validación.
ValidationSummary	Muestra los errores de validación en un formulario resumen para todos los validadores de la página.

Validación del Lado Cliente

Los controles de validación siempre realizan operaciones de validación comprobando en el código del servidor. Sin embargo, si el usuario trabajo con un navegador que soporta DHTML, los controles de validación pueden realizar la validación mediante scripts de cliente. Con la validación del lado del cliente, cualquier error se detecta en el cliente cuando se envía el formulario al servidor. Si cualquiera de los validadores encuantra un error, el envío del formulario al servidor se cancela y se muestra la propiedad Text del validador. Ésto permite al usuario corregir la entrada antes de enviar el formulario al servidor. Los valores de los campos se revalidan cuando el campo que contenía el error pierde el foco, proporcionando así una experiencia rica e interactiva de validación al usuario.

Observad que el Framework de Páginas de Formularios Web siempre realiza la validación en el servidor, incluso cuando ya se ha hecho en el cliente. Ésto nos ayuda a impedir que los usuarios puedan saltarse la validación haciéndose pasar por otro usuario o una transacción préviamente aprobada.

La validación del lado del cliente está permitida por defecto. Si el cliente lo permite, la validación de nivel superior se realizará de forma automática. Para deshabilitar la validación del lado del cliente, estableceremos la propiedad ClientTarget de la página a "Downlevel" ("Uplevel" fuerza la validación del lado cliente). De forma alternativa, podemos establecer la propiedad EnableClientScript de un control de validación a "false" para deshabilitar la validación del lado cliente para dicho control.

C# Validación del Lado Cliente

Mostrando Errores de Validación

Cuando se procesa una entrada de usuario (por ejemplo, al enviar un formulario), el Framework de Páginas de Formularios Web pasa la entrada de usuario al control o controles de validación. Los controles de validación testean las entradas del usuario y establecen una propiedad para indicar si la entrada ha pasado el test de validación. Después de procesarse todos los controles de validación, la propiedad IsValid de la página se establece; si alguno de los controles muestra un fallo de validación, la página entera se marca como inválida.

Si un control de validción da un error, dicho control mostrará un mensaje de error en la página o en un control ValidationSummary en cualquier otro lugar de la página. El control ValidationSummary se muestra cuando la propiedad IsValid de la página está establecida a "false". Sondea el resto de controles de validación de la página y agrega el texto que cada uno muestra. En el siguiente ejemplo vemos cómo mostrar errores con un control ValidationSummary.

C# ValidationSummary

Trabajando con CompareValidator

El control de servidor CompareValidator compara los valores de dos controles. CompareValidator utiliza tres propiedades clave para realizar su validación. ControlToValidate y ControlToCompare contienen los valores a comparar. Operator define el tipo de comparación a realizar (por ejemplo Igual o Diferente). CompareValidator realiza la validación mediante la evaluación de estas propiedades como una expresión, de la siguiente manera:

( ControlToValidate ControlToCompare )

Si el resultado de la validación es "true", el resultado de validación es válido. Podemos especificar opcionalmente la propiedad ValueToCompare para realizar la comparación con un valor estático, en lugar de ControlToCompare.

El control de servidor CompareValidator también puede utilizarse para realizar la validación de Datatype. Por ejemplo, si la información de la fecha de nacimiento se tiene que recoger de la página de registro del usuario, el control CompareValidator se puede utilizar para asegurarnos que la fecha tiene un formato reconocido, antes de que se envíe a la base de datos.

El siguiente ejemplo muestra cómo utilizar el control CompareValidator.

C# CompareValidator

Trabajando con RangeValidator

El control de servidor RangeValidator comprueba si un valor de entrada se encuentra dentro de un determinado rango. RangeValidator utiliza tres propiedades clave para realizar su validación. ControlToValidate contiene el valor a validar. MinimumValue y MaximumValue definen los valores mínimo y máximo del rango válido.

Este ejemplo muestra el uso del control RangeValidator.

C# RangeValidator

Trabajando con Expresiones Regulares

El control de servidor RegularExpressionValidator comprueba que una entrada coincida con un determiado patrón definido por una expresión regular. Este tipo de validación nos permite comprobar secuencias predecibles de carácteres, como números de la seguridad social, direcciones de e-mail, números de teléfono, códigos postales, etc.

RegularExpressionValidator utiliza dos propiedades clave para realizar la validación. ControlToValidate contiene el valor a validar. ValidationExpression contiene la expresión regular con la que tiene que coincidir.

Estos ejemplos muestran el uso del control RegularExpressionValidator.

C# RegularExpressionValidator

C# RegularExpressionValidator 2

Realizando Validación Personalizada

El control de servidor CustomValidator llama a una función definida por el usuario para realizar validaciones que los validadores estándar no pueden llevar a cabo. La función personalizada se puede ejecutar en el servidor o en un script del lado del cliente, por ejemplo JScript o VBScript. Para la validación personalizada en el lado del cliente, el nombre de la función debe definirse en la propiedad ClientValidationFunction. Dicha función debe tener la forma

 
						function myvalidator(source, arguments)

. Observad que source es el objeto CustomValidator del lado cliente, y arguments es un objeto con dos propiedades, Value y IsValid. La propiedad Value es el valor que tendremos que validar y la propiedad IsValid es un Boolean en el que se dovolverá el resultado de la validación.

Para validación personalizada del lado del servidor, tendremos que poner nuestra validación en el delegado de OnServerValidate del validador.

El siguiente ejemplo muestra cómo utilizar el control CustomValidator.

C# Custom Validator

ValidateEmptyText

La propiedad ValidateEmptyText, nueva en ASP.NET 2.0, soluciona un problema con CustomValidator. En ASP.NET 1.0, la validación personalizada no se ejecutaba si el texto de ControlToValidate estaba vacío. Podemos fijar esta propiedad a "true" para hacer que la validación personalizada se realice para valores de entrada vacíos.

Validation Groups

La propiedad ValidationGroup se utiliza cuando el usuario quiere tener escenarios de validación diferentes en la misma página. Estableceremos el nombre del grupo en el validador y en el botón o en otro control "postback" que cause la validación. Ésto es útil con controles Wizard, MultiView o controles de datos (edición). Por defecto, todos los validadores se encuentran en el grupo "" (grupo por defecto), para compatibilidad hacía atrás (con versiones anteriores). Page nos proporciona además los métodos GetValidators("group") y Validate("group"). Page.IsValidrefleja la validez de todos los controles (acumulativa) que han sido llamados a Validate .

El siguiente ejemplo muestra la propiedad ValidationGroup. Para ver su comportamiento, haced clic en el primet botón (Search) de la página, después haced clic en el segundo botón. Observad que se ejecutan un grupo de validadores diferente en cada clic.

C# Validation Groups

SetFocusOnError

Otra característica nueva de ASP.NET 2.0 es SetFocusOnError que se establece en controles de validación y hace que el primer control inválido reciba el foco. Para más información sobre SetFocusOnError acudid al tópico Focus API de la sección Tips and Tricks.

Un Formulario Típico de Validación

Este ejemplo muestra un formulario típico de registro, utilizando las variaciones de validación que hemos explicado en este capítulo.

C# Validation Form