1. INTRODUCCIN A ASP.

NET
INTRODUCCIN
En los inicios del mundo de Internet (aos sesenta), el nico objetivo era conectar un conjunto reducido de ordenadores para que pudieran compartir informacin. A mediados de los setenta y debido al cada vez mayor nmero de ordenadores conectados en red, se crearon los protocolos TPC/IP (Transmision Constrol Protocol / Internet Protocol). El protocolo TCP se utiliza para controlar la transmisin correcta de la informacin entre ordenadores El protocolo IP sirve para localizar un ordenador dentro de una red, asignndole un nmero de 32 bits (por ejemplo: 165.167.255.4) que sera el equivalente a un nmero de telfono. Pronto el nmero de ordenadores conectados a la red se incremento en gran medida. La informacin que almacenaban era esttica y los primeros servidores no podan acceder a bases de datos, ni modificar el contenido de la informacin que suministraban a la red de ninguna manera. A mediados de los noventa, un gran nmero de empresas queran que sus pginas Web sirvieran, adems de informar, para poder realizar negocios en la red. El cubrir esta necesidad fue el objetivo de las nuevas tcnicas de creacin de pginas Web y condicion el desarrollo con el objetivo de permitir accesos a las bases de datos desde la Web y modificar su contenido dinmicamente.

APARICIN DE ASP
La primera solucin fue la aparicin de CGI (Common Gateway Interface) para implementar Pginas Web Activas en el servidor. La estructura CGI se programaba empleando lenguajes compilados como el C, Delphi y Visual Basic o interpretados como el Perl. El objetivo era que el servidor respondiera la solicitud de un cliente a travs de la pgina Web. Las limitaciones de la CGI provenan de la necesidad de cargar en la memoria del servidor tantas copias del programa CGI como solicitudes se hubieran recibido. Ello provocaba el colapso del sistema si este nmero aumentaba considerablemente. A principios de 1996 Microsoft se dio cuenta de este problema e introdujo en el mercado la llamada ISAPI (Internet Server Application Programming Interface). Este producto formaba parte del controlador integral de Internet llamado IIS (Internet Information Server). La principal diferencia era que, ahora, se manejaba una nica copia en memoria del cdigo de la aplicacin, aunque existieran varias solicitudes por parte de distintos clientes. Pero ISAPI tena el inconveniente de hacer muy complejo el cdigo y para realizar las pruebas de compilacin y ejecucin era necesario parar el funcionamiento del servidor. Paralelamente, era necesario vincular una base de datos a una aplicacin de servidor para dar respuesta a algunas de las peticiones del cliente. Microsoft creo IDC (Internet Database Connector) para conectar sitios Web con bases de datos a travs de IIS y ODBC (Open Database Connectivity).

Introduccin a ASP.NET

Otra opcin en el mercado era el de la competencia, Netscape Server API (NSAPI), que se ejecutaba en servidores Netscape y se programaba a travs de JavaScript y dems componentes Java. Esta tecnologa pecaba de los mismos males. Estas API llevaron a una superespecializacin de los servidores. O se trabajaba para Microsoft o para Netscape. ASP naci con el objetivo de fusionar la simplicidad de CGI con la potencialidad de ISAPI. As naci el nuevo lenguaje ASP (Active Page Server). ASP se puede programar desde un simple editor de textos o editor HTML, pues usan lenguajes script: VBScript o JScript. Y su ejecucin en el servidor es igual a ISAPI.

EVOLUCIN DE ASP ASP 1

A finales de 1996, junto con FrontPage, apareci ASP1 como extensin de IIS3. FrontPage permita la creacin de pginas Web desde un entorno intuitivo y sencillo. ASP1 permita acceder a distintos tipos de bases de datos mediante los controles ActiveX y combinar en una misma pgina Web la parte de cdigo y representacin.

ASP 2
Con la mejora de IIS4, se introdujo una nueva versin de ASP que formaba parte del paquete de instalacin del nuevo Windows NT 4. IIS4 inclua ahora el sistema bsico de control de correo electrnico SMTP (Simple Mail Transfer Protocol) ASP2 era ahora escalable, es decir, las aplicaciones podan crecer en tamao al mismo ritmo que las empresas (gracias al uso de un conjunto de servidores de red). En esta poca muchas de las grandes empresas adoptaron ASP como base de sus aplicaciones. ASP permite ahora que los programadores de empresas desarrollen sus propios componentes mediante la arquitectura COM (Component Object Model) . En esta poca se desarroll el e-commerce gracias al desarrollo de la tecnologa que permiti la comunicacin entre componentes de aplicaciones ASP a travs de la red. La casa Sun lanz, en esta poca, JSP (Java Server Pages) con un alto rendimiento pues el lenguaje era compilado y orientado a objetos, con lo cual se ganaba tiempo de respuesta y todas las ventajas de la POO.

ASP 3
Con la aparicin de Windows 2000, lo hizo ASP 3. Esta nueva versin permita la compilacin de su cdigo y su posterior almacenamiento en el cach de la pgina Web. De esta manera, se aseguraba su funcionamiento al verificar todos los elementos script de la pgina. Esto fue una gran evolucin respecto ASP 2 que se ejecutaba en lnea. En comparacin a JSP, ASP 3 introdujo el concepto de server scripts. Eran objetos COM basados en archivos XML (Extensible Markup Language) Microsoft se adaptaba a las necesidades de los programadores que usaban el lenguaje XML como fuente universal de intercambio de datos e informacin. Junto con los

Introduccin a ASP.NET

objetos ADO (ActiveX Data Objects), ASP 3 pretenda crear aplicaciones escalables, fiables, rpidas y de acceso universal. El problema de fondo era que ASP 3 utilizaba lenguajes scripts y stos necesitan de un intrprete para ser ejecutados. Adems para poder distribuir una aplicacin ASP en la red, se necesita que el administrador de un sitio Web tenga registrados los componentes y permisos. No es suficiente con copiar los archivos al servidor.

ASP.NET
ASP.NET apareci en el mercado como repuesta de Microsoft al gran xito de J2EE (Java 2 Enterprise Edition). Los puntos fundamentales de la nueva estructura ASP.NET son ASP.NET proporciona un modelo de desarrollo de aplicaciones Web basado en la plataforma .NET. Este entorno de programacin permite tratar a ASP.NET como un lenguaje orientado a objetos. Se pueden desarrollar aplicaciones Web en cualquiera de los lenguajes .NET, como C# o Visual Basic. Separacin de la capa de presentacin de la capa de negocio, gracias a la utilizacin de las pginas code-behind (cdigo trasero). Acceso a los servicios proporcionados por .NET Framework. Eso permite que podamos utilizar la biblioteca de clases en las aplicaciones Web. El cdigo de las aplicaciones ASP.NET se compila a travs del motor CLR, que compila con JIT (Just In Time). Los parmetros de configuracin se almacenan en archivos de tipo XML, porque es de lectura universal y se pueden generar con cualquier editor de textos. Permite usar ADO.NET para acceso a datos. Deteccin automtica del navegador cliente, generando el lenguaje de marcas soportado por el mismo. Mecanismo de Caching incorporado para pginas completa o partes de la misma frecuentemente solicitadas. Compatibilidad con ASP. Se pueden tener pgina ASP y ASP.NET en el mismo servidor colaborando. Las pginas ASP tendrn extensin .asp y son procesadas por la DLL ASP.DLL y las pgina ASP.NET .aspx y son procesadas por el entorno .NET. ASP.NET es que conserva el contenido de los formularios despus de enviarlos al servidor. Microsoft llama a esto persistencia automtica del estado de la vista de los datos.

EJECUCIN DE LOS ARCHIVOS ASP.NET

Cuando un visitante quiere acceder a un sitio Web, escribe una direccin URL (Uniform Resource Locator) en el navegador y ste realiza una peticin HTML al servidor que est alojando ese sitio Web. En el momento en que el servidor recibe la peticin, determina el tipo de archivo solicitado y lo enva a la aplicacin correspondiente para Introduccin a ASP.NET 3

que lo procese. En el caso de pginas ASP.NET, stas son compiladas (normalmente si es la primera vez que se seleccionan) y ejecutadas, reenviando al visitante los resultados de la consulta a travs de su navegador.

Ejecucin del lado del cliente

En las aplicaciones ASP.NET se mezcla una parte de ejecucin del lado del cliente y otra del lado del servidor. La ejecucin de la pgina del lado del cliente se determina de la siguiente manera: Cuando el servidor recibe una peticin determina el tipo de navegador del cliente y, en funcin de ste, codifica las instrucciones a una versin HTML adecuada. Incluso el servidor puede determinar si el navegador soporta JavaScript y, en funcin de ello, convertir parte de su cdigo en JavaScript para ejecutarse en el cliente. Todo ello lo decide el servidor sin tener que codificar en JavaScript. Al descargar la pgina ASP.NET en el navegador se enva, junto a ella, cdigo para realizar comprobaciones e iniciar aquellas funciones que se puedan realizar en el cliente liberando as al servidor de su ejecucin. Cuando el servidor recibe la respuesta de un formulario, los valores son guardados en una nueva herramienta de ASP.NET llamada bolsa de estado y son comprimidos y ocultados en una pgina llamada vista de estado. El objetivo es que, una vez enviado el formulario, ste recupere su apariencia anterior.

GET Y POST
El procedimiento ms habitual para que un navegador realice una peticin a un servidor desde un formulario es mediante el uso de dos mtodos HTML: GET y POST. El mtodo GET almacena toda la informacin que requiere dentro de una direccin URL. En ella primero aparecer el tipo de protocolo utilizado: HTML o FTP, a continuacin, el nombre del dominio, seguido del path a la pgina solicitada y el nombre de la pgina. A continuacin se le puede aadir toda la informacin necesaria para realizar la peticin, la llamada query string. sta est separada del resto mediante el signo de interrogacin. A partir de ah se establecen pares: clave=valor, por ejemplo, temperatura=20. Si necesitamos varios pares, stos se unen mediante el signo &. Si enviramos un formulario que contuviese campos para nombre, apellidos y edad por el mtodo GET (METHOD = "GET") y el usuario escribiera Juan, Soto y 30, se enviara la siguiente peticin URL al servidor:
http://Workshop1/Painting/Profile.asp?Nombre=Juan&Apellido=Soto&Edad=30

Cuando un navegador enva la informacin mediante el mtodo POST, los datos se estructuran igual que en el mtodo GET pero se ubican en una cabecera HTML separada de la pgina, por lo que no son visibles. Por esta razn, en la mayora de los casos los programadores prefieren ese mtodo. Cualquiera sea el mtodo utilizado, es decir GET o POST, cuando un formulario es enviado al servidor, decimos que se produjo un POSTBACK. Los Web Forms envan sus datos por el mtod POST y la pgina destino es la actual.

Introduccin a ASP.NET

Ejecucin del lado del servidor

El servidor enva una peticin Localiza la pgina usando la URL ASP.NET analiza el cdigo y si ste no tiene un cdigo compilado actualizado llama al compilador para general el IL, luego compila y guarda el cdigo. El runtime del servidor carga y ejecuta el cdigo y enva la respuesta al cliente. En las siguientes peticiones, el runtime carga directamente el IL y lo ejecuta. La respuesta es reenviada al navegador traducida a cdigo HTML y ste representa la respuesta en la pantalla del cliente.

El ciclo simplificado de ejecucin del lado del servidor sera: Peticin Servidor localiza el archivo ASP se procesa

Errores de compilacin Compilar

ha cambiado? No Ejecutar

Guardar

Respuesta

COMPONENTES DE ASP.NET
ASP.NET es un Marco (framework) para programar aplicaciones Web, de un modo similar al que se programan las aplicaciones Windows. Los componentes principales de una aplicacin Web ASP.NET son: WebForms (Formularios Web). Proporcionan la interfaz de usuario para la aplicacin Web y lo constituyen uno o ms archivos con extensin .aspx. Archivos Code-Behind. Las pginas con cdigo trasero estn asociadas a los formularios Web Forms y contienen el cdigo del servidor para el formulario Web Form. Su extensin ser .aspx.vb si el lenguaje utilizado es Visual Basic Archivos de configuracin con formato XML. Los archivos de configuracin son archivos XML que definen la configuracin predeterminada para la aplicacin Web y para el servidor Web. Se pueden utilizar un archivo Web.config por cada aplicacin y un nico archivo Machine.config por servidor Global.asax. Los archivos Global.asax contienen el cdigo necesario para responder a los eventos a nivel de aplicacin provocados por ASP.NET Directorio BIN. Contiene el assembly de la aplicacin (Ej.: MiAplic.dll) y cero o ms assemblies (Componentes externos)

net

Introduccin a ASP.NET

Conectividad a bases de datos. La conectividad a bases de datos permite a la aplicacin Web transferir datos desde y hacia fuentes de base de datos. Cach. El uso de cach permite a la aplicacin Web devolver ms rpidamente formularios Web Forms y datos tras la primera peticin.

ESTRUCTURA DE UNA APLICACIN WEB

Las aplicaciones Web estn compuestas de los siguientes ficheros: Archivos de solucin (.sln, .suo). La extensin de archivo NombreSolucin.sln se utiliza para archivos de solucin que enlazan uno o ms proyectos, y almacena informacin global. La extensin de archivo NombreSolucin.suo se utiliza para archivos que acompaan los registros de solucin y las personalizaciones que agreguemos a nuestra solucin. Este archivo guarda nuestra configuracin, como puntos de interrupcin y elementos de tareas, para que sean recuperados cada vez que abramos la solucin. Archivos de proyecto (.vbproj). Cada proyecto es una nica aplicacin Web almacenada en su propia carpeta. Dentro de la carpeta de proyecto se encuentra el archivo de configuracin del proyecto y los archivos reales que constituyen el proyecto. El archivo de configuracin del proyecto es un documento XML que contiene referencias a todos los elementos del proyecto, como formularios y clases, adems de referencias de proyecto y opciones de compilacin. Los archivos de proyecto Visual Basic .NET utilizan una extensin .vbproj, mientras que C# utiliza .csproj. Formularios Web Forms ASP.NET(.aspx). Los formularios Web Forms ASP.NET se utilizan cuando es necesario generar sitios Web dinmicos a los que los usuarios accedern directamente. Servicios Web ASP.NET (.asmx). Los servicios Web se utilizan cuando deseamos crear sitios Web dinmicos a los que nicamente accedern otros programas. Los servicios Web ASP.NET pueden estar soportados por una pgina de cdigo subyacente designada por la extensin WebService.asmx.vb o WebService.asmx.cs.

Introduccin a ASP.NET

Clases, pginas de cdigo subyacente (.vb o .cs). Las pginas de cdigo subyacente utilizan dos extensiones: el tipo de pgina (.aspx o .asmx) y la extensin de Visual Basic (.vb) o la extensin de C# (.cs). Por ejemplo, el nombre de archivo completo para la pgina de cdigo subyacente de un formulario Web Form ASP.NET predeterminado es, para un proyecto C#, WebForm1.aspx.cs. Clases de aplicaciones globales (.asax). El archivo Global.asax, tambin conocido como el archivo de la aplicacin ASP.NET, es un archivo opcional que contiene cdigo para responder a eventos a nivel de aplicacin provocados por ASP.NET o por HttpModules. Archivo Web.config. Este archivo Web.config contiene opciones de configuracin que el CLR lee, como polticas de enlace de ensamblados, objetos remoting, etc., y otras configuraciones que la aplicacin puede leer. Styles.css. Es el archivo de hojas de estilo predeterminado para la Web. Ensamblado del proyecto (.dll). Todas las pginas de cdigo subyacente (.aspx.vb y .aspx.cs) de un proyecto estn compiladas en un nico archivo ensamblado que se almacena como ProjectName.dll. Este archivo ensamblado del proyecto se ubica en el directorio /bin del sitio Web. AssemblyInfo.vb o AssemblyInfo.cs. El archivo AssemblyInfo se utiliza para describir la informacin general del ensamblado, como la versin y los atributos del mismo.

SERVIDOR WEB
Podemos crear un proyecto Web en diferentes localizaciones: En el sistema de ficheros de nuestro equipo En un servidor IIS local En un servidor IIS remoto En un sitio FTP

Nosotros vamos a utilizar el sistema de ficheros de nuestro equipo ya que no tenemos instalado el servidor IIS. Ventajas Inconvenientes

No necesitamos tener instalado IIS, en su No podremos utilizar ciertas lugar se utiliza ASP.NET Development caractersticas avanzadas de IIS como la autenticacin basada en HTTP del Server. No necesitamos permisos administrativos servidor. para crear o depurar sitios Web Los colaboradores en el desarrollo no Como slo se puede acceder a l podrn ver la ltima versin, tendramos localmente, evitamos problemas de que publicarla en un servidor. seguridad durante el desarrollo

Introduccin a ASP.NET

EL PROCESO DE DESARROLLO
Visual Studio .NET contiene todo lo necesario para generar una aplicacin Web ASP.NET de principio a fin. Crear una aplicacin Web ASP.NET con Visual Studio .NET implica los siguientes pasos bsicos: Crear una especificacin de diseo. Antes de nada lo que se debe hacer es disear la aplicacin Web y para ello debemos analizar las necesidades del usuario y las caractersticas principales que debe tener la aplicacin, as como la funcionalidad de sta. Crear un nuevo proyecto. Cuando seleccionamos una nueva plantilla de proyecto, Visual Studio .NET crea automticamente los archivos y el cdigo predeterminado necesarios para soportar el proyecto. Como parte de esta creacin inicial del proyecto, deberamos transferir las principales tareas de codificacin desde nuestra especificacin de diseo a la Lista de Tareas de Visual Studio .NET. Esta transferencia permite hacer un seguimiento de nuestro desarrollo contra la especificacin. Crear la interfaz. Se debe disear e implementar la interfaz de la aplicacin con el usuario, para ello disponemos de la ventana Editor/Navegador en modo Diseo. A la vez que introducimos los objetos de los formularios podemos establecer sus caractersticas en la ventana de Propiedades. Escribir cdigo. Despus de crear la interfaz podremos escribir los procedimientos de eventos que se ejecutarn al realizar diferentes acciones sobre los objetos de los distintos formularios. Es posible que tambin necesitemos escribir cdigo para agregar lgica de negocio y para acceder a datos. Generar. Cuando generamos un proyecto, compilamos todo el cdigo de las pginas Web y dems archivos de clases en una librera de enlace dinmico (dynamic-link library, DLL) denominada ensamblado. Probar y depurar. Probar y depurar no es un paso a realizar una nica vez, sino algo que se realiza repetidamente durante el proceso de desarrollo. Cada vez que realizamos un cambio importante, es necesario generar una versin de depuracin de la aplicacin para asegurarnos de que funciona segn lo previsto. Implantar. Cuando un proyecto est totalmente, podemos implantar los archivos generados en un servidor Web.

Introduccin a ASP.NET

SINTXIS DE ASP.NET
ASP.NET utiliza tres delimitadores distintos para indicar el cdigo de servidor, es decir, el cdigo que se ejecutar en el servidor y que estar escrito en el lenguaje C#-

<%%>
Encerrado dentro de los delimitadores <%%> se va a encontrar todo el cdigo de script de servidor, de esta forma el comando <%nombre="Pepe"%> asigna el valor Pepe a la variable nombre. Entre estos delimitadores se pueden incluir varias sentencias. El cdigo incluido entre estos delimitadores se ejecuta dentro de la pgina.

<%=%>
Dentro del segundo tipo de delimitadores <%=%> se encuentran expresiones que devuelve algn valor para ser mostrado en la salida de la pgina, as por ejemplo la expresin <%=nombre%> enviar al navegador el valor Pepe, es decir, el valor actual de la variable. Entre estos delimitadores slo se puede encerrar una sentencia.

<script language="vbscript" runat="server"></script>

Esta etiqueta es utilizada nicamente para declarar mtodos (procedimientos y funciones) de la pgina.

Code-behind
Otra forma es introducir el cdigo en un fichero aparte que tiene extensin aspx.vb (para VB), de esta forma separmos la vista de los controladores. Este fichero con cdigo en VB se denomina code-behind

Ejemplos
En el ejemplo se puede ver la utilizacin de los delimitadores <%%> para definir un objeto de la clase DateTime con la fecha y hora actual. Y tambin se utilizan los Introduccin a ASP.NET 9

delimitadores <%=%> para mostrar la fecha y hora actual en el navegador del usuario. Incluir este cdigo en el body.
<% Dim ahora As DateTime = DateTime.Now%> La hora y fecha actual es: <%=ahora.ToString()%>

Dentro de los delimitadores de cdigo de servidor se pueden encontrar tambin instrucciones del lenguaje de objetos que se utilice, as por ejemplo puede aparecer una instruccin If...Else del lenguaje VB, como se puede apreciar en siguiente cdigo
<% Dim nombre As String = "", variable = "" If (nombre = "") Then variable = "Nombre desconocido" Else variable = "Hola amigo " + nombre End If %> <font color="red"><%=variable%></font>

En el cdigo anterior se comprueba si la variable nombre tiene algn valor, si lo tiene saludamos con el valor de la variable, mostrando el saludo en color rojo. Aunque ya veremos que el cdigo VB es mejor ejecutarlo desde un fichero code-behind que provocar la especializacin de los ficheros segn sean orientados al interface o a la ejecucin de cdigo VB.

ESTRUCTURA DE UNA PGINA ASP.NET

Los elementos ms importantes de una pgina ASP.NET son: Directivas Bloques de declaracin de cdigo Controles ASP.NET Bloques de presentacin de cdigo Comentarios del lado del servidor Directivas de inclusin del lado del servidor Texto literal y etiquetas HTML

Directivas
Una directiva controla como se compila una pgina ASP.NET. Las directivas tiene la siguiente sintsix.
<%@ directiva %>

Las directivas aparecen normalmente al principio de la pgina aunque pueden localizarse en cualquier sitio. Dos ejemplos de directivas son: De pgina: solo puede haber una lnea en cada fichero, en cada lnea puede haber varias directivas de otros tipos. Language: para indicar el lenguaje predeterminado

Introduccin a ASP.NET

10

<%@ Page Language=VB %>

Trace: se realiza un seguimiento de la pgina y permite visualizar informacin adicional sobre la ejecucin de la pgina junto con su contenido Debug: permite que se visualicen mensajes de error en tiempo de ejecucin, se puede combinar con Trace AutoEventWireup: Indica si los eventos de la pgina pueden ser detectados por el cdigo (PageLoad) sin necesidad de que los controladores de eventos utilicen Handles . En los webs forms de visual basic, el valor viene a false y a que es propio del lenguaje indicar en cada controlador de eventos el evento al que responde y el objeto que lo provoca con Handles. Codefile: Indica el fichero donde estn los controladores de evento del la pgina actual Inherits: este atributo indica el nombre de una clase de la que el control hereda, este atributo es utilizado para realizar la separacin del cdigo de la presentacin de la
informacin

Trace=True

Trace=True Debug=True

AutoEventWireup="false"

CodeFile="Default.aspx.vb"

Inherits="_Default"

Bloques de declaracin de cdigo

Un bloque de declaracin de cdigo contiene toda la lgica de aplicacin de una pgina ASP.NET y todas las declaraciones de variables globales y mtodos. Debe aparecer dentro de la etiqueta
<Script Runat=Server Language=VB>

Si no especificamos la propiedad Lenguaje tomar el dato de la directiva de pgina que especifique el lenguaje de programacin a utilizar en el servidor.

Controles ASP.NET
Combinado con el cdigo HTML pueden aparecer controles ASP.NET, el nico requisito es que los controles tengan la propiedad runat=Server. Un limitacin importante es que slo se puede incluir una sentencia <form Runat=Server> por pgina.

Bloques de presentacin de cdigo

Pudemos incluir cdigo intercalado con el contenido HTML de la pgina utilizando
<% %> <% =%>

Introduccin a ASP.NET

11

Comentarios del lado del servidor

Para introducir mententarios del lado del servidor, con propsito de documentacin se utiliza
<%-- comentarios --%>

Cabe destacar que estas lneas estn ocultas para el cliente, es decir, no se vern si desde el navegador utilizamos las opciones para ver cdigo fuente.

Directivas de inclusin del lado del servidor

Podemos incluir un archivo en una pgina ASP.NET utilizando uan de las dos formas de la directiva del lado del servidor. Si queremos incluir un archivo que est ubicado en el mismo directorio o en un subdirectorio de la pgina que incluye el archivo, utilizamos la siguiente directiva:
<!--#INCLUDE file=fichero.aspx -->

Texto literal y etiquetas HTML

La informacin que queremos presentar de forma esttica en nuestra pgina se hace por medio de texto y etiquetas HTML.

Introduccin a ASP.NET

12

2. FORMULARIOS EN ASP.NET
INTRODUCCIN
Los Web Forms (Formularios Web) es una nueva caracterstica de ASP.NET que ofrece un nuevo modelo de programacin que nos va a permitir generar contenidos dinmicos de una forma ms sencilla. Los Web Forms sustituyen e integran los formularios HTML dentro del entorno de programacin de ASP.NET. Un Web Form en ltima instancia va a generar el cdigo HTML correspondiente al formulario que se est diseando. ASP.NET nos proporciona un gran nmero de controles propios que coexisten armnicamente con contenido HTML: normalmente crearemos contenido esttico utilizando HTML y contenido interactivo con ASP.NET. Los ficheros que se corresponden con los Web Forms (pginas Web de ASP.NET) tienen extensin .aspx. La lgica de las pginas Web ASP.NET se compone del cdigo creado para interactuar con la pgina. El cdigo puede residir en un bloque de script en la pgina o en una clase independiente. Si el cdigo est en un archivo de clase independiente, a este archivo se le conoce como archivo de cdigo subyacente o code-behind El cdigo del archivo de cdigo subyacente se puede escribir en Visual Basic, Visual C# o JScript .NET.

FORMULARIOS CON CODE-BEHIND

Es recomendable serparar la vista de los controladores y para ello .NET nos permite utilizar un fichero aparte para implementar todos los controladores de una pgina. El cdigo que corresponde a la respuesta a los eventos del formulario es el code-behind y tiene el mismo nombre del formulario y extensin .aspx.vb. A continuacin vemos un ejemplo muy sencillo de un formulario que muestra un cuadro de texto (TextBox) un botn (Button) y una etiqueta (Label). Estos controles tienen la etiqueta runat=server para indicar que son controles de servidor. Cuando introducimos un texto en el cuadro de texto y pulsamos el botn nos muestra en una etiqueta un saludo de la forma:HOLA Elena;
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Pgina de prueba</title> </head> <body> <form id="form1" runat="server"> <div style="text-align: center"> <asp:TextBox id="txtNombre" runat="server"></asp:TextBox> <br /> <asp:Button id="btnSaludar" runat="server" Text="Saludar"/> <br />

Formularios

13

<asp:Label id="lblTexto" runat="server" Width="272px"></asp:Label> </div> </form> </body> </html>

Al botn le hemos aplicado un detector de eventos Handles btnSaludar.Click que va a llamar al mtodo btnSaludar_Click, este mtodo se encuentra en el fichero Default.aspx.cs, como se referencia en la cabecera de la pgina con CodeFile="Default.aspx.vb" y va a formar parte de la clase _Default. El contenido del fichero code-behind que se corresponde con el anterior Web Form es el siguiente:
Protected Sub btnSaludar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSaludar.Click Me.lblTexto.Text = "Hola " + txtNombre.Text End Sub

Funcionamiento del formulario y su code-behind

En la cabecera del .aspx indicamos el nombre del archivo code-behind, y el atributo Inherits indicando cmo se llama la clase que definiremos en dicho archivo. En el ejemplo, esta clase se llama _Default, pero podemos ponerle cualquier nombre, siempre que sea el mismo al indicado en el Inherits del archivo .aspx. El concepto de partial class se utiliza para vincular las pginas aspx (la interfaz del usuario) con su code-behind (comportamiento). Esta clase contiene el cdigo para realizar cualquier tipo de clculo, acceso a BDD etc. (la lgica de negocio), mientras que la pgina .aspx slo indica cmo colocar los distintos componentes en la pantalla (la presentacin). Cuando un cliente enva una peticin a la pgina .aspx, ASP.NET crea dos clases parciales una correspondiente a la pgina .aspx y la otra al code-behind, que se unirn en la compilacin.

SEPARAR EL CDIGO DEL CONTENIDO

Los buenos programadores no son necesariamente buenos diseadores. La mayora de las empresas dividen la tarea de desarrollar un sitio Web entre un equipo de diseo y otro de ingeniera. El equipo de diseo es responsable de hacer que un sitio Web sea bonito; el equipo de ingeniera de que el sitio funcione. Antes de ASP.NET era muy difcil hacer este trabajo en las pginas Web pues el cdigo y el contenido se mezclaban en la misma pgina. Los controles ASP.NET nos ofrecen un mtodo limpio para separar el cdigo (capa negocio) del contenido (capa presentacin). Los diseadores pueden colocar controles ASP.NET en una pgina sin preocuparse de la lgica de aplicacin. Una vez que la pgina est diseada el equipo de ingenieros puede ocuparse de aadir a una seccin aparte, o lo que es mejor, a un fichero aparte la lgica de aplicacin.

Formularios

14

TIPOS DE CONTROLES Controles HTML

Son los campos de formulario conocidos en HTML (label, textfield, etc.)
<input id="Button1" type="button" value="button" />

Estos controles se crean automticamente desde la barra de herramientas del programa.

Controles propios
ASP.NET permite que el programador cree sus propios controles de servidor si los deriva de controles existentes. Viene a ser una adaptacin de un control de servidor a las necesidades particulares de un programador. Existen dos tipos de controles propios: de usuario Web User Controls, son simples adaptaciones de controles existentes, son fciles de crear y se almacenan con la extensin .ascx propios totales Web Custom Controls, requieren un conocimiento profundo de programacin orientada a objetos adems de un conocimiento del lenguaje compartido CLR.

CONTROL DE EVENTOS Evento

Un evento es el modo que tiene un objeto de notificar al servidor que sobre l se ha producido una accin (un clic, una modificacin de sus valores, la carga de la pgina, etc). El uso ms habitual para los eventos se produce en las interfaces grficas. Este tipo de eventos se producen en los controles de servidor HTML y WEB Cada control tiene su propia coleccin de eventos. Para crear un nuevo evento se pueden utilizar dos mtodos: Con el men desplegable de clases y su correspondiente men de mtodos situados en la parte superior del cdigo.

En las propiedades del control se pulsa el icono y se muestran los distintos eventos para el control activo. Al pulsar doble clic sobre el evento se muestar el controlador de eventos correspondiente

Controlador de eventos
Un controlador de eventos es un procedimiento del cdigo que determina las acciones que se han de ejecutar cuando se produce un evento, como cuando un usuario hace clic en un botn. Formularios 15

Protected Sub btnSaludar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSaludar.Click Dim ahora As DateTime = DateTime.Now Me.lblTexto.Text = "El momento actual es " + ahora.ToString() End Sub

Estructura de un procedimiento de evento

Cada componente de un formulario tiene asociado una serie de eventos a los que responde. Cada evento debe ser manipulado por un controlador de eventos que se comunican con el control por medio de dos argumentos: Sender de tipo Object que es una referencia al objeto que produce el evento. e un objeto de la clase EventArgs o alguna de sus derivadas con informacin del evento que se ha producido (pulsacin, seleccin, clic, etc).

Formularios

16

3. CONTROLES WEB
INTRODUCCIN
Estos controles son especficos de ASP.NET, tienen una sintaxis basada en XML y no tienen una correspondencia exacta con los controles HTML como suceda con los controles HTML del servidor. Los controles Web pertenecen al espacio de nombres System.Web.UI.WebControls que contiene tambin al resto de familias de controles ASP.NET. A continuacin se ver un ejemplo que muestra un proverbio en funcin del elemento elegido en una lista desplegable
. <<body> <form id="formulario" runat="server"> <asp:DropDownList id="drpLista" runat="server"> <asp:ListItem Value="No por mucho madrugar amanece m&#225;s temprano">1</asp:ListItem> <asp:ListItem Value="Abril aguas mil">2</asp:ListItem> <asp:ListItem Value="A quien buen arbol se arrima buena sombra le cobija">3</asp:ListItem> </asp:DropDownList> <asp:Button id="btnVer" runat="server" Text="Seleccionar" /> <asp:Label id="lblTexto" runat="server"></asp:Label> </form> </body>

En el code-behind
Protected Sub btnVer_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnVer.Click lblTexto.Text = drpLista.SelectedItem.Value End Sub

Existen numerosas diferencias a la hora de utilizar controles HTML y controles Web, adems de las ms evidentes relativas a la distinta sintaxis a la hora de declarar los controles. Algunos nombres de las propiedades cambian, el control HTML button posee la propiedad Value, y sin embargo el control Web equivalente posee la propiedad Text. Cuando la pgina se carga en el navegador, el control Web determina el tipo de navegador que ha realizado la peticin, y de acuerdo con esta informacin genera el cdigo HTML apropiado, podemos decir que en este aspecto se trata de controles inteligentes.

En algunos casos nos puede interesar utilizar controles Web, y en otros controles HTML, los controles Web debern ser usados en las siguientes situaciones: Preferimos un modelo de programacin de alto nivel orientado a objetos. La pgina Web debe ser que deben ser mostrada por varios tipos de navegadores.

Controles Web

17

Se necesita una funcionalidad especfica, como puede ser un calendario o un rotador de anuncios, que se corresponden con los controles ricos, o bien necesitamos realizar algn tipo de validacin o presentacin de datos. Preferimos un modelo de objetos similar al lenguaje HTML. Estamos trabajando con pginas Web existentes y las queremos migrar a Web Forms. El control debe interactuar con script de cliente y de servidor, en lo que al tratamiento de eventos se refiere.

Y los controles HTML es preferible utilizarlos en las siguientes situaciones:

En el siguiente apartado nos vamos a ocupar de los controles Web que podemos encontrar dentro del grupo de controles intrnsecos.

Button
Este control Web representa un botn que enva el contenido de un formulario al servidor y cuya etiqueta es <asp:Button/>. Propiedades Text: obtiene o determina el texto mostrado en el botn CausesValidation: Cuando es false, no se valida el formulario al hacer clic en el botn. El valor predeterminado es true. Click: Evento que se dispara cuando pulsa el botn.

Eventos: En el siguiente ejemplo, al pulsar el botn (objeto de la clase Button) se muestra la fecha y hora actuales en un objeto de la clase Label..
<body> <form id="MiFormulario" runat="server"> <div> <asp:Button id="btnHora" runat="server" Text="Hora Actual" ><br /><br /> <asp:Label id="lblTexto" runat="server" Width="365px"></asp:Label> </div> </form> </body>

El el code-behind
Protected Sub btnHora_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnHora.Click Dim ahora As DateTime ahora = Now lblTexto.Text = "La hora actual es " + ahora.ToString End Sub

Controles Web

18

CheckBox
Control Web que se corresponde con una etiqueta <input type=checkbox> del lenguaje HTML. Este control Web tiene dos tratamientos distintos dentro de un WebForm, como un control de entrada de datos del usuario (valor true o false) como un botn de envo del formulario, este segundo comportamiento lo tendr si especificamos el valor true en la propiedad AutoPostBack 1.

En el ejemplo se muestra un ejemplo de utilizacin del control Web CheckBox, al pulsar el botn se comprueba si el objeto de la clase CheckBox se encuentra activado o no.
.. <body> <form id="form1" runat="server"> <div> <asp:CheckBox id="Opcion1" runat="server" Text="Elemento de CheckBox" /><br /> <asp:Button id="btnPulsar" runat="server" Text="Pulsame" OnClick="btnPulsar_Click" /><br /> <asp:Label id="lblTexto" runat="server"></asp:Label> </div> </form> </body>

En el code-begind
Protected Sub btnPulsar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnPulsar.Click If Opcion1.Checked Then lblTexto.Text = "Opcin activada" Else : lblTexto.Text = "Opcin desactivada" End If End Sub

Propiedades: AutoPostBack:Cuando es true, enva el formulario al servidor cuando actuamos sobre el CheckBox Checked: Tiene el valor true cuando la casilla de verificacin est seleccionada y false en caso contrario Text: Propiedad de lectura y escritura que contiene la etiqueta de texto asociada a la casilla de verificacin TextAlign: Determina la alineacin del texto asociado CheckedChange: Evento que se dispara cuando se modifica el control

Eventos:

La propiedad AutoPostBack utiliza JavaScript del lado del cliente. Si un navegador no soporta JavaScript o lo tiene desactivado, AutoPostBack no funciona.

Controles Web

19

DropDownList
Este control Web representa una lista desplegable, y se corresponde con la etiqueta <select> de HTML. Al igual que el control Web CheckBox tambin posee la propiedad AutoPostBack, si establecemos a true esta propiedad al seleccionar un elemento de la lista se enviar el formulario al servidor, es decir, es equivalente a la pulsacin de un botn de tipo submit. Este control slo permite la seleccin de una de las opciones. Cada uno de los elementos del control DropDownList se indica con un objeto de la clase ListItem. A un DropDownList podemos aadirle sus opciones de tres maneras: en tiempo de ejecucin, en el bloque HTML utilizando <asp:ListItem.> o bien unir el control a una fuente de datos. Para aadir un elmento al control en tiempo de ejecucin se har de la siguiente manera
drpDeportes.Items.Add("Nuevo Elemento")

Para modificar el valor de un elemento de la coleccin se indicar su ndice dentro de la coleccin

drpDeportes.Items(indice).Value = "Valor del elemento"

Propiedades AutoPostBack: Cuando es true, enva el formulario al servidor cuando seleccionamos una opcin del control DataMember: Identifica una tabla en particular de una fuente de datos para unirla a un control. DataSource: identifica la fuente de datos de los elementos enumerados en el control. DataTextField: Identifica el campo de la fuente de datos a utilizar para el texto de las distintas opeciones. DataTextFormatString: Propiedad de lectura y escritura que contiene la cadena de formato que determina como aparece DataTextField. DataValueField: Identifica el campo de la fuente de datos a utilizar para la propiedad Value de cada una de las opciones. tems: Representa la coleccin de elementos del control. SelectedIndex: Obtiene o establece el nmero de ndice de la opcin seleccionada. SelectedItem: Representa la opcin seleccionada. SelectedValue: Obtiene el valor del elemento seleccionado en el control o selecciona el elemento que contiene el valor especificado. DataBind: Carga el control con su fuente de datos. SelectedIndexChanged: Evento que se dispara cuando seleccionamos una nueva opcin del control.

Mtodos Eventos

Controles Web

20

En el siguiente cdigo vemos un ejemplo de uso de este control. Se trata de un Web Form que muestra una lista que permite seleccionar la imagen que se ver en el objeto Image.
. <body> <form id="form1" runat="server"> <div> <asp:DropDownList id="lista" runat="server" AutoPostBack="True" > <asp:ListItem value=" img /boton_guardar.gif">guardar</asp:ListItem> <asp:ListItem Value="img/boton_nuevo.gif">nuevo</asp:ListItem> <asp:ListItem Value=" img /boton_sangria.gif">sangria</asp:ListItem> </asp:DropDownList> <asp:Image id="imagen" runat="server" ImageUrl=" boton_guardar.gif " AlternateText="Guardar" Height="24px" style="margin-top: 96px" Width="26px" /> </div> </form> </body> </html>

Protected Sub lista_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles lista.SelectedIndexChanged imagen.ImageUrl = lista.SelectedItem.Value imagen.AlternateText = lista.SelectedItem.Text End Sub

El evento SelectedIndexChanged se produce cada vez que se modifica la seleccin de un elemento de la lista y adems la propiedad AutoPostBack tiene el valor True.

HyperLink
Este otro control Web representa un enlace en la pgina, por lo tanto generar en el cliente una etiqueta <a>. Propiedades ImageUrl: El URL del a imagen a mostrar como vnculo. NavigateUrl: El URL de la pgina a la que vamos a transferir al usuario Target: La ventana o marco objetivo del vnculo. Los valores posibles con _top, _self, _parent, _search, _blank. Text: La etiqueta de texto del vnculo

No tiene eventos ni mtodos. En el siguiente cdigo se muestra una lista de posibles enlaces que hacen variar el texto y la direccin de un enlace de WebForm
. <body> <form id="form1" runat="server"> <div> <asp:DropDownList id="lista" runat="server" AutoPostBack="True" > <asp:ListItem Value="http://www.google.com">Google</asp:ListItem> <asp:ListItem Value="http://www.rne.es">Radio Nacional</asp:ListItem>

Controles Web

21

</asp:DropDownList><br /><br /> <asp:HyperLink id="enlace" runat="server" NavigateUrl="http://www.google.com">Ir a Google</asp:HyperLink> </div> </form> </body> </html>

Protected Sub lista_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles lista.SelectedIndexChanged Select (lista.SelectedItem.Text) Case "Google" enlace.Text = "Ir a Google" enlace.NavigateUrl = "http://www.google.com" Case "El Pais" enlace.Text = "Ir a Radio Nacional" enlace.NavigateUrl = "http://www.rne.es" End Select End Sub

Image
Control Web que representa una imagen dentro de una pgina ASP.NET, generar como resultado de su ejecucin una etiqueta <img> de HTML. Para indicar la imagen que deseamos mostrar se utilizar la propiedad ImageURL. En el siguiente ejemplo se mostrar un CheckBox que determinar si una imagen es visible o no.
. <body> <form id="form1" runat="server"> <div> <asp:CheckBox id="visible" runat="server" AutoPostBack="True" Text="Visible" /><br /> <asp:Image id="imagen" runat="server" ImageUrl="~/imagenes/boton_guardar.gif" Visible="False" /> </div> </form> </body> </html>

Protected Sub visible_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles visible.CheckedChanged If visible.Checked Then imagen.Visible = True Else : imagen.Visible = False End If End Sub

Controles Web

22

ImageButton
Este control es muy similar al anterior, pero adems de mostrar una imagen posee la caracterstica adicional de funcionar como un botn de tipo submit, es decir, al pulsar el botn se envan los contenidos del formulario al servidor. Ejemplo1: El siguiente cdigo permite escribir dos frases y al pulsar el botn de imagen stas se vern debajo.
. <body> <form id="form1" runat="server"> <div> <asp:TextBox id="texto1" runat="server"></asp:TextBox> <asp:TextBox id="texto2" runat="server"></asp:TextBox> <asp:ImageButton id="btnImagen" runat="server" ImageUrl="~/imagenes/camera.gif" /> <br /> <br /> <asp:Label id="etiqueta" runat="server" Width="153px"></asp:Label> </div> </form> </body> </html>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If (Page.IsPostBack) Then 'no se hace la primera vez que se carga la pgina etiqueta.Text = texto1.Text + "/" + texto2.Text End If End Sub

El proceso de mostrar el contenido de las cajas de texto se lleva a cabo en el mtodo Page_Load, es decir, en el mtodo que trata el evento de carga de la pgina. En este mtodo se consulta la propiedad IsPostBack del objeto Page, que representa a la pgina actual (es false la primera vez que se carga la pgina y true las siguientes) Ejemplo 2: En el siguiente ejemplo veremos un detector de eventos en cuyo parmetro se puede acceder a informacin concreta del objeto que produce el evento. El objeto ImateButton transmite al mtodo detector de eventos el parmetro e en el que podemos acceder a las propiedades x e y. La pgina Web del ejemplo muestra una diana en la que si hacemos clic con el ratn vemos las coordenadas de la imagen en pantalla. Si pulsamos en la coordenada 100,100 se considera que hemos dado en el centro.
. <body> <form id="form1" runat="server"> <div style="text-align: center"> <span style="font-size: 16pt">Apunta y Dispara</span><br /> <asp:ImageButton id="ImageBtn" runat="server" ImageUrl="~/img/diana.jpg" Height="123px" Width="133px" /><br /> Coordenada X: <asp:Label id="Lblx" runat="server"></asp:Label><br /> Coordenada Y: <asp:Label id="Lbly" runat="server"></asp:Label><br />

Controles Web

23

<asp:Label id="LblGano" runat="server"></asp:Label> </div> </form> </body> </html>

Protected Sub ImageBtn_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageBtn.Click Lblx.Text = e.X.ToString() Lbly.Text = e.Y.ToString() If ((e.X = 100) And (e.Y = 100)) Then LblGano.Text = "HAS GANADO" End Sub

Label
Este control ya lo hemos utilizado en ejemplos anteriores y representa una etiqueta de texto. Con este control ya hemos trabajado repetidamente. Contiene la propiedad Text de lectura y escritura que representa el texto que muestra el control.

LinkButton
Este control va a representar un botn que presenta un estilo similar a los enlaces, el control LinkButton presenta una apariencia similar a un control Hyperlink, pero sin embargo ofrece la misma funcionalidad que un control Button, es decir, presenta un texto a modo de enlace que al pulsarlo enviar el formulario en el que se encuentre al servidor. El ejemplo trata de un Web Form que posee un control LinkButton, al pulsar sobre el objeto LinkButton se enva el formulario al servidor y se muestra en un control Label los valores de los controles TextBox.
. </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox id="texto1" runat="server"></asp:TextBox> <asp:TextBox id="texto2" runat="server"></asp:TextBox> <asp:LinkButton id="botonlink" runat="server">Pulsame </asp:LinkButton><br /> <asp:Label id="lblResul" runat="server" Width="315px"></asp:Label> </div> </form> </body </html>

Controles Web

24

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If (Page.IsPostBack) Then 'no es la primera vez que se carga lblResul.Text = texto1.Text + "--" + texto2.Text End If End Sub

ListBox
Este nuevo control Web que pasamos a comentar representa una lista de seleccin sencilla o mltiple, es similar al control DropDownList, pero en este caso se muestran varios elementos de la lista y se permite la seleccin mltiple. Este control Web tambin se corresponde con una etiqueta <select> en el cdigo HTML generado, de la misma forma que suceda con el control DropDownList, pero en este caso con distintas propiedades. Propiedades AutoPostBack: Cuando es true, enva el formulario al servidor cuando actuamos sobre algn elemento del ListBox. DataMember: Identifica una tabla en particular de una fuente de datos para unirla a un control. DataSource: identifica la fuente de datos de los elementos enumerados en el control. DataTextField: Identifica el campo de la fuente de datos a utilizar para las opciones. DataTextFormatString: Propiedad de lectura y escritura que contiene la cadena de formato que determina como aparece String DataTextField. DataValueField: Identifica el campo de la fuente de datos a utilizar para la propiedad Value de cada uno de los tems del control (cada opcin). tems: Representa la coleccin de elementos del control. Rows: Indica el nmero de filas a mostrar en el cuadro de lista. El valor predeterminado es 4. SelectedIndex: Indica el nmero de ndice de la opcin seleccionada. SelectedItem: Representa la opcin seleccionada. SelectionMode: Determina si el usuario puede seleccionar ms de un elmentos de la lista a la vez. Los valores posibles con Multiple y Single (valor por defecto). DataBind: Carga el control con su fuente de datos. SelectedIndexChanged: Evento que se dispara cuando seleccionamos una nueva opcin del cuadro de lista.

Mtodos Eventos

El control ListBox tiene una coleccin representada por su propiedad tems, que representa todas las opciones individuales del cuadro de lista. Se pueden agregar Controles Web 25

opciones con el mtodo Add de la coleccin tems, desde el cdigo en el bloque HTML y desde una fuente de datos. En el siguiente cdigo se muestra una lista de seleccin mltiple y un control Button, al pulsar sobre el botn se muestra un control Label con los valores de los elementos que se han seleccionado en la lista.
<body> <form id="form1" runat="server"> <div> <asp:ListBox id="lista" runat="server" SelectionMode="Multiple"> <asp:ListItem>Uno</asp:ListItem> <asp:ListItem>Dos</asp:ListItem> <asp:ListItem>Tres</asp:ListItem> <asp:ListItem>Cuatro</asp:ListItem> </asp:ListBox> <asp:Button id="boton" runat="server" Text="Pulsame" /> <br /><br /> <asp:Label id="resultado" runat="server"></asp:Label> </div> </form> </body> </html>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim s As String If (Page.IsPostBack) Then s = "Elementos seleccionados: " For i As Byte = 0 To lista.Items.Count - 1 If (lista.Items(i).Selected) Then s += lista.Items(i).Text + " " End If Next resultado.Text = s End If End Sub

Panel
Este otro control Web intrnseco se utiliza para agrupar controles y realizar la funcin de contenedor de los mismos. El control Panel posee una propiedad llamada Controls que es una coleccin que contiene todos los controles incluidos dentro del objeto Panel. El objeto Panel se traduce en los navegadores en un objeto div. En el siguiente cdigo muestra un ejemplo sencillo de utilizacin de este control, en este caso se utiliza en combinacin con un control CheckBox, mediante el valor del mismo indicaremos si se va a mostrar el contenido del objeto Panel o no. El objeto Panel contiene tres objetos TextBox.
<body>

Controles Web

26

<form id="form1" runat="server"> <div> <asp:Panel id="contenedor" runat="server" Visible="False"> <asp:TextBox id="texto1" runat="server"></asp:TextBox> <asp:TextBox id="texto2" runat="server"></asp:TextBox> </asp:Panel> <br /> <asp:CheckBox id="opcion" Text="Mostrar contenido panel" runat="server" AutoPostBack="true"/> </div> </form> </body> </html>

Protected Sub opcion_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles opcion.CheckedChanged If (opcion.Checked) Then contenedor.Visible = True Else contenedor.Visible = False End If End Sub

PlaceHolder
Control Web que realiza tambin la funcin de un contenedor de controles Web, pero en este caso no genera ningn cdigo HTML, se utiliza para aadir controles Web de forma dinmica en la pgina ASP.NET en un punto determinado, para ello se utiliza su propiedad Controls. El cdigo siguiente muestra un objeto PlaceHolder al que se le aaden tres objetos TextBox en el evento PageLoad.
<body> <form id="form1" runat="server"> <div> <asp:PlaceHolder id="contenedor" runat="server"></asp:PlaceHolder> </div> </form> </body> </html>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then ' si es la primera vez que se carga Dim texto1 As TextBox = New TextBox() contenedor.Controls.Add(texto1) Dim texto2 As TextBox = New TextBox() contenedor.Controls.Add(texto2) Dim texto3 As TextBox = New TextBox() contenedor.Controls.Add(texto3)

Controles Web

27

End If End Sub

RadioButtonList
Este control permite utilizar una lista de controles RadioButton. Propiedades Items que contiene todos los objetos RadioButton. Se puede especificar a travs de las propiedades. RepeatDirection y RepeatLayout la distribucin de los RadioButton en la pgina, como se puede apreciar es muy similar al control CheckBoxList, pero en este caso se utilizan controles RadioButton. SelectedIndex: Indica el nmero de ndice del botn seleccionado. SelectedItem: Representa el botn seleccionada.

Este control permite visualizar fcilmente una lista de botones de radio de una tabla de una base de datos o una coleccin.
.. </head> <body> <form id="form1" runat="server"> <div> <asp:RadioButtonList id="radiobotones" AutoPostBack="true" runat="server"> <asp:ListItem>elemento 1</asp:ListItem> <asp:ListItem>elemento 2</asp:ListItem> <asp:ListItem>elemento 3</asp:ListItem> <asp:ListItem>elemento 4</asp:ListItem> </asp:RadioButtonList> <br /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </div> </form> </body> </html>

Protected Sub radiobotones_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles radiobotones.SelectedIndexChanged Label1.Text = Me.radiobotones.Text End Sub

Table, TableRow y TableCell

El control Web Table se corresponde con una tabla del lenguaje HTML, es decir, permite generar tablas del lenguaje HTML. Esta clase posee una coleccin llamada Rows, que contiene objetos de la clase TableRow.

Controles Web

28

En el siguiente ejemplo se trata de un formulario Web que permite indicar el nmero de filas y de columnas que deseamos que tenga una tabla.
<body> <form id="form1" runat="server"> <div> <asp:Table id="tabla" runat="server" CellPadding="2" CellSpacing="2" GridLines="Both"> </asp:Table> <br /> Filas <asp:DropDownList id="filas" runat="server"> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>4</asp:ListItem> <asp:ListItem>5</asp:ListItem> </asp:DropDownList> Columnas <asp:DropDownList id="columnas" runat="server"> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> <asp:ListItem>4</asp:ListItem> <asp:ListItem>5</asp:ListItem> </asp:DropDownList> <asp:Button id="boton" runat="server" Text="GenerarTabla" /> </div> </form> </body> </html>

Protected Sub boton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles boton.Click Dim numeroFilas As Integer = CType(filas.SelectedItem.Value, Integer) Dim numeroColumnas As Integer = CType(columnas.SelectedItem.Value, Integer) For j As Byte = 0 To numeroFilas Dim fila As TableRow = New TableRow() For i As Byte = 0 To numeroColumnas Dim columna As TableCell = New TableCell() columna.Text = "[" + j.ToString + "," + i.ToString + "]" fila.Cells.Add(columna) Next tabla.Rows.Add(fila) Next End Sub

Se utilizan objetos de la clase TableRow y TableCell para crear filas y columnas de la tabla. Para aadir una columna se debe aadir un objeto TableCell a la coleccin Cell del objeto TableRow correspondiente, y para aadir una fila se aade un objeto TableRow a la coleccin Rows del objeto de la clase Table.

Controles Web

29

En este ejemplo se ha utilizado la propiedad GridLines=Both para que muestre los bordes de la tabla tanto horizontales como verticales.

TextBox
Este control Web, se corresponde con el control HTML TextBox. Almacena datos alfanumricos como nombre, emails, direcciones, etc.

ASOCIAR EVENTOS DE CLIENTE CON CONTROLES DE SERVIDOR Descripcin de la Propiedad de WebControl.Attributes

La propiedad Attributes de los controles Web permite asociar eventos de cliente con controles de servidor. De esta forma se pueden asociar a los controles de servidor eventos de cliente que llamen a cdigo JavaScript o que permitan acceder a las propiedades HTML de los objetos. Para mostrar mejor este concepto, vamos a agregar un atributo para que establezca el color de fondo de un control TextBox de un Web Forms. Observe que el cdigo de ejemplo no utiliza la propiedad BackColor del control TextBox de formularios Web Forms. En su lugar, el cdigo de ejemplo utiliza el atributo style de HTML para establecer el color de fondo. En el ejemplo tambin vemos como enlazar un evento de cliente con una accin JavaScript desde cdigo VB. No todos los exploradores admiten cada atributo que se procesa.

Ejemplo que utiliza la propiedad de atributos

En este ejemplo muestra la forma de que utiliza la propiedad Attributes para especificar un evento de cliente para un control TextBox de Web Forms:
protected void Page_Load (object sender, EventArgs e) { Caja.Attributes["onblur"] = "javascript:alert(Aviso de navegantes!);"; Caja.Attributes["style"] = "BACKGROUND-COLOR: #ccffff;"; }

. <body> <form id="formulario" runat="server"> <div> <asp:TextBox ID="Caja" runat="server" AutoPostBack="true"></asp:TextBox> </div> </form> </body>

Controles Web

30

4. FORMATO
PROPIEDADES DE LOS CONTROLES WEB
Todos los controles heredan de la clase base de controles Web (WebControl). Esta clase tiene un cierto nmero de propiedades que podemos utilizar para modificar la apariencia de cualquier control Web. PROPIEDAD AccessKey DESCRIPCIN Mtodo abreviado de teclado para la seleccin de un control. Utilizamos una sola letra o nmero mientras mantenemos pulsada la tecla Alt Color que aparece detrs del texto de un control Apariencia del borde. Grosor de los pxeles del borde de un control Texto en negrita Texto en cursiva Nombre del tipo de letra del texto Especifica una lista de tipos de letra para el texto. Si no est disponible el primero, se aplica el segundo y as sucesivamente. Dibuja una lnea sobre el texto Tamao del texto en puntos o pxeles Dibuja una lnea en el texto Dibuja una lnea bajo el texto Color del texto Altura del control en pxeles Orden de tabulacin de los controles. Texto que aparece en el puntero del ratn cuando se posiciona sobre el control Ancho del control en pxeles o porcentaje.

BackColor BorderStyle BorderWidth Font-Bold Font-Italic Font-Name Font-Names Font-Overline Font-Size Font-Strikeout Font-Underline ForeColor Height TabIndex ToolTip

Width

Formato

31

ESTILOS PARA LOS CONTROLES WEB

Se puede aplicar las hojas de estilo (CSS) a los controles Web de la misma forma a como se hace en HTML para personalizar el aspecto de nuestros controles. A continuacin veremos distintas formas de utilizar estilos con los controles Web

Mediante propiedades
Una de las formas de utilizar estilos con los controles Web es a travs de una serie de propiedades que presentan los propios controles. Estas propiedades se encuentran fuertemente tipadas y representan los estilos ms frecuentes que se pueden aplicar al control: color, tamao, tipo de letra, color de fondo, dimensiones, etc. La ventaja de aplicar los estilos de esta manera es que en tiempo de compilacin se comprueba que las propiedades y sus valores sean correctos. En el siguiente ejemplo vemos un control Web Label al que se le ha aplicado determinadas caractersticas por medio de sus propiedades, como se puede ver en el cdigo.
<form id="form1" runat="server"> <div> <asp:Label id="etiqueta" runat="server" BackColor="Yellow" BorderColor="Red" BorderStyle="Dotted" Font-Bold="True" Font-Italic="True" Font-Names="Courier New" FontSize="12pt" ForeColor="#00C000" Text="Este es un ejemplo de estilos" Width="300px"></asp:Label></div> </form>

Propiedad CssClass
Podemos utilizar clases de estilos y aplicarlos automticamente asignando un valor a la propiedad CssClass de cada control. A continuacin vemos un ejemplo
<head runat="server"> <style> .clase{font: 14pt verdana;background-color:lightblue;color:purple;} </style> </head> <body> <form id="form1" runat="server"> <div> <asp:Label id="etiqueta" runat="server" CssClass="clase" Text="Prueba de Estilos usando clases" Width="316px"></asp:Label></div> </form> </body>

Formato

32

Tambin

se

puede

importar

la

hoja

de

estilos

utilizando

la

instruccin

suponiendo que el fichero de estilos se llama estilos.css Tambin se puede hacer referencia al fichero de estilos en la propiedad StyleSheet de Document y automticamente incorpora la instruccin anterior al cdigo.

Mtodo ApplyStyle
Los estilos tambin se pueden asignar a travs del mtodo ApplyStyle. Este mtodo recibe como parmetro un objeto de la clase Style al que previamente hemos asignado una serie de valores a sus propiedades para definir el estilo que deseamos aplicar al control. A continuacin vemos un ejemplo.
<body> <form id="form1" runat="server"> <div> <asp:Label id="etiqueta" runat="server" Text="Estilos con el mtodo ApplyStyle" ></asp:Label></div> </form> </body>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim estilo As Style = New Style() estilo.BorderColor = Drawing.Color.Green estilo.BorderStyle = BorderStyle.Dashed estilo.ForeColor = Drawing.Color.Blue estilo.BackColor = Drawing.Color.Pink estilo.Font.Name = "Courier" estilo.Font.Size = 14 estilo.Font.Italic = True etiqueta.ApplyStyle(estilo) End Sub

Para utilizar este mtodo hemos tenido que importar el espacio de nombres System.Drawing para poder utilizar las clases Color y BorderStyle. Para ello hemos utilizado la directiva Import.

Formato

33

Propiedad Style
Style es una coleccin que permite asignar valores a las distintas propiedades del estilo de control. En este caso no compila los valores de la propiedad sino que se van aadiendo al control para luego mostrarse en cdigo HTML. A continuacin vemos un ejemplo.
. <body> <form id="form1" runat="server"> <div> <asp:Label id="etiqueta" runat="server" Text="Propiedad Style de los controles Web" Width="315px"></asp:Label> </div> </form> </body> </html>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load etiqueta.Style("font-size") = "12pt" etiqueta.Style("font-family") = "verdana" etiqueta.Style("background-color") = "pink" etiqueta.Style("color") = "red" etiqueta.Style("border-style") = "dotted" etiqueta.Style("border-color") = "blue" End Sub

Formato

34

5. CONTROLES DE VALIDACIN
INTRODUCCIN
Los controles de validacin es el mecanismo estndar que ASP.NET utiliza para validar las entradas de usuario automatizando la muestra de mensajes en pantalla cuando la entrada no es validada. Este tipo de controles no se ven en el formulario del usuario y cada uno de ellos valida un control determinado. El usuario percibe la existencia de estos controles cuando se enva el formulario al servidor y se activan los controles de validacin, entonces si la validacin no es correcta se emite un mensaje al respecto. La validacin se realiza de forma automtica cuando se devuelve la pgina al servidor (postback), despus de la inicializacin de la pgina y antes de que se llame al cdigo de control de eventos. ASP.NET ofrece seis controles de validacin que pertenecen al espacio de nombres System.Web.UI.WebControls, y son los siguientes: RequiredFieldValidator: valida si un control no est vaco. CompareValidator: comprueba si un control contiene un valor determinado o coincide con el contenido de otro control, se utiliza con un operador de comparacin. RangeValidator: valida si el valor indicado por el usuario se encuentra dentro de un rango determinado. RegularExpresionValidator: valida si el valor indicado por el usuario se corresponde con una expresin. CustomValidator: permite especificar una funcin de validacin personalizada. ValidationSummary: contiene todos los mensajes de error que se han producido y muestra una lista de ellos en la pgina.

La validacin se realiza sobre los controles de un WebForm y se pueden utilizar distintos controles de validacin sobre un mismo control a validar. A continuacin se muestra el cdigo general de un control de validacin:
<asp: control_validacion id=identificador runat=server controlToValidate=id_control errorMessage=Mensaje de error display=static/dynamic/none> </asp: control_validacion >

Propiedades comunes En la propiedad controlToValidate se debe indicar el identificador de control que deseamos validar. La propiedad errorMessage contiene una cadena de texto que ser el mensaje de error que se mostrar al lado del control que lo ha producido. Si, adems, el programador ha previsto usar el control ValidationSummary, el mismo mensaje se repetir al final del formulario junto con los dems.

Controles de validacin

35

La propiedad display indica como se ver el mensaje de error. Mientras no se produzca ninguna entrada errnea, los controles de validacin permanecen ocultos, pero cuando esto ocurre, tenemos distintas opciones para hacerlo visible. static: El mensaje se muestra a su lado y se debe dejar espacio para l. Es la opcin por defecto.

dynamic: Se permite que el navegador desplace los controles con la finalidad de mostrar el mensaje (cuando no hay espacio suficiente)

none: Si no queremos que se muestre el mensaje al lado del control de entrada pero s al final del formulario en el caso de que se utilice ValidationSummary. IsValid. Tiene el valor true cuando la comprobacin de la validacin tiene xito y false en caso contrario. Se puede comprobar la propiedad IsValid de cada control de validacin para ver si se han completado bien todos los campos del formulario. Validate. Lleva a cabo la validacin y actualiza la propiedad IsValid.

Mtodo Si se especifica algn texto entre las etiquetas de apertura y cierre del control Web de validacin se mostrar ese texto si se produce un error, en lugar del texto indicado en la propiedad errorMessage, que ser descartado. Para saber si se han realizado con xito todas las validaciones de una pgina se puede consultar la propiedad isValid del objeto Page. Si esta propiedad devuelve true es que las validaciones se han efectuado de forma correcta.

Validacin cliente/servidor
Por defecto, cada control de validacin acta tanto del lado del servidor como del lado del cliente. Concretamente, si el cliente usa un navegador que soporte DHTML, se permitir la validacin del lado del cliente mejorando notablemente el rendimiento de la aplicacin ASP.NET, pues lo errores detectados no sern enviados al servidor, sino corregidos del lado del cliente. Si, por un motivo especial, no deseamos que la validacin acte tambin del lado del cliente, slo tenemos que configurar la propiedad ClientTarget del objeto Page como Controles de validacin 36

Downlevel (se puede indicar en la cabecera del formulario como una directiva), tambin se pude establecer la propiedad EnableClientScript de un control de validacin a false para deshabilitar la validacin del lado del ciente para dicho control. En este caso la validacin se efectuar del lado del servidor, aumentando notablemente los viajes de ida y vuelta pero permitiendo intervenir con funciones de servidor en el control de la validacin. ASP.NET ejecuta una validacin en el servidor aunque los controles de validacin la hayan ejecutado en el cliente, por lo que se puede probar la validez en los controladores de eventos basados en el servidor. Si se desea se puede invocar en su propio cdigo llamando al mtodo Validate de un control de validacin.

Controles con posibilidad de ser validados

Los controles de validacin pueden actuar sobre un nmero limitado de controles HTML y controles Web. Aquellos controles que se pueden validar son: Control HtmlInputText HtmlInputFile HtmlSelect HtmlTextArea DropDownList ListBox Propiedad a validar Value Value Value Value SelectedItem.Value SelectedItem.Value

RadioButtonList SelectedItem.Value TextBox Text

RequiredFieldValidator
Este control es el nico que se puede utilizar para validar que un campo no est vaco. Tambin se puede utilizar para detectar si el valor del control a validar es distinto de uno dado.

Caso 1
A continuacin se mostrar un cdigo que implementa un formulario con tres campos de texto: nombre, apellidos y telfono. Los tres campos sern validados con el control RequiredFieldValidator, es decir, no se enviar el formulario al servidor si no se han rellenado con algn valor los tres campos. El control de validacin se debe introducir en la parte del cdigo donde queremos que aparezca el mensaje.
<form id="form1" runat="server">

Controles de validacin

37

<div> Nombre <asp:TextBox id="nombre" runat="server"></asp:TextBox> <asp:RequiredFieldValidator id="validarNombre" runat="server" ControlToValidate="nombre" ErrorMessage="Es necesario introducir el nombre"></asp:RequiredFieldValidator><br /> Apellidos <asp:TextBox id="apellidos" runat="server"> </asp:TextBox> <asp:RequiredFieldValidator id="validarApellidos" runat="server" ControlToValidate="apellidos" ErrorMessage="Es necesario introducir los apellidos"></asp:RequiredFieldValidator><br /> Telfono <asp:TextBox id="telefono" runat="server"></asp:TextBox> <asp:RequiredFieldValidator id="validarTelefono" runat="server" ControlToValidate="telefono" ErrorMessage="Es necesario introducir el telfono"></asp:RequiredFieldValidator><br /> <asp:Button id="boton" runat="server" Text="Enviar datos" /><br /> </div> </form>

Nota: Al no indicar nada en la propiedad ClientTarget en la directiva Page, se realizar la validacin en el cliente o en el servidor en funcin de si el navegador soporta DHTML. Probar a cambiar la directiva y ver la diferencia en el cdigo fuente del explorador.
<%@ Page Language="C#" ClientTarget="Downlevel" %>

Caso 2
Tambin podemos utilizar este control de validacin para determinar que se introduzca un valor diferente a uno dado. Para realizar esta validacin tenemos que utilizar la propiedad InitialValue que contiene el texto que no se puede introducir en el control a validar. En este caso usamos la propiedad Text para introducir el cdigo de error. Por ejemplo en el siguiente cdigo el control de validacin controla que en un area de texto se modifique el valor introducido por defecto, de esta manera obligamos al usuario a introducir contenido en este control.
.. <body> <form id="form1" runat="server"> <div> Comentarios: <br>

Controles de validacin

38

<asp:TextBox id="txtComments" TextMode="MultiLine" Text="Mis comentarios" Runat="Server"/> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtComments" Text="Introduce algn comentario!" InitialValue="Mis comentarios" Runat="Server" /><p> <asp:Button ID=" btnEnviar" Text="Enviar" Runat="Server" ><p> <asp:Label ID="lblSaludo" runat="server" Text=""></asp:Label></p> </div> </form>

Protected Sub btnEnviar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnEnviar.Click If Page.IsValid Then lblMensaje.Text = "Envio correcto" End If End Sub

CompareValidator
El control de validacin CompareValidator compara el valor introducido por el cliente en un control con otro que puede estar introducido en otro elmento de formulario o bien un literal que se indica en las propiedades del control de validacin. Tambin se puede utlizar para detectar el tipo de dato introducido en el control a validar. Este control Web se utilizar con un operador de comparacin, y presenta las siguientes propiedades adicionales: ValueToCompare. Esta propiedad contendr un literal con el que compara en control a validar. ControlToCompare. Esta propiedad contiene el identificador de otro control donde estar el valor a comparar. Type. Indica el tipo de dato de los valores que se van a comparar, esta propiedad puede presentar los siguientes valores: Currency, Date, Double, Integer y String. Operator. Contiene el tipo de operador que se va a utilizar en la comparacin de los dos valores. Esta propiedad puede contener los siguientes valores: Eaqual (igual a ) GreaterThan (mayor que) GreaterEqual (mayor o igual que) LessThan (menor que)

Controles de validacin

39

LessThanEqual (menor o igual que ) NotEqual (distinto que) DataTypeCheck. Esta propiedad valida el tipo de datos del control Web, en este caso no se compara con otro control, sino que nicamente se comprueba el tipo de valor del control.

Caso 1
A continuacin veremos un ejemplo en el que se pide introducir en un campo de texto la edad y sobre el que se realizan los siguientes controles: que contenga datos que el valor sea entero que el valor sea mayor que 0

<form id="form1" runat="server"> <div> Edad <asp:TextBox id="edad" runat="server"></asp:TextBox><br /> <asp:RequiredFieldValidator id="validarEdad" runat="server" ControlToValidate="edad" ErrorMessage="Debe introducir la edad"> </asp:RequiredFieldValidator> <asp:CompareValidator id="validarTipoDato" runat="server" ControlToValidate="edad" ErrorMessage="La edad debe ser un nmero entero" Operator="DataTypeCheck" Type="Integer"> </asp:CompareValidator> <asp:CompareValidator id="validarComparaEdad" runat="server" ControlToValidate="edad" Operator=GreaterThan ErrorMessage="Debe ser mayor o igual que 0" Type="Integer" ValueToCompare="0"> </asp:CompareValidator> <asp:Button id="botonEnviar" runat="server" Text="Enviar datos" /> </div> </form>

Caso 2
En el siguiente ejemplo vamos a ir comparando de forma dinmica los valores de cadena de dos objetos TextBox. El operador se selecciona en cada caso de una lista desplegable. Al pulsar el botn del formulario se indicar si la comparacin ha sido vlida o no, para ello se consulta la propiedad isValid del objeto Page actual. El resultado de la comparacin se indicar en un objeto Label. Se debe tener en cuenta a al hora de hacer la lista desplegable que los valores de comparacin deben estar en el orden en que se encuentran en la hoja de propiedades Controles de validacin 40

pues despus se consulta su posicin en la lista y se transforma en operador por medio de un cast. Cada operador se corresponde con un nmero. Para que esta pgina ASP.NET funcione correctamente debemos indicar que el cliente Web es de bajo nivel mediante la propiedad ClientTarge de la directiva Page, de esta forma la validacin se realizar en el servidor Web, en lugar de en el cliente. Si la validacin se realiza en el cliente ejecuta tal cual el control establecido en el cdigo y no ejecuta los mtodos del servidor.
. <body style="text-align: center"> <form id="form1" runat="server"> <div> <table style="width: 598px"> <tr> <td style="width: 14px"> Primera cadena<br /> <asp:TextBox id="texto1" runat="server"></asp:TextBox> </td> <td style="width: 54px" valign="middle"> <asp:DropDownList id="lista" runat="server" OnSelectedIndexChanged="lista_SelectedIndexChanged"> <asp:ListItem Value="Equal">Igual</asp:ListItem> <asp:ListItem Value="NotEqual">Distinto</asp:ListItem> <asp:ListItem Value="GreaterThan">Mayor</asp:ListItem> <asp:ListItem Value="GreaterThanEqual">Mayor o igual</asp:ListItem> <asp:ListItem Value="LessThan">Menor</asp:ListItem> <asp:ListItem Value="LessThanEqual">Menor o igual</asp:ListItem> </asp:DropDownList> </td> <td style="width: 46px" valign="top"> Segunda cadena <asp:TextBox id="texto2" runat="server"> </asp:TextBox> </td> </tr> </table> <asp:Button id="boton" runat="server" OnClick="boton_Click" Text="Validar" /> <asp:CompareValidator id="controlComparacion" runat="server" ControlToCompare="texto2" ControlToValidate="texto1"> </asp:CompareValidator> <asp:Label id="resultado" runat="server"></asp:Label> </div> </form>

Protected Sub boton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles boton.Click If (Page.IsValid) Then resultado.Text = "Comparacin correcta" Else resultado.Text = "Comparacin incorrecta" End If End Sub

Controles de validacin

41

Protected Sub lista_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles lista.SelectedIndexChanged controlComparacion.Operator = CType(lista.SelectedIndex, ValidationCompareOperator) End Sub Protected Sub lista_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles lista.SelectedIndexChanged controlComparacion.Operator = CType(lista.SelectedIndex, ValidationCompareOperator) End Sub

Nota: El control CompareValidator exige que las fechas para comparar tengan un formato similar a
1/1/2001 o bien 1-1-2001

Si quisieramos incluir ms opciones cuando realicemos validacin de fechas tendramos que recurrir al control de validacin CustomValidator.

RangeValidator
El control de validacin de servidor RangeValidator sirve para comprobar que la informacin suministrada por el cliente est delimitada entre dos valores. Supongamos que se debe introducir una cierta cantidad comprendida entre un mnimo y un mximo, o que se debe concertar un da de visita para este ao, o que slo quedan libres los nombres cuya inicial caiga dentro del rango de la M a la X, etc. En todos estos casos ser necesario el uso del control RangeValidator. Las propiedades ms caractersticas de este control son: Type. Determina el tipo de datos que queremos limitar. Podemos escoger entre: Integer, Double, String, Date o Currency. MinimumValue. Valor mnimo permitido. MaximunValue. Valor mximo permitido.

En el siguiente ejemplo se utiliza en control RangeValidator para comprobar que el valor indicado se encuentra entre 1 y 100.
<form id="form1" runat="server"> <div style="text-align: center"> Inroduce tu edad

Controles de validacin

42

<asp:TextBox id="edad" runat="server"></asp:TextBox><br /> <asp:RangeValidator id="validarEdad" runat="server" ControlToValidate="edad" ErrorMessage="La edad debe estar entre 1 y 100" MaximumValue="100" MinimumValue="1" Type="Integer"> </asp:RangeValidator><br /> <asp:Button id="enviarDatos" runat="server" Text="Enviar datos" /> </div> </form>

RegularExpressionValidator
Este control comprueba si el valor de un control de entrada coincide con el patrn definido por la expresin regular. En otras palabras funciona como un filtro de caracteres no deseados en nuestra aplicacin, adems contiene ya expresiones predefinidas que podemos seleccionar como: direccin Web y correo electrnico, donde contiene la expresin de validacin para estos dos formatos, pero tambin podemos crear nuestras propias expresiones regulares. En el ejemplo se ver un ejemplo de este control que debe verificar si el contenido de una cada de texto tiene el siguiente formato: digito-digito.
<form id="form1" runat="server"> <div style="text-align: center"> Valor <asp:TextBox id="valor" runat="server" Width="83px"> </asp:TextBox> <asp:RegularExpressionValidator id="validarValor" runat="server" ControlToValidate="valor" ErrorMessage="El formato debe ser digito-digito" ValidationExpression="[0-9]-[0-9]"> </asp:RegularExpressionValidator> <asp:Button id="boton" runat="server" Text="Enviar datos" /></div> </form>

La propiedad ValidationExpression sirve para introducir la expresin regular, tambin existen patrones predefinidos, la siguiente figura nos muestra el editor de expresiones regulares con patrones predefinidos, tales como el correo electrnico:

Controles de validacin

43

Ejemplos
ValidationExpression="^[A-Za-z \s]{0,40}$"> Esta expresin nos permite crear un filtro que solo nos acepte letras del Alfabeto de A a Z, tanto maysculas como minsculas y espacios, tambin limitando el ingreso de datos a un mximo de 40 caracteres. ValidationExpression="^[A-Za-z1-0 \s]{0,100}$" Ahora nos aceptara las letras del alfabeto, tambin nmeros y espacios pero esta vez con un maxlength de 100 caracteres. ValidationExpression="^[1-0\s]{0,7}$" Ahora nos aceptara solo nmeros, con un maxlength de 7 caracteres. ValidationExpression= \S+@\S+\.\S+ Esta expresin se utliza para comprobar que la direccin de correos empieza con uno o ms caracteres no en blanco, seguido de @, seguido de uno o ms caracteres no en blanco, seguido de un punto, seguido de uno o ms caracteres no en blanco. Para comprobar la longitud de una entrada. Se puede utilizar una expresin como sta .{0,10}, esta expresin coincide con cualquier entrada (incluidos espacios) que contengan entre 0 y 10 caracteres. Si queremos limitar la entrada a una cadena de caracteres no en blanco que tenga una cierta longitud, deberamos utilizar una expresin regular como sta: \S{0,10}. Notas: El uso de expresiones regulares podra dar resultados desagradables si se ejecuta en el cliente por ello es conveniente hacer que esta validacin se ejecute siempre en el servidor. El control RegularExpressionValidator es vlido cuando el control que maneja est vaco, se debe combinar con RequiredFieldValidator en el caso de que la introduccin de datos sea obligatoria.

Controles de validacin

44

CustomValidator
Este control se utiliza para realizar una validacin personalizada pues podr llamar a una funcin definida por el usuario que ser la que realice la validacin. Esta funcin puede estar definida en el cliente o en el servidor. Este control de validacin ofrece las siguientes propiedades destacadas: ClientValidationFunction: en esta propiedad indicaremos el nombre de la funcin del lado del cliente que realizar la validacin, en este caso la funcin ser una funcin definida en un lenguaje JavaScript. OnServerValidate: en esta propiedad debemos indicar el nombre de la funcin de servidor que se va a encargar de realizar la validacin, esta funcin se ejecutar cuando se produzca el evento ServerValidate, es decir, esta propiedad va a ser el manejador del evento que se produce cuando se realiza la validacin en el servidor.

Lo mejor es ofrecer las funciones de validacin en el cliente y en el servidor, as nos aseguraremos que la validacin siempre se realizar con independencia del tipo de navegador que ha cargado la pgina ASP .NET correspondiente. En los dos casos la funcin de validacin va a recibir dos parmetros: uno de la clase Object, que representa al control de la clase CustomValidator, y otro objeto de la clase ServerValidateEventArgs, que se va a utilizar para indicar si la validacin ha sido correcta o no. El objeto de clase ServerValidateEventArgs posee la propiedad Value para obtener el valor del control que se desea validar y la propiedad IsValid, en la que se indicar el resultado de la validacin.

Caso 1
El siguiente cdigo utiliza una funcin en el servidor para validar si un nmero es par.
. <body> <form id="form1" runat="server"> <div> Nmero par <asp:TextBox id="valor1" runat="server"></asp:TextBox> <asp:CustomValidator id="CustomValidator1" runat="server" ErrorMessage="Debe introducirse un nmero par" OnServerValidate="CustomValidator1_ServerValidate" ControlToValidate="valor1"></asp:CustomValidator> <br /> <asp:Button id="boton" runat="server" Text="Enviar datos" /><br /> <asp:Label id="resultado" runat="server"></asp:Label></div> </form> </body>

Protected Sub CustomValidator1_ServerValidate(ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate Try Dim i As Integer = Integer.Parse(args.Value) args.IsValid = i Mod 2 = 0 resultado.Text = ""

Controles de validacin

45

Catch ex As Exception args.IsValid = False resultado.Text = "Los valores en el campo no son correctos" End Try End Sub

Caso 2
Este ejemplo es una versin distinta del ejemplo anterior, en este caso la funcin que se utiliza para realizar la validacin es una funcin de cliente realizada en JavaScript. Se debe tener en cuenta la propiedad ClientValidationFunction del control CustomValidator para introducir el nombre de la funcin a utilizar.
<script language="javascript"> function validaParCliente (source,arguments){ if (arguments.Value%2==0) arguments.IsValid=true; else arguments.IsValid=false; } </script> . <body> <form id="form1" runat="server"> <div> Nmero par <asp:TextBox id="valor1" runat="server"></asp:TextBox> <asp:CustomValidator id="CustomValidator1" runat="server" ErrorMessage="Debe introducirse un nmero par" ControlToValidate="valor1" ClientValidationFunction="validaParCliente"> </asp:CustomValidator><br /> <asp:Button id="boton" runat="server" Text="Enviar datos" /><br /> <asp:Label id="resultado" runat="server"></asp:Label> </div> </form> </body> </html>

ValidationSummary
Este control mostrar todos los mensajes que se hayan especificado en la propiedad ErrorMessage de cada uno de los controles de validacin de la pgina. Tambin cabe sealar que nicamente se activa el control ValidationSummary si la propiedad IsValid de la pgina Web es false (Page.IsValid==false). En el control ValidationSummary cabe destacar las siguientes propiedades: HeaderText. Contiene el texto que va a mostrarse como cabecera de la descripcin de errores. ShowSummary. Puede tener valores true o false indicando si se ha de mostrar los mensajes de error o no. 46

Controles de validacin

DisplayMode. Esta propiedad permite elegir el modo en que se mostrarn los mensajes de error: BulletList (una lista de puntos), List (una lista) y SingleParagraph (en un nico prrafo).

Modificaremos el ejemplo anterior para que no sean los controles de validacin individuales los que muestren el mensaje sino el control ValidationSummary.
<form id="form1" runat="server"> <div style="text-align: left"> Valor 1 <asp:TextBox id="texto1" runat="server"> </asp:TextBox>&nbsp; <asp:RequiredFieldValidator id="Vnovaciotexto1" runat="server" ControlToValidate="texto1" ErrorMessage="El valor 1 no puede estar vaco">*</asp:RequiredFieldValidator><br /> Valor 2 <asp:TextBox id="texto2" runat="server"></asp:TextBox> <asp:CompareValidator id="Vmayor10texto2" runat="server" ControlToValidate="texto2" ErrorMessage="El valor 2 debe ser mayor que 10" Type="Integer" ValueToCompare="10" Operator="GreaterThan">* </asp:CompareValidator> <asp:RequiredFieldValidator id="Vnovaciotexto2" runat="server" ControlToValidate="texto2" ErrorMessage="El valor 2 no puede estar vaco">*</asp:RequiredFieldValidator><br /> <asp:Button id="boton" runat="server" Text="Enviar datos" /> <asp:ValidationSummary id="resumen" runat="server" HeaderText="Se han encontrado los siguientes errores" /> </div> </form>

Notas: Si queremos que la informacin de la validacin se muestre en una ventana de alerta podemos utilizar la propiedad ShowMessageBox="True" y poner ShowSummary="False". Los controles individuales deben tener none en la propiedad Display o bien tener un texto entre etiquetas Normalmente cuando se usa este control los dems controles de validacin lanzan como mensaje un asterisco (*) (que se incluye como mensaje entre las etiquetas de apertura y cierre del control de validacin, o en la propiedad Text), pues los detalles ya se listarn conjuntamente.

Controles de validacin

47

GRUPOS DE VALIDACIN
Los grupos de validacin permiten organizar los controles de validacin de una pgina como un conjunto. Cada grupo de validacin puede realizar la validacin independientemente de otros grupos de validacin de la pgina. Para crear un grupo de validacin hay que establecer la propiedad ValidationGroup en el mismo nombre para todos los controles que se desea agrupar. Durante la validacin de datos, la propiedad IsValid de la clase Page se establece basndose solo en los controles de validacin del grupo de validacin actual. El control que hizo que se produjera la validacin es el que determina el grupo de validacin actual. Por ejemplo, si se hace clic en un control de botn con un grupo de validacin llamado Grupo1, la propiedad IsValid devolver true si todos los controles de validacin cuya propiedad ValidationGroup est establecida como Grupo1.

DESACTIVAR UNA VALIDACIN

Normalmente, un formulario incluye un botn Cancelar que nos permite dejar de trabajar en el formulario y navegar a una pgina nueva. Sin embargo, implementar un botn Cancelar en un formulario que incluya controles de validacin es ms difcil de lo que podemos pensar a primera vista. Es problema es que los guiones de validacin del lado del cliente pueden evitar que se ejecute cualquier mtodo asociada al botn Cancelar. Para resolver este problema, tenemos que utilizar una propiedad especial de los controles Button, LinkButton e ImageButton llamada CausesValidation. Podemos utilizar la propiedad CausesValidation para activar o desactivar la validacin cuando hacemos clic en un botn particular. Vamos a ver un ejemplo en el que existe un botn Enviar y un botn Cancelar. A la propiedad CausesValidation del botn Cancelar le ponemos el valor false.
<body> <form id="form1" runat="server"> Introduce tu nombre<br> <asp:TextBox id="txtNombre" Runat="Server" /> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtNombre" Text="Introducir el nombre" Runat="Server" /><p> <asp:Button id="btnEnviar" Text="Enviar" Runat="Server"/> <asp:Button id="btnCancelar" Text="Cancelar" CausesValidation="False" Runat="Server" /> <p><asp:Label ID="lblMensaje" runat="server" Style="position: relative"></asp:Label></p> </form> </body>

Protected Sub btnEnviar_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles btnEnviar.Click If Page.IsValid Then lblMensaje.Text = "Envio correcto" End If End Sub

Controles de validacin

48

Protected Sub btnCancelar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCancelar.Click lblMensaje.Text = "Envio cancelado" End Sub

Controles de validacin

49

6. COMUNICACIN ENTRE PGINAS

TRANSFERIR EL CONTROL ENTRE PGINAS Enlaces
El mtodo ms sencillo para enlazar una pgina es utilizar el control HyperLink que permite navegar hasta otra pgina html, asp o aspx. La pgina destino se indica en la propiedad NavigateURL del control. El uso de este control implica que la operacin de comunicacin hacia otra pgina se realizar al realizar clic en el cliente y no provocara ningn evento del lado del servidor. Si se quiere interceptar un evento clic desde el servidor para controlar la navegacin desde cdigo, se puede utilizar un control de servidor Button, LinkButton o ImageButton ms el objeto Response que se explica a continuacin.

Redireccin
Utilizando el mtodo Redirect de la clase HttpResponse se pasa el control a otra pgina (html, asp o aspx). As podremos controlar desde un evento de servidor a dnde enviaremos al usuario. Por ejemplo, si queremos enviarlo a una pgina diferente segn lo que haya escogido en un control de seleccin podramos escribir algo similar a esto:
If (seleccion.ListIndex=0) THEN Response.Redirect (otra1.aspx) Esle Response.Redirect (otra2.aspx) End if

Si se pretendiese pasar una variable o control a otra pgina se puede hacer

Response.Redirect (otra1.aspx?v1=+variable+&v2=+variable2);

En la pgina destino se pueden recoger de la siguiente forma

Algo1=Request.QueryString.Get (v1) Algo2=Request.QueryString.Get (v2)

o as
Algo1=Request.Params(v1) Algo2=Request.Params(v2)

El mtodo sobrecargado Redirect (URL, Boolean) tiene un parmetro boolean que especifica si se termina la ejecucin de la pgina actual: true, o no: false. Si se especifica true o si se utiliza el mtodo Redirect especificando solamente la URL de destino, se producir una excepcin del tipo ThreadAbortException, que indica el trmino de la ejecucin de la pgina que origina la navegacin. Se debe considerar este comentario cuando se tiene sentencias Redirect dentro de bloques Try, ya que la excepcin producida por el mtodo Redirect puede no ser esperada en el flujo de la aplicacin.

Comunicacin entre pginas

51

Construccin de la cadena URL

Al pasar el contenido de una variable o control, en una cadena URL como parmetro de Response puede ocurrir que el campo tenga valores no correctos para la cadena (espacios en blanco) por ello es conveniente pasar el valor utilizando el mtodo
System.Web.HttpUtility.UrlEncode (campotexto)

De esta manera la codificacin y decodificacin ser correcta. Por ejemplo si el contenido de un textbox llamado info contiene los caracteres < o > stos se codifican como %3c y %3e. Si se quiere transmitir ese campo a la direccin pagina.aspx se codificara de la siguiente manera
pagina.aspx?nombre=+System.Web.Utility.UrlEncode (info.Tex)

Server.Tranfer
Para transferir el control entre pginas aspx se puede utilizar
Server.Transfer (otrapagina.aspx)

Este mtodo es de la clase HttpServer y ejecuta dinmicamente el cdigo de una pgina desde otra cualquiera. Si se desea comunicar variables o controles a la pgina destino se debe escribir
Context.Items.Add (mivariable,objeto) 2

Y en la pgina destino se recupera de la misma forma

x=Context.Items(mivariable)

Hay que tener en cuenta que Context.Items(variable) devuelve un objeto de tipo object y es necesario convertirlo al tipo que se desee. De esta manera se pueden pasar tanto variables de programa como controles Web. Hay que tener en cuenta que utilizando este mtodo, cuando se llama a otra pgina termina la ejecucin del Web Form que origina la llamada y navega hasta la pgina aspx de destino por lo que provoca tambin la excepcin ThreadAbortException.

PostBackUrl
La funcionalidad llamada Cross Page Posting permite pasar el control a otra pgina permitiendo el acceso a los controles y datos de la primera. Para esta operacin se utiliza la propiedad PostBackUrl del control cuyos eventos queremos gestionar desde otra pgina asignndole la ruta virtual de sta ltima. Para conseguir esto lo nico que hay que hacer es fijar la propiedad PostBackUrl del control indicando la pgina a la que se quiere trasladar el control. Esta propiedad se puede utilizar con Button, ImageButton y LinkButton. En el body:
<asp:Button id="BtnComprar" runat="server" Text="Comprar billetes" PostBackUrl="~/Resultados.aspx"/>

Se debe ejecutar en pimer lugar Contex.Item y despus Server.Transfer

Comunicacin entre pginas

52

En la pgina destino todava se tiene acceso a la pgina original para acceder a la informacin de sus controles se debe hacer referencia al objeto PreviousPage de tipo Page. En el cdigo VB
PreviousPage.FindControl("idControl")

Con este mtodos slo se comunican los controles, no permite acceso a las variables definidas es el cdigo VB. Se debe tener en cuenta que PreviousPage.FindControl("idControl") devuelve un object que tendr que ser convertido a un tipo concreto para poder acceder a l.

INSERTAR CDIGO JAVASCRIPT A UN CONTROL ASP DESDE EL SERVIDOR[tt1]

Se puede utilizar el mtodo ClientScript.RegisterStartupScript para abrir una ventana desde un botn asp ejecutando cdigo JavaScript.
Protected Sub Button1_Click(object sender, EventArgs e) Dim cadena As String cadena="window.open('OtraPagina.aspx','otra,'width=510,height=360,lef t=200,top=250');"; ClientScript.RegisterStartupScript(this.GetType(),"abrir",cadena,true); End If

VARIABLES DE SESIN
HTTP es un protocolo sin estado, es decir, el servidor Web trata cada solicitud HTTP de pgina como solicitud independiente; de forma predeterminada, el servidor no retiene informacin alguna sobre los valores de las variables que se utilizan durante las solicitudes anteriores. En consecuencia, la creacin de aplicaciones Web que necesitan mantener la informacin de estado entre las solicitudes (aplicaciones que implementan carros de la compra, desplazamiento de datos, etc.) puede resultar complicada. El estado de sesin de ASP.NET identifica las solicitudes recibidas desde el mismo explorador durante un perodo limitado de tiempo como una sesin y proporciona la capacidad de conservar los valores de las variables durante la duracin de esa sesin. Al utilizar el estado de la sesin, podemos asociar cualquier tipo de informacin con el usuario que queramos. Por ejemplo, podemos utilizar el estado de la sesin para mostrar el nombre del usuario en todas las pginas que solicite. O podemos utilizarlo para asociarle un carro de la compra segn navega por las pginas. Tambin podemos utilizarlo para permitir que el usuario rellene un formulario HTML de varias pginas. Cualquier elemento que aadamos a una variable sesin permanece en el servidor durante toda la visita del usuario al sitio Web y finaliza cuando el usuario no ha solicitado ninguna pgina durante un perodo de 20 minutos (tiempo determinado por defecto). Si pasado ese tiempo solicita una pgina, se le trata como un usuario nuevo.

Comunicacin entre pginas

53

Limitaciones: La cantidad de memoria de servidor requerida por cada sesin se incrementa a medida que aumenta el nmero de usuarios conectados. Cada usuario que tenga acceso a la aplicacin Web genera un objeto Session independiente. Cada objeto se mantiene durante el perodo de tiempo que dure la visita del usuario ms un perodo de inactividad. Si se conservan muchos objetos en cada sesin, y hay muchos usuarios utilizando la aplicacin Web simultneamente (creando muchos Sessions), la cantidad de memoria de servidor dedicada a ello puede ser importante

CREAR VARIABLE DE SESIN

Se puede aadir cualquier tipo de objeto a una variable de sesin. Por ejemplo, si queremos guardar el cdigo de sesin de un usuario en la memoria, podemos utilizar una variable de sesin. Para crear una variable de sesin:
Session("nombreVariable") = valor

Para recuperar una variable de sesin

variable = Session (nombreVariable)

ELIMINAR ELEMENTOS DE SESIN

Podemos eliminar un elemento del estado de la sesin utilizando los siguientes: Remove(): elimina un elemento en particular del usuario actual. Por ejemplo para eliminar el elemento nombreVariable asociado con el usuario que est haciendo la consulta, utilizamos RemoveAll: elimina todos los valores de la coleccin de elementos de estado de sesin.

Session.Remove(nombreVariable)

Session.RemoveAll()

MODIFICAR LA DURACIN DE UNA SESIN

Es posible configurar las caractersticas del estado de una sesin en la seccin <sessionState> de un archivo Web.config. Para aumentar el tiempo de espera predeterminado de 20 minutos, se puede agregar el cdigo siguiente al archivo Web.config de una aplicacin:
<configuration> <system.web> <sessionState timeout="50" /> </system.web> </configuration>

Tambin podemos modificarlo en el cdigo

Session.Timeout=10

Comunicacin entre pginas

54

FINALIZAR UNA SESIN ANTES DEL TIEMPO LMITE

Una vez que se llama al mtodo Abandon() la sesin actual deja de ser vlida y se puede iniciar una nueva sesin.
Session.Abandon()

Si un usuario solicita una pgina nueva despus de llamar al mtodo Abandon(), se le tratar como un usuario nuevo, pero mientras no requiera una nueva pgina sus variables de sesin permanecen accesibles.

MANIPULAR EVENTOS DE SESIN

Existen dos eventos relacionados con la sesin: Session_Start: cuando un usuario solicita la primera pgina de un sitio Web. Session_End: cuando la sesin del usuario finaliza.

En el cdigo siguiente se muestra un ejemplo de los mtodos Session_OnStart y Session_OnEnd que se pueden agregar al archivo Global.asax (fichero del directorio raz del sitio que nos permite manipular eventos y declara objetos en toda la aplicacin). Los mtodos definidos en este ejemplo crean un contador que realiza el seguimiento del nmero de usuarios de la aplicacin que utilizan dicha aplicacin de forma activa. Cabe destacar que este ejemplo slo funcionar correctamente cuando la propiedad de estado de sesin Mode se establezca en InProc (situacin por defecto), ya que el evento Session_OnEnd slo es compatible con el almacn de estado de sesin en proceso.
<%@ Application Language="VB" %> <script runat="server"> Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs) ' Cdigo que se ejecuta al iniciarse la aplicacin Application("UsersOnline") = 0 End Sub Sub Session_Start(ByVal sender As Object, ByVal e As EventArgs) ' Cdigo que se ejecuta cuando se inicia una nueva sesin Application.Lock() Application("UsersOnline") = Integer.Parse("UsersOnline") + 1 Application.UnLock() End Sub Sub Session_End(ByVal sender As Object, ByVal e As EventArgs) ' Cdigo que se ejecuta cuando finaliza una sesin. ' Nota: El evento Session_End se desencadena slo con el modo sessionstate ' se establece como InProc en el archivo Web.config. Si el modo de sesin se establece como StateServer ' o SQLServer, el evento no se genera. Application.Lock() Application("UsersOnline") = Integer.Parse("UsersOnline") - 1 Application.UnLock() End Sub </script>

Comunicacin entre pginas

55

7. GRIDVIEW
AADIR CONTROLES A UN GRIDVIEW
Veamos un ejemplo de cdigo:
<asp:GridView ID="GridView1" runat="server"> <Columns> <asp:BoundField DataField="Campo1" HeaderText="Encabezado" SortExpression="Campo1" /> <asp:CheckBoxField DataField="Campo2" HeaderText="EncabezacoCHK" SortExpression="Campo2" /> <asp:TemplateField HeaderText="Encabezado template field"></asp:TemplateField> </Columns> </asp:GridView>

Como vemos, dentro del tag <asp:GridView...>...</asp:GridView> colocamos el tag <Columns>...</Columns> y dentro de ste es donde colocamos los diferentes tipos de columnas Cuando una fila del control GridView se pone en modo Edicin, la fila normalmente muestra texto o casillas de verificacin para columnas de datos individuales, donde los usuarios pueden cambiar los datos. Si lo que se necesita es utilizar otros controles para editar lo que se debe es introducir una plantilla (lo permite el asistente) y editar sta. En la plantilla editada se inserta el control: dropdownlist, textbox, etc, indicando el nombre del control CommandName y el origen (si lo tiene) Text=<%#Bind ("Cantidad")%>

POSIBLES ORIGENES DE DATOS DE UN GRIDVIEW

Los orgenes de datos pueden ser: DataSet o un ArrayList de objetos (reflejo de un resultado de una consulta). Todos ellos son modificables.

TIPOS DE CAMPOS BoundField

El BoundField es el tipo de columna bsico, al que no hemos ms que decirle el nombre del campo que queremos representar y el gridview lo muestra (como resultado de texto) por pantalla. Veamos un ejemplo:
<asp:BoundField DataField="Foro_Titulo" HeaderText="Ttulo del post" SortExpression="Foro_Titulo" />

En el atributo DataField es donde indicamos el nombre del campo que queremos representar. Por ejemplo, si estamos listando los posts de un foro, ese nombre podra ser el correspondiente al campo que contiene los ttulos del post (por ejemplo, en mis bases de datos, en la tabla correspondiente al foro, a esa columna la llamo Foro_Titulo). El atributo HeaderText es donde definimos Cul va a ser el encabezado de esa columna de nuestro GridView. Siguiendo nuestro ejemplo, a esa columna yo la llamara "Ttulo del post".

En cuanto al atributo SortExpresion, seala en base a qu campo vamos a ordenar si queremos ordenar el gridview desde esa columna. Por ejemplo, si quisiramos ordenar el listado en base a la columna Foro_Titulo, el listado nos aparecera ordenador alfabticamente en base al ttulo del post.

CheckBoxField
El CheckBoxField ser una columna en que aparecer el tpico cuadro de seleccin (CheckBox) con el texto que le indiquemos a la columna. Un ejemplo sera:
<asp:CheckBoxField DataField="Campo2" HeaderText="EncabezacoCHK" SortExpression="Campo2" />

El campo Campo2 debe ser boolean

ImageField
Ahora lo que queremos es mostrar una imagen en el listado, y en nuestra base de datos est la informacin que apunta a esa imagen... pues lo tenemos muy sencillo
<asp:ImageField DataImageUrlField="datoImagen" DataImageUrlFormatString="~/Imagenes/img{0}.jpg" HeaderText="Encabezado imagen"> </asp:ImageField>

El DataImageUrlFormatString es el atributo que marca el path donde se encontrar la imagen, quedando a la expectativa de un parmetro. Y ese parmetro se recoge de DataImageUrlField y se sustituye por el {0}. En nuestro ejemplo, las imgenes estn en el directorio "~Images" y todas tienen el nombre img-X.jpg, donde X es un nmero identificativo que guardamos en la base de datos con el nombre de "datoImagen". Si en nuestra base de datos guardaramos el path completo de la imagen con la extensin includa, tendramos algo como:
<asp:ImageField DataImageUrlField="datoImagen" DataImageUrlFormatString="{0}" HeaderText="Encabezado imagen"> </asp:ImageField>

HyperLinkField
Otro tipo de columna muy utilizado es el HyperLinkField. Con ste, mostraremos al usuario un enlace con un Anchor determinado (proviniente de la BBDD o no) y una url determinada (proviniente de la BBDD o no). Pongamos dos ejemplos: <asp:HyperLinkField HeaderText="Encabezado" NavigateUrl="http://www.subgurim.net" Text="ASP.NET 2.0 con C#" /> <asp:HyperLinkField DataNavigateUrlFields="UrlEnlace" DataNavigateUrlFormatString="~/go.aspx?url={0}" DataTextField="AnchordelEnlace" DataTextFormatString="Visita {0}" HeaderText="Encabezado" />

En el primer caso, tenemos el extremo de mostrar un enlace con una Url determinada y un texto determinado... y en ningn caso recogemos info proviniente de ninguna base de datos. En el segundo caso tenemos el otros extremo, en que tanto la url como el anchor utilizan informacin de la Base de datos.

Anchor
- DataTextFormatString: ser el formato del texto que tendr nuestro Anchor. En nuestro caso ser "Visita {0}". - DataTextField: y ese {0} lo sustituiremos por el dato que haya en el campo "AnchordelEnlace".

Url
- DataNavigateUrlFormatString: formato que tendr nuestra url. En nuestro caso queremos que cuando el usuario haga clic en el enlace, se visite ~/go.aspx?url={0}. - DataNavigateUrlFields: y esa {0} ser la que est almacenada en el campo "UrlEnlace". Los casos 1 y 2 se pueden mezclar a vuestro antojo, y por ltimo, vamos a mostrar el cdigo de una columna que tendr un enlace cuyo anchor sea "Ver" y se dirige directamente a la url que est almacenada en nuestra BBDD:
<asp:HyperLinkField DataNavigateUrlFields="Url" DataNavigateUrlFormatString="{0}" Text="Ver" />

TemplateField
El TemplateField es el tipo de columna en el que puedes poner todo lo que quieras, sin nada predeterminado. Por ejemplo, si queremos que en una misma columna aparezcan una imagen dentro de una tabla, con un enlace, un checkbox y un botn. Con un sencillo ejemplo lo veremos mejor:
<asp:TemplateField HeaderText="Otra vez el Ttulo del post"> <ItemTemplate> Ejemplo template. <asp:Label ID="Label1" runat="server" Text='<%#Eval("Foro_Titulo") %>'></asp:Label> </ItemTemplate> </asp:TemplateField>

En este pequeo ejemplo queremos mostrar un texto que nosotros queramos ("Ejemplo template") y luego una Label donde escribiremos (otra vez) el ttulo de nuestro post. Como vis, el mtodo de proceder es el mismo. Fijaos que nuestro cdigo est dentro del <ItemTemplate /> que va dentro del <asp:TemplateField />. En sucesivos artculos veremos porque esto es as. Pero no nos vayamos por las ramas. Aqu el "truco" est en que recogemos los campos de la BBDD con <%#Eval("Foro_Titulo") %>

EVENTOS DE LOS CONTROLES (BUTTON, LINKBUTTON O IMAGENBUTTON)

Los controles Button, LinkButton o ImagenButton permiten crear columnas no enlazadas a datos con el objetivo de realizar operaciones sobre la fila en la que se pulsa. Por ejemplo, se pueden utilizar para aadir un producto al carrito de la compra en una aplicacin Web ecommerce.

Ejemplo
Se pueden aadir, por ejemplo, una columna de tipo Button

En el cdigo del WebForms se ver as

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="Codigo" HeaderText="Codigo" SortExpression="Codigo" /> <asp:ButtonField CommandName="Comprar" Text="Comprar producto" /> </Columns> </asp:GridView>

El evento que generan estos controles al pulsarlos es RowCommand y dentro del procedimiento que lo maneja se debe detectar el comando pulsado con IF (e.CommandName=Comprar)
Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand 'Si la columna seleccionada es la que tiene el botn If e.CommandName = "Aadir a carrito" Then 'Operaciones para aadir al carrito el producto 'identificado por la fila e.CommandArgument End If End Sub