CONSTRUYENDO UNA APLICACIN WEB

y y y y y INTRODUCCION A PAGINAS ASP.NET TRABAJANDO CON CONTROLES DE SERVIDOR PAGINAS INLINE CODE vs PAGINAS CODE BEHIND COMPARTIR CODIGO ENTRE PAGINAS REFERENCIA DE LA SINTAXIS DE FORMULAS WEB

Lo nuevo en 2.0 y Clases Compiladas Dinmicamente - Adems de colocar las clases pre compiladas en el directorio Byn, ASP.NET 2.0 nos permite colocar ficheros fuente de clases compartidas en el directorio App_Code, donde sern compilados dinmicamente como pginas ASPX. y Cdigo Simplificado detrs de las Pginas - Los ficheros "code-behind" de ASP.NET 2.0 utilizan una nueva caracterstica llamada clases parciales, que permiten que dichos ficheros de "code-behind" sean compilados dinmicamente con sus pginas a ASPX asociadas en un slo tipo de clase. Esto significa que no necesitaremos declarar variable miembro para cada control en la pgina de code-behind, lo cual simplifica en gran manera el mantenimiento de sitios que usan esta tcnica de separacin de cdigo. Varios Controles de Servidor Nuevos - ASP.NET 2.0 incluye unos 50 nuevos controles, lo cual hace que crear elementos comunes de UI en nuestras pginas web sea ms fcil que nunca. Por ejemplo, los controles de Datos simplifican los escenarios de acceso a datos, los de Login aaden seguridad al site, los de Navegacin permiten la navegacin por el site, y los de WebPart permiten crear fcilmente pginas web personalizadas. Nueva Sintaxis de Expresin Declarativa - La sintaxis de expresin declarativa en ASP.NET 2.0 nos permite substituir la configuracin de la aplicacin, las cadenas de conexin, y los recursos de localizacin en nuestras pginas antes de que sean analizadas y ejecutadas.

En esta seccin hablaremos sobre stas y otras caractersticas de aplicaciones ASP.NET bsicas. Una aplicacin web en ASP.NET es un conjunto de pginas, controles, mdulos de cdigo, y servicios, todos ellos ejecutndose en un solo directorio de aplicacin de un servidor web (normalmente IIS). ASP.NET hace que resulte muy sencillo crear las aplicaciones web dinmicas que podemos encontrar hoy en da por toda la Internet. Nos proporciona un modelo simple de programacin basado en el Framework .NET y varios controles y servicios ya incluidos que permite crear la mayor parte de los escenarios que encontramos el gran parte de las aplicaciones, con poco cdigo y esfuerzo. En esta seccin demostraremos los elementos bsicos de una aplicacin web que utilizaremos en el resto de la gua de inicio rpido, incluyendo: y y y El Framework para Pginas ASP.NET (Formularios Web) Controles de Servidor Web y HTML Mdulos o Montajes de Cdigo Compartido

Esta seccin tambin explica unas pocas de las mejoras hechas a los bloques de creacin de aplicaciones en ASP.NET 2.0 frente a versiones previas de ASP.NET.

INTRODUCCIN A PGINAS ASP.NET

El Framework para pginas con formularios Web de ASP.NET es un modelo de programacin de tiempo de ejecucin con un lenguaje escalable y comn, que puede usarse en el servidor para generar dinmicamente pginas Web. Pensado como una evolucin lgica de ASP (ASP.NET proporciona compatibilidad de sintaxis con las pginas existentes), el Framework de pginas ASP.NET ha sido especficamente diseado para solucionar algunas deficiencias claves del modelo previo. De forma particular, proporciona la habilidad de crear y utilizar controles UI reutilizables que pueden encapsular una funcionalidad comn y, por tanto, reducir la cantidad de cdigo que el desarrollador tiene que escribir, la habilidad de los desarrolladores para estructurar de forma clara las pginas en un estilo ordenado (no cdigo "spaghetti"), y la habilidad de las herramientas de desarrollo de proporcionar un potente soporte de diseo WISIWIG para las pginas (el cdigo ASP existente en opaco para las herramientas). esta seccin del tutorial proporciona un breve resumen del cdigo de alto nivel de algunas de las caractersticas bsicas de las pginas ASP.NET. Las siguientes secciones tratarn ms a fondo detalles ms especficos. ESCRIBIENDO NUESTRA PRIMERA PGINA ASP.NET Las pginas ASP.NET son ficheros de texto con la extensin .aspx. Las pginas consisten en cdigo y marcas y son compiladas y ejecutadas dinmicamente en el servidor para producir una traduccin para el navegador (o dispositivo) cliente. Se pueden desplegar a travs de un rbol de directorios raz de IIS. Cuando un navegador hace una peticin de un recurso .aspx, la rutina ASP.NET analiza y compila el fichero a una clase del Framework .NET. Esta clase puede ser utilizada para procesar dinmicamente peticiones entrantes. (NOTA: el fichero .aspx se compila nicamente la primera vez que es accedido; la instancia compilada se reutiliza en las sucesivas peticiones). Una pgina ASP.NET puede ser creada simplemente cambindole la extensin de un fichero HTML por la extensin .aspx (no hace falta modificar el cdigo). Por ejemplo, el siguiente ejemplo nos demuestra una sencilla pgina HTML que recoge un nombre de usuario y una preferencia de categora y luego realiza un postbak del formulario a la pgina que lo origina cuando se hace clic sobre el botn: C# Intro1.aspx
<html> <head> <link rel="stylesheet" href="intro.css"> </head> <body> <center> <form action="intro1_vb.aspx" method="post"> <h3> Name: <input id="Name" type=text> Category: <select id="Category" size=1> <option>psychology</option> <option>business</option> <option>popular_comp</option> </select> <input type=submit value="Lookup"> </h3> </form> </center> </body> </html>

Importante: Nota de que no pasa nada cuando se hace clic en el botn Lookup. Esto es debido a que la pgina .aspx slo contiene HTML esttico (no tiene contenido dinmico). Por lo tanto, el mismo HTML es enviado de vuelta al cliente en cada viaje de la pgina, lo que resulta en una prdida de los contenidos de los campos del formulario (el "textbox" y el "drop-down list") entre peticiones. AADIENDO CDIGO SIMPLE A UNA PGINA ASP.NET proporciona compatibilidad de sintaxis con pginas ASP ya existentes. Esto incluye el soporte para los bloques de rende rizado de cdigo del tipo <% %> que se pueden meter entre el contenido HTML en un fichero .aspx. Estos bloques se ejecutan de forma descendente en el momento del "rende rizado" El siguiente ejemplo demuestra como los bloques de rende izamiento <% %> se pueden utilizar para hacer un bucle sobre un bloque de cdigo HTML (incrementando el tamao de la fuente en cada pasada): C# Intro2.asp
<%@ Page Language="VB" %> <html> <head> <link rel="stylesheet"href="intro.css"> </head> <body> <center> <form action="intro2_vb.aspx" method="post"> <h3> Name: <input id="Name" type=text> Category: <select id="Category" size=1> <option>psychology</option> <option>business</option> <option>popular_comp</option> </select> </h3> <input type=submit value="Lookup"> <p> <% Dim I As Integer For I = 0 to 7 %> <font size="<%=I%>"> Welcome to ASP.NET </font> <br> <% Next %> </form> </center> </body> </html>

Importante: a diferencia de ASP, el cdigo utilizado en los bloques <% %> de arriba es en realidad compilado (no interpretado utilizando un motor de script). Esto conlleva una mejora en el rendimiento en tiempo de ejecucin. Los desarrolladores de pginas ASP.NET pueden utilizar los bloques <% %> de cdigo para modificar dinmicamente la salida HTML tanto como pueden hacerlo actualmente con ASP. Por ejemplo, el siguiente ejemplo demuestra como los bloques <% %> de cdigo pueden usarse para interpretar los resultados que nos enva un cliente.

C# Intro3.aspx
<%@ Page Language="VB" %> <html> <head> <link rel="stylesheet"href="intro.css"> </head> <body> <center> <form action="intro3_vb.aspx"> <h3> Name: <input name="Name" type=text value="<%=HttpUtility.HtmlEncode(Request.QueryString("Name"))%>"> Category: <select name="Category" size=1> <% Dim I As Integer Dim Values(2) As String Values(0) = "psychology" Values(1) = "business" Values(2) = "popular_comp" For I = 0 To Values.Length - 1 %> <% If (Request.QueryString("Category") = Values(i)) %> <option selected> <% Else %> <option> <% End If %> <%=Values(i)%> </option> <% Next %> </select> </h3> <input type=submit name="Lookup" value="Lookup"> <p> <% If (Not Request.QueryString("Lookup") = Nothing) %> Hi <%=HttpUtility.HtmlEncode(Request.QueryString("Name")) %>, you selected: <%=HttpUtility.HtmlEncode(Request.QueryString("Category")) %> <% End If %> </form> </center> </body> </html>

Importante: a pesar que los cdigos <% %> de cdigo proporcionan una forma potente de manipular a medida la salida de texto devuelto por una pgina ASP.NET, no nos proporcionan un modelo "limpio" de programacin HTML. Como nos ilustra el ejemplo de arriba, los desarrolladores que slo usen bloques <% %> tienen que administrar el estado de las pginas en cada iteracin del bucle e interpretar los valores que se envan. INTRODUCCIN A LOS CONTROLES DE SERVIDOR DE ASP.NET Adems de cdigo y marcas, las pginas ASP.NET pueden contener controles de servidor, que son objetos programables del lado del servidor que tpicamente representan un elemento UI en la pgina, como un textbox o una imagen. Los controles de servidor participar en la ejecucin de la pgina y producen sus propias etiquetas para el navegador cliente. La principal ventaja de los controles de servidor es que permiten a los desarrolladores obtener un

comportamiento y un rende rizado complejo a partir de componentes sencillos, reduciendo as dramticamente la cantidad de cdigo necesaria para crear una pgina Web dinmica. Otra ventaja de los controles de servidor es su facilidad para personalizar su comportamiento o rende rizado. Los controles de servidor muestran propiedades que pueden ajustarse bien de forma declarativa (en la etiqueta) o bien de forma programada (con cdigo). Los controles de servidor (y la pgina en s) tambin tienen eventos que los desarrolladores pueden controlar para realizar acciones especficas durante la ejecucin de la pgina, o en respuesta a una accin del lado del cliente que enve la pgina al servidor (un "postback"). Los controles de servidor tambin simplifican el problema de mantener el estado durante diferentes idas y venidas del servidor, manteniendo sus valores de forma automtica en sucesivos postbacks. Los controles de servidor se declaran en un fichero .aspx mediante etiquetas propias o etiquetas HTML intrnsecas que contienen el atributo runat="server". Las etiquetas HTML intrnsecas son manejadas con uno de los controles del "namespace" System.Web.UI.HtmlControls. A cualquier etiqueta que no corresponda a uno de los controles se le asigna el tipo System.Web.UI.HtmlControls.HtmlGenericControl. El siguiente ejemplo utiliza cuatro controles de servidor: <form runat=server>, <asp:textbox runat=server>, <asp:dropdownlist runat=server>, y <asp:button runat=server>. En tiempo de ejecucin estos controles de servidor generan de forma automtica el contenido HTML. C# Intro4.aspx
<html> <head> <link rel="stylesheet"href="intro.css"> </head> <body> <center> <form action="intro4_vb.aspx" method="post" runat=server> <h3> Name: <asp:textbox id="Name" runat="server"/> Category: <asp:dropdownlist id="Category" runat=server> <asp:listitem >psychology</asp:listitem> <asp:listitem >business</asp:listitem> <asp:listitem >popular_comp</asp:listitem> </asp:dropdownlist> </h3> <asp:button text="Lookup" runat="server"/> </form> </center> </body> </html>

Importante: Observar que los controles de servidor mantienen de forma automtica entre viajes al servidor cualquier valor insertado en el lado del cliente. Este estado del control no se almacena en el servidor (en lugar de eso se almacena en un campo <input type="hidden" de formulario que se enva y devuelve en las diferentes peticiones). Observa adems que no es necesario ningn script del lado del cliente. Adems de soportar controles estndares de entrada HTML, ASP.NET permite a los desarrolladores utilizar controles personalizados ms ricos en sus pginas. Por ejemplo, el siguiente ejemplo demuestra como el control <asp:adrotator> se puede utilizar para mostrar dinmicamente "ads" cambiantes en la pgina.

C# Intro5.aspx <html>
<head> <link rel="stylesheet"href="intro.css"> </head> <body> <center> <form action="intro5_vb.aspx" method="post" runat="server"> <asp:adrotator AdvertisementFile="ads.xml" BorderColor="black" BorderWidth=1 runat="server"/> <h3> Name: <asp:textbox id="Name" runat="server"/> Category: <asp:dropdownlist id="Category" runat=server> <asp:listitem >psychology</asp:listitem> <asp:listitem >business</asp:listitem> <asp:listitem >popular_comp</asp:listitem> </asp:dropdownlist> </h3> <asp:button text="Lookup" runat="server"/> </form> </center> </body> </html>

Importante: Un listado detallado de todos los controles de servidor incluidos se puede encontrar en la seccin de Referencia de Controles de este tutorial. MANEJANDO EVENTOS DE CONTROLES DE SERVIDOR Cada control de Servidor de ASP.NET es capaz de mostrar un modelo de objeto conteniendo propiedades, mtodos y eventos. Los desarrolladores de ASP.NET utilizan este modelo de objeto para modificar de forma limpia e interactuar con la pgina. El siguiente ejemplo nos demuestra como un desarrollador de pginas ASP.NET puede controlar el eventoOnClick del control <asp:button runat=server> control para manipular la propiedad Text del control <asp:label runat=server>. C# Intro6.aspx
<html> <head> <link rel="stylesheet"href="intro.css"> </head> <script language="VB" runat=server> Sub SubmitBtn_Click(Sender As Object, E As EventArgs) Message.Text = "Hi " & HttpUtility.HtmlEncode(Name.Text) & ", you selected: " & Category.SelectedItem.Text End Sub </script> <body> <center> <form action="intro6_vb.aspx" method="post" runat="server"> <asp:adrotator AdvertisementFile="ads.xml" BorderColor="black" BorderWidth=1 runat="server"/> <h3> Name: <asp:textbox id="Name" runat="server"/> Category: <asp:dropdownlist id="Category" runat=server> <asp:listitem >psychology</asp:listitem>

<asp:listitem >business</asp:listitem> <asp:listitem >popular_comp</asp:listitem> </asp:dropdownlist> </h3> <asp:button text="Lookup" OnClick="SubmitBtn_Click" runat="server"/> <p> <asp:label id="Message" runat="server"/> </form> </center> </body> </html>

Este ejemplo simple es equivalente en funcionalidad al ejemplo "Intro3" mostrado anteriormente en esta seccin. Sin embargo, cabe observar la mayor limpieza y simplicidad del cdigo en la versin basada en controles de servidor. As como veremos posteriormente en el tutorial, el Framework de pginas ASP.NET tambin muestra gran variedad de eventos a nivel de pgina, que podemos controlar para escribir cdigo que se ejecute en un momento determinado durante el procesado de la pgina. Ejemplos de estos eventos son Page_Load y Page_Render.

TRABAJANDO CON CONTROLES DE SERVIDOR

Los controles de servidor ASP.NET se identifican en una pgina usando las etiquetas declarativas que contienen el atributo runat="server". El siguiente ejemplo declara tres controles de servidor <asp:label runat="server"> y personaliza las propiedades de texto y estilo de cada uno individualmente. C# Controls1.aspx <html>
<body> <h3><font face="Verdana">Declaracin Servidor Controles </font> </h3> This sample demonstrates how to declare the &lt;asp:label&gt; server control and manipulate its properties within a page. <p> <hr> <asp:label id="Message1" font-size="16" font-bold="true" forecolor="red" runat=server>This is Message One</asp:label> <br> <asp:label id="Message2" font-size="20" font-italic="true" forecolor="blue" runat=server>This is Message Two</asp:label> <br> <asp:label id="Message3" font-size="24" font-underline="true" forecolor="green" runat=server>This is Message Three</asp:label> </body> </html>

MANIPULANDO CONTROLES DE SERVIDOR Podemos identificar de forma individual a un control de servidor de ASP.NET en nuestra programacin, proporcionndole a dicho control un atributo id. Podemos usar esta referencia

id para manipular, programando, en tiempo de ejecucin el modelo de objeto del control de servidor. Por ejemplo, el siguiente ejemplo nos muestra como un desarrollador de pginas podra establecer, programndolo, la propiedad Text de un control <asp:label runat="server"> en el evento Page_Load. C# Controls2.aspx
<html> <script language="VB" runat="server"> Sub Page_Load(Sender As Object, E As EventArgs) Message.Text = "You last accessed this page at: " & DateTime.Now End Sub </script> <body> <h3><font face="Verdana">Manipulating Server Controls</font></h3> This sample demonstrates how to manipulate the &lt;asp:label&gt; server control within the Page_Load event to output the current time. <p> <hr> <asp:label id="Message" font-size="24" font-bold="true" runat=server/> </body> </html>

MANEJANDO EVENTOS DE CONTROL Los controles de servidor de ASP.NET pueden, opcionalmente, mostrar y provocar eventos de servidor, qu pueden ser manejados por los desarrolladores de pginas. Un desarrollador debe cumplir esto conectando de forma declarativa un evento a un control (dnde el atributo "name" del evento indica el nombre del evento, y el atributo "value" indica el nombre del mtodo a llamar. Por ejemplo, el siguiente cdigo muestra como asociar un evento OnClick a un control del tipo button. C# Controls3.aspx <html>
<script language="VB" runat="server"> Sub EnterBtn_Click(Sender As Object, E As EventArgs) Message.Text = "Hola " & Name.Text & ", Bienvenido a ASP.NET!" End Sub </script> <body> <h3><font face="Verdana"> Gestin de eventos de medidas de control </font></h3> <p> Este ejemplo muestra cmo obtener acceso a un ;asp:textbox&gt; servidor de control dentro de "Click" Evento de la ;asp:button;, y utilizar su contenido para modificar el texto de una ;asp:label;. <p> <hr> <form action="controls3_vb.aspx" runat=server> <font face="Verdana">

Por favor Ingrese su nombre: <asp:textbox id="Name" runat=server/> <asp:button text="Enter" Onclick="EnterBtn_Click" runat=server/> <p> <asp:label id="Message" runat=server/> </font> </form> </body> </html>

MANEJANDO MLTIPLES EVENTOS DE CONTROL Los manejadores de eventos proporcionan a los desarrolladores una forma limpia de estructurar la lgica en una pgina ASP.NET. Por ejemplo, el siguiente ejemplo nos demuestra como conectar y manejar cuatro eventos de botn en una sola pgina. C# Controls4.aspx
html> <script language="VB" runat="server"> Sub AddBtn_Click(Sender As Object, E As EventArgs) If Not (AvailableFonts.SelectedIndex = -1) InstalledFonts.Items.Add(New ListItem(AvailableFonts.SelectedItem.Value)) AvailableFonts.Items.Remove(AvailableFonts.SelectedItem.Value) End If End Sub Sub AddAllBtn_Click(Sender As Object, E As EventArgs) Do While Not (AvailableFonts.Items.Count = 0) InstalledFonts.Items.Add(New ListItem(AvailableFonts.Items(0).Value)) AvailableFonts.Items.Remove(AvailableFonts.Items(0).Value) Loop End Sub Sub RemoveBtn_Click(Sender As Object, E As EventArgs) If Not (InstalledFonts.SelectedIndex = -1) AvailableFonts.Items.Add(New ListItem(InstalledFonts.SelectedItem.Value)) InstalledFonts.Items.Remove(InstalledFonts.SelectedItem.Value) End If End Sub Sub RemoveAllBtn_Click(Sender As Object, E As EventArgs) Do While Not (InstalledFonts.Items.Count = 0) AvailableFonts.Items.Add(New ListItem(InstalledFonts.Items(0).Value)) InstalledFonts.Items.Remove(InstalledFonts.Items(0).Value) Loop End Sub </script> <body> <h3><font face="Verdana">Handling Multiple Control Action Events</font></h3> <p> This sample demonstrates how to handle multiple control action events raised from different &lt;asp:button&gt; controls. <p> <hr> <form action="controls4_vb.aspx" runat=server>

<table> <tr> <td> Available Fonts </td> <td> <!-- Filler --> </td> <td> Installed Fonts </td> </tr> <tr> <td> <asp:listbox id="AvailableFonts" width="100px" runat=server> <asp:listitem>Roman</asp:listitem> <asp:listitem>Arial Black</asp:listitem> <asp:listitem>Garamond</asp:listitem> <asp:listitem>Somona</asp:listitem> <asp:listitem>Symbol</asp:listitem> </asp:listbox> </td> <td> <!-- Filler --> </td> <td> <asp:listbox id="InstalledFonts" width="100px" runat=server> <asp:listitem>Times</asp:listitem> <asp:listitem>Helvetica</asp:listitem> <asp:listitem>Arial</asp:listitem> </asp:listbox> </td> </tr> <tr> <td> <!-- Filler --> </td> <td> <asp:button text="<<" OnClick="RemoveAllBtn_Click" runat=server/> <asp:button text="<" OnClick="RemoveBtn_Click" runat=server/> <asp:button text=">" OnClick="AddBtn_Click" runat=server/> <asp:button text=">>" OnClick="AddAllBtn_Click" runat=server/> </td> <td> <!-- Filler --> </td> </tr> </table> </form> </body> </html>

LLEVANDO A CABO NAVEGACIN ENTRE PGINAS (ESCENARIO 1) La navegacin entre varias pginas es un escenario comn en casi todas las aplicaciones Web. El siguiente ejemplo muestra cmo usar el control <asp:hyperlink runat=server> para navegar a otra pgina (pasando parmetros personalizados de query string). Este ejemplo tambin demuestra cmo obtener acceso a dichos parmetros desde la pgina objetivo, de forma sencilla. C# Controls5.aspx
<html> <script language="VB" runat="server"> Sub Page_Load(Sender As Object, E As EventArgs) Dim RandomGenerator As Random RandomGenerator = New Random(DateTime.Now.Millisecond) Dim RandomNum As Integer RandomNum = RandomGenerator.Next(0, 3) Select RandomNum Case 0: Name.Text = "Scott" Case 1: Name.Text = "Fred" Case 2: Name.Text = "Adam" End Select AnchorLink.NavigateUrl = "controls_navigationtarget_vb.aspx?name=" & System.Web.HttpUtility.UrlEncode(Name.Text) End Sub </script> <body> <h3><font face="Verdana">Performing Page Navigation (Scenario 1)</font></h3> <p> This sample demonstrates how to generate a HTML Anchor tag that will cause the client to navigate to a new page when he/she clicks it within the browser. <p> <hr> <p> <asp:hyperlink id="AnchorLink" font-size=24 runat=server> Hi <asp:label id="Name" runat=server/> please click this link! </asp:hyperlink> </body> </html>

LLEVANDO A CABO NAVEGACIN ENTRE PGINAS (ESCENARIO 2) No todos los escenarios se inician a travs de hipervnculos en el cliente. Las redirecciones y "navegaciones" en la parte del cliente tambin se pueden iniciar desde el servidor llamando al mtodo Response.Redirect(url). Esto se hace normalmente cuando es necesaria una validacin del lado del servidor en alguna de las entradas del cliente, antes que se realice la navegacin.

El siguiente ejemplo demuestra cmo usar el mtodo Response.Redirect para pasar parmetros a otra pgina destino. Tambin nos demuestra como conseguir acceso a estos parmetros de forma sencilla desde la pgina destino. C# Controls6.aspx
<html> <script language="VB" runat="server"> Sub EnterBtn_Click(Sender As Object, E As EventArgs) ' Navigate to a new page (passing name as a querystring argument) if ' user has entered a valid name value in the <asp:textbox> If Not (Name.Text = "") Response.Redirect("Controls_NavigationTarget_vb.aspx?name=" & System.Web.HttpUtility.UrlEncode(Name.Text)) Else Message.Text = "Hey! Por favor Ingrese su nombre en el textbox!" End If End Sub </script> <body> <h3><font face="Verdana">Performing Page Navigation (Scenario 2)</font></h3> <p> This sample demonstrates how to navigate to a new page from within a &lt;asp:button&gt; click event, passing a &lt;asp:textbox&gt; value as a querystring argument (validating first that the a legal textbox value has been specified). <p> <hr> <form action="controls6_vb.aspx" runat=server> <font face="Verdana"> Please enter your name: <asp:textbox id="Name" runat=server/> <asp:button text="Enter" Onclick="EnterBtn_Click" runat=server/> <p> <asp:label id="Message" forecolor="red" font-bold="true" runat=server/> </font> </form> </body> </html>

PGINAS INLINE CODE VS. PGINAS CODE-BEHIND

ASP.NET proporciona dos formas para organizar el cdigo en nuestras pginas. SEPARACIN DE CDIGO "INLINE" El siguiente ejemplo demuestra una simple pgina ASP.NET con tres controles de servidor, un TextBox, un Button, y un Label. Inicialmente, estos controles simplemente renderizan sus formularios HTML equivalentes. Sin embargo, cuando se escribe un valor en el TextBox y se hace clic en el Button, en el navegador cliente, la pgina enva la informacin al servidor y

maneja el evento del clic en el propio cdigo de la pgina, actualizando dinmicamente la propiedad Text del control Label. Despus, la pgina se recarga para reflejar el texto actualizado. Este ejemplo simple demuestra los mecanismos bsicos que hay detrs del modelo de controles de servidor, que ha hecho que ASP.NET sea uno de los modelos de programacin Web ms sencillos de aprender y dominar. C# Inline Code Separation
<%@ page language="VB" %> <script runat="server"> Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = "Hello " & TextBox1.Text End Sub </script> <html> <head> <title>ASP.NET Inline Pages</title> </head> <body> <form id="Form1" runat="server"> <h1>Welcome to ASP.NET 2.0!</h1> <b>Enter Your Name:</b> <asp:TextBox ID="TextBox1" Runat="server"/> <asp:Button ID="Button1" Text="Click Me" OnClick="Button1_Click" Runat="server"/> <br /> <br /> <asp:Label ID="Label1" Text="Hello" Runat="server" /> </form> </body> </html>

Hay que observar que en el ejemplo anterior, el manejador de eventos para el Button se ha colocado entre las etiquetas <script></script> en la misma pgina que contiene los controles de servidor. En ASP.NET, este tipo de programacin se llama code-inline, y e muy til cuando queremos mantener nuestro cdigo y nuestra lgica de presentacin en un solo fichero. Sin embargo, ASP.NET tambin soporta otra forma de factorizar el cdigo y el contenido de presentacin, llamada modelo code-behind. Cuando usamos code-behind, el cdigo que maneja los eventos se sita en un fichero que est separado fsicamente de la pgina que contiene los controles de servidor y las marcas. Esta clara diferenciacin entre cdigo y contenido es til cuando necesitamos mantener stos separados, como cuando ms de una persona est involucrada en la creacin de la aplicacin. Es muy comn en proyectos de grupos tener diseadores trabajando en la parte de la UI, mientras que los desarrolladores trabajan en el comportamiento o en el cdigo. EL modelo code-behind es ideal para este ambiente. MODELO CODE BEHIND SIMPLIFICADO NUEVO EN 2.0 ASP.NET 2.0 introduce una rutina mejorada para pginas code-behind que simplifica las conexiones entre la pgina y el cdigo. En este nuevo modelo code-behind, la clase se declara como una clase parcial, lo que permite tanto al fichero de la pgina como al del cdigo ser compilador en una misma clase en tiempo de ejecucin. La pgina del cdigo hace referencia al fichero de code-behind en el atributo CodeFile de la directiva <%@ Page %>, especificando

en nombre de la clase en el atributo Inherits. Hay que observar que los miembros de una clase code-behind deben ser o bien "public" o "protected" (no pueden ser privados). C# CodeBehind Code Separation
<%@ page language="VB" CodeFile="CodeBehind_vb.aspx.vb" Inherits="CodeBehind_vb_aspx" %> <html> <head> <title>ASP.NET CodeBehind Pages</title> </head> <body> <form runat="server"> <h1>Welcome to ASP.NET 2.0!</h1> <b>Enter Your Name:</b> <asp:TextBox ID="TextBox1" Runat="server"/> <asp:Button ID="Button1" Text="Click Me" OnClick="Button1_Click" Runat="server"/> <br /> <br /> <asp:Label ID="Label1" Text="Hello" Runat="server" /> </form> </body> </html>

ESTO VA EN LA PAGINA DE CODIGO Imports Microsoft.VisualBasic Partial Class CodeBehind_vb_aspx Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = "Hello " & TextBox1.Text End Sub End Class

La ventaja del modelo simplificado code-behind frente a versiones previas es que no necesitamos mantener declaraciones separadas de variables de controles de servidor en la clase code-behind. La utilizacin de clases parciales (nuevo en 2.0) permite que los IDs de los controles de servidor de la pgina ASPX sean accedidos directamente en el fichero de codebehind. Esto simplifica en gran medida el mantenimiento de las pginas de code-behind. y COMPARTIR CDIGO ENTRE PGINAS

A pesar de que podemos colocar cdigo dentro de cada pgina de nuestro site (utilizando el modelo inline o el modelo code-behind que hemos descrito en el captulo previo), hay veces que lo que querremos ser compartir cdigo entre varias pginas de nuestro site. Sera ineficiente y difcil mantener dicho cdigo copindolo en cada pgina que lo necesite. Afortunadamente, ASP.NET proporciona varias formas cmodas para hacer que el cdigo sea accesible a todas las pginas en una aplicacin.

El Directorio "Code" Nuevo en 2.0 Como las pginas se pueden compilar dinmicamente en tiempo de ejecucin, pueden codificar ficheros de forma arbitraria (por ejemplo .cs o .vb). ASP.NET 2.0 introduce el directorio App_Code, que contiene ficheros sueltos con el cdigo que compartirn las diferentes pginas de nuestra aplicacin. A diferencia de ASP.NET 1.x, dnde ser requera que estos ficheros fueran pre compilados en el directorio Bin, cualquier fichero de cdigo del directorio App_Code ser compilado de forma dinmica en tiempo de ejecucin y estar disponible para la aplicacin. Es posible colocar ficheros de ms de un lenguaje en el directorio App_Code, siempre que se particionen en subdirectorios (registrados en un lenguaje particular en el fichero Web.config). El siguiente ejemplo muestra el uso del directorio App_Code para contener una sola clase llamada en la pgina.

C# Ejemplo de la Carpeta App_Code

<%@ page language="VB" %> <script runat="server"> Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Dim c As New CustomClass Label1.Text = c.GetMessage(TextBox1.Text) End Sub </script> <html> <head> <title>ASP.NET Inline Pages</title> </head> <body> <form id="Form1" runat="server"> <h1>Welcome to ASP.NET 2.0!</h1> <b>Enter Your Name:</b> <asp:TextBox ID="TextBox1" Runat="server"/> <asp:Button ID="Button1" Text="Click Me" OnClick="Button1_Click" Runat="server"/> <br /> <br /> <asp:Label ID="Label1" Text="Hello" Runat="server" /> </form> </body> </html>

ESTO VA EN LA PAGINA DE CODIGO Imports Microsoft.VisualBasic Public Class CustomClass Public Function GetMessage(ByVal name As String) As String Return "Hello " & name End Function End Class

Por defecto, el directorio App_Code slo puede contener ficheros del mismo lenguaje. Sin embargo, podemos particionar dicho directorio en subdirectorios (cada uno conteniendo ficheros de un lenguaje) para contener mltiples lenguajes bajo el directorio App_Code. Para hacer esto, hay que registrar cada subdirectorio en el fichero Web.config de la aplicacin.
<configuration> <system.web> <compilation> <codeSubDirectories> <add directoryName="Subdirectory"/> </codeSubDirectories> </compilation> </system.web> </configuration>

El siguiente ejemplo muestra un directorio App_Code particionado para contener ficheros tanto en VB como en C#. C# Ejemplo de Carpeta App_Code Particionada <%@ page language="VB" %>
<script runat="server"> Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Dim c As New CustomClass Label1.Text = c.GetMessage(TextBox1.Text) Dim c2 As New CustomClass2 Label2.Text = c2.GetMessage(TextBox1.Text) End Sub </script> <html> <head> <title>ASP.NET Inline Pages</title> </head> <body> <form id="Form1" runat="server"> <h1>Welcome to ASP.NET 2.0!</h1> <b>Enter Your Name:</b> <asp:TextBox ID="TextBox1" Runat="server"/> <asp:Button ID="Button1" Text="Click Me" OnClick="Button1_Click" Runat="server"/> <br /> <br />

<asp:Label ID="Label1" Runat="server" /> <br /> <asp:Label ID="Label2" Runat="server" /> </form> </body> </html>

CUSTOMCLASS.CS

using System; public class CustomClass2 { public String GetMessage(String input) { return "Hello from C# " + input; } }

CUSTOMCLASS.VB
Imports Microsoft.VisualBasic Public Class CustomClass Public Function GetMessage(ByVal name As String) As String Return "Hello " & name End Function End Class

EL DIRECTORIO BIN Ya soportado en la versin 1 de ASP.NET, el directorio Bin es como el directorio Code, a excepcin que puede contener ficheros precompilados. Esto es til cuando necesitamos utilizar cdigo que posiblemente haya sido escrito por otra persona, y no tenemos acceso al cdigo fuente (un fichero VB o C#) pero si que tenemos una DLL compilada. Simplemente podemos colocar dicho fichero en el directorio Bin para que sea accesible desde nuestro site. Por defecto, todo lo que hay en el directorio Bin se carga automticamente en la aplicacin y se hace accesible a las pginas. Tendremos que importar espacios de nombres (namespaces) desde los ficheros del directorio Bin utilizando la directiva @Import al principio de la pgina. <@ Import Namespace="MyCustomNamespace" > LA CACHE DE "MONTAJE" (ASSEMBLY) GLOBAL

El Framework 2.0 de .NET incluye algunos "ensamblajes" (assemblies) que representan las diferentes partes del Framework. Estos ensamblajes se almacenan en una cache global de ensamblajes, que es un repositorio versionado de ensamblajes puestas a disposicin de todas las aplicaciones de la mquina (no slo de una aplicacin especfica, como era el caso de los directorios Bin o App_Code). Varios ensamblajes del Framework se ponen a disposicin de las aplicaciones ASP.NET de forma automtica. Podemos registrar ensamblajes adicionales en el fichero Web.config de nuestra aplicacin. <configuration> <compilation> <assemblies> <add assembly="System.Data, Version=1.0.2411.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"/> </assemblies> </compilation> </configuration> Observar que seguimos necesitando una directiva @Import para que los espacios de nombres de estos ensamblajes estn disponibles para pginas individuales y REFERENCIA DE LA SINTAXIS DE FORMULARIOS WEB Una pgina Web ASP.NET de Formularios es un fichero de texto declarativo con extensin .aspx. Adems del contenido esttico, podemos utilizar ocho elementos distintos de marcado. Esta seccin del tutorial examina cada uno de estos elementos sintcticos y proporciona ejemplos demostrando su uso. SINTAXIS DE INTERPRETACIN DE CDIGO: <% %> Y <%= %> Los bloques de renderizacin se denotan con los elementos <% ... %>, y nos permiten controlar de forma personalizada la emisin del contenido y la ejecucin, durante el renderizado en la ejecucin de las pginas Web con formularios. El siguiente ejemplo nos muestra como podemos usarlos para reallizar iteraciones en el contenido HTML.
<% for (int i=0; i<8; i++) { %> <font size="<%=i%>"> Hello World! </font> <br> <% } %>

C# Reference1.aspx
<%@ Page Language="VB" %> <html> <body> <% Dim I As Integer For I = 0 To 7 %> <font size="<%=I%>"> Hello World! </font> <br> <% Next %> </body> </html>

En cdigo encerrado entre <% ... %> simplemente se ejecuta, mientras que las expresiones que incluyen el signo igual, <%= ... %>, se evaluan y sus resultados se emiten como contenido.

De esta forma, <%="Hello World" %> se interpreta igual que el cdigo C# <% Response.Write("Hello World"); %>. Nota: Para lenguajes que utilizan marcas para finalizar o separar sentencias (por ejemplo el punto y coma (;) en C#), es importante situar bien estas marcas dependiendo de como tiene que ser interpretado el cdigo.
C# code

<% Response.Write("Hello World"); %> Es necesario el punto y coma. <%="Hello World"; %> <%="Hello World" %>
Mal: Equivaldra a "Response.Write("Hello World";);". El punto y coma no es necesario.

SINTAXIS DE DECLARACIN DE CDIGO: <SCRIPT RUNAT="SERVER"> Los bloques de declaracin de cdigo definen variables y mtodos miembros, que sern compilados en la clase de Pgina generada. Estos bloques se pueden utilizar para "author" la pgina y la lgica de navegacin. El siguiente ejemplo demuestra como podemos declarar el mtodo Substract en un bloque <script runat="server"> y despues invocarlo desde la pgina.
<script language="C#" runat=server> int subtract(int num1, int num2) { return num1 - num2; } </script> <% ... number = subtract(number, 1); ... %>

C# Reference2.aspx <html>
<script language="VB" runat=server> Function Subtract(Num1 As Integer, Num2 As Integer) As Integer Return Num1-Num2 End Function </script> <body> <% Dim Number As Integer = 100 Do While Number > 0 Response.Write("Value: " & Number & "<br>") Number = Subtract(Number, 1) Loop %> </body> </html>

Importante: A diferencia de ASP -- dnde las funciones se pueden declarar con bloques <% %> -- todas las funciones y variables globales de pgina tienen que declararse en una etiqueta

<script runat=server>. Las funciones declaradas con bloques <% %> generarn un error de compilacin. SINTAXIS DE CONTROLES DE SERVIDOR Los controles de servidor ASP.NET personalizados permiten a los desarrolladores generar dinmicamente la interfaz de usuario (UI) HTML y responder a peticiones de los clientes. Se representan en un fichero utilizando una sintaxis declarativa, basada en etiquetas. Estas etiquetas se distinguen de otras etiquetas porque contienen el atributo "runat=server". El siguiente ejemplo nos demuestra como un control de servidor <asp:label runat="server"> puede ser utilizado en una pgina ASP.NET. Este control corresponde a la clase Label en el espacio de nombres System.Web.UI.WebControls, que se incluye por defecto. Aadiendo una etiqueta con el ID "Message", se crear cuando se ejecute una instancia de la clase Label:
<asp:label id="Message" font-size=24 runat="server"/> El control puede accederse usando el mismo nombre. La siguiente linea establece la propiedad Text del control. Message.Text = "Welcome to ASP.NET";

C# Reference3.aspx <html>
<script language="VB" runat=server> Sub Page_Load(Sender As Object, E As EventArgs) Message.Text = "Welcome to ASP.NET" End Sub </script> <body> <asp:label id="Message" font-size=24 runat=server/> </body> </html>

SINTAXIS DE CONTROL DE SERVIDOR DE HTML Los controles de servidor HTML permiten a los desarrolladores de pginas manipular de forma programada los elementos HTML de una pgina. Una etiqueta de control de servidor HTML se distingue de los elementos HTML de cliente a travs del atributo "runat=server". El siguiente ejemplo demuestra como un control de servidor HTML <span runat=server> se puede usar en un a pgina ASP.NET. Como con otros controles de servidor, los mtodos y propiedades estn accesibles a traves de la programacin, como se demuestra en el siguiente ejemplo.
<script language="C#" runat="server"> void Page_Load(Object sender, EventArgs e) { Message.InnerHtml = "Welcome to ASP.NET"; } </script> ... <span id="Message" style="font-size:24" runat="server"/>

C# Reference4.aspx
<html> <script language="VB" runat=server> Sub Page_Load(Sender As Object, E As EventArgs) Message.InnerHtml = "Welcome to ASP.NET" End Sub </script> <body> <span id="Message" style="font-size:24" runat=server/> </body> </html>

SINTAXIS DE ENLAZADO DE DATOS: <%# %> El soporte de Enlace en ASP.NET permite a los desarrolladores de pginas enlazar las propiedades de control a valores de los contenedores de datos. El cdigo situado entre bloques <%# %> se ejecutar cuando el mtodo DataBind de su contenedor de control "padre" es invocado. El siguiente ejemplo demuestra como utilizar la sintaxis de enlazado de datos en un control <asp:datalist runat=server>. En el datalist, se especifica la plantilla para un elemento. El contenido de la plantilla del elemento se especifica utilizando una expresin de enlazado de datos y el Container.DataItem hace referencia a la fuente de datos utilizada por el datalist MyList.
<asp:datalist id="MyList" runat=server> <ItemTemplate> Here is a value: <%# Container.DataItem %> </ItemTemplate> </asp:datalist>

En este caso, la fuente de datos del control MyList se configura programndola y, posteriormente, se llama a DataBind().
void Page_Load(Object sender, EventArgs e) { ArrayList items = new ArrayList(); items.Add("One"); items.Add("Two"); items.Add("Three"); MyList.DataSource = items; MyList.DataBind(); }

La llamada al mtodo DataBind de un control provoca un barrido recursivo desde ese control a lo largo del rbol; el evento Databinding se produce en cada control de servidor de la jerarqua y las expresiones de enlazado de datos del control se evaluan consecuentemente. Es decir, si invocamos el mtodo DataBind de una pgina todas las expresiones de enlazado de datos de la pgina sern invocadas.

C# Reference5.aspx
<html> <script language="VB" runat=server> Sub Page_Load(Sender As Object, E As EventArgs) Dim Items As New ArrayList Items.Add("One") Items.Add("Two") Items.Add("Three") MyList.DataSource = Items MyList.DataBind() End Sub </script> <body> <asp:datalist id="MyList" runat=server> <ItemTemplate> Here is a value: <%# Container.DataItem %> </ItemTemplate> </asp:datalist> </body> </html>

ASP.NET 2.0 tambin incluye una nueva sintaxis de databinding simplificada que permite a los controles enlazarse automticamente a los controles de fuente de datos, sin tener que llamar a DataBind() en el cdigo de la pgina. Esta sintaxis se trar en la seccin de Realizando Acceso a Datos. SINTAXIS DE ETIQUETAS DE OBJETO: <OBJECT RUNAT="SERVER" /> Las etiquetas de objeto permiten a los desarrolladores declarar y crear objetos de variables mediante una sintaxis declarativa basada en etiquetas. El siguiente ejemplo muestra como la etiqueta del objeto puede utilizarse para crear una instancia de la clase ArrayList.
<object id="items" class="System.Collections.ArrayList" runat="server"/>

El objeto ser creado automticamente en tiempo de ejecucin y podr ser accedido mediante el ID "items".
void Page_Load(Object sender, EventArgs e) { items.Add("One"); items.Add("Two"); items.Add("Three"); ... }

C# Reference6.aspx <html>
<script language="VB" runat=server> Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs) ArrayItems.Add("One") ArrayItems.Add("Two")

ArrayItems.Add("Three") MyList.DataSource = ArrayItems MyList.DataBind() End Sub </script> <body> <object id="ArrayItems" class="System.Collections.ArrayList" runat=server/> <asp:datalist id="MyList" runat=server> <ItemTemplate> Here is a value: <%# Container.DataItem %> </ItemTemplate> </asp:datalist> </body> </html>

SINTAXIS DE LOS COMENTARIOS DEL LADO DE SERVIDOR: <%-- COMMENT --%> Los comentarios del lado del servidor permiten a los desarrolladores evitar la ejecucin y rederizado de cdigo de servidor (incluyendo controles de servidor) y de contenido esttico. El siguiente ejemplo muestra como bloquear el contenido para que no se ejecute y sea enviado al cliente. Observar como todo lo que hay entre <% -- y -- %> se filtra y slo es visible en el fichero que hay en el servidor, aunque incluya otras directivas ASP.NET.
<%-<asp:calendar id="MyCal" runat=server/> <% for (int i=0; i<45; i++) { %> Hello World <br> <% } %> --%>

C# Reference7.aspx
<html> <body> The below content has been hidden from browser clients using a server-side comment (view the .aspx source to see what we mean :-) <%-<asp:calendar id="MyCal" runat=server/> <% For I = 0 To 44 %> Hello World <br> <% Next %> --%> </body> </html>

SINTAXIS DE INCLUSIN (INCLUDES) DEL LADO DE SERVIDOR: <-- #INCLUDE FILE="LOCATON.INC" --> Los #Includes permiten a los desarrolladores insertar los contenidos de un fichero especificado en cualquier lugar de una pgina ASP.NET. El siguiente ejemplo nos demuestra como insertar una cabecera y un pie de pgina personalizados en una pgina.

<!-- #Include File="Header.inc" --> ... <!-- #Include File="Footer.inc" -->

C# Reference8.aspx
<html> <body> <!-- #Include File="Header.inc" --> <br /> <h3> Main page content </h3> <br /> <!-- #Include File="Footer.inc" --> </body> </html>

SINTAXIS DE EXPRESIN: <%$ ... %> Nuevo en 2.0 ASP.NET 2.0 aade una nueva sintaxis declarativa para substituir los valores en una pgina antes de que sea analizada. sto es til para substituir los valores de cadenas de conexin o configuraciones de una aplicacin por los valores de las propiedades de controles de servidor, definidas en el fichero Web.config. Tambin se puede usa para substituir valores de un fichero fuente de localizacin. Se puede encontrar ms sobre cadenas de conexin, expresiones de recursos y manejadores de expresiones en las secciones Realizando Acceso a Datos, Internacionalizando Vuestra Aplicacin y Extendiendo ASP.NET.
<asp:SqlDataSource ID="SqlDataSource1" ConnectionString='<%$ connectionStrings:Pubs %>' runat="server" SelectCommand="sp_GetAuthors" /> <asp:Label ID="Label1" Text='<%$ Resources: ExchRate, ConvertLabel %>' runat="server"/>