Get documents about "Práctica 2 Introducción a ASP NET 2 0
Document Sample
Práctica 2
Introducción a ASP .NET 2.0
Comercio Electrónico
Universidad de Oviedo
Páginas estáticas
Al principio, el Web estaba poblado únicamente por páginas
estáticas
El servidor Web simplemente localizaba el documento solicitado en el URL
y se lo entregaba al cliente
Este enfoque puede ser perfectamente válido para muchos
sitios
Siempre y cuando no requieran actualizaciones continuas, ya que hay que
eso implica o bien modificar, a mano, las páginas existentes, o bien crear
una nueva
Pero no permitiría, por ejemplo, crear un sitio de comercio
electrónico donde se pueda comprar, o el de un banco
Es necesario acceder a datos en el servidor y crear una página a petición
Comercio Electrónico (EUITIO). Curso 2007-2008
2
Funcionamiento de las páginas
estáticas
Comercio Electrónico (EUITIO). Curso 2007-2008
3
Funcionamiento de las páginas
dinámicas
Comercio Electrónico (EUITIO). Curso 2007-2008
4
Modo de funcionamiento
El esquema de funcionamiento de las páginas
dinámicas es siempre similar independientemente de
en qué se hayan desarrollado éstas
CGI, ASP, Servlets/JSP…
El servidor Web detecta una petición de una página
dinámica y se la pasa al programa necesario
Podría ser una extensión del servidor
O bien un programa completamente independiente
Este programa es quien sabe cómo interpretar el
código de la página para devolver el HTML apropiado
Comercio Electrónico (EUITIO). Curso 2007-2008
5
Introducción a ASP
Antes de empezar a estudiar ASP .NET,
echemos un vistazo a la versión anterior
de la tecnología de páginas dinámicas
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, podríamos hacerlo a través de la opción de Añadir o
quitar componentes de Windows del Panel de Control
¿Cómo probar si está instalado?
– Teclear en el navegador http://localhost/
Comercio Electrónico (EUITIO). Curso 2007-2008
7
Sintaxis general
ASP, al igual que las JSP de Java, se basa en
mezclar instrucciones de programación en nuestras
páginas HTML
El motor de ASP procesará dichas instrucciones
dinámicamente y obviará el HTML
Esto permite generar HTML dinámicamente, añadiendo lógica
a nuestras páginas
Para ello, hay que encerrar el código ASP entre los
símbolos <% %>
Comercio Electrónico (EUITIO). Curso 2007-2008
8
Lenguaje de programación
¿Y en qué lenguaje se escriben esas instrucciones?
ASP permite el uso de dos lenguajes:
Visual Basic Script (VBScript)
JScript (como denomina Microsoft a su implementación de
ECMAScript –que a su vez es el estándar de JavaScript–)
Si no decimos nada, por omisión asume VBScript
Comercio Electrónico (EUITIO). Curso 2007-2008
9
Ejemplo: mi primera página ASP
Será –¡cómo no!– el archiconocido “Hola, mundo”
La página siguiente escribe dinámicamente el
mensaje
<html>
<head>
<title>Mi primera página ASP</title>
</head>
<body>
<h1>
<% Response.Write “¡Hola, mundo!" %>
(mi primera página ASP)
</h1>
</body>
</html>
Comercio Electrónico (EUITIO). Curso 2007-2008
10
Ejemplo de página ASP
test.asp
server-side <%@ language=javascript %>
directive
<script language='JScript' runat='server'>
server-side
function Add(x, y)
function
{
return x+y;
}
</script>
<html> <body>
<h1>Test ASP Page</h1>
server-side
<% %>
<h2>2+2=<%=Add(2,2)%></h2>
evaluation
<table border='2'>
syntax
<% for (var i=0; i<10; i++) { %>
<% %> <% %>
<tr><td>Row<%=i%> Col0</td><td>Row<%=i%> Col1</td></tr>
<% } %>
</table>
interspersed
<% Response.Write("<h2>Written directly to Response</h2>"); %>
server-side
script
</body> </html>
Comercio Electrónico (EUITIO). Curso 2007-2008
11
ASP .NET
Es mucho más que la siguiente versión de ASP.
Realmente, tiene poco que ver con el ASP tradicional;
supone un rediseño completo, integrado en la plataforma
.NET, y hay que cambiar la forma de hacer las cosas para
adaptarnos a la nueva filosofía.
Arquitectura de ASP .NET Framework de páginas
Página Web Página Web
Configuración Servicio Web XML Forms Forms
(.config) (.asmx) (.aspx + fichero (.aspx + fichero
de clases) de clases)
Entorno de ejecución de ASP .NET
Gestión de estado
Seguridad, Caché, Estado de la vista
rendimiento… Estado de la sesión
Estado de la aplicación
ADO .NET
Proveedores de datos
Órdenes de datos
Datasets
Entorno de ejecución de .NET
Lenguaje y compilación
Depuración
Servicios del Sistema Operativo
etc.
Comercio Electrónico (EUITIO). Curso 2007-2008
13
Anatomía de una página ASP .NET
Para estudiar las diferencias entre ASP y
ASP .NET, comencemos creando nuestra
primera página ASP .NET a mano,
empleando sólo el bloc de notas.
La página más simple posible
En su forma más simple, una página ASP .NET no es
más que HTML puro
Cualquier fichero con la extensión .aspx será
procesado por el entorno en tiempo de ejecución de
.NET (aspnet_wp.exe)
Si no hay ningún script en dicha página ni tampoco
referencias a ningún código externo (“code-behind
file”) entonces la página es devuelta directamente al
cliente
Comercio Electrónico (EUITIO). Curso 2007-2008
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 página en ASP .NET</title>
</head>
<body>
<h1>Mi primera página en ASP .NET</h1>
<p>¡Hola, mundo!</p>
</body>
</html>
Comercio Electrónico (EUITIO). Curso 2007-2008
16
Ejecutar el ejemplo
Cópiese al directorio C:\Inetpub\wwwroot
O bien a algún subdirectorio o directorio virtual
Y tecleamos en el navegador:
http://localhost/HolaMundo.aspx
Comercio Electrónico (EUITIO). Curso 2007-2008
17
Formularios Web
Veamos un ejemplo de formularios Web en
HTML, para entender luego qué es lo que
hace ASP .NET y cómo se relaciona con
éstos.
Formularios
Son la forma que hay en HTML de enviar datos
Comercio Electrónico (EUITIO). Curso 2007-2008
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>
...
Comercio Electrónico (EUITIO). Curso 2007-2008
20
Formularios
Esos datos se envían al URL especificado en el
atributo action de form
Hay dos métodos de envío
GET
– Los datos se codifican en el propio URL
POST
– Viajan ocultos en el propio mensaje HTTP
Es lo habitual
Comercio Electrónico (EUITIO). Curso 2007-2008
21
Recogida de los datos
¿Cómo se recogen esos datos en el servidor, en el
URL especificado?
Depende de la tecnología de páginas dinámicas que estemos
empleando
Veamos un ejemplo sencillo en ASP tradicional que muestre
un mensaje personalizado en función de los datos
introducidos en el formulario anterior
Comercio Electrónico (EUITIO). Curso 2007-2008
22
El “¡Hola, Mundo!” con
Visual Studio .NET
Creación del sitio web
Creamos un nuevo sitio web:
En File → New Web
Site…
O a través de la ventana de
inicio, en “proyectos
recientes”
Comercio Electrónico (EUITIO). Curso 2007-2008
24
Creación del sitio web
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
Comercio Electrónico (EUITIO). Curso 2007-2008
25
Creación del sitio web
Comercio Electrónico (EUITIO). Curso 2007-2008
26
Comercio Electrónico (EUITIO). Curso 2007-2008
27
Code-behind
Es una de las mejores características de ASP .NET
Y que es aún mejor en ASP .NET 2.0 con las “clases
parciales”
Permite separar el código HTML de la lógica de
programación
Además, no hay que esperar a que el servidor web
nos dé los errores al mostrar la página, sino que
podemos compilar el código como cualquier otra
clase
Y, con Visual Studio 2005, incluso depurar
Comercio Electrónico (EUITIO). Curso 2007-2008
28
Code-behind
Pulsando en Default.aspx con el botón
secundario y seleccionando View Code obtenemos:
Comercio Electrónico (EUITIO). Curso 2007-2008
29
Clases parciales
Ocultan gran parte del código generado
automáticamente por Visual Studio 2005
Por ejemplo, aunque tenemos acceso a los controles de ASP
.NET definidos en la página, no aparecen aquí como atributos
de la clase
Lo mismo con las suscripciones a eventos
– Como veremos, se llama automáticamente a los manejadores de
eventos, sin que veamos la asociación explícita entre el evento y su
manejador, como ocurría en ASP .NET 1.0
Comercio Electrónico (EUITIO). Curso 2007-2008
30
¿Y los estándares?
Con ASP .NET 2.0 es posible generar código XHTML
Strict válido
Para ello, es necesario hacer lo siguiente:
Añadir al sitio web un fichero de configuración (Web
configuration file) Web.config
Añadir esta sección:
<xhtmlConformance mode="Strict"/>
dentro de <system.web>…</system.web>
Comercio Electrónico (EUITIO). Curso 2007-2008
31
El !DOCTYPE
También 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-strict.dtd">
E indicar el juego de caracteres de la página (en el
<head>):
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"/>
Comercio Electrónico (EUITIO). Curso 2007-2008
32
Fichero Default.aspx
Representa la página en sí
El código HTML junto con los controles de ASP .NET
Lo renombraremos apropiadamente
Por ejemplo, HolaMundo.aspx
En Visual Studio, no hace falta escribir el código de
los controles a mano
Podemos arrastrar y soltar desde el Cuadro de Herramientas
– La pestaña que está en el lateral izquierdo de la ventana
– Podemos modificar sus propiedades desde el cuadro de Propiedades
Comercio Electrónico (EUITIO). Curso 2007-2008
33
“¡Hola, mundo!” desde Visual Studio
Arrastramos un control estándar Label
Podemos cambiar a la vista del
diseñador pulsando en la pestaña que
está en la parte inferior izquierda de la
ficha
<asp:Label ID="LabelTexto" runat="server"
Text="¡Hola, mundo!"></asp:Label>
Comercio Electrónico (EUITIO). Curso 2007-2008
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 código 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 también tenga el atributo runat=“server”
Comercio Electrónico (EUITIO). Curso 2007-2008
35
Probar la página
Con Build → Build Web Site compilamos toda la
aplicación
La “ejecutamos” en el menú Debug → Start Without
Debugging
Comercio Electrónico (EUITIO). Curso 2007-2008
36
Depuración
Si queremos depurar (Debug → Start Debugging)
Y activar la depuración en el fichero de
configuración
Nos pregunta si quiere que lo haga él automáticamente
Comercio Electrónico (EUITIO). Curso 2007-2008
37
Resultado de la ejecución
Comercio Electrónico (EUITIO). Curso 2007-2008
38
Código 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 página 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>
Comercio Electrónico (EUITIO). Curso 2007-2008
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 cómo hacer que al pulsar un botón en la
página cambie el texto del mensaje
Comercio Electrónico (EUITIO). Curso 2007-2008
40
Eventos
Formas de añadir los manejadores de eventos:
Desde el código HTML
Desde la vista de diseño
– Haciendo doble clic sobre el control se generará el manejador para el
evento predefinido del control
– También podemos crear cualquier otro manejador en la ventana de
propiedades
Comercio Electrónico (EUITIO). Curso 2007-2008
41
Añadir un botón
...
<form method=“post” runat=“server”>
<asp:Label id=“Mensaje” text=“¡Hola, Mundo!”
runat=“server”/><br/>
<asp:Button onclick="CambiarSaludo" text="Púlsame“
runat="server"/>
</form>
...
¿Qué es lo que ponemos en el evento onclick?
El nombre de la función (realmente será un método de la clase
correspondiente a esta página) que queremos que maneje
dicho evento
– Será llamado automáticamente cuando se produzca el evento
Comercio Electrónico (EUITIO). Curso 2007-2008
42
Definición del manejador
Escribimos lo siguiente en el método que nos
genera:
...
protected void CambiarSaludo(object sender,
EventArgs e)
{
Mensaje.Text = "¡Bienvenido a ASP .NET!“
}
...
Comercio Electrónico (EUITIO). Curso 2007-2008
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 automáticamente por nosotros
En el manejador del botón modificamos su
propiedad Text
(Los controles de .NET son clases que tienen sus
correspondientes métodos y propiedades)
Una vez pulsado el botón (el texto cambiará), ¿qué
ocurre si actualizamos la página?
Comercio Electrónico (EUITIO). Curso 2007-2008
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
¿Cómo 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 través del campo _VIEWSTATE
Un elemento <input> oculto que mete automáticamente en el
formulario con un ristra de datos que contienen todos los valores de los
campos
– Es una característica nueva de ASP .NET
Comercio Electrónico (EUITIO). Curso 2007-2008
45
Eventos en ASP .NET 1.0
La mayor parte del código siguiente es transparente
para el programador en ASP .NET 2.0.
Eventos de la página
Una página ASP .NET pasa por una serie de
estados a lo largo de su ciclo de vida
1. Se inicializa la página
Se crean los objetos de los controles y se establecen los
manejadores de eventos
2. Se procesa el estado de la vista (_VIEWSTATE), poblando
los controles con los últimos datos que tuvieran
3. Se lanza el evento Load
Aquí es donde comenzaremos a escribir la lógica de nuestra página
4. Se llama a los manejadores de eventos correspondientes a
las acciones de usuario que hayan tenido lugar
Comercio Electrónico (EUITIO). Curso 2007-2008
47
Eventos de la página
5. Se salva el estado de la vista
6. Se muestra la página
Comercio Electrónico (EUITIO). Curso 2007-2008
48
Init
Es el primer evento que tiene lugar
ASP .NET crea todos los controles de la página
Visual Studio también añadirá 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 Electrónico (EUITIO). Curso 2007-2008
49
Eventos. Manejadores y delegados
¿Qué significa esta línea?
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 página el método Page_Load
Se llamará automáticamente 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);
Comercio Electrónico (EUITIO). Curso 2007-2008
50
Load
Este evento se produce justo después de Init
Aquí ya está disponible el estado de la vista
Ya podemos mirar qué valores tienen los controles y procesar la página
como corresponda
La clase Page define una propiedad IsPostBack
Permite saber si es la primera vez que se llama a la página o si es que ya
ha sido devuelta por el cliente
Hay código que con ASP .NET, al mantener el estado, sólo necesitaríamos
ejecutar la primera vez
– Por ejemplo, obtener datos de una base de datos para poblar los controles
Comercio Electrónico (EUITIO). Curso 2007-2008
51
Un manejador típico para Load
private void Page_Load(object sender, System.EventArgs e)
{
// Código que queremos que se ejecute cada vez (por ejemplo,
// establecer la conexión a la base de datos que se usará luego
// en el resto de la página)
if (!IsPostBack)
{
// Código que sólo se ejecuta la primera vez (por ejemplo,
// obtener datos de la base de datos para rellenar los controles)
}
else
{
// Código que se ejecuta sólo cuando la página ha sido devuelta
// desde el cliente (por ejemplo, comprobaciones de los datos
// introducidos por el cliente en un formulario)
}
}
Comercio Electrónico (EUITIO). Curso 2007-2008
52
Más 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 página que, al pulsar un botón, actualice
la hora
Hágase 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 método
ToString de cada una de ellas para añadirlas al campo Label
Comercio Electrónico (EUITIO). Curso 2007-2008
54
Control CheckBox
La típica casilla de verificación
Tiene un método Checked que permite saber si está
seleccionada o no
Comercio Electrónico (EUITIO). Curso 2007-2008
55
Ejercicio
Añadir, al ejemplo anterior, una casilla que permita
seleccionar si se quieren mostrar los segundos o no
Comercio Electrónico (EUITIO). Curso 2007-2008
56
Controles de tabla
Permiten crear una tabla de HTML:
<table>
<tr>
<td>(1, 1)</td>
<td>(1, 2)</td>
(1, 1) (1, 2) (1, 3)
<td>(1, 3)</td>
</tr>
<tr> (2, 1) (2, 2) (2, 3)
<td>(2, 1)</td>
<td>(2, 2)</td>
<td>(2, 3)</td>
</tr>
</table>
Comercio Electrónico (EUITIO). Curso 2007-2008
57
Controles de tabla
ASP .NET proporciona los siguientes controles Web
básicos para crear una tabla (hay otros más
complejos):
Table
TableRow
TableCell
Comercio Electrónico (EUITIO). Curso 2007-2008
58
Ejercicio
Crear dinámicamente una tabla para mostrar los
contenidos de dos colecciones como éstas:
private string[] peliculas = new string[] { "El río de la vida",
"You're the one",
"El abuelo",
"Historia de un beso",
"La leyenda de Bagger Vance",
"Un lugar llamado Milagro" };
private string[] año = new string[] { "1992", "2000", "1998",
"2002", "2000", "1988" };
Comercio Electrónico (EUITIO). Curso 2007-2008
59
Related docs
