iniciando hacia los web-forms

8/7/2019 iniciando hacia los web-forms

1/41

Formularios web

En este captulo, nos centraremos en la construccin de pginas ASP.NET y adquiriremos los

conocimientos necesarios para ser capaces de crear nuestras propias pginas web dinmicascon ASP.NET:

- En primer lugar, veremos en qu consisten los formularios web, una partefundamental de la plataforma .NET.

- A continuacin, estudiaremos los controles que podemos incluir dentro de lasinterfaces web que construiremos con formularios ASP.NET. Primero,analizaremos los tres tipos de componentes estndar incluidos en las bibliotecasde la plataforma .NET correspondientes a ASP.NET. Despus, llegaremos a vercmo podemos crear nuestros propios controles.

- Cuando ya tengamos una buena nocin de lo que podemos incluir en unformulario ASP.NET, aprenderemos algo ms acerca de su funcionamiento. Enconcreto, nos interesar saber qu son los "post backs" y cmo se mantiene elestado de una pgina ASP.NET.


2/41

Formularios web

Formularios en ASP.NET ......................................................45

Ejecucin de pginas ASP.NET .............................. 45

Creacin de pginas ASP.NET................................ 47

Uso de controles en ASP.NET..............................................50Controles HTML....................................................... 54

Controles web .......................................................... 56

Controles de validacin............................................ 60

Controles creados por el usuario ............................. 62

Funcionamiento de las pginas ASP.NET ..........................74

Solicitudes y "postbacks" ......................................... 75

Estado de una pgina ASP.NET.............................. 79

44 Desarrollo Profesional de Aplicaciones con C#

Fernando Berzal, Francisco J. Cortijo & Juan Carlos Cubero
mailto:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]


3/41

Formularios en ASP.NET

En el captulo anterior, presentamos una panormica general del desarrollo de aplicacionesweb, en la que mostramos las distintas alternativas de las que dispone el programador ysituamos en su contexto la tecnologa incluidas en la plataforma .NET para la creacin deinterfaces web: las pginas ASP.NET.

ASP.NET sustituye a las pginas interpretadas utilizadas en ASP por un sistema basado encomponentes integrados en la plataforma .NET. De esta forma, podemos crear aplicacionesweb utilizando los componentes que vienen incluidos en la biblioteca de clases de laplataforma .NET o, incluso, creando nuestros propios componentes. Lo usual es que estosltimos los implementemos a partir de los componentes existentes por composicin; esto es,encapsulando conjuntos de componentes existentes en un componente nuevo. No obstante,tambin podemos crear nuevos componentes por derivacin, creando una nueva clasederivada de la clase del componente cuyo comportamiento deseamos extender (como encualquier entorno de programacin orientado a objetos).

Al construir nuestras aplicaciones utilizando componentes, podemos utilizar un entorno deprogramacin visual (como el Visual Studio .NET). Como consecuencia, al desarrollaraplicaciones web, no hemos de prestar demasiada atencin al HTML de nuestras pginasASP.NET, salvo, claro est, cuando estemos implementando los distintos componentes que

utilizaremos para crear los controles de la interfaz de usuario. En otras palabras, loscomponentes nos permiten crear nuestra aplicacin centrndonos en su lgica. Los propioscomponentes se encargarn de generar los fragmentos de HTML necesarios para construir lainterfaz web de la aplicacin.

En esta seccin veremos en qu consisten y cmo se crean las pginas ASP.NET, aunqueantes nos detendremos un poco en analizar cmo se ejecutan las pginas ASP.NET desde elpunto de vista fsico.

Ejecucin de pginas ASP.NETLos servidores HTTP pueden configurarse de tal forma que las peticiones recibidas se tratende diferentes formas en funcin del tipo de recurso solicitado. Bsicamente, esta decisin larealiza el servidor a partir de la extensin del recurso al que intenta acceder el cliente. En elcaso de las pginas ASP convencionales, cuando el usuario intenta acceder a un fichero conextensin .asp, el Internet Information Server delega en la biblioteca asp.dll, que seencarga de interpretar la pgina ASP. Cuando se utiliza ASP.NET, el IIS se configura de talforma que las solicitudes recibidas relativas a ficheros con extensin .aspx son enviadas a labiblioteca aspnet_isapi.dll.

45Formularios web

http://csharp.ikor.org/
http://csharp.ikor.org/http://csharp.ikor.org/


4/41

Como su propio nombre sugiere, la biblioteca aspnet_isapi.dll es un mdulo ISAPI.Los mdulos ISAPI, como vimos en el captulo anterior, sirven para crear aplicaciones web

sin que en el servidor se tengan que crear nuevos procesos cada vez que, como respuesta auna solicitud, se ha de crear dinmicamente una pgina web. La biblioteca encargada de laejecucin de las pginas ASP.NET (aspnet_isapi.dll) encapsula el CLR [Common Language Runtime] de la plataforma .NET. De esta forma, podemos utilizar todos losrecursos de la plataforma .NET en el desarrollo de aplicaciones web. La DLL mencionadacrear las instancias que sean necesarias de las clases .NET para atender las solicitudesrecibidas en el servidor web.

Ejecucin de pginas ASP.NET: Usando el Internet Information Servercomo servidor HTTP, una DLL ISAPI se encarga de que podamos

aprovechar todos los recursos de la plataforma .NET en el desarrollo deaplicaciones web.




5/41

A diferencia de las pginas ASP tradicionales, las pginas ASP.NET se compilan antes deejecutarse. La primera vez que alguien accede a una pgina ASP.NET, sta se compila y se

crea un fichero ejecutable que se almacena en una cach del servidor web, un assembly siutilizamos la terminologa propia de la plataforma .NET. De esta forma, las siguientesocasiones en las que se solicite la pgina, se podr usar directamente el ejecutable. Al no tenerque volver a compilar la pgina ASP.NET, la ejecucin de sta ser ms eficiente que la deuna pgina ASP convencional.

Configuracin del IIS

Para poder ejecutar pginas ASP.NET en el Internet Information Server, primerohemos de indicarle cmo ha de gestionar las peticiones recibidas relativas a ficheroscon extensin .aspx. Para ello debemos utilizar la herramienta aspnet_regiisque se encuentra en el directorio donde se instala la plataforma .NET:

/Microsoft.NET/Framework/v1.X.XXXX

donde es el directorio donde est instalado el sistema operativoWindows (C:/Windows o C:/winNT, por lo general) y v1.X.XXXX corresponde ala versin de la plataforma .NET que tengamos instalada en nuestra mquina. Puedeque en nuestro ordenador existan distintas versiones instaladas de la plataforma .NETy, usualmente, escogeremos la ms reciente para utilizarla en la creacin de nuestraspginas ASP.NET.

Creacin de pginas ASP.NET

La biblioteca de clases .NET incluye un conjunto de clases que nos sern de utilidad en lacreacin de las pginas ASP.NET. Entre dichas clases se encuentra una amplia gama decontroles que podremos utilizar en la construccin de interfaces web para nuestrasaplicaciones, controles tales como botones, cajas de texto, listas o tablas. Adems, labiblioteca de clases estndar tambin proporciona algunos componentes que nos facilitarnrealizar tareas comunes como la gestin del estado de nuestra aplicacin web. Conforme

vayamos avanzando en la construccin de pginas ASP.NET, iremos viendo cmo funcionacada uno de los componentes suministrados por la plataforma .NET.

Una aplicacin web, generalmente, estar formada por varios formularios web. Cada uno deesos formularios lo implementaremos como una pginas ASP.NET. En la plataforma .NET,las pginas ASP.NET se construyen creando clases derivadas de la claseSystem.Web.UI.Page. Dicha clase proporciona la base sobre la que construiremosnuestras pginas ASP.NET, que implementaremos como subclases deSystem.Web.UI.Page en las que incluiremos la funcionalidad requerida por nuestrasaplicaciones.

47Formularios web



6/41

En realidad, para mantener independientes la interfaz de usuario y la lgica asociada a laaplicacin, la implementacin de las pginas ASP.NET la dividiremos en dos ficheros. En un

fichero con extensin .aspx especificaremos el aspecto de nuestra interfaz, utilizando tantoetiquetas HTML estndar como etiquetas especficas para hacer referencia a los controlesASP.NET que deseemos incluir en nuestra pgina. En un segundo fichero, que ser un ficherode cdigo con extensin .cs si utilizamos en lenguaje C#, implementaremos la lgica de laaplicacin.

El siguiente ejemplo muestra el aspecto que tendr nuestro fichero .aspx:

Hoy es

El fichero anterior incluye todo lo necesario para generar dinmicamente una pgina web enla que incluiremos la fecha actual, que aparecer donde est el fragmento de cdigodelimitado por , las mismas etiquetas que se utilizan en ASP tradicional paracombinar la parte esttica de la pgina (las etiquetas HTML) con la parte que ha de generarse

dinmicamente. En esta ocasin, en vez de introducir el cdigo necesario entre las etiquetas, hemos optado por implementar una funcin auxiliar OutputDay que definiremosen un fichero de cdigo aparte. El aspecto de este fichero de cdigo, con extensin .cs, serel siguiente:

using System;using System.Web.UI;

public class TodayPage:Page{

protected void OutputDay(){

Response.Write(DateTime.Now.ToString("D"));}

}

Este fichero define una clase (TodayPage) que hereda de la claseSystem.Web.UI.Page. En nuestra clase hemos incluido un mtodo que se encargar degenerar un mensaje en el que se muestre la fecha actual. Para ello empleamos la claseResponse que representa la respuesta de nuestra pgina ASP.NET y la clase DateTimeque forma parte del vasto conjunto de clases incluidas en la biblioteca de clases de la




7/41

plataforma .NET.

Tcnicamente, el fichero .aspx que creamos representa una clase que hereda de la clasedefinida en el fichero de cdigo con extensin .cs, el cual, a su vez, define una subclase deSystem.Web.UI.Page. Esto explica por qu definimos en mtodo OutputDay() comoprotected, para poder acceder a l desde la subclase correspondiente al fichero .aspx.

Para poner a disposicin de los usuario la no demasiado til aplicacin web que hemos creadocon los dos ficheros anteriores, slo tenemos que copiar ambos ficheros a algn directorio alque se pueda acceder a travs del IIS (el directorio raz wwwroot, por ejemplo). Cuando unusuario intente acceder a nuestra aplicacin web, ste slo tendr que introducir la rutaadecuada en la barra de direcciones de su navegador para acceder a la pgina .aspx. Alacceder por primera vez a ella, el cdigo asociado a la pgina se compilar automticamente yse generar un assembly en la cach del CLR encapsulado por la bibliotecaaspnet_isapi.dll en el servidor web IIS.

Exactamente igual que en ASP, si el texto de la pgina ASP.NET cambia, el cdigo serecompilar automticamente, por lo que podemos editar libremente nuestra pgina en elservidor y al acceder a ella ejecutaremos siempre su versin actual (sin tener que desinstalarmanualmente la versin antigua de la pgina e instalar la versin nueva en el servidor web).Si, entre solicitud y solicitud, el texto de la pgina no cambia, las nuevas solicitudes seatendern utilizando el cdigo previamente compilado que se halla en la cach del servidorweb, con lo cual se mejora notablemente la eficiencia de las aplicaciones web respecto aversiones previas de ASP.

Aunque en el ejemplo anterior hayamos incluido un fragmento de cdigo entre las etiquetas dentro de la pgina .aspx, igual que se haca con ASP, lo usual es queaprovechemos los recursos que nos ofrece la plataforma .NET para construir aplicaciones webde la misma forma que se construyen las aplicaciones para Windows en los entornos deprogramacin visual. Como sucede en cualquiera de estos entornos, la interfaz web de nuestraaplicacin la crearemos utilizando controles predefinidos a los cuales asociaremos uncomportamiento especfico definiendo su respuesta ante distintos eventos. En la siguienteseccin de este captulo veremos cmo se utilizan controles y eventos en las pginasASP.NET.

49Formularios web



8/41

Uso de controles en ASP.NET

Utilizando ASP.NET, las interfaces web se construyen utilizando controles predefinidos.Estos controles proporcionan un modelo orientado a objetos de los formularios web, similaren cierto modo al definido por JavaScript. Sin embargo, a diferencia de JavaScript, enASP.NET no trabajaremos directamente sobre los objetos que representan las etiquetasHTML del documento que visualiza el usuario en su navegador. Lo que haremos ser utilizarcontroles definidos en la biblioteca de clases .NET.

Al emplear controles predefinidos en nuestra interfaz de usuario en vez de especificardirectamente las etiquetas HTML de los formularios web, las pginas ASP.NET se conviertenen meras colecciones de controles. Desde el punto de vista del programador, cada control serun objeto miembro de la clase que representa la pgina (aqulla que hereda deSystem.Web.UI.Page). Cuando deseemos asociar a nuestra pgina un comportamientodinmico, lo nico que tendremos que hacer es asociar a los distintos controles losmanejadores de eventos que se encargarn de implementar la funcionalidad de la pgina,exactamente igual que cuando se crea una interfaz grfica para Windows utilizando unentorno de programacin visual. Adems, en nuestras pginas ASP.NET podremos incluirnuestros propios controles, los cuales crearemos a partir de los controles existentes porderivacin (creando clases nuevas que hereden de las clases ya definidas) o por composicin(encapsulando una pgina completa para luego utilizarla como un control ms dentro de otras

pginas).

En definitiva, en vez de utilizar un intrprete que se encargue de ejecutar los fragmentos decdigo desperdigados por nuestras pginas web, lo que haremos ser utilizar un sistemabasado en eventos para generar dinmicamente el contenido de las pginas que se le muestranal usuario. Esto nos permitir acceder a todas las caractersticas de C# y de la plataforma.NET para construir aplicaciones web flexibles, modulares y fciles de mantener.

Adems, aparte de proporcionar un modelo orientado a objetos de la aplicacin que evita elcdigo "spaghetti" tpico de ASP, los controles web constituyen una capa intermedia entre elcdigo de la aplicacin y la interfaz de usuario. Entre las ventajas que proporciona este hecho,

destaca la compatibilidad automtica de las aplicaciones web con distintos tipos denavegadores. La implementacin de los distintos controles se encargar de aprovechar lafuncionalidad de los navegadores modernos (como JavaScript o HTML dinmico), sin queesto suponga que nuestra aplicacin deje de funcionar en navegadores ms antiguos (los quese limitan a soportar HTML 3.2).

Dentro de las pginas ASP.NET, los controles se indican en el fichero .aspx utilizandoetiquetas de la forma . Para implementar el ejemplo de la seccin anteriorutilizando controles, lo nico que tenemos que hacer es crear una pgina ASP.NET con unaetiqueta (componente asp:Label). Si estamos utilizando Visual Studio .NET como entorno




9/41

de desarrollo, creamos un nuevo proyecto de tipo Aplicacin Web ASP.NET. Al aparecernosun formulario web vaco, modificamos su propiedad pageLayout para utilizar el estilo

FlowLayout tpico de las pginas web, en las que los controles no se colocan encoordenadas fijas (a diferencia de la forma habitual de trabajar con formularios Windows).Para que el contenido de la pgina aparezca centrado, utilizamos uno de los botones de labarra de herramientas igual que si estuvisemos trabajando con un procesador de textos.Finalmente, aadimos una etiqueta [Label] que obtenemos del cajn Web Forms del cuadrode herramientas. Una vez que tenemos el control en nuestro formulario web, lo normal es quemodifiquemos su identificador (propiedad (ID)) y el texto que muestra en el formulario(propiedad Text). Como resultado de este proceso obtenemos el siguiente fichero .aspx, enel que aparece nuestro control como una etiqueta asp:Label:

WebForm

Hoy es...

El fichero mostrado define los controles existentes en nuestra interfaz de usuario e incluyeinformacin adicional acerca de cmo ha de procesarse la pgina ASP.NET. De todo lo queha generado el Visual Studio, el detalle ms significativo es la inclusin del atributorunat="server" en todos aquellos componentes de nuestra interfaz a los que podemosasociarles manejadores de eventos que implementen la lgica de la aplicacin como respuestaa las acciones del usuario. Dichos manejadores de eventos se ejecutarn siempre en el

servidor y sern los encargados de que nuestras aplicaciones sean algo ms que pginasestticas en las que se muestra informacin.

IMPORTANTE

Todos los controles en una pgina ASP.NET deben estar dentro de una etiqueta con el atributo runat="server". Adems, ASP.NET requiere que todoslos elementos HTML estn correctamente anidados y cerrados (como sucede enXML).

51Formularios web



10/41

Si deseamos lograr el mismo efecto que conseguamos en la seccin anterior al introducir unfragmento de cdigo dentro de nuestro fichero .aspx, podemos especificar la respuesta de

nuestro formulario al evento Page_Load, que se produce cuando el usuario accede a lapgina ASP.NET desde su navegador. En un entorno de programacin visual como VisualStudio .NET, slo tenemos que buscar el evento asociado al componente WebForm y hacerdoble click sobre l.

El evento Page_Load nos permite especificar acciones que deseamosrealizar antes de mostrarle la pgina al usuario.

Acto seguido, implementamos la lgica de la aplicacin como respuesta al evento dentro delfichero de cdigo C# asociado a la pgina ASP.NET. En el ejemplo que nos ocupa slotenemos que escribir una lnea de cdigo dentro del mtodo creado automticamente por elVisual Studio .NET para gestionar el evento Page_Load:

private void Page_Load(object sender, System.EventArgs e)

{LabelFecha.Text = "Hoy es " + DateTime.Now.ToString("D");

}

En realidad, el cdigo de nuestra aplicacin es algo ms complejo. Aunque nosotros slo nospreocupemos de escribir el cdigo que muestra la fecha actual, el entorno de desarrollo seencarga de hacer el resto del trabajo por nosotros. El cdigo completo asociado a nuestroformulario, eliminando comentarios y sentencias using, ser el mostrado a continuacin:




11/41

public class WebForm : System.Web.UI.Page{

protected System.Web.UI.WebControls.Label LabelFecha;

private void Page_Load(object sender, System.EventArgs e){

LabelFecha.Text = "Hoy es " + DateTime.Now.ToString("D");}

#region Cdigo generado por el Diseador de Web Forms

override protected void OnInit(EventArgs e){

InitializeComponent();base.OnInit(e);

}

private void InitializeComponent(){

this.Load += new System.EventHandler(this.Page_Load);}

#endregion}

La regin de cdigo que no hemos implementado nosotros se encarga, bsicamente, deinicializar los componentes de nuestra pgina con las propiedades que fijamos en el diseadorde formularios (aqullas que aparecen en el fichero .aspx) y, adems, les asigna losmanejadores de eventos que hemos implementado a los distintos eventos asociados a loscomponentes de nuestra interfaz; esto es, enlaza nuestro cdigo con los componentes de lainterfaz. En el ejemplo mostrado, el nico evento para el cual nuestra aplicacin tiene unarespuesta especfica es el evento Load del formulario web.

El ejemplo anterior puede conducir a conclusiones errneas si no se analiza con detalle. Puedeparecer que el formulario web construido utilizando controles resulta excesivamente complejoen comparacin con la implementacin equivalente que vimos en la seccin anterior de estecaptulo. No obstante, la organizacin modular de la pgina ASP.NET simplifica el desarrollode interfaces complejos y su posterior mantenimiento. Resulta mucho ms sencillo modificarel cdigo incluido en un mtodo de una clase que el cdigo disperso entre etiquetas propias de

la interfaz de usuario. Adems, la comprobacin del correcto funcionamiento del cdigoimplementado tambin ser ms sencilla cuando slo incluimos en el fichero .aspx loscontroles de la interfaz de usuario e implementamos su funcionalidad aparte. Por otra parte, lacomplejidad extra que supone utilizar los controles no repercute en el trabajo delprogramador, ya que el entorno de desarrollo se encarga de generar automticamente elcdigo necesario para enlazar los controles con el cdigo implementado por el programador.

Como hemos visto, al usar controles en nuestra interfaz web, la lgica de la aplicacin seimplementa como respuesta de la interfaz de usuario a los distintos eventos que puedanproducirse, exactamente igual que en cualquier entorno de programacin visual para

53Formularios web



12/41


13/41

...

Visite nuestra pgina!

Una vez que hemos marcado el enlace con el atributo runat="server", podemosmodificar sus propiedades accediendo a l a travs del identificador que le hayamos asociado.En ASP.NET, los enlaces HTML de una pgina se representan mediante el control

HtmlAnchor. Una de las propiedades de este control (HRef) indica la URL a la que apuntael enlace, por lo que slo tenemos que establecer un valor adecuado para esta propiedad en elcdigo asociado a alguno de los eventos de la pgina ASP.NET. El fichero de cdigoresultante tendra el siguiente aspecto:

public class HTMLControl : System.Web.UI.Page{

protected System.Web.UI.HtmlControls.HtmlAnchor enlace;


enlace.HRef = "http://csharp.ikor.org/";

}

override protected void OnInit(EventArgs e){

this.Load += new System.EventHandler(this.Page_Load);base.OnInit(e);

}}

Si utilizamos Visual Studio .NET, para poder manipular un control HTML en el servidor slotenemos que seleccionar la opcin "Ejecutar como control del servidor" del men contextualasociado a la etiqueta HTML en el diseador de formularios web. Esto hace que se aada al

atributo runat="server" a la etiqueta en el fichero .aspx y que se incluya ladeclaracin correspondiente en la clase que define nuestro formulario, con lo cual ya podemosprogramar el comportamiento del control HTML en funcin de nuestras necesidadesaccediendo a l como un miembro ms de la clase que representa la pgina ASP.NET.

La biblioteca de clases de la plataforma .NET incluye una gama bastante completa decomponentes que encapsulan las distintas etiquetas que pueden aparecer en un documentoHTML. Dichos componentes se encuentra en el espacio de nombresSystem.Web.UI.HtmlControls.

55Formularios web



14/41

Las etiquetas ms comunes en HTML tienen su control HTML equivalente en ASP.NET. Estees el caso de los enlaces o las imgenes en HTML, los cuales se representan como objetos de

tipo HtmlAnchor y HtmlImage en las pginas ASP.NET, respectivamente. Si, porcualquier motivo, nos encontramos con que no existe un control HTML especfico pararepresentar una etiqueta HTML determinada, esto no impide que podamos manipularla desdenuestra aplicacin web. Existe un control genrico, denominado HtmlGenericControl.

La siguiente tabla resume los controles HTML disponibles en ASP.NET, las etiquetas a lasque corresponden en HTML estndar y una breve descripcin de su funcin en la creacin depginas web:

Control HTML Etiqueta HTML Descripcin

HtmlAnchor EnlaceHtmlButton Botn

HtmlForm Formulario

HtmlGenericControl Cualquier elemento HTMLpara el cual no existe uncontrol HTML especfico

HtmlImage Imagen

HtmlInput... Distintos tipos de entradasen un formulario HTML:

botones (button, submity reset), texto (text y

password), opciones(checkbox y radio),

imgenes (image), ficheros(file) y entradas ocultas

(hidden).

HtmlSelect Lista de opciones en unformulario

HtmlTable... Tablas, filas y celdas

HtmlTextArea Texto en un formulario

Controles web

La principal aportacin de ASP.NET a la creacin de interfaces web es la inclusin decontroles especficos que aslan al programador del HTML generado para presentar elformulario al usuario de la aplicacin. Como ya mencionamos anteriormente, estos controles




15/41

permiten desarrollar aplicaciones web compatibles con distintos navegadores y facilitan latarea del programador al ofrecerle un modelo de programacin basado en eventos.

En el fichero .aspx asociado a una pgina ASP.NET, los controles web se incluyenutilizando etiquetas especficas de la forma . La sintaxis general de unaetiqueta ASP.NET es de la siguiente forma:

Dada una etiqueta como la anterior:

- control variar en funcin del tipo de control que el programador decidaincluir en su pgina ASP.NET. La etiqueta concreta de la forma asp:... />ser diferente para mostrar un texto (asp:Label), un botn (asp:Button),una lista convencional (asp:ListBox) o una lista desplegable(asp:DropDownList), por mencionar algunos ejemplos.

- identificador especifica el identificador que le asociamos a la variablemediante la cual accederemos al control desde el cdigo de nuestra aplicacin.

- Finalmente, la inclusin del atributo runat="server" es necesaria paraindicar que el programador puede manipular la etiqueta ASP.NET desde elservidor implementando manejadores de eventos para los distintos eventos a los

que pueda responder el control representado por la etiqueta ASP.NET.

Igual que suceda con las etiquetas HTML, en la biblioteca de clases de la plataforma .NETexisten componentes que nos permiten manipular dichas las etiquetas ASP.NET desde elcdigo de la aplicacin. Dichos componentes encapsulan a las distintas etiquetas ASP.NET yse encuentran en el espacio de nombres System.Web.UI.WebControls. De hecho,todos ellos derivan de la clase WebControl, que se encuentra en el mismo espacio denombres.

Uso de controles ASP.NET

Para mostrar el uso de los controles ASP.NET, podemos crear una aplicacin web ASP.NETdesde el Visual Studio .NET. Dicha aplicacin contiene, por defecto, un formulario webvaco al que denominamos WebControl.aspx. A continuacin, le aadimos un botn alformulario utilizando el control Button que aparece en la seccin Web Forms del Cuadrode herramientas de Visual Studio .NET.

Al aadir el botn, en el fichero .aspx de la pgina ASP.NET aparece algo similar a losiguiente:

57Formularios web



16/41

Uso de controles ASP.NET

As mismo, en el fichero de cdigo asociado a la pgina aparece una declaracin de la forma:

protected System.Web.UI.WebControls.Button Button;

Ahora slo nos falta aadirle algo de funcionalidad a nuestra aplicacin. Para lograrlo,buscamos los eventos a los cuales ha de reaccionar nuestro formulario web eimplementamos los manejadores de eventos correspondientes. Por ejemplo, desde el mismo

diseador de formularios web del Visual Studio .NET, podemos hacer doble click sobre elbotn para especificar la respuesta de este control al evento que se produce cuando el usuariopulsa el botn desde su navegador web:

private void Button_Click(object sender, System.EventArgs e){

Button.Text = "Ha pulsado el botn";}

Obviamente, la lgica asociada a los eventos de una aplicacin real ser bastante mscompleja (y til), si bien la forma de trabajar del programador ser siempre la misma:implementar la respuesta de la aplicacin frente a aquellos eventos que sean relevantes paralograr la funcionalidad deseada.

Como se puede comprobar, el desarrollo de aplicaciones web con controles ASP.NET escompletamente anlogo al desarrollo de aplicaciones para Windows. Slo tenemos queseleccionar los controles adecuados para nuestra interfaz e implementar la respuesta denuestra aplicacin a los eventos que deseemos controlar.

Aunque la forma de desarrollar la interfaz de usuario sea la misma cuando se utilizanformularios web ASP.NET y cuando se emplean formularios para Windows, los controles quese pueden incluir cambian en funcin del tipo de interfaz que deseemos crear. En el caso de

los formularios web, podemos utilizar cualquiera de los controles definidos en el espacio denombres System.Web.UI.WebControls de la biblioteca de clases de la plataforma.NET. La mayora de ellos corresponden a los controles tpicos que uno podra esperarencontrarse en cualquier interfaz grfica actual, si bien tambin existen otros muy tiles parael programador en la creacin de interfaces ms sofisticadas (como es el caso de loscomponentes asp:Repeater y asp:DataGrid, que mencionaremos ms adelante eneste mismo captulo).

La tabla que ofrecemos a continuacin resume, a modo de gua, cules son los controlesASP.NET y menciona su funcin en la creacin de interfaces web con ASP.NET:




17/41

Control Descripcin

AdRotator Muestra una secuencia de imgenes (a modo de banner)

Button Botn estndar

Calendar Calendario mensual

CheckBox Caja de comprobacin (como en los formularios Windows)

CheckBoxList Grupo de cajas de comprobacin

DataGrid Rejilla de datos

DataList Muestra una lista utilizando plantillas (templates)

DropDownList Lista desplegable

HyperLink Enlace

Image Imagen

ImageButton Botn dibujado con una imagen

Label Etiqueta de texto esttico

LinkButton Botn con forma de enlace

ListBox Lista (como en los formularios Windows)

Literal Texto esttico (similar a Label)

Panel Contenedor en el que se pueden colocar otros controles

PlaceHolder Reserva espacio para controles aadidos dinmicamente

RadioButton Botn de radio (como en los formularios Windows)

RadioButtonList Grupo de botones de radio

Repeater Permite mostrar listas de controles

Table Tabla

TextBox Caja de edicin

Xml Muestra un fichero XML o el resultado de una

transformacin XSL

Como se puede apreciar a partir de la lista de controles de la tabla, la gama de controlesestndar ya disponibles es bastante amplia, lo suficiente como para poder construir interfacesgrficos estndar sin tener que preocuparnos demasiado de los detalles de implementacin delos controles de la interfaz de usuario.

59Formularios web



18/41

Controles de validacinPara finalizar nuestro recorrido por los componentes predefinidos en la biblioteca de clases dela plataforma .NET para la creacin de interfaces web, mostraremos un tercer grupo decomponentes que puede utilizarse para imponer ciertas restricciones a los datos introducidospor el usuario: los controles de validacin.

Los controles de validacin son un tipo especial de controles ASP.NET, por lo que tambinestn incluidos en el espacio de nombres System.Web.UI.WebControls. Estoscontroles se enlazan a controles ASP.NET de los descritos en el apartado anterior para validarlas entradas de un formulario web. Cuando el usuario rellena los datos de un formulario y

alguno de los datos introducidos no verifica la restriccin impuesta por el control devalidacin, este control se encarga de mostrarle un mensaje de error al usuario.

La validacin de las entradas de un formulario web se realiza automticamente cuando sepulsa un botn, ya tenga ste la forma de un botn estndar (Button), de una imagen(ImageButton) o de un enlace (LinkButton). No obstante, se puede desactivar estavalidacin si establecemos a false la propiedad CausesValidation del botncorrespondiente. Igualmente, se puede forzar la validacin manualmente en el momento quenos interese mediante el mtodo Validate asociado a la pgina ASP.NET.

Ejemplo de uso de controles de validacin

Podemos forzar a que una entrada determinada est dentro de un rango vlido de valores conun control de validacin del tipo RangeValidator:

Para ver cmo funcionan los controles de validacin, podemos crear una aplicacin webASP.NET con un formulario como el mostrado en la imagen de arriba, en el cual incluimosuna etiqueta (Label), una caja de texto (TextBox), un botn (Button) y un control devalidacin (RangeValidator), todos ellos controles incluidos en la pestaa Web Formsdel cuadro de herramientas de Visual Studio .NET.

Para que nuestro formulario web utilice el control de validacin, slo tenemos que establecer




19/41

Ejemplo de uso de controles de validacin

la propiedad ControlToValidate de este control para que haga referencia al TextBoxque usamos como entrada. Mediante la propiedad ErrorMessage especificamos elmensaje de error que se mostrar (en rojo) cuando el valor introducido por el usuario nocumpla la condicin impuesta por el control de validacin. Finalmente, esta condicin laindicamos utilizando las propiedades especficas del control de validacin que hemosescogido: el tipo de dato (Type=Integer) y el rango de valores permitidos (entreMinimumValue y MaximumValue).

Cuando los datos introducidos por el usuario son vlidos, la aplicacin prosigue su ejecucinde la forma habitual. Cuando no se verifica alguna condicin de validacin, se muestra elmensaje de error asociado al control de validacin y se le vuelve a pedir al usuario queintroduzca correctamente los datos de entrada. Obviamente, la validacin la podramos haberrealizado implementando la respuesta de nuestra aplicacin a los eventos asociados utilizandocontroles web estndar, aunque de esta forma, ASP.NET se encargar de generarautomticamente las rutinas de validacin y automatizar, al menos en parte, algunas de lascomprobaciones ms comunes que se realizan al leer datos de entrada en cualquier aplicacin.

Por cuestiones de seguridad, los controles de validacin siempre validan los datos de entradaen el servidor, con el objetivo de que un cliente malintencionado no pueda saltarse algunascomprobaciones acerca de la validez de los datos. Aun cuando la comprobacin en el servidorsiempre se realiza, si el navegador del usuario acepta HTML dinmico, la validacin tambinse efecta en el cliente. Al realizar la comprobacin antes de enviar los datos al servidor, se

consigue disminuir la carga del servidoral ahorrarnos un viaje de ida y vuelta cuando los datosde entrada no verifican las restricciones impuestas por los controles de validacin.

A pesar de su evidente utilidad, no conviene abusar demasiado del uso de controles devalidacin porque, desde el punto de vista del diseo de interfaces de usuario, suimplementacin dista de ser adecuada. Cuando el usuario introduce algn dato errneo, elerror que se ha producido no siempre llama su atencin. De hecho, lo nico que sucede en lainterfaz de usuario es la aparicin de una etiqueta, usualmente en rojo, que indica en quconsiste el error. Desafortunadamente, esta etiqueta puede que se encuentre bastante lejos delpunto en el cual el usuario tiene fija su atencin. Por tanto, para el usuario el error pasadesapercibido y no siempre le resulta obvio darse cuenta de por qu se le vuelve a presentar el

mismo formulario que acaba de rellenar. Para evitar situaciones como la descrita resultaaconsejable utilizar el control asp:ValidationSummary, que resume en una lista loserrores de validacin que se hayan podido producir al rellenar un formulario web.

Los controles de validacin predefinidos en la biblioteca de clases de la plataforma .NET seencuentran, como mencionamos al comienzo de esta seccin, en el espacio de nombresSystem.Web.UI.WebControls. Todos los controles de validacin derivan de la claseSystem.Web.UI.WebControls.BaseValidator. En la siguiente tabla se recogecules son y qu utilidad tienen:

61Formularios web



20/41

Control de validacin Descripcin

CompareValidator Compara el valor de una entrada con elde otra o un valor fijo.

CustomValidator Permite implementar un mtodocualquiera que maneje la validacin del

valor introducido.

RangeValidator Comprueba que la entrada est entre dosvalores dados.

RegularExpressionValidator Valida el valor de acuerdo a un patrnestablecido como una expresin regular.

RequiredFieldValidator Hace que un valor de entrada seaobligatorio.

Controles creados por el usuario

En las secciones anteriores de este captulo hemos visto cules son los controles predefinidosque podemos utilizar en la creacin de interfaces web con ASP.NET. En esta, veremos cmopodemos crear nuestros propios controles.

En ASP.NET, el programador puede crear sus propios controles de dos formas diferentes:

- Por composicin: A partir de una coleccin de controles ya existentes, elprogramador decide cmo han de visualizarse conjuntamente. En vez de tener querepetir la disposicin del conjunto de controles cada vez que hayan de utilizarseen la aplicacin, la coleccin de controles se encapsula en un nico control. Cadavez que se desee, se puede aadir el control a un formulario web para mostrar elconjunto completo de controles a los que encapsula.

- Por derivacin: Igual que en cualquier otro entorno de programacin orientado aobjetos, los controles se implementan como clases. Estas clases heredarn, directa

o indirectamente, de la clase base de todos los controles web: la claseSystem.Web.UI.WebControl (la cual est definida en la bibliotecaSystem.Web.dll).

En esta seccin nos centraremos en la primera de las alternativas, la creacin de controles deusuario por composicin, porque su uso es muy habitual en la creacin de aplicaciones weben ASP.NET. Como veremos en los prximos captulos del libro, los controles ASP.NETcreados de esta manera son los que nos permiten construir aplicaciones modulares que seanfcilmente mantenibles y extensibles.




21/41

Dado que los controles definidos por composicin se utilizan como bloque bsico en laconstruccin de aplicaciones web con ASP.NET, lo usual es que dichos controles se adapten a

las necesidades de cada aplicacin particular. Esto, obviamente, no impide que podamos crearcontroles reutilizables en distintas aplicaciones si hemos de realizar el mismo tipo de tareas endiferentes proyectos de desarrollo.

Supongamos ahora que deseamos crear una aplicacin web en la cual se almaceneinformacin de contacto relativa a diferentes personas, como podra ser el caso de las entradasde una sencilla agenda, un cliente de correo electrnico o una completa aplicacin de gestinen la que tuvisemos que mantener informacin acerca de clientes o proveedores. Encualquiera de las situaciones mencionadas, en nuestra aplicacin existir una clase queencapsule los datos relativos a distintas personas. La implementacin de dicha clase podratener un aspecto similar, aunque nunca igual, al que se muestra a continuacin:

public class Contact{

public string Name; // Nombrepublic string EMail; // Correo electrnicopublic string Telephone; // Telfonopublic string Mobile; // Telfono mvilpublic string Fax; // Faxpublic string Address; // Direccinpublic string Comments; // Anotacionespublic string ImageURL; // URL de su fotografa

}

Encapsulacin

Cualquier purista de la programacin orientada a objetos seestremecera al ver un fragmento de cdigo como el anterior,y tendra razones para ello. La idea bsica de la utilizacin deobjetos es encapsular la implementacin de su interfaz, algoque no se consigue si todas las variables de instancia sonpblicas. Siempre resulta aconsejable mantener los datos envariables privadas las de una clase y acceder a ellos mediantemtodos.

El lenguaje de programacin C# nos ofrece un mecanismomuy cmodo para conseguir el mismo resultado: el uso depropiedades. Las propiedades nos permiten seguir utilizandola clase de la misma forma y, al mismo tiempo, mantener laencapsulacin de los datos. Si decidimos emplearpropiedades, la implementacin de la clase anterior resultaalgo ms extensa. Este es el nico motivo por el que,inicialmente, decidimos utilizar variables pblicas en elfragmento de cdigo anterior.

63Formularios web



22/41

Por tanto, cada variable de instancia de las que antes habamos declarado pblicas debera, almenos, convertirse en un fragmento de cdigo como el siguiente:

...private string _variable;

public string Variable {get { return _variable; }set { _variable = value; }

}...

Una vez que tenemos clases que encapsulan los datos con los que nuestra aplicacin ha detrabajar, hemos de crear una interfaz de usuario adecuada para que el usuario de nuestraaplicacin pueda trabajar con los datos.

Clases como la anterior se denominan habitualmente clases modelo. Este apelativo provienedel hecho de que estas clases son las que modelan el dominio del problema que nuestraaplicacin pretende resolver (la representacin de datos de contacto en nuestro ejemplo).stas son las clases que suelen aparecer en un diagrama de clases UML o en el modelo dedatos de una base de datos.

Para construir la interfaz de usuario asociada a nuestra clase modelo, lo que haremos sercrear vistas que nos permitan mostrar de distintas formas los datos que encapsula la clase

modelo. Por ejemplo, puede que nos interese mostrar los datos de contacto de una persona enuna tabla como la siguiente:

Presentacin visual de los datos de contacto de una persona




23/41

La presentacin visual de los datos de contacto requiere la utilizacin de distintos controles,como las etiquetas que nos permitirn mostrar los datos concretos del contacto o la imagen

que utilizaremos para visualizar la fotografa de nuestro contacto. Si en nuestra aplicacintuvisemos que mostrar la informacin de contacto en diferentes situaciones, resultarabastante tedioso tener que copiar la tabla anterior y repetir todo el cdigo necesario pararellenarla con los datos particulares de una persona. Aun pudiendo usar copiar y pegar, estaestrategia no resulta demasiado razonable. Qu sucedera entonces si hemos de cambiaralgn detalle de la presentacin visual de los datos de contacto? Tendramos que buscar todoslos sitios de nuestra aplicacin en los que aparezca una tabla como la anterior y realizar lamisma modificacin en diferentes lugares. Esto no solamente resulta incmodo, sino unasituacin as es bastante proclive a que, al final, cada vez que mostremos los datos de unapersona lo hagamos de una forma ligeramente diferente y el comportamiento de nuestraaplicacin no sea todo lo homogneo que debera ser. En otras palabras, olvidar la realizacin

de las modificaciones en alguna de las apariciones del fragmento duplicado provoca errores.Adems, todos sabemos que la existencia de cdigo duplicado influye negativamente en lamantenibilidad de nuestra aplicacin y, a la larga, en su calidad.

Por suerte, ASP.NET incluye el mecanismo adecuado para evitar situaciones como lasdescritas en el prrafo anterior: los controles de usuario creados por composicin. Unconjunto de controles como el que utilizamos para mostrar los datos de contacto de unapersona se puede encapsular en un nico control que despus emplearemos en la creacin denuestros formularios web. El mecanismo utilizado es anlogo a los frames de Delphi oC++Builder.

Para encapsular un conjunto de controles en un nico control, lo nico que tenemos que haceres crear un "control de usuario Web", tal como aparece traducido en Visual Studio .NET eltrmino ingls web user control, aunque quiz sera ms correcto decir "control web deusuario". En realidad, un control de este tipo se parece ms a un formulario web que a uncontrol de los que existen en el "cuadro de herramientas" (la discutible traduccin de toolboxen Visual Studio).

Un control web de usuario nos permite definir el aspecto visual conjunto de una coleccin decontroles a los que encapsula. El control es similar a una pgina ASP.NET salvo que heredade la clase System.Web.UI.UserControl en vez de hacerlo deSystem.Web.UI.Page.

Por convencin, los controles web de usuario se almacenan en ficheros con extensin .ascx(en lugar de la extensin .aspx de los formularios ASP.NET). Dicho fichero ser el que seincluya luego dentro de una pgina ASP.NET, por lo que en l no pueden figurar las etiquetas, , , y , las cuales s aparecen en unformulario ASP.NET.

Teniendo en cuenta lo anterior, podemos crear un control web de usuario para mostrar losdatos de contacto de una persona. Dicho control se denominar ContactViewer porquenos permite visualizar los datos de contacto pero no modificarlos y se crear de forma anlogaa como se crean los formularios ASP.NET.

65Formularios web



24/41

En primer lugar, creamos un fichero con extensin .ascx que contenga los controles de lainterfaz de usuario que nuestro control ha de encapsular. Dicho fichero se denominarContactViewer.ascx y tendr el siguiente aspecto:

Nombre

Nombre del contacto

E-mail

mailbox@domain

...

Comentarios

Como se puede apreciar, su construccin es similar al de un formulario ASP.NET. Slocambia la directiva que aparece al comienzo del fichero. En vez de utilizar la directiva


25/41

Igual que suceda en las pginas ASP.NET, al crear un control separaremos la lgica de lainterfaz implementando el cdigo asociado al control en un fichero de cdigo aparte. A este

fichero hace referencia el atributo Codebehind de la directiva


26/41

- Creacin manual: Podemos seguir el mismo proceso que hemos visto en elejemplo para construir un control ASP.NET escribiendo el contenido del fichero

.ascx e implementando el cdigo asociado al control en un fichero aparte conextensin .ascx.cs. Slo hemos de tener en cuenta que, al comienzo delfichero .ascx, debe aparecer la directiva


27/41

El control que hemos creado aparece en nuestra pgina ASP.NET como un simple botn. Sercuando ejecutemos la pgina cuando aparezca el control tal como lo hemos diseado.

La sencilla operacin de arrastrar y soltar que realizamos en el diseador de formularios webse traduce en una serie de cambios en el fichero de nuestra pgina ASP.NET. En el ejemplomostrado, la inclusin del control web en la pgina ASP.NET provoca que nuestro fichero.aspx tenga el siguiente aspecto:

Informacin de contacto

Informacin de contacto de

...

69Formularios web



28/41

Si observamos detenidamente la pgina ASP.NET anterior, podremos apreciar los cambiosintroducidos por la inclusin de un control web de usuario. Conociendo en qu consisten estos

cambios podramos utilizar un control definido por el usuario sin necesidad de la ayuda delentorno de desarrollo.

En realidad, la utilizacin de un control web de usuario ocasiona que en nuestro fichero.aspx aparecen dos novedades: una directiva al comienzo de la pgina (la directiva


29/41

control de usuario incluido en la pgina. El tipo de esta variable coincidir con el tipo denuestro control y su identificador ha de coincidir con el identificador que hayamos indicado

en el atributo id de la etiqueta user:ContactViewer:

protected ContactViewer ContactView;

Volviendo al ejemplo anterior, el fichero de cdigo completo asociado a nuestra pginaASP.NET ser el siguiente:

public class Contacts : System.Web.UI.Page

{ protected System.Web.UI.WebControls.DropDownList ContactList;protected System.Web.UI.WebControls.Label LabelContact;protected System.Web.UI.WebControls.Button ButtonOK;protected System.Web.UI.HtmlControls.HtmlGenericControl Header;

protected ContactViewer ContactView;


// Inicializacin de la lista desplegable...UpdateUI(contact);

}

// Cdigo generado por el diseador (OnInit & InitializeComponents)...

// Manejadores de eventos...

// Actualizacin de la interfaz

private void UpdateUI (Contact contact){

ContactView.DisplayedContact = contact;Header.Visible = true;ContactView.Visible = true;

}}

El cdigo anterior se limita a establecer la propiedad DisplayedContact de nuestrocontrol. El valor adecuado para esta propiedad lo obtendremos previamente de algnparmetro que le llegue a nuestra pgina ASP.NET, de un fichero o de una base de datos.Nuestro control se encargar internamente de visualizar los datos del contacto de la formaadecuada. Al ejecutar nuestra pgina ASP.NET, el resultado final que se le mostrar alusuario ser similar al recogido en la siguiente figura:

71Formularios web



30/41

Pgina ASP.NET con un control web definido por el usuario.

Creacin de controles a medida

En este apartado hemos visto cmo se pueden crear controles por composicin, aunqueya mencionamos al principio que sta no es la nica opcin disponible. Tambin sepueden crear controles por derivacin a partir de clases que implementen controles yaexistentes o directamente a partir de la clase base de todos los controles web:System.Web.UI.WebControl.

En la plataforma .NET, la creacin de controles web de usuario se puede realizar detres formas diferentes cuando optamos por crear el control por derivacin:

- Podemos crear una clase que herede directamente de alguno de los controlesASP.NET existentes y le aada algo de funcionalidad, sin tener quepreocuparnos de la presentacin visual del control. Por ejemplo, podemos crearuna clase que herede de TextBox y slo permita la introduccin de datos en undeterminado formato interceptando algunos eventos de un TextBoxconvencional.




31/41

Creacin de controles a medida

- Podemos crear un control completamente nuevo, para lo cual implementaremos

una clase que herede directamente de System.Web.UI.WebControl.Adems, el control puede que tenga que implementar interfaces comoIPostBackDataHandler o IPostBackEventHandler, los cuales soninterfaces relacionados con el funcionamiento de las pginas ASP.NET (queveremos en la siguiente seccin de este mismo captulo). La clase creada de estaforma ha de implementar todo el cdigo que sea necesario para mostrar elcontrol en la interfaz de usuario.

- Como ltima alternativa, podemos crear un "control compuesto" implementandouna clase que simule el funcionamiento de un control creado por composicin.En este caso, es necesario que el control incluya el interfaz

INamingContainer como marcador y redefina el mtodoCreateChildComponents, en el cual se crearn los controles queconforman el control compuesto.

Sea cual sea la estrategia utilizada para implementar el control, en la creacin decontroles por derivacin deberemos emplear las tcnicas habituales de programacinorientada a objetos (encapsulacin, herencia y polimorfismo). En otras palabras,hemos de implementar nuestras propias clases "a mano", sin ayuda de un diseadorvisual como el diseador de formularios web de Visual Studio .NET que se puedeemplear en la creacin de un control por composicin.

Los controles creados por composicin resultan adecuados para mostrar datos de unaforma ms o menos esttica, mientras que los controles creados por derivacin nospermiten ser ms flexibles a la hora de generar el aspecto visual del control (quehemos de crear dinmicamente desde el cdigo del control).

Al emplear composicin, la reutilizacin del control se realiza a nivel del cdigofuente (el fichero .ascx y su fichero de cdigo asociado). Por otro lado, si creamosun control por derivacin, podemos compilarlo e incluirlo en un assembly. Esto nospermite aadir nuestro control al "cuadro de herramientas" de Visual Studio .NET.Adems, al tener compilado el control, en tiempo de diseo podremos ver el aspectovisual del control en el diseador de formularios, as como acceder a sus propiedades y

eventos desde la "ventana de propiedades" del Visual Studio .NET.En definitiva, la eleccin de una u otra alternativa depender, en gran medida, de loque queramos conseguir y del tiempo del que dispongamos. A la hora de elegir cmocrear nuestros propios controles hemos de optar por la simplicidad de la creacin porcomposicin o la flexibilidad de uso que nos ofrecen los controles creados porderivacin.

73Formularios web



32/41

Funcionamiento de las pginas ASP.NET

En lo que llevamos de este captulo, hemos visto cmo se pueden construir aplicaciones webutilizando formularios con controles de forma completamente anloga al desarrollo deaplicaciones para Windows en un entorno de programacin visual. Aunque disponer de undiseador de formularios para construir aplicaciones web resulta excepcionalmente cmodopara el programador, la semejanza con los entornos de desarrollo para Windows puedeconducir a algunos equvocos. El objetivo de esta seccin es aclarar aquellos aspectos quediferencian la creacin de interfaces web de la creacin de interfaces para Windows utilizando

entornos de programacin visual. La correcta comprensin de estas diferencias resultaesencial para la correcta implementacin de aplicaciones web.

En una pgina ASP.NET, todos los controles cuyo funcionamiento haya de controlarse en elservidor de algn modo deben estar incluidos dentro de un formulario HTML. Losformularios HTML han de ir delimitados por la etiqueta estndar . En el caso deASP.NET, dicha etiqueta ha de incluir el atributo runat="server". Este atributo le indicaal servidor web (Internet Information Server) que la pgina ASP.NET ha de procesarse en elservidor antes de envirsela al cliente. Como consecuencia, el esqueleto de una pginaASP.NET ser siempre de la forma:

......

El formulario HTML incluido en la pgina ASP.NET, que ha de ser necesariamente nico, esel encargado de facilitar la interaccin del servidor con el navegador web que el usuario finalde la aplicacin utiliza en su mquina. Aunque la forma de programar los formularios webASP.NET sea prcticamente idntica a la creacin de formularios para Windows, el modo deinteraccin caracterstico de las interfaces web introduce algunas limitaciones. Estas

limitaciones se deben a que cada accin que el usuario realiza en su navegador se traduce enuna solicitud independiente al servidor web.

El hecho de que cada solicitud recibida por el servidor sea independiente de las anterioresocasiona que, al desarrollar aplicaciones web, tengamos que ser conscientes de cundo seproduce cada solicitud y de cmo podemos enlazar solicitudes diferentes realizadas por unmismo usuario. En los dos siguientes apartados analizaremos cmo se resuelven estas doscuestiones en las pginas ASP.NET. Dejaremos para el captulo siguiente la forma deidentificar las solicitudes provenientes de un nico usuario cuando nuestra aplicacin constade varias pginas.




33/41

Solicitudes y "postbacks"Al solicitar una pgina ASP.NET desde un cliente, en el servidor se dispara el eventoPage_Load asociado a la pgina antes de generar ninguna salida. Es en el manejadorasociado a este evento donde debemos realizar las tareas de inicializacin de la pgina. Dichastareas suelen incluir el establecimiento de valores por defecto o el rellenado de las listas devalores que han de mostrarse al usuario.

El evento Page_Load se dispara cada vez que el usuario accede a la pgina. Si lo quedeseamos es realizar alguna tarea slo la primera vez que un usuario concreto accede a lapgina, hemos de emplear la propiedad Page.IsPostBack. Esta propiedad posee el valor

false cuando el cliente visualiza por primera vez la pgina ASP.NET, mientras que toma elvalor true cuando no es la primera vez que la pgina ha de ejecutarse para ser mostrada.Esto sucede cuando el usuario realiza alguna accin, como pulsar un botn del formularioweb, que tiene como consecuencia volver a generar la pgina para presentar datos nuevos oactualizados en la interfaz de usuario.

En ASP.NET y otras muchas tecnologas de desarrollo de interfaces web, cuando el usuariorealiza una accin que requiere actualizar el contenido de la pgina que est visualizando, lapgina "se devuelve al servidor". De ah proviene el trmino ingls post back. El uso depostbacks es una tcnica comn para manejar los datos de un formulario que consiste enenviar los datos a la misma pgina que gener el formulario HTML.

Page.IsPostBack

Una vez visto en qu consiste la ejecucin repetida de una pgina ASP.NET como respuesta alas distintas acciones del usuario, estamos en disposicin de completar el cdigocorrespondiente al ejemplo con el que terminamos la seccin anterior de este captulo (el deluso de controles definidos por el usuario en la creacin de formularios web). Para que nuestroformulario muestre en cada momento los datos del contacto que el usuario selecciona de lalista desplegable, hemos de implementar el evento Page_Load. Dicho evento se ejecutacada vez que se accede a la pgina y ha de seleccionar el contacto adecuado que se mostraren el navegador web del usuario:


if (!Page.IsPostBack) {

// Inicializacin de la interfaz// - Rellenado de la lista desplegable de contactos...Header.Visible = false;ContactList.SelectedIndex = 0;

75Formularios web



34/41

} else {

// Visualizacin del contacto actual

contact = ...UpdateUI(contact);

}}


this.Load += new System.EventHandler(this.Page_Load);}

Como se puede apreciar, hemos de diferenciar la primera vez en que el usuario accede a lapgina de las ocasiones en las que el acceso se debe a que el usuario haya pulsado el botn de

su interfaz para mostrar los datos de un contacto diferente. La primera vez que el usuarioaccede a la pgina, cuando se cumple la condicin !Page.IsPostBack, se tiene queinicializar el estado de los distintos controles del formulario web. En el ejemplo que nosocupa, se ha de rellenar la lista desplegable de valores que le permitir al usuario seleccionarel contacto cuyos datos desea ver.

AutoPostBack

Utilizando nicamente el manejador correspondiente al evento Page_Load podemosconseguir una pgina dinmica cuya actualizacin se realiza cada vez que el usuario pulsa un

botn, pulsacin que se traduce en una nueva solicitud al servidor web ( post back siempleamos la terminologa habitual). No obstante, en determinadas ocasiones nos puedeinteresar que la interfaz de nuestra aplicacin web responda a otras acciones del usuario, noslo a la pulsacin final de un botn del formulario.

En el ejemplo que venimos desarrollando en este captulo, puede que nos interese mostrar losdatos de contacto de alguien en el mismo momento en que el usuario selecciona un nombre dela lista desplegable. De esta forma, la respuesta inmediata de la aplicacin facilita que elusuario perciba el efecto de las acciones que realiza. Al ver reflejadas sus acciones de formainmediata en la ventana de su navegador web, el usuario ve reducida la distancia existenteentre sus acciones y la respuesta del sistema con el que interacta, uno de los principiosfundamentales del diseo de interfaces de usuario. En el caso de la lista desplegable, debemosimplementar la respuesta del control al evento SelectedIndexChanged:

private void ContactList_SelectedIndexChanged(object sender, System.EventArgs e)

{// Contacto seleccionado de la listacontact = ...UpdateUI(contact);

}




35/41


...

this.ContactList.SelectedIndexChanged += newSystem.EventHandler(this.ContactList_SelectedIndexChanged);

...}

Implementar la respuesta del control a este evento no es suficiente para que la aplicacinresponda de forma inmediata a un cambio en el elemento seleccionado de la lista desplegable.Si queremos que la pgina se actualice en el mismo momento en que el usuario selecciona unelemento de la lista, hemos de establecer a true la propiedad AutoPostBack del controlde tipo DropDownList que corresponde a la lista desplegable.

Uso de la propiedad AutoPostBack para mejorar la usabilidad de unapgina ASP.NET: En cuanto el usuario selecciona un contacto de la listadesplegable, en el control de usuario de debajo aparecen todos sus datos.

77Formularios web



36/41

La propiedad AutoPostBack existente en algunos de los controles ASP.NET sirve paraque, ante determinados eventos relacionados con acciones del usuario, el estado de los

controles de la pgina se enve automticamente al servidor. Esto permite actualizar elcontenido de la pgina conforme el usuario interacta con la aplicacin. Si el retardo existenteentre la solicitud del usuario y la respuesta del servidor web no es demasiado elevado, lausabilidad de la aplicacin mejora. Sin embargo, el uso indiscriminado de la propiedadAutoPostBack genera una mayor carga sobre el servidor web al realizar cada cliente mssolicitudes relativas a la misma pgina. Aparte de consumirse un mayor ancho de banda en lared, conforme aumenta la carga del servidor web, su tiempo de respuesta aumenta y se anulanlas ventajas que supone utilizar AutoPostBack en primera instancia.

Internamente, el uso de la propiedad AutoPostBack para forzar la actualizacin de lapgina cuando el usuario realiza alguna accin se traduce en la inclusin de un fragmento de

JavaScript en la pgina que se le enva al cliente. Este fragmento de cdigo se le asocia, en elnavegador web del cliente, al evento correspondiente del control cuya respuestaimplementamos en la pgina ASP.NET (que se ejecuta en el servidor). Si volvemos alejemplo anterior, el control DropDownList da lugar al siguiente fragmento de HTMLdinmico:

BolaMota

Ya que el uso de AutoPostBack se traduce en la utilizacin de HTML dinmico en elcliente, el navegador del usuario ha de ser compatible con JavaScript (ECMAScript para serprecisos). Adems, el usuario ha de tener habilitado el uso de secuencias de comandos en sunavegador web.

Como consecuencia del uso interno de la versin de JavaScript estandarizada por ECMA, elestndar determina en qu controles y sobre qu eventos se puede emplear la propiedadAutoPostBack. Afortunadamente, dicha propiedad est disponible para la mayora de lassituaciones en las que nos pueda interesar refrescar el contenido de la pgina que ve elusuario. Como se mostr en el ejemplo anterior, podemos hacer que nuestra aplicacinresponda a un cambio en el elemento seleccionado de una lista, ya sea desplegable (de tipoDropDownList) o no (ListBox). Tambin podemos conseguir que la aplicacin webresponda inmediatamente a acciones como el marcado de una caja de comprobacin(CheckBox y CheckBoxList) o la seleccin de un botn de radio (RadioButton yRadioButtonList). Incluso podemos lograr que se genere una solicitud al servidor encuanto el usuario modifique el texto contenido en un control de tipo TextBox.

En cualquier caso, cuando decidamos utilizar la propiedad AutoPostBack debemos teneren cuenta la carga adicional que esto supone sobre el servidor web y el consumo de ancho de




37/41

banda que las solicitudes adicionales suponen. Al sopesar los pros y los contras de lautilizacin de AutoPostBack, nunca debemos olvidar que, aunque mejoremos la

realimentacin que recibe el usuario como respuesta a sus acciones individuales, esta mejorapuede llegar a ser contraproducente si ralentiza la realizacin de tareas completas.

Estado de una pgina ASP.NET

A diferencia de las aplicaciones para Windows, en las cuales el usuario interacta con unainstancia concreta de un formulario, en la aplicaciones web cada accin del usuario se trata deforma independiente. En otras palabras, cada vez que se le muestra una pgina al usuario, lapgina se construye de nuevo. Esto implica que el objeto concreto que recibe una solicitud delusuario no es el mismo aunque al usuario le d la sensacin de estar trabajando con "su"pgina. Desde el punto de vista prctico, este hecho tiene ciertas implicaciones quecomentamos a continuacin retomando el ejemplo de la lista de contactos.

Si recordamos, cuando creamos un control web de usuario para mostrar los datos de contactode alguien, creamos una clase ContactViewer con una propiedad DisplayedContactque utilizbamos para mostrar los datos de un contacto concreto. Ingenuamente, puede quenos olvidamos del contexto en el que funcionan las aplicaciones web y escribamos algo comolo siguiente:

public class ContactViewer : System.Web.UI.UserControl

{...private Contact contact;

public Contact DisplayedContact {get { return contact; }set { contact = value; }

}...

}

Aparentemente, podramos utilizar la variable de instancia contact para acceder a los datos

que hemos de mostrar en pantalla. Sin embargo, cada vez que el usuario realiza alguna accinque se traduce en una nueva solicitud l servidor (lo que denominbamos post back en laseccin anterior), en el servidor web se crea un objeto nuevo encargado de atender lasolicitud. Por consiguiente, el valor que habamos guardado en la variable de instancia delobjeto con el que se trabajaba en la solicitud anterior se habr perdido.

Como consecuencia, la construccin de controles y de pginas en ASP.NET no puederealizarse de la misma forma que se implementara una clase convencional. En una aplicacinWindows, cuando se tiene una referencia a una instancia de una clase, siempre se trabaja conla misma referencia. En ASP.NET, cada accin se realiza sobre un objeto diferente, por lo que

79Formularios web



38/41

debemos utilizar algn mecanismo que nos permita mantener el estado de una pgina o de uncontrol entre distintas solicitudes procedentes de un mismo usuario.

Por suerte, los diseadores de ASP.NET decidieron incluir un sencillo mecanismo por el cualse puede almacenar el estado de una pgina. Este mecanismo se basa en la utilizacin de unarray asociativo en el cual podemos almacenar cualquier objeto, siempre y cuando ste seaserializable. La forma correcta de implementar una propiedad en el control web de usuarioque diseamos antes sera la siguiente:

public class ContactViewer : System.Web.UI.UserControl{

...public Contact DisplayedContact {

get { return (Contact) ViewState["contact"]; }set { ViewState["contact"] = value; }

}...

}

En lugar de utilizar una variable de instancia, como haramos habitualmente al disear unaclase que ha de encapsular ciertos datos, se emplea el array asociativo ViewState paragarantizar que el estado de la pgina se mantiene entre solicitudes diferentes.

En el caso de los controles ASP.NET predefinidos, su implementacin se encarga de

mantener el estado de los controles cuando se recibe una solicitud correspondientes a un postback. Cuando se recibe una nueva solicitud, aunque se trabaje con objetos diferentes, loprimero que se hace es reconstruir el estado de los controles de la interfaz a partir de los datosrecibidos del usuario.

Internamente, el estado de una pgina ASP.NET se define mediante un campo oculto incluidoen el formulario HTML correspondiente a la pgina. Este campo oculto, denominado__VIEWSTATE, se le aade en el servidor a cada pgina que tenga un formulario con elatributo runat="server" (de ah la necesidad de que el formulario HTML de la pginaASP.NET incluya este atributo). De esta forma, es la pgina web que visualiza el usuario laque se encarga, sin que el usuario sea consciente de ello, de mantener el estado de la pginaASP.NET en el servidor. Esto lo podemos comprobar fcilmente si visualizamos el cdigofuente de la pgina HTML que se muestra en el navegador web de la mquina cliente. En lpodemos ver algo as:

Este mecanismo, que supone una novedad en ASP.NET con respecto a versiones anteriores deASP, nos ahorra tener que escribir bastantes lneas de cdigo. Al encargarse ViewState de




39/41

mantener automticamente el estado de los controles de los formularios web, el programadorpuede despreocuparse del hecho de que cada solicitud del usuario se procese de forma

independiente.En ASP clsico, al enviar un formulario, el contenido de la pgina HTML que ve el usuario sepierde, por lo que el programador debe reconstruir el estado de la pgina manualmente. Portanto, si se produce un error, por pequeo que sea, al rellenar alguno de los valores de unformulario, el programador debe implementar el cdigo que se encargue de rellenar losvalores que s son correctos. Esto resulta aconsejable siempre y cuando queramos evitarle alusuario tener que introducir de nuevo todos los datos de un formulario cuando, a lo mejor, sele ha olvidado introducir un dato que era obligatorio. Tener que hacer algo as es demasiadocomn en muchas aplicaciones web, adems de resultar bastante irritante.

Por desgracia, la labor del programador para evitarle inconvenientes al usuario final de laaplicacin resulta bastante tediosa y es, en consecuencia, muy propensa a errores.Afortunadamente, en ASP.NET, el formulario web reaparece automticamente en elnavegador del cliente con el estado que sus controles ASP.NET tuviesen anteriormente.

Si seguimos utilizando el estilo tradicional de ASP clsico, una sencilla pgina podra tener elaspecto siguiente:

Tu nombre:

Esta pgina incluye un formulario en el que el usuario puede introducir su nombre. Cuando elusuario pulsa el botn "Enviar", en su navegador web aparecer de nuevo el formularioseguido de un mensaje de bienvenida. Sin embargo, el campo del formulario cuyo valor habarellenado aparecer vaco. Si utilizamos los controles ASP.NET, no obstante, podemos evitarque el valor introducido desaparezca tecleando lo siguiente en nuestro fichero .aspx:

81Formularios web



40/41

void enviar (object sender, EventArgs e){

label.Text = "Hola, " + textbox.Text + "!";}

Tu nombre:

El mantenimiento automtico del estado de la pgina que ofrecen los formularios web cuandoutilizamos controles ASP.NET nos sirve para evitar que el usuario "pierda" los datos queacaba de introducir. Como es lgico, aunque el mantenimiento del estado de la pgina esautomtico en ASP.NET, puede que nos interese que la pgina no mantenga su estado. Estopuede suceder cuando el usuario teclea una clave privada o cualquier otro tipo de dato cuyaprivacidad se haya de preservar. Tambin puede ser recomendable que una pgina nomantenga su estado cuando se estn introduciendo series de datos, ya que mantener el estadode la pgina podra ocasionar la recepcin de datos duplicados cuya existencia habra quedetectar en el cdigo de la aplicacin.

ASP.NET nos ofrece dos alternativas para indicar explcitamente que el estado de unformulario web no debe mantenerse entre solicitudes independientes aunque stas provengande un nico usuario:

- A nivel de la pgina, podemos emplear la directiva en la cabecera del fichero .aspx. Estodeshabilita el mantenimiento del estado para todos controles de la pginaASP.NET.

- A nivel de un control particular, podemos establecer su propiedadEnableViewState a false. De esta forma, podemos controlarindividualmente el comportamiento de las distintas partes de una pgina en lo quese refiere al mantenimiento de su estado.




41/41

Resumen del captulo

En este captulo hemos aprendido todo lo que necesitamos para ser capaces de construirinterfaces web utilizando la tecnologa ASP.NET incluida en la plataforma .NET deMicrosoft. Para ser ms precisos, nos centramos en la construccin de pginas ASP.NETindividuales:

- En primer lugar, descubrimos en qu consiste el modelo de programacin de losformularios web, que est basado en el uso de controles y eventos.

- A continuacin, vimos cmo podemos crear nuestros propios controles paraconstruir interfaces web ms modulares y flexibles.

- Finalmente, estudiamos el funcionamiento de las pginas ASP.NET, haciendoespecial hincapi en los detalles que diferencian la creacin de interfaces web dela construccin de aplicaciones para Windows. En este apartado llegamos aaprender cmo se puede controlar el mantenimiento del estado de una pginaASP.NET.

Sin embargo, una aplicacin web rara vez consta de una nica pgina, por lo que an nosquedan por ver algunos aspectos relacionados con la construccin de aplicaciones web. Este

ser el hilo conductor del siguiente captulo.

83Formularios web

iniciando hacia los web-forms

Documents

Transcript of iniciando hacia los web-forms