INTRODUCCIÓN A ASP.NET TGP2006. Rafael Cano Parra rafael.cano@alumnos.uva.es

Transcripción

1 INTRODUCCIÓN A ASP.NET TGP2006 Rafael Cano Parra rafael.cano@alumnos.uva.es 12 de enero de 2007 Tecnología de la Programación Ingeniería Técnica en Informática de Gestión Universidad de Valladolid

2 ÍNDICE GENERAL 1. INTRODUCCIÓN A ASP.NET Procesamiento dinámico Enlace de los elementos Elementos de una página ASP.NET CREACIÓN GENERAL DE PÁGINAS Bloques de declaración de código Flujo de página Estado visual Cómo debemos escribir código de ASP.NET y HTML Comentarios en el código División del código en varias líneas Cómo importar espacios de nombres USO BÁSICO DE OBJETOS Objeto Response Objeto Request Objeto HttpCookie Objeto Page Objeto Session Objeto HttpApplication Objeto HttpServerUtility INTRODUCCIÓN A FORMULARIOS WEB Presentación de los formularios Presentación de formularios web Modelo de programación de los formularios web INCLUSIÓN DE ARCHIVOS EXTERNOS DESDE EL SERVIDOR BIBLIOGRAFÍA Y REFERENCIAS

3 1. INTRODUCCIÓN A ASP.NET 1.1. PROCESAMIENTO DINÁMICO: Internet está basado en un modelo cliente-servidor, en el que se realizan una serie de peticiones por el cliente las cuales son respondidas por el servidor. Por ello, tenemos un equipo que contiene información al que se le denomina servidor, y también tenemos otro equipo que la solicita al cual se le denomina cliente. El modelo cliente-servidor puede ser: Estático: el servidor no puede proporcionar información de forma dinámica o procesar los datos para devolver la información. Esto ocurre con el lenguaje HTML. Dinámico: el servidor proporciona la información dinámicamente y analiza dicha información antes de enviarla al cliente. Esto ocurre con el lenguaje ASP. Controlado por eventos: el servidor espera a que algo ocurra en el cliente para entrar en acción y ejecutar alguna tarea. Esto ocurre con el lenguaje ASP.NET. Por tanto, ASP.NET es un lenguaje el cual sigue un modelo controlado por eventos. Éste sabe lo que ocurre en el cliente porque se basa en el procesamiento dentro del cliente para simular un modelo controlado por eventos, como puede ser por ejemplo cualquier otra aplicación hecha en Visual Basic ENLACE DE LOS ELEMENTOS: Hay dos lugares para ejecutar el código: en el servidor donde todo se devuelve como HTML, y en el cliente. Estos dos lugares para el código son distintos y no tienen relación entre sí, como veremos a continuación: Ejecución en el cliente: no se procesa en el servidor, sino que se escribe en secuencias de comandos que indican al cliente que haga algo. Se usa para realizar efectos dinámicos en el cliente como cuadros de mensaje. Ejecución en el servidor: se ejecuta sólo en el servidor y todo se convierte en HTML o XML antes de enviarlo al cliente. Se utiliza para procesar resultados y devolver datos. En el caso específico de ASP.NET, éste sabe lo que ocurre en el cliente porque éste se comunica con el servidor mediante una petición. La forma en la que enlaza los elementos del cliente con el servidor es a través de secuencias de comandos en el cliente, y que proporciona información de lo que éste hace durante las peticiones al servidor. Otra cualidad de ASP.NET es que, tras una petición de información de una página, el servidor compila esta para tener una aplicación más eficiente. La compilación se ejecuta la primera vez y ser reutiliza para posteriores peticiones de página ELEMENTOS DE UNA PÁGINA ASP.NET: Un archivo sencillo que puede ser encontrado en la carpeta raíz del servidor web con la extensión *.aspx para identificarle como ASP.NET, es el siguiente: <%@ Page Language="VB" %> <html> <head> <title>página en ASP.NET</title> <script runat="server"> Sub Page_Load(obj as object, e as eventargs) lblmensaje.text = " Bienvenido a ASP.NET!" 3

4 End sub </script> </head> <body> <asp:label id="lblmensaje" runat="server" /> </body> </html> En el ejemplo anterior podemos encontrar los siguientes elementos: Primero tenemos la etiqueta Page Language="VB" %> que identifica la directiva de página y es la que da la información específica a la página ASP.NET. Esta es la que nos dice que el lenguaje usado es Visual Basic, ya que se pueden usar más lenguajes, como C# o JScript. Todo el trozo que engloba la etiqueta <script runat="server"> hasta su cierre es el bloque de declaración de código. Se parece al código que es ejecutado en el lado del cliente, pero se diferencia por la variable runat="server", que también es utilizada en otro tipo de elementos HTML que veremos más adelante. Éste es el código que ASP.NET utiliza para procesar sus páginas y es donde controlaremos la funcionalidad de la misma. Este trozo normalmente se coloca en el <head>, aunque se puede utilizar en otras partes del código. Luego están los elementos típicos de una página HTML, como son las etiquetas <html>, <head> y <body>. Dentro de ellas es donde va todo el código de la página que va a ser visualizado por en navegador. Finalmente, entre el <body> podemos tener varios elementos de control de ASP.NET, así como otras funcionalidades de ASP. Ejemplo de esto es la línea <asp:label id="lblmensaje" runat="server" /> que es parte de un formulario web, muy típico en el nuevo contexto de ASP.NET, y que suele ir encerrado entre el trozo de las etiquetas <form runat="server">, similares a las de HTML pero que son controladas por ASP.NET. Aunque ASP y ASP.NET sean totalmente distintos, pueden operar en conjunto, ya que el servidor web procesa ambas tecnologías. Podemos tener trozos de código entre <% y %> propios de ASP, pero se ha de tener en cuenta que estos trozos no son compilados por.net y la aplicación puede perder la eficiencia que se consigue con el nuevo ASP.NET. 4

5 2. CREACIÓN GENERAL DE PÁGINAS 2.1. BLOQUES DE DECLARACIÓN DE CÓDIGO: Una declaración de código para Visual Basic sería: Page Language="VB" Debug="True" %> <script runat="server"> Sub tbmensaje_change(sender As Object, E As EventArgs) lblmensaje.text = "Hola, " + tbmensaje.text + "." End Sub </script> El mismo código escrito en C# es el siguiente: <%@ Page Language="c#" Debug="True" %> <script runat="server"> public void tbmensaje_change (Object sender, EventArgs E) { lblmensaje.text = "Hola, " + tbmensaje.text + "."; } </script> Los eventos que controlarán ese trozo de código y de los cuales veremos más adelante su descripción, serán los del siguiente formulario web: <form runat="server"> <p>por favor, teclea tu nombre:</p> <asp:textbox id="tbmensaje" OnTextChanged="tbMensaje_Change" runat="server" /> <asp:button id="btsubmit" Text="Enviar" runat="server" /> <asp:label id="lblmensaje" font-size="20pt" runat="server" /> </form> La etiqueta <script> se utiliza en secuencias de comandos del cliente. Delimita una sección de la página que la aplicación manejará de forma dinámica, conocida como bloque de declaración de código. No se convierte en HTML dentro de la página, si no que contiene código que será ejecutado por el servidor. No olvidar nunca incluir runat="server", ya que sino ASP.NET no lo interpretará como código para la aplicación dinámica. Podemos ver que la diferencia entre ambos es la sintaxis, ya que el control de eventos se hace de la misma forma, sea el lenguaje que sea. En los formularios web, servicios web, que contiene la página HTML no influye el lenguaje utilizado, ya que los eventos se identifican del mismo modo. Es mejor separar el bloque <script> tanto como sea posible del código de presentación en HTML, por ello es recomendable escribirlo en la cabecera de la página. En cuanto al trozo del formulario web, comentar que no tiene acción asociada ya que se refiere a la misma página. La etiqueta <asp:textbox /> como las otras son los controles de servidor y siempre han de contener el cierre de etiqueta para que no genere errores. El atributo id es un nombre único que damos al control para su identificación. El cuadro de texto tiene el atributo OnTextChanged="tbMensaje_Change". Tiene un evento que es TextChanged. Hemos indicado a ASP.NET que ejecute el procedimiento tbmensaje_change cuando ocurra ese evento. Estos eventos se controlan en el servidor FLUJO DE PÁGINA: La primera vez que se solicita la página desde el explorador web ASP.NET compilará el código que esté en los bloques de declaración. Por esto el explorador tarda en mostrar la página. Sin embargo, si se solicita una segunda vez sin modificar el código no habrá retardo alguno. Pero si se modifica algo ASP.NET volverá a compilar la página. Una vez que se envía el formulario y se compila el código, ASP.NET empieza a procesar todo el código que hemos generado y cualquier evento que haya ocurrido. En el ejemplo, el evento TextChanged 5

6 ocurrió cuando se tecleó algo en la caja de texto. El motor de ASP.NET explora este evento, determina que debe hacer y lo hace. En ese momento, ASP.NET convierte cualquier control en elemento HTML. Luego evalúa cualquier bloque proveedor de código y devuelve el HTML necesario. Por último, el HTML resultante se envía al explorador web, que recibe sólo HTML estándar. Por lo que cualquier explorador web puede mostrar la página ESTADO VISUAL: Describe el aspecto de un objeto en un momento determinado, como por ejemplo, si un botón está o no pulsado. Una aplicación que lleve el control de esta información se conoce como estado de conservación. Si llenamos un formulario HTML y volvemos a él después, es posible que esté vacío. Esto es porque la web es un medio sin estado. ASP.NET lleva automáticamente un control del estado visual. Esto quiere decir que si rellenamos un formulario HTML y volvemos a él después los datos estarán allí. ASP.NET hace esto al devolver campos ocultos de formulario HTML siempre que indicamos runat="server" en el formulario CÓMO DEBEMOS ESCRIBIR CÓDIGO DE ASP.NET Y HTML: Hay dos formas de escribir código de ASP.NET: en los bloques de declaración de código o en los bloques proveedores de código. Es mejor el primer método. También hay otras formas de escribir HTML puro mediante ASP.NET, como son Response.Write o la etiqueta <%=, ambos heredados de ASP. Pero lo más correcto es separar el código ASP.NET del HTML tanto como podamos mediante bloques de declaración de código. Por ello no debemos utilizar bloques proveedores de código para intercalar código o resultados HTML (con Response.Write) cuando otro método cumpla mejor con el trabajo COMENTARIOS EN EL CÓDIGO: Hay cuatro formas de comentar el código dependiendo del lenguaje usado:  para comentar código sólo en HTML. ' (apóstrofo) para comentar con código en Visual Basic. // y /* */ para comentar código en C#. <%-- y --%> para comentarios del servidor DIVISIÓN DEL CÓDIGO EN VARIAS LÍNEAS: Esto es propio del lenguaje Visual Basic, ya que C# hasta que no encuentra un punto y coma no cierra la línea. La forma de hacerlo es con la barra baja, como vemos en el siguiente ejemplo: <% Response.Write ("Te estoy " & _ "saludando") %> 2.7. CÓMO IMPORTAR ESPACIOS DE NOMBRES: De forma predeterminada, se importan automáticamente los siguientes espacios de nombre a todas las páginas ASP.NET: System, System.Collections, System.IO, System.Web, System.Web.IU, System.Web.IU.HtmlControls y System.Web.IU.WebConstrols. En el caso de que nos haga falta otra cualquiera, como por ejemplo el espacio System.Drawing, se haría de la siguiente forma: <%@ Import Namespace="System.Drawing" %> 6

7 3. USO BÁSICO DE OBJETOS En los siguientes puntos veremos los objetos que están implementados en ASP.NET, junto con una descripción de su utilización y los métodos que pueden usarse con ellos. Se puede buscar y ampliar más información sobre estos en cualquier libro o página de Internet OBJETO Response: El objeto Response permite la interacción del servidor con el cliente. Cuando un usuario solicita una página ASP.NET genera una instancia del objeto HttpResponse, el cual contiene información (propiedades y métodos) necesaria para comunicarse con el cliente. El nombre de la instancia es Response, de modo que podrá utilizar este nombre para acceder a las propiedades y métodos del objeto HttpResponse. Los métodos de los que consta son los siguientes: Para escribir en pantalla: Write. Para controlar el buffer: Buffer, junto con Clear, Flush y End. Para redirigir a otras páginas: Redirect OBJETO Request: Una función del objeto Request es obtener información personal a través del explorador web, por ejemplo, lo que ha capturado un usuario en un formulario o los valores de cadena de consulta de cómo máximo 255 caracteres. Los métodos que recogen estos datos son: QueryString y QueryString( variable ) obtiene todas las variables o una variable concreta de la ruta de acceso a la página. Form y Form( nombre ) devuelve todos los valores o el valor concreto de los controles de un formulario. ServerVariables devuelve información sobre el servidor, como la IP o el protocolo. Cookies devuelve información sobre las cookies utilizadas en la aplicación. Variables del servidor que pueden ser utilizadas son: URL o PATH_INFO (obtiene el nombre de la página actual), PATH_TRANSLATED (obtiene toda la ruta física del servidor), SERVER_NAME (obtiene el nombre del servidor web) y SERVER_SOFTWARE (obtiene el nombre del software del servidor web) OBJETO HttpCookie: Una cookie es un pequeño archivo en la computadora del usuario que contiene información específica para un sitio web. El objeto HttpCookie ofrece métodos para acceder y generar esas cookies. La forma común de manejar las cookies es mediante los objetos Request y Response, los cuales cuentan con una propiedad Cookies que devuelve una referencia a un objeto HttpCookie. Métodos que son usados por este objeto son: Value para dar un valor en particular a una cookie. Expires para darlas un tiempo concreto de duracion (con una fecha). Esto se usa para eliminar una cookie, si damos una fecha anterior o la ponemos a cero. Domain restringe el uso de la cookie para el dominio que le indiquemos. Path sólo permite el acceso a la cookie a las páginas ASP.NET que se encuentren en una ruta específica del servidor. HasKeys indica si esta cookie tiene claves o es una cookie con un único valor. 7

8 Secure indica a ASP.NET si debe o no transmitir la cookie de forma segura, es decir, sólo bajo el protocolo HTTPS. El valor predeterminado es false OBJETO Page: Contiene todas las propiedades y métodos que genere la página ASP.NET. Cuando ejecutamos una página ASP.NET ésta heredará de la clase Page del.net Framework. Las páginas ASP.NET son los objetos secundarios del objeto Page. Cualquier método o propiedad que se defina en la página ASP.NET se convertirá en miembro del objeto basado en su página. Esto significa que si genero otra página podré acceder a los métodos y propiedades de la primera. Miembros útiles integrados: IsPostBack: indica si un formulario de esta página fue enviado a la misma. DataBind: enlaza todas las expresiones de datos a los controles de la página. Eventos que son producidos: Init: es lanzado cuando la página es inicializada, cuando es lanzado este evento todavía no se han creado por completo los distintos controles de la página. Este evento es tratado en el método Page_Init. Load: este evento se lanzaría a continuación del método Init y es lanzado cuando la página se ha cargado, en este caso todos los controles de la página ya han sido creados. Este evento se lanzará cada vez que la página ASP.NET es ejecutada y es tratado en el método Page_Load. PreRender: el evento se lanzará justo antes de enviar la información al cliente. Este evento es tratado en el método Page_PreRender, y siempre es lanzado después del evento Load. UnLoad: este otro evento se lanzará en último lugar, y tiene lugar cuando la página ha finalizado de procesarse, es decir, cuando se ha terminado la ejecución de la página y toda la información ha sido enviada al cliente. Este evento es tratado en el método Page_UnLoad. Error: este evento se lanzará cuando se produzca una excepción no tratada dentro de la página. El método Page_Error se utilizará cuando deseemos realizar nuestro propio tratamiento de errores. Propiedades que son utilizadas en el método son: IsPostBack: esta propiedad de la clase Boolean devolverá true si la página ASP.NET actual ya ha sido enviada al servidor en alguna ocasión. Si tiene el valor false indicará que es la primera vez que se carga la página y nos servirá de indicador para poder inicializar los controles web o bien realizar otras labores de inicialización. Application: esta propiedad nos va a ofrecer una referencia a un objeto de la clase System.Web.HttpApplicationState. Este objeto nos va a permitir almacenar y acceder a información que va a ser común a toda la aplicación web, es decir, es una información compartida por todos los clientes de una aplicación web determinada. Esta propiedad es equivalente al objeto integrado Application de anteriores versiones de ASP OBJETO Session: Debido a que la web es un medio sin estado, es difícil llevar un control de la información del usuario. No hay forma de utilizar el protocolo http para saber si una serie de peticiones proviene de un usuario o de varios. El objeto Session permite almacenar elementos propios de un usuario, como variables, objetos, cadenas,... en un solo lugar del servidor. Por eso se conoce como sesión al tiempo que un usuario pasa en un sitio, y se la suele identificar con un nombre y un valor. El control de las sesiones se hace con los siguientes métodos: Timeout es el tiempo que puede estar inactiva una sesión antes que ASP.NET la deje. El tiempo predeterminado es de 20 minutos, pero se puede modificar dándole otro valor. Abandon: hace que la sesión termine. 8

9 Es posible almacenar los datos con ámbito de sesión a fin de proporcionar datos individuales a un usuario durante una sesión. Además es posible configurar las características del estado de una sesión en la sección <sessionstate> del archivo web.config del servidor web de ASP.NET OBJETO HttpApplication: ASP.NET genera un objeto HttpApplication llamado Application cuando arranca su aplicación, es decir, cuando alguien solicita la página por primera vez. Sólo se genera un objeto Application para toda la aplicación. Al igual que Session puede usarse para almacenar variables y objetos, como por ejemplo un pie de página que vamos a colocar en cada página OBJETO HttpServerUtility: Podemos utilizar el nombre Server para acceder a los métodos de este objeto. Los métodos que pueden ser usados por este objeto son: Transfer: lleva la ejecución a otra página. Execute: lleva la ejecución a otra página, pero regresa a la misma cuando termine. HtmlEncode: se utiliza para que la salida de un texto no sea interpretada por HTML, por lo que codifica los caracteres especiales. Su operación inversa es HtmlDecode. UrlEncode: hace algo similar ya que da formato a una cadena en particular con las reglas URL. Su operación inversa es UrlDecode. MapPath: traduce una ruta virtual en una física en el servidor. ScriptTimeout: indicamos el tiempo que vamos a esperar en segundos antes de finalizar la secuencia de comandos, como puede ocurrir si tenemos un bucle infinito. CreateObject: creamos una instancia de un objeto COM. 9

10 4. INTRODUCCIÓN A FORMULARIOS WEB 4.1. PRESENTACIÓN DE LOS FORMULARIOS: Un cliente envía una petición a un servidor para obtener cierta información y que éste responda a su envío. Es el modelo petición-respuesta. Un ejemplo de formulario puede ser: <form method ="post"> <p>teclea tu nombre:</p> <input type="text" size="20" /> <input type="submit" value="enviar" /> </form> El cliente también puede enviar datos al servidor. Los formularios HTML permiten la interacción del usuario con páginas web. Cuando el usuario hace clic en el botón Enviar, el formulario envía al servidor los datos que haya capturado. Los formularios HTML se basan por completo en el cliente. Entre el cliente y el servidor es difícil intercambiar información. Tan pronto como el servidor envía los datos, olvida todo lo que el formulario indica y pierde el rastro de lo que sucede PRESENTACIÓN DE FORMULARIOS WEB: Son muy similares a los de HTML. La diferencia es que se basan en el servidor, es decir, genera los elementos del usuario en el servidor. El servidor tendrá conocimiento de la apariencia de la interfaz, qué puede hacer, qué datos recibirá, En el servidor generaremos objetos llamados controles de servidor, que pueden controlarse por completo: tienen propiedades, eventos y métodos que podemos manejar. Tan pronto como el cliente solicita la página, ASP.NET convierte los controles a HTML. A través de la secuencia de comandos que ASP.NET genera automáticamente en el cliente, estos controles avisan al servidor cuando algo sucede, como cuando se hace clic en un botón MODELO DE PROGRAMACIÓN DE LOS FORMULARIOS WEB: Los formularios web están divididos en dos partes: los elementos visuales y la lógica de la interfaz. Están separados entre sí en el plano conceptual y en el físico Controles de servidor: Al ejecutarse una página ASP.NET, la serie de objetos de los controles de servidor generarán todo el código equivalente en el lenguaje HTML de esta página para que su resultado pueda ser interpretado por cualquier navegador web. Cada control se corresponde con una clase determinada perteneciente a un espacio con nombre determinado. Existe un gran número de controles de servidor y cada uno de ellos pertenece a una clase del.net Framework. Estos controles son los elementos de la interfaz de usuario de un formulario web. Hay cuatro tipos y todos tienen propiedades, métodos y eventos. La descripción de cada uno de ellos es la siguiente: Controles HTML de servidor: representan a los elementos normales de los formularios HTML, como los cuadros de texto y los botones, pero se crean en el servidor donde podemos controlarlos. Controles web: son semejantes, pero ofrecen una mayor funcinalidad y pueden representar interfaces de usuario más complejas. Controles de validación: se utilizan para validar lo capturado por el usuario. Controles de usuario: son aquellos programados a medida para realizar cierta funcionalidad. 10

11 Eventos de controles de servidor: Cuando hacemos clic en un botón, en un vínculo, llenamos un cuadro de texto, seleccionamos un elemento de una lista, y este está asociado a un control, generará uno o varios eventos automáticamente, ya que ha sucedido algo que él controla. Para controlar el evento en el servidor, necesitará indicar al control qué método utilizar. Hay dos clases de eventos: el evento activo que necesita una acción explícita del usuario, y el evento pasivo se puede ejecutar sin intención directa del usuario, como mover el cursor por una imagen. Sólo los eventos activos se manejan en el servidor. Tenemos dos formas de enviar los eventos al servidor: conforme ocurren o todos juntos en un solo envío. Es conveniente utilizar el segundo método. Permanecen en la caché del usuario hasta que éste se decida a enviar los datos. Un ejemplo de un formulario web que utiliza controles de servidor es el siguiente: <%@ Page Language="VB" %> <script runat="server"> Sub btnenviar_click(obj as object, e as EventArgs) lblmensaje.text="hizo clic en <b>" & obj.text & "</b>" End Sub </script> <html> <body> <form runat="server"> <asp:label id="lblmensaje" runat="server" /> <asp:button id="btnenviar" runat="server" text="enviar" _ onclick="btnenviar_click" /> </form> </body> </html> En el ejemplo anterior, tenemos especificado en el controlador de servicio Button1 un método que deberá controlar un evento, el cual es Button1_Click. Si no genero este método en alguna parte del bloque de declaración de código, recibiré un error Cómo enviar formularios web: Una situación típica es que una página que se carga en el explorador muestre un mensaje de bienvenida en un control de servidor. Este mensaje formará parte del estado visual del control y ASP.NET lo recordará siempre. El objeto Page tiene una propiedad llamada IsPostBack que informa si el formulario ya ha sido o no enviado. Con él se puede verificar esta propiedad y decidir si se llena o no con los controles de servidor. Un ejemplo de este uso es con el siguiente código: <%@ Page Language="VB" %> <script runat="server"> Sub Page_Load(obj as object, e as EventArgs) If Not Page.IsPostBack Then lblmensaje.text = " Hola, mundo!" End If End Sub Sub btnenviar_click(obj as object, e as EventArgs) lblmensaje.text = "Formulario enviado." End Sub </script> Si tomamos el formulario web de la sección anterior, veremos que la primera vez que entremos en la página nos escribirá en la etiqueta lblmensaje el mensaje de bienvenida, y además, cada vez que pulsemos el botón de enviar nos rellenará la etiqueta con el mensaje de Formulario enviado Cómo guardar el estado: 11

12 Los formularios web guardan el estado visual de cada control en el formulario mediante campos ocultos. Este estado visual le indica lo que se ha tecleado en el control, ya sea que éste se encuentre o no seleccionado, qué elemento lo está, Hay otra forma de guardar información en los formularios web, que es utilizando el saco de estado o state bag, un objeto que contiene los valores cuando se envía un formulario. Si se coloca algo en el saco de estado y se envía el formulario, el servidor guarda la información y la devuelve al cliente cuando finaliza su proceso. Es una forma sencilla de almacenar información personalizada que un usuario no haya tecleado, por ejemplo un cálculo. Se accede al saco de estado mediante la variable ViewState. Un ejemplo puede ser el de guardar la hora actual en el saco de estado tan pronto como se carga la página, para luego poder ser mostrada tras dar en el botón Enviar de un formulario web Orden de procesamiento de formularios web: Los pasos que se siguen ante una petición a una página ASP.NET es el siguiente: La página se solicita del servidor web o se envía desde este. Se restaura el estado visual de los controles. Ocurre el evento Page_Load y se llama a la función correspondiente si existe. Se controlan los eventos y se llaman a los métodos que controlan estos eventos, en el caso de que sucedan. Ocurre el evento Page_Unload y se llama a la función correspondiente si existe Controles HTML de servidor: Los controles HTML ofrecen a los desarrolladores de entornos web la potencia de los formularios web o web forms, pero manteniendo la familiaridad y facilidad de uso de las etiquetas HTML que representan los campos de un formulario. Estos controles tienen el mismo aspecto que una etiqueta HTML, a excepción de que presentan el atributo runat con el valor server. Si queremos realizar el tratamiento de eventos con código del servidor, utilizaremos el atributo OnServer seguido del evento, como por ejemplo OnServerClick, al cual se le indica como valor el nombre del método que queremos ejecutar. Los elementos HTML están totalmente basados en el cliente. Un explorador conoce el aspecto y funcionamiento de <input type="text" /> y lo interpreta de acuerdo con eso. Los controles HTML de servidor son elementos u objetos que se crean en éste, con propiedades, métodos y eventos que podemos controlar. Son muy fáciles de generar: sólo hay que agregar el atributo runat="server" a cualquier elemento HTML. Unos ejemplos de estos controles HTML pueden ser: <input type="button" id="centro" runat="server" value="centro" OnServerClick="Click" /> <img src="foto.jpg" id="imagen" runat="server" /> <div id="cuerpo" runat="server"></div> Todos estos controles pertenecen al espacio de nombres System.Web.UI.HtmlControls. A continuación veremos cada uno de los controles que pueden ser aplicados a los elementos en HTML y a las clases a las que corresponden, y son los siguientes: HtmlAnchor: esta clase se corresponde con la etiqueta <a> que es la que nos permite crear un hipervínculo para desplazarse a otra ubicación de la página o a otra página web. HtmlButton: este control HTML generará la etiqueta <button> de HTML y se utilizará cuando sea necesario personalizar al máximo el aspecto de un botón. Permite incluir texto con formato, imágenes u otros controles de formularios web. HtmlForm: esta clase representa a la etiqueta <form> en el servidor, y es la que nos permite definir un formulario web que va a realizar la labor de contenedor para una serie de controles de servidor dentro de la página ASP.NET. Todos los controles ASP.NET que deseemos enviar al servidor (post) debemos incluirlos dentro de un control de la clase HtmlForm. 12

13 HtmlGenericControl: esta clase se utilizará para representar las etiquetas HTML que no poseen una correspondencia directa con las clases del.net Framework, como puede suceder con las etiquetas <span>, <div> o <body>, entre otras. HtmlImage: esta clase permite utilizar la etiqueta <img> de HTML en el servidor, por lo que vamos a ser capaces de manejar imágenes. HtmlInputCheckBox: se corresponde con la etiqueta <input type="checkbox" />, y gracias a él tenemos acceso en el servidor a este tipo de elemento. Para determinar si se selecciona el control, se ha de utilizar la propiedad checked. HtmlInputRadioButton: el control HTML que es instancia de esta clase generará en el cliente una etiqueta <input type="radio" />, permitiendo al código de servidor interactuar con este elemento. No tiene funcionalidad integrada para mostrar un título para el botón de opción. Para determinar si el control HtmlInputRadioButton está seleccionado, se ha de mirar con la propiedad checked. HtmlInputText: se corresponde con las etiquetas <input type="text" /> e <input type="password" />. El tipo de caja de texto que se genera viene dado por el valor de la propiedad type. HtmlSelect: Este control HTML se corresponde con una lista desplegable del lenguaje HTML, es decir, con una etiqueta <select>. HtmlTable: este control se corresponde con una tabla del lenguaje HTML, es decir, permite el acceso desde el código de servidor a una etiqueta <table>. Esta clase posee una colección llamada Rows, que contiene objetos de la clase HtmlTableRow. Las propiedades que se pueden emplear son: Border para especificar el ancho del borde (en píxeles), BgColor para obtener o establecer el color de fondo, CellPadding para obtener o establecer la cantidad de espacio entre el contenido de una celda y el borde de la misma, y CellSpacing para obtener o establecer la cantidad de espacio (en píxeles) entre las celdas adyacentes. HtmlTableRow: clase relacionada con la anterior y que es el control HTML que permite manipular una fila de una tabla. Esta clase posee una colección llamada Cells, que contiene objetos de la clase HtmlTableCell. HtmlTableCell: clase que permite el acceso a las celdas de una tabla, es decir, se corresponde con las etiquetas <td> y <th> Controles web de servidor: Los controles web ofrecen un mayor nivel de abstracción que los controles HTML, y su modelo de objetos no refleja la sintaxis HTML necesariamente. Cuando la página se carga en el navegador, el control web determina el tipo de navegador que ha realizado la petición, y de acuerdo con esta información genera el código HTML apropiado. Podemos decir que en este aspecto se trata de controles inteligentes. Son similares a los controles HTML de servidor. Se generan en el servidor y permiten crear interfaces de usuario complejas con facilidad. Necesitan el atributo runat="server", no es necesario que se relacionen con elementos HTML y pueden representar elementos más complejos de la interfaz de usuario. Para crear un control web, se utiliza la siguiente sintaxis: <asp:control id="nombre" runat="server" /> <asp:radiobuttonlist id="rbledad" runat="server"> </asp:radiobuttonlist> La clase de base System.Web.UI.WebControls.WebControl contiene todas las propiedades comunes. La mayoría de los controles web de servidor derivan de esta clase. Los controles web básicos proporcionan la misma funcionalidad que sus correspondientes controles HTML de servidor, pero además incluyen métodos, eventos y propiedades adicionales que se puede usar para programar. Los controles web se pueden clasificar en cuatro tipos: controles web intrínsecos (que son los equivalentes a los controles HTML), controles web de lista, controles web ricos y controles web de 13

14 validación. Los beneficios que se desprenden de utilizar controles web intrínsecos sobre los controles HTML vistos anteriormente son los siguientes: Se ofrece una convención de nomenclatura para controles similares. Existen propiedades comunes para todos los controles, ofreciéndose un modelo de objetos más robusto. Se incluyen propiedades específicas de los controles. Se genera código HTML específico para cada navegador web. La similitud con los controles HTML es que para permitir hacer referencia a los controles dentro del código fuente de la página, se debe utilizar el atributo id. Las diferencias con estos las tenemos en: la declaración de los controles, algunos nombres de las propiedades cambian y que en los métodos para el tratamiento de eventos de la pulsación de un botón del ratón en los controles HTML utilizamos la propiedad OnServerClick, mientras que en los controles web utilizamos la propiedad OnClick. En los siguientes puntos nos vamos a referir a los diferentes controles web de servidor que pueden ser empleados, junto con la explicación de utilización. Estos son los siguientes: Button: este control web representa un botón y se corresponde con la etiqueta <input type="submit" />, es decir, un botón que envía el contenido de un formulario al servidor. Esta clase se corresponde con el control web <asp:button>. CheckBox: es el control web que se corresponde con la etiqueta <input type="checkbox" /> del lenguaje HTML. La propiedad AutoPostBack establece un valor que indica si el estado del control CheckBox se devuelve automáticamente al servidor cuando se hace clic en él. CheckBoxList: este control permite utilizar una lista de selección múltiple de elementos CheckBox. Este objeto posee una colección Items que contiene todos los objetos CheckBox. Se puede especificar la distribución de los CheckBox en la página a través de las propiedades RepeatDirection y RepeatLayout. DropDownList: este control web representa una lista desplegable, y se corresponde con la etiqueta <select> de HTML. Cada uno de los elementos del control DropDownList se indica con un objeto de la clase ListItem. HyperLink: este otro control web representa un enlace en la página, por lo tanto generará en el cliente una etiqueta <a>. Image: control web que representa una imagen dentro de una página ASP.NET, y que generará como resultado de su ejecución una etiqueta <img> de HTML. Para indicar la imagen que deseamos mostrar se utilizará la propiedad ImageURL. ImageButton: este control es muy similar al anterior, pero además de mostrar una imagen posee la característica adicional de funcionar como un botón de tipo submit, es decir, al pulsar el botón se envían los contenidos del formulario al servidor. Este control genera en el cliente la etiqueta HTML <input type="image">. LinkButton: este control va a representar un botón 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. ListBox: este nuevo control web representa una lista de selección sencilla o múltiple que se corresponde con una etiqueta <select> en el código HTML. Es similar al control DropDownList, pero en este caso se muestran varios elementos de la lista y se permite la selección múltiple. Métodos que se pueden emplear son: Rows con el que indicamos el número de filas visibles, y SelectionMode con el que indicamos si se permite la selección múltiple, mediante el valor Multiple, o bien la selección simple mediante el valor Single. Panel: este otro control web intrínseco se utiliza para agrupar controles y realizar la función de contenedor de los mismos. El control Panel posee una propiedad llamada Controls que es una colección que contiene todos los controles incluidos dentro del objeto Panel. PlaceHolder: control web que realiza también la función de un contenedor de controles web, pero en este caso no genera ningún código HTML, Se utiliza para añadir controles web de 14

15 forma dinámica en la página ASP.NET en un punto determinado, y para ello se utiliza su propiedad Controls. RadioButton: este control representa un botón de opción que se corresponde con el elemento <input type="radio" /> de HTML. Muestra la misma funcionalidad, es decir, permite seleccionar una opción dentro de un mismo grupo de opciones. Las opciones se agrupan mediante la propiedad GroupName. RadioButtonList: este control permite utilizar una lista de selección múltiple de controles RadioButton. Este objeto posee una colección Items que contiene todos los objetos RadioButton. Se puede especificar a través de las propiedades RepeatDirection y RepeatLayout la distribución de los RadioButton en la página. Como se puede apreciar es muy similar al control CheckBoxList, pero en este caso se utilizan controles RadioButton. Table, TableRow y TableCell: estos controles web se encuentran muy relacionados entre sí y mediante la utilización de todos ellos podremos generar tablas en HTML. El control web Table se corresponde con una tabla del lenguaje HTML, es decir, permite generar tablas del lenguaje HTML. Esta clase posee una colección llamada Rows, que contiene objetos de la clase TableRow. Los controles web ofrecen un completo soporte para las hojas de estilo, es decir, podemos aplicar los estilos de forma similar a como lo hacemos en HTML para personalizar el aspecto de nuestros controles. Existen tres formas para aplicar estos estilos: Mediante propiedades específicas de cada control, similar al uso en HTML. Mediante la propiedad CssClass, que accede a una clase del la lista de estilos CSS. Mediante la propiedad Style, que es una colección que nos permite asignar valores a las distintas propiedades del estilo del control Cómo enviar datos inmediatamente: Por ejemplo, imaginar un formulario que muestra las provincias de un país. Una vez seleccionada una provincia, se envía el formulario, se realiza cierto procesamiento y se filtra la lista de ciudades de esa provincia. Se puede enviar datos inmediatamente con la propiedad AutoPostBack de los controles web, cuando seleccionamos esta a true, lo cual indica al control que envíe los datos tan pronto como ocurra el evento. Un ejemplo de esto podría ser el siguiente: <asp:textbox id="tbnombre" runat="server" _ OnTextChanged="ControladorDeNombre" AutoPostBack="true" /> Por lo tanto, cuando ocurra el evento OnTextChanged, es decir, que cuando cambie el texto del TextBox, se autoenviará la página con los datos del formulario web a la dirección indicada en el <form>. 15

16 5. INCLUSIÓN DE ARCHIVOS EXTERNOS DESDE EL SERVIDOR Un archivo incluído desde el servidor es una forma de separar código de una página, como por ejemplo, tener por un lado el código dinámico de ASP.NET y por otro el código en HTML, o tener en archivos diferentes el encabezado, el pie de página y el documento principal. Estos se pueden incluir a través de una línea sencilla de instrucción. Los dos tipos de inclusiones que pueden hacerse son las siguientes:   La diferencia entre ambos consiste en que con file se accede a una carpeta que está al mismo nivel del archivo donde estás haciendo la referencia para el include, mientras que con virtual le estás diciendo que tienes una carpeta virtual que se llama includes y no importa el nivel donde te encuentres ya que tomará la ruta virtual para localizar al archivo. Pongamos un ejemplo sobre el uso de la inclusión de archivos a la hora de separar diferentes partes de una página web, en cuanto a su estructura externa: Encabezado de la página en encabezado.aspx: <a href="indice.aspx"><img src="encabezado.jpg" alt="principal" /></a><hr /> <a href="indice.aspx">principal</a> <a href="fin_sesion.aspx">finalizar sesión</a> Página principal de la aplicación en indice.aspx: <%@ Page Language="C#" %> <script runat="server"> private void Page_Load(object obj, EventArgs e) { /* hacemos algo en la lectura del documento */ } </script> <html> <body>  <p> Hola a todos!</p> </body> </html> Tras la lectura del archivo indice.aspx, ASP.NET inserta el contenido de encabezado.aspx antes de procesar cualquier comando, y en la salida del código en HTML aparecen ambos unidos, como si fuera una página HTML solamente. El archivo encabezado.aspx se encuentra en el mismo directorio que el archivo indice.aspx, por eso se emplea file y sin ningún tipo de ruta absoluta. 16

17 6. BIBLIOGRAFÍA Y REFERENCIAS Prácticamente la totalidad de la información que ha sido extraída para este documento está sacada de una fuente en concreto: Internet. A través de la lectura y comprensión de varios artículos, manuales y tutoriales que están a disposición de cualquier usuario, se ha abstraído toda la información necesaria para la creación de este documento. Hay multitud de fuentes bibliográficas y referencias consultadas, pero las más relativas las expondremos a continuación. Manuales de ASP.NET completos: Manuales conceptuales de ASP.NET: Diferencias entre ASP y ASP.NET: Ejemplos en ASP.NET: TQuickStart.asp Algunos de estos manuales contienen múltiples ejemplos que pueden ser usados para una posterior comprensión y práctica de los conceptos adquiridos. También incluyen descripciones más ampliadas de muchos de los puntos tratados en este documento, así como otros que por su elevada complicación no han sido expuestos, ya que se pretende introducir al lector en la tecnología ASP.NET con sus conceptos lo más básicos posibles y a través de esquemas simples y ejemplos sencillos que sirvan para una mejor búsqueda de información posterior. 17