Prctica 2 Introduccin a ASP 'NET 2'0

1
Práctica 2Introducción a ASP .NET 2.0
Comercio Electrónico

• Universidad de Oviedo

2
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

3
Funcionamiento de las páginas estáticas
4
Funcionamiento de las páginas dinámicas
5
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

6
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.

7
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/

8
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 lt gt

9
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

10
Ejemplo mi primera página ASP

• Será cómo no! el archiconocido Hola, mundo
• La página siguiente escribe dinámicamente el
  mensaje

lthtmlgt ltheadgt lttitlegtMi primera página
ASPlt/titlegt lt/headgt ltbodygt lth1gt
lt Response.Write Hola, mundo!" gt (mi
primera página ASP) lt/h1gt lt/bodygt lt/htmlgt
11
Ejemplo de página ASP
test.asp
server-side directive
lt_at_ languagejavascript gt ltscript
language'JScript' runat'server'gt function
Add(x, y) return xy lt/scriptgt lthtmlgt
ltbodygt lth1gtTest ASP Pagelt/h1gt lth2gt22ltAdd(2,2)
gtlt/h2gt lttable border'2'gt lt for (var i0 ilt10
i) gt lttrgtlttdgtRowltigt Col0lt/tdgtlttdgtRowlti
gt Col1lt/tdgtlt/trgt lt gt lt/tablegt lt
Response.Write("lth2gtWritten directly to
Responselt/h2gt") gt lt/bodygt lt/htmlgt
lt_at_ languagejavascript gt
server-side function
server-side evaluation syntax
lt
gt
lt
gt
lt
gt
lt
gt
lt
gt
interspersed server-side script
lt
gt
12
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.

13
Arquitectura de ASP .NET
Framework de páginas
Página Web Forms (.aspx fichero de clases)
Página Web Forms (.aspx fichero de clases)
Configuración (.config)
Servicio Web XML (.asmx)
Entorno de ejecución de ASP .NET
Gestión de estado
Estado de la vista Estado de la sesión Estado de
la aplicación
Seguridad, Caché, rendimiento
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.
14
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.

15
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

16
Ejemplo Hola, mundo!

• Guardar el siguiente documento como
  HolaMundo.aspx

lt?xml version"1.0" encoding"ISO-8859-1"?gt lt!DOCT
YPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-strict.dtd"gt lthtml xmlns"http//www.w3.or
g/1999/xhtml"gt ltheadgt lttitlegtMi primera
página en ASP .NETlt/titlegt lt/headgt ltbodygt
lth1gtMi primera página en ASP .NETlt/h1gt
ltpgtHola, mundo!lt/pgt lt/bodygt lt/htmlgt
17
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

18
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.

19
Formularios

• Son la forma que hay en HTML de enviar datos

20
Ejemplo de formulario en HTML
... ltform action"http//localhost/aspnet/formular
io.asp" method"post"gt ltpgt Nombre ltinput
type"text" name"nombre"/gtltbr/gt Apellidos
ltinput type"text" name"apellidos"/gtltbr/gt
Qué sistema operativo utilizas?ltbr/gt ltselect
name"sistemaOperativo"gt ltoption
value"Windows 98"gtWindows 98lt/optiongt
ltoption value"Windows 2000"gtWindows
2000lt/optiongt ltoption value"Windows
XP"gtWindows XPlt/optiongt ltoption
value"Linux/Unix"gtLinux/Unixlt/optiongt
lt/selectgtltbr/gt ltinput type"submit"/gt
lt/pgt lt/formgt ...
21
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

22
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

23
El Hola, Mundo! conVisual Studio .NET
24
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

25
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

26
Creación del sitio web
27
(No Transcript)
28
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

29
Code-behind

• Pulsando en Default.aspx con el botón secundario
  y seleccionando View Code obtenemos

30
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

31
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
• ltxhtmlConformance mode"Strict"/gt
• dentro de ltsystem.webgtlt/system.webgt

32
El !DOCTYPE

• También es necesario cambiar el !DOCTYPE que nos
  genera por éste
• lt!DOCTYPE html PUBLIC
• "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http//www.w3.org/TR/xhtml1/DTD/xhtml1-str
  ict.dtd"gt
• E indicar el juego de caracteres de la página (en
  el ltheadgt)
• ltmeta http-equiv"Content-Type"
  content"text/html charsetiso-8859-1"/gt

33
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

34
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

ltaspLabel ID"LabelTexto" runat"server"
Text"Hola, mundo!"gtlt/aspLabelgt
35
Comentarios

• ltaspLabelgt es un Control Web de ASP .NET
• Uno de los muchos incluidos en el Framework .NET
• El atributo runatserver 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 ltspangt de HTML
• Todos los controles Web de ASP .NET deben estar
  dentro de un formulario que también tenga el
  atributo runatserver

36
Probar la página

• Con Build ? Build Web Site compilamos toda la
  aplicación
• La ejecutamos en el menú Debug ? Start Without
  Debugging

37
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

38
Resultado de la ejecución
39
Código HTML generado
lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-strict.dtd"gt lthtml xmlns"http//www.w3.or
g/1999/xhtml"gt ltheadgt lttitlegtMi primera página
en ASP .NET 2.0lt/titlegt lt/headgt ltbodygt ltform
method"post" action"HolaMundo2.aspx"
id"Formulario"gt ltdivgt ltinput
type"hidden" name"__VIEWSTATE" id"__VIEWSTATE"
value"/wEPDwUJODExMDE5NzY5ZGTdbN3enHNBxNy
SDXXLonJDUrO3Q" /gt lt/divgt ltdivgt
ltspan id"LabelTexto"gtHola, mundo!lt/spangt
lt/divgt lt/formgt lt/bodygt lt/htmlgt
40
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

41
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

42
Añadir un botón
... ltform methodpost runatservergt
ltaspLabel idMensaje textHola, Mundo!
runatserver/gtltbr/gt ltaspButton
onclick"CambiarSaludo" text"Púlsame
runat"server"/gt lt/formgt ...

• 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

43
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! ...
44
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?

45
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 ltinputgt 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

46
Eventos en ASP .NET 1.0

• La mayor parte del código siguiente es
  transparente para el programador en ASP .NET 2.0.

47
Eventos de la página

• Una página ASP .NET pasa por una serie de estados
  a lo largo de su ciclo de vida
• Se inicializa la página
• 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 lógica
  de nuestra página
• Se llama a los manejadores de eventos
  correspondientes a las acciones de usuario que
  hayan tenido lugar

48
Eventos de la página

• Se salva el estado de la vista
• Se muestra la página

49
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) pr
ivate void InitializeComponent()
this.Load new System.EventHandler(this.Page_Loa
d)
50
Eventos. Manejadores y delegados

• Qué significa esta línea?
• this.Load new System.EventHandler(this.Page_Loa
  d)
• 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)
51
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

52
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)

53
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.

54
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

55
Control CheckBox

• La típica casilla de verificación
• Tiene un método Checked que permite saber si está
  seleccionada o no

56
Ejercicio

• Añadir, al ejemplo anterior, una casilla que
  permita seleccionar si se quieren mostrar los
  segundos o no

57
Controles de tabla

• Permiten crear una tabla de HTML
• lttablegt
• lttrgt
• lttdgt(1, 1)lt/tdgt
• lttdgt(1, 2)lt/tdgt
• lttdgt(1, 3)lt/tdgt
• lt/trgt
• lttrgt
• lttdgt(2, 1)lt/tdgt
• lttdgt(2, 2)lt/tdgt
• lttdgt(2, 3)lt/tdgt
• lt/trgt
• lt/tablegt

58
Controles de tabla

• ASP .NET proporciona los siguientes controles Web
  básicos para crear una tabla (hay otros más
  complejos)
• Table
• TableRow
• TableCell

59
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"