Introduccion A ASP .NET 2.0

Prctica 2 Introduccin a ASP .NET 2.
0
Comercio Electrnico
Universidad de Oviedo
Pginas estticas
Al principio, el Web estaba poblado nicamente por pginas estticas
El servidor Web simplemente localizaba el documento solicitado en el URL y se lo entregaba al cliente
Este enfoque puede ser perfectamente vlido para muchos sitios

Siempre y cuando no requieran actualizaciones continuas, ya que hay que eso implica o bien modificar, a mano, las pginas existentes, o bien crear una nueva
Pero no permitira, por ejemplo, crear un sitio de comercio electrnico donde se pueda comprar, o el de un banco
Es necesario acceder a datos en el servidor y crear una pgina a peticin
Comercio Electrnico (EUITIO). Curso 2007-2008 2007-
Funcionamiento de las pginas estticas
Funcionamiento de las pginas dinmicas
Modo de funcionamiento
El esquema de funcionamiento de las pginas dinmicas es siempre similar independientemente de en qu se hayan desarrollado stas
CGI, ASP, Servlets/JSP
El servidor Web detecta una peticin de una pgina dinmica y se la pasa al programa necesario
Podra ser una extensin del servidor O bien un programa completamente independiente
Este programa es quien sabe cmo interpretar el cdigo de la pgina para devolver el HTML apropiado
Introduccin a ASP
Antes de empezar a estudiar ASP .NET, echemos un vistazo a la versin anterior de la tecnologa de pginas dinmicas de Microsoft.
Requisitos de software
Uno de los inconvenientes de ASP es que es dependiente de un servidor Web concreto
El Internet Information Server (IIS) de Microsoft
Dicho servidor ya viene de manera predeterminada en las ltimas versiones de Windows

Aunque quiz no lo hayamos instalado junto con el Sistema Operativo
En ese caso, podramos hacerlo a travs de la opcin de Aadir o quitar componentes de Windows del Panel de Control
Cmo probar si est instalado?

Teclear en el navegador http://localhost/
Sintaxis general
ASP, al igual que las JSP de Java, se basa en mezclar instrucciones de programacin en nuestras pginas HTML El motor de ASP procesar dichas instrucciones dinmicamente y obviar el HTML
Esto permite generar HTML dinmicamente, aadiendo lgica a nuestras pginas
Para ello, hay que encerrar el cdigo ASP entre los smbolos <% %>
Lenguaje de programacin
Y en qu lenguaje se escriben esas instrucciones? ASP permite el uso de dos lenguajes:
Visual Basic Script (VBScript VBScript) JScript (como denomina Microsoft a su implementacin de ECMAScript que a su vez es el estndar de JavaScript) JavaScript
Si no decimos nada, por omisin asume VBScript
Ejemplo: mi primera pgina ASP

Ser cmo no! el archiconocido Hola, mundo no! La pgina siguiente escribe dinmicamente el mensaje
<html> <head> <title>Mi primera pgina ASP</title> </head> <body> <h1> <% Response.Write Hola, mundo!" %> (mi primera pgina ASP) </h1> </body> </html>
10
Ejemplo de pgina ASP

test.asp
server-side directive server-side function <%@ language=javascript %> <script language='JScript' runat='server'> function Add(x, y) { return x+y; } </script> <html> <body> <h1>Test ASP Page</h1> <% %> <h2>2+2=<%=Add(2,2)%></h2> <table border='2'> <% for (var i=0; i<10; i++) { %> <% %> <% %> <tr><td>Row<%=i%> Col0</td><td>Row<%=i%> Col1</td></tr> <% } %> </table> <% Response.Write("<h2>Written directly to Response</h2>"); %> </body> </html> 11
server-side evaluation syntax
interspersed server-side script
ASP .NET
Es mucho ms que la siguiente versin de ASP. Realmente, tiene poco que ver con el ASP tradicional; supone un rediseo completo, integrado en la plataforma .NET, y hay que cambiar la forma de hacer las cosas para adaptarnos a la nueva filosofa.
Arquitectura de ASP .NET

Configuracin (.config) Servicio Web XML (.asmx)
Framework de pginas
Pgina Web Forms (.aspx + fichero de clases) Pgina Web Forms (.aspx + fichero de clases)
Entorno de ejecucin de ASP .NET Gestin de estado

Seguridad, Cach, rendimiento Estado de la vista Estado de la sesin Estado de la aplicacin
ADO .NET
Proveedores de datos rdenes de datos Datasets
Entorno de ejecucin de .NET

Lenguaje y compilacin Depuracin Servicios del Sistema Operativo etc.
13
Anatoma de una pgina ASP .NET

Para estudiar las diferencias entre ASP y ASP .NET, comencemos creando nuestra primera pgina ASP .NET a mano, empleando slo el bloc de notas.
La pgina ms simple posible

En su forma ms simple, una pgina ASP .NET no es ms que HTML puro Cualquier fichero con la extensin .aspx ser procesado por el entorno en tiempo de ejecucin de .NET (aspnet_wp.exe) Si no hay ningn script en dicha pgina ni tampoco referencias a ningn cdigo externo (code-behind codefile) entonces la pgina es devuelta directamente al cliente
15
Ejemplo: Hola, mundo!

Guardar el siguiente documento como HolaMundo.aspx:
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mi primera pgina en ASP .NET</title> </head> <body> <h1>Mi primera pgina en ASP .NET</h1> <p>Hola, mundo!</p> </body> </html>
16
Ejecutar el ejemplo
Cpiese al directorio C:\Inetpub\wwwroot C:\Inetpub\
O bien a algn subdirectorio o directorio virtual
Y tecleamos en el navegador:
http://localhost/HolaMundo.aspx
17
Formularios Web
Veamos un ejemplo de formularios Web en HTML, para entender luego qu es lo que hace ASP .NET y cmo se relaciona con stos.
Formularios
Son la forma que hay en HTML de enviar datos
19
Ejemplo de formulario en HTML

... <form action="http://localhost/aspnet/formulario.asp" method="post"> <p> Nombre: <input type="text" name="nombre"/><br/> Apellidos: <input type="text" name="apellidos"/><br/> Qu sistema operativo utilizas?<br/> <select name="sistemaOperativo"> <option value="Windows 98">Windows 98</option> <option value="Windows 2000">Windows 2000</option> <option value="Windows XP">Windows XP</option> <option value="Linux/Unix">Linux/Unix</option> </select><br/> <input type="submit"/> </p> </form> ...
20
Formularios
Esos datos se envan al URL especificado en el atributo action de form Hay dos mtodos de envo
GET
Los datos se codifican en el propio URL
POST
Viajan ocultos en el propio mensaje HTTP
Es lo habitual
21
Recogida de los datos

Cmo se recogen esos datos en el servidor, en el URL especificado?
Depende de la tecnologa de pginas dinmicas que estemos empleando Veamos un ejemplo sencillo en ASP tradicional que muestre un mensaje personalizado en funcin de los datos introducidos en el formulario anterior
22
El Hola, Mundo! con Visual Studio .NET
Creacin del sitio web

Creamos un nuevo sitio web:
En File Site New Web
O a travs de la ventana de inicio, en proyectos recientes
24

Visual Studio 2005 elimina la necesidad de tener instalado el Internet Information Server
Se puede crear un sitio web en cualquier carpeta del sistema de ficheros local Para ello, especificaremos:
Location: File System
El lenguaje ser C# La plantilla a utilizar es ASP .NET Web Site
25
26
27
CodeCode-behind
Es una de las mejores caractersticas de ASP .NET
Y que es an mejor en ASP .NET 2.0 con las clases parciales
Permite separar el cdigo HTML de la lgica de programacin Adems, no hay que esperar a que el servidor web nos d los errores al mostrar la pgina, sino que podemos compilar el cdigo como cualquier otra clase
Y, con Visual Studio 2005, incluso depurar
28
CodeCode-behind
Pulsando en Default.aspx con el botn secundario y seleccionando View Code obtenemos:
29
Clases parciales
Ocultan gran parte del cdigo generado automticamente por Visual Studio 2005
Por ejemplo, aunque tenemos acceso a los controles de ASP .NET definidos en la pgina, no aparecen aqu como atributos de la clase Lo mismo con las suscripciones a eventos
Como veremos, se llama automticamente a los manejadores de eventos, sin que veamos la asociacin explcita entre el evento y su manejador, como ocurra en ASP .NET 1.0
30
Y los estndares?
Con ASP .NET 2.0 es posible generar cdigo XHTML Strict vlido Para ello, es necesario hacer lo siguiente:
Aadir al sitio web un fichero de configuracin (Web Web configuration file Web.config file) Aadir esta seccin:
<xhtmlConformance mode="Strict"/>
dentro de <system.web></system.web> <system.web>
31
El !DOCTYPE
Tambin es necesario cambiar el !DOCTYPE que nos genera por ste:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
E indicar el juego de caracteres de la pgina (en el <head>):

<meta http-equiv="Content-Type" http-equiv="Contentcontent="text/html; charset=iso-8859-1"/> charset=iso-8859-
32
Fichero Default.aspx
Representa la pgina en s
El cdigo HTML junto con los controles de ASP .NET
Lo renombraremos apropiadamente
Por ejemplo, HolaMundo.aspx
En Visual Studio, no hace falta escribir el cdigo de los controles a mano

Podemos arrastrar y soltar desde el Cuadro de Herramientas
La pestaa que est en el lateral izquierdo de la ventana Podemos modificar sus propiedades desde el cuadro de Propiedades
33
Hola, mundo! desde Visual Studio

Arrastramos un control estndar Label Podemos cambiar a la vista del diseador pulsando en la pestaa que est en la parte inferior izquierda de la ficha
<asp:Label ID="LabelTexto" runat="server" Text="Hola, mundo!"></asp:Label>
34
Comentarios
<asp:Label> es un Control Web de ASP .NET
Uno de los muchos incluidos en el Framework .NET
El atributo runat=server indica que se ejecutar en el servidor

Quien se encargar de generar el cdigo HTML apropiado para l
En este caso, simplemente envuelve el texto en un elemento <span> de HTML
Todos los controles Web de ASP .NET deben estar dentro de un formulario que tambin tenga el atributo runat=server
35
Probar la pgina
Con Build Build Web Site compilamos toda la aplicacin La ejecutamos en el men Debug Start Without Debugging
36
Depuracin
Si queremos depurar (Debug Start Debugging) (Debug Debugging) Y activar la depuracin en el fichero de configuracin
Nos pregunta si quiere que lo haga l automticamente
37
Resultado de la ejecucin
38
Cdigo HTML generado

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mi primera pgina en ASP .NET 2.0</title> </head> <body> <form method="post" action="HolaMundo2.aspx" id="Formulario"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJODExMDE5NzY5ZGTdbN3enHNBxNy+SDXXLonJDUrO3Q==" /> </div> <div> <span id="LabelTexto">Hola, mundo!</span> </div> </form> </body> </html>
39
Manejo de eventos
Uno de los mayores avances de ASP .NET sobre su predecesor es la capacidad del manejo de eventos desde una perspectiva orientada a objetos Veamos cmo hacer que al pulsar un botn en la pgina cambie el texto del mensaje
40
Eventos
Formas de aadir los manejadores de eventos: eventos:
Desde el cdigo HTML Desde la vista de diseo
Haciendo doble clic sobre el control se generar el manejador para el evento predefinido del control Tambin podemos crear cualquier otro manejador en la ventana de propiedades
41
Aadir un botn
... <form method=post runat=server> <asp:Label id=Mensaje text=Hola, Mundo! runat=server/><br/> <asp:Button onclick="CambiarSaludo" text="Plsame runat="server"/> </form> ...
Qu es lo que ponemos en el evento onclick?

El nombre de la funcin (realmente ser un mtodo de la clase correspondiente a esta pgina) que queremos que maneje dicho evento
Ser llamado automticamente cuando se produzca el evento
42
Definicin del manejador

Escribimos lo siguiente en el mtodo que nos genera:
...
protected void CambiarSaludo(object sender, EventArgs e) { Mensaje.Text = "Bienvenido a ASP .NET! }
...
43
Comentarios
Le hemos dado un identificador (id) a la etiqueta (Label) para poder acceder a ella por programa
Antes se lo daba ASP .NET automticamente por nosotros
En el manejador del botn modificamos su propiedad Text

(Los controles de .NET son clases que tienen sus correspondientes mtodos y propiedades)
Una vez pulsado el botn (el texto cambiar), qu ocurre si actualizamos la pgina?
44
Acerca del estado

Que el estado permanece
El texto no vuelve a ser el Hola, mundo! original, sino que queda con el ltimo valor
Cmo es posible esto?

Porque lo hace ASP .NET por nosotros
Todos los controles de un formulario mantienen los valores que tuvieran la ltima vez Esto lo hace ASP .NET a travs del campo _VIEWSTATE
Un elemento <input> oculto que mete automticamente en el formulario con un ristra de datos que contienen todos los valores de los campos
Es una caracterstica nueva de ASP .NET

45
Eventos en ASP .NET 1.0

La mayor parte del cdigo siguiente es transparente para el programador en ASP .NET 2.0.
Eventos de la pgina
Una pgina ASP .NET pasa por una serie de estados a lo largo de su ciclo de vida
1. 2. 3. 4.
Se inicializa la pgina
Se crean los objetos de los controles y se establecen los manejadores de eventos
Se procesa el estado de la vista (_VIEWSTATE), poblando los controles con los ltimos datos que tuvieran Se lanza el evento Load
Aqu es donde comenzaremos a escribir la lgica de nuestra pgina
Se llama a los manejadores de eventos correspondientes a las acciones de usuario que hayan tenido lugar
47
Eventos de la pgina
5. 6.
Se salva el estado de la vista Se muestra la pgina
48
Init
Es el primer evento que tiene lugar ASP .NET crea todos los controles de la pgina Visual Studio tambin aadir aqu los manejadores de los eventos de usuario que hayamos definido
override protected void OnInit(EventArgs e) { InitializeComponent(); base.OnInit(e); } private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } Comercio Electrnico (EUITIO). Curso 2007-2008 2007-
49
Eventos. Manejadores y delegados

Qu significa esta lnea?
this.Load += new System.EventHandler(this.Page_Load);
Es como nos suscribimos a los eventos en C#

Mediante lo que se denominan delegados
Asocia al evento Load de la pgina el mtodo Page_Load

Se llamar automticamente a dicho manejador cuando se produzca el evento Que deber concordar con la signatura del delegado
System.EventHandler
public delegate void EventHandler(object sender, EventArgs e);
50
Load
Este evento se produce justo despus de Init Aqu ya est disponible el estado de la vista
Ya podemos mirar qu valores tienen los controles y procesar la pgina como corresponda
La clase Page define una propiedad IsPostBack

Permite saber si es la primera vez que se llama a la pgina o si es que ya ha sido devuelta por el cliente Hay cdigo que con ASP .NET, al mantener el estado, slo necesitaramos ejecutar la primera vez
Por ejemplo, obtener datos de una base de datos para poblar los controles
51
Un manejador tpico para Load

private void Page_Load(object sender, System.EventArgs e) { // Cdigo que queremos que se ejecute cada vez (por ejemplo, // establecer la conexin a la base de datos que se usar luego // en el resto de la pgina) if (!IsPostBack) { // Cdigo que slo se ejecuta la primera vez (por ejemplo, // obtener datos de la base de datos para rellenar los controles) } else { // Cdigo que se ejecuta slo cuando la pgina ha sido devuelta // desde el cliente (por ejemplo, comprobaciones de los datos // introducidos por el cliente en un formulario) } }
52
Ms controles de ASP .NET

Ya hemos visto los controles Label y Button. Veamos ahora, mediante ejemplos, algunos otros de los que nos proporciona ASP .NET.
Mostrar la hora actual

Hacer una pgina que, al pulsar un botn, actualice la hora
Hgase uso de la clase DateTime de la biblioteca de .NET
Concretamente, DateTime.Now devuelve la hora actual
Luego, llamar a sus propiedades Hour, Minute y Second, y al mtodo ToString de cada una de ellas para aadirlas al campo
Label
54
Control CheckBox
La tpica casilla de verificacin Tiene un mtodo Checked que permite saber si est seleccionada o no
55
Ejercicio
Aadir, al ejemplo anterior, una casilla que permita seleccionar si se quieren mostrar los segundos o no
56
Controles de tabla
Permiten crear una tabla de HTML:
<table> <tr> <td>(1, <td>(1, <td>(1, </tr> <tr> <td>(2, <td>(2, <td>(2, </tr> </table> 1)</td> 2)</td> 3)</td>
(1, 1) (2, 1)
(1, 2) (2, 2)
(1, 3) (2, 3)
1)</td> 2)</td> 3)</td>
57
Controles de tabla
ASP .NET proporciona los siguientes controles Web bsicos para crear una tabla (hay otros ms complejos):
Table TableRow TableCell
58
Ejercicio
Crear dinmicamente una tabla para mostrar los contenidos de dos colecciones como stas:
private string[] peliculas = new string[] { "El ro de la vida", "You're the one", "El abuelo", "Historia de un beso", "La leyenda de Bagger Vance", "Un lugar llamado Milagro" }; private string[] ao = new string[] { "1992", "2000", "1998", "2002", "2000", "1988" };
59

Introduccion A ASP .NET 2.0

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduccion A ASP .NET 2.0

Cargado por

Copyright:

Formatos disponibles

Prctica 2 Introduccin a ASP .NET 2.

Este enfoque puede ser perfectamente vlido para muchos sitios

Funcionamiento de las pginas estticas

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Funcionamiento de las pginas dinmicas

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Dicho servidor ya viene de manera predeterminada en las ltimas versiones de Windows

Cmo probar si est instalado?

Si no decimos nada, por omisin asume VBScript

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Ejemplo: mi primera pgina ASP

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Ejemplo de pgina ASP

server-side evaluation syntax

interspersed server-side script

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Arquitectura de ASP .NET

Entorno de ejecucin de ASP .NET Gestin de estado

Entorno de ejecucin de .NET

Anatoma de una pgina ASP .NET

La pgina ms simple posible

Ejemplo: Hola, mundo!

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Ejemplo de formulario en HTML

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Recogida de los datos

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

El Hola, Mundo! con Visual Studio .NET

Creacin del sitio web

O a travs de la ventana de inicio, en proyectos recientes

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Creacin del sitio web

El lenguaje ser C# La plantilla a utilizar es ASP .NET Web Site

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Creacin del sitio web

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

dentro de <system.web></system.web> <system.web>

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

E indicar el juego de caracteres de la pgina (en el <head>):

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

En Visual Studio, no hace falta escribir el cdigo de los controles a mano

Hola, mundo! desde Visual Studio

<asp:Label ID="LabelTexto" runat="server" Text="Hola, mundo!"></asp:Label>

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

El atributo runat=server indica que se ejecutar en el servidor

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Cdigo HTML generado

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

Qu es lo que ponemos en el evento onclick?

Definicin del manejador

Comercio Electrnico (EUITIO). Curso 2007-2008 2007-

En el manejador del botn modificamos su propiedad Text