Práctica 2 Introducción a ASP NET 2 0

Document Sample
Práctica 2 Introducción a ASP NET 2 0 Powered By Docstoc
					        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