programa microsoft desarrollador cinco estrella2

17
1 Programa Microsoft Desarrollador Cinco Estrellas Estrella 2 Introducción al desarrollo de aplicaciones Web con ASP.NET Objetivo El presente curso de entrenamiento introduce el desarrollo de aplicaciones web presentando ASP.NET 2.0 como framework (marco) de desarrollo, para que el alumno pueda conocer y aprovechar al máximo el potencial de esta tecnología. Esta sección incluye tanto las características nuevas, como aquellas que han sido modificadas; aplicando lo aprendido en los cursos anteriores del programa Desarrollador 5 Estrellas. Acompañan al presente material teórico una serie de ejercicios de ejemplo y guías, desarrollados en Visual C# y en Visual Basic .NET, que sirven de apoyo al alumno en el proceso del aprendizaje. Se recomienda la realización de los ejercicios propuestos, la lectura del material adicional de referencia asi como también la lectura y ejecución de los ejemplos para lograr una formación completa en el tema. Conocer los elementos involucrados en el desarrollo de una aplicación web con Visual Studio 2005 y la plataforma Microsoft .NET, presentando las novedades introducidas al respecto en la nueva versión 2.0 Prerrequisitos Se recomienda además, tener conocimientos básicos de HTML y acceso a bases de datos relacionales mediante el lenguaje SQL. Puede encontrar material de referencia acerca de HTML y tecnologías relacionadas en el siguiente sitio web: http://msdn.microsoft.com/library/default.asp?url=/library/en- us/dnanchor/html/anch_webdev.asp Haber cursado y aprobado el módulo correspondiente a la Estrella 1 del programa Desarrollador 5 Estrellas Para realizar los ejercicios y ver los ejemplos de código adjunto necesita: Herramienta de Desarrollo MS Visual Studio 2005 ó MS Visual Web Developer 2005 Express Base de Datos MS SQL 2005 Express Edition Aplicaciones Web – ASP.NET HTTP define como los navegadores y los servidores Web se comunican uno con otro. En una aplicación web, el componente principal es el HTML Form, que es el elemento de html que contiene los controles de la interfaz de usuario de cada página y captura la entrada de datos del usuario. El HTML Form es la porción de la página que es enviada a través del protocolo HTTP al servidor para procesar el pedido realizado por el usuario. Hay dos modos de envío de formularios al servidor: Get y Post. 2 El primero envía los datos ingresados en el formulario como una cadena de consulta, el segundo envía los datos en el cuerpo del pedido. Para mas información, consulte el material de referencia al final del curso. Una aplicación web es un conjunto de páginas HTML que se transmiten por medio del protocolo HTTP de un servidor al cliente y viceversa, brindando distintas funcionalidades a un usuario final. ASP.NET es un “Marco” (framework) para programar aplicaciones web, de un modo similar al que se programan las aplicaciones windows. El componente principal son los Web Forms (formularios web) que permiten, entre otras cosas, separar la interfaz del usuario de la funcionalidad de la aplicación. Aplicaciones Web - Servidor Web Un servidor web es un sistema informático conectado a una red, donde se almacenan las páginas, imágenes, etc. (que forman una aplicación web) disponibles para ser visitadas por los usuarios de la red. Internet Information Server (IIS), es el servidor Web de Microsoft que corre sobre plataformas Windows. Los servicios que ofrece son: FTP, SMTP, NNTP y HTTP/HTTPS Hypertext Transfer Protocol (HTTP) Uno de los protocolos más importantes de Internet HTTP define como los navegadores y los servidores Web se comunican uno con otro Esta basado en texto y es transmitido sobre conexiones TCP Funcionamiento de HTTP Pagina solicitada inicio.html <html> <body> Bienvenidos al Curso ASP.NET </body> </html> www.cursoas pnet.com http://www.cursoaspnet.com/inicio.htm IP=66.45.26.25 inicio.html <html> <body> Bienvenidos al Curso ASP.NET </body> </html> Interne Servidor Cliente HTTP Request HTTP Response

Upload: david-torres

Post on 01-Jul-2015

755 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Programa Microsoft Desarrollador Cinco Estrella2

1

Programa Microsoft Desarrollador Cinco Estrellas

Estrella 2 Introducción al desarrollo de aplicaciones Web con ASP.NET

Objetivo

El presente curso de entrenamiento introduce el desarrollo de aplicaciones web presentando ASP.NET 2.0 como framework (marco) de desarrollo, para que el alumno pueda conocer y aprovechar al máximo el potencial de esta tecnología.

Esta sección incluye tanto las características nuevas, como aquellas que han sido modificadas; aplicando lo aprendido en los cursos anteriores del programa Desarrollador 5 Estrellas.

Acompañan al presente material teórico una serie de ejercicios de ejemplo y guías, desarrollados en Visual C# y en Visual Basic .NET, que sirven de apoyo al alumno en el proceso del aprendizaje. Se recomienda la realización de los ejercicios propuestos, la lectura del material adicional de referencia asi como también la lectura y ejecución de los ejemplos para lograr una formación completa en el tema.

∞ Conocer los elementos involucrados en el desarrollo de una aplicación web con Visual Studio 2005 y la plataforma Microsoft .NET, presentando las novedades introducidas al respecto en la nueva versión 2.0

Prerrequisitos

Se recomienda además, tener conocimientos básicos de HTML y acceso a bases de datos relacionales mediante el lenguaje SQL.

Puede encontrar material de referencia acerca de HTML y tecnologías relacionadas en el siguiente sitio web:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnanchor/html/anch_webdev.asp

� Haber cursado y aprobado el módulo correspondiente a la Estrella 1 del programa Desarrollador 5 Estrellas

� Para realizar los ejercicios y ver los ejemplos de código adjunto necesita:

� Herramienta de Desarrollo

� MS Visual Studio 2005 ó

� MS Visual Web Developer 2005 Express

� Base de Datos

� MS SQL 2005 Express Edition

Aplicaciones Web – ASP.NET

HTTP define como los navegadores y los servidores Web se comunican uno con otro.

En una aplicación web, el componente principal es el HTML Form, que es el elemento de html que contiene los controles de la interfaz de usuario de cada página y captura la entrada de datos del usuario. El HTML Form es la porción de la página que es enviada a través del protocolo HTTP al servidor para procesar el pedido realizado por el usuario.

Hay dos modos de envío de formularios al servidor: Get y Post.

2

El primero envía los datos ingresados en el formulario como una cadena de consulta, el segundo envía los datos en el cuerpo del pedido.

Para mas información, consulte el material de referencia al final del curso.

• Una aplicación web es un conjunto de páginas HTML que se transmiten por medio del protocolo HTTP de un servidor al cliente y viceversa, brindando distintas funcionalidades a un usuario final.

• ASP.NET es un “Marco” (framework) para programar aplicaciones web, de un modo similar al que se programan las aplicaciones windows. El componente principal son los Web Forms (formularios web) que permiten, entre otras cosas, separar la interfaz del usuario de la funcionalidad de la aplicación.

Aplicaciones Web - Servidor Web

• Un servidor web es un sistema informático conectado a una red, donde se almacenan las páginas, imágenes, etc. (que forman una aplicación web) disponibles para ser visitadas por los usuarios de la red.

• Internet Information Server (IIS), es el servidor Web de Microsoft que corre sobre plataformas Windows. Los servicios que ofrece son: FTP, SMTP, NNTP y HTTP/HTTPS

Hypertext Transfer Protocol (HTTP)

• Uno de los protocolos más importantes de Internet

• HTTP define como los navegadores y los servidores Web se comunican uno con otro

• Esta basado en texto y es transmitido sobre conexiones TCP

Funcionamiento de HTTP

Pagina solicitada

inicio.html

<html>

<body>

Bienvenidos al

Curso ASP.NET

</body>

</html>

www.cursoas

pnet.com

http://www.cursoaspnet.com/inicio.htm

IP=66.45.26.25

inicio.html <html> <body> Bienvenidos al Curso ASP.NET </body> </html>

InterneServidor

Cliente

HTTP Request

HTTP Response

Page 2: Programa Microsoft Desarrollador Cinco Estrella2

3

HTTP Request

GET /inicio.html HTTP/1.1

Accept: */*

Accept-Language:...

Accept-Encoding:...

If-Modified-Since:...

If-None-Match:...

User-Agent: Mozilla/4.0...

Host: www.cursoaspnet.com

Connection: Keep-Alive

[blank line]

HTTP Response

HTTP/1.1 200 OK

Server: Microsoft-IIS/5.0

Date: ...

Content-Type: text/html

Accept-Ranges: bytes

Last-Modified: ...

ETag: ...

Content-Length: 46

[blank line]

<html>

<body>

Bienvenidos al Curso ASP.NET

</body>

</html>

HTML Forms

• En el corazón de toda aplicación Web genuina están los HTML Forms

• Un HTML Form es la porción de un documento HTML que aparece entre las etiquetas <form></form>

Suma.html <html> <body> <form> <input type="text" name="op1" /> + <input type="text" name="op2" /> <input type="submit" value=" = " /> </form> </body>

4

HTML Forms (Cont.)

Un botón submit (<input type=“submit”>) juega un rol especial en un HTML Form:

Cuando es pulsado, el navegador envía el HTML Form junto con cualquier entrada de datos del usuario al servidor Web

Cómo el HTML Form es enviado, dependerá del atributo Method del form:

Si el atributo Method del form no está presente o tiene el valor GET, el navegador enviará al servidor un comando HTTP GET

Si el atributo Method del form tiene el valor POST, el navegador enviará al servidor un comando HTTP POST

Ejemplo >>

HTML Forms (Cont.)

Procesamiento en el Servidor

• Construir la parte del cliente es “fácil”, sólo es HTML

• La parte difícil es la construcción

de la lógica del lado del servidor. “Algo en el servidor”, tiene que interpretar las entradas del usuario enviadas junto con el form y generar la correspondiente salida.

Method = GET <form method=“get"> . . . </form> GET / suma.html?op1=2&op2=2 HTTP/1.1 . . . Connection: Keep-Alive [blank line] El navegador envia los datos ingresados como una cadena de consulta

Method = POST <form method=“post"> . . . </form> POST / suma.html HTTP/1.1 . . Content-Type: ... Content-Length: 11 [blank line] op1=2&op2=2 El navegador envia los datos ingresados en el cuerpo de la solicitud HTTP

Cualquiera sea el método utilizado, es decir GET o POST, cuando un form es enviado al servidor, decimos que se produjo un POSTBACK

Suma.html <html> <body> <form> <input type="text" name="op1" /> + <input type="text" name="op2" /> <input type="submit" value=" = " /> </form> </body> </html>

Suma.html <html> <body> <form> <input type="text" name="op1“ value=“2”/> + <input type="text" name="op2“ value=“2”> <input type="submit" value=" = " /> 4 </form> </body> </html>

Antes del procesamiento

Después del procesamiento

Page 3: Programa Microsoft Desarrollador Cinco Estrella2

5

Procesamiento en el Servidor

• Existen varias tecnologías de procesamiento:

• CGI (Common Gateway Interface)

• Define una API de bajo nivel

• Popular en entornos UNIX, no tanto en Windows

• ISAPI (Internet Server Application Programming Inte rface)

• Son DLL Windows que “corren” bajo IIS. Escritas en C++

• Mejor performance que CGI

• ASP (Active Server Pages)

• Simple solución: HTML + Script del lado del servidor

• Programadas en JScript o VBScript

• Objetos intrínsecos que abstraen detalles de bajo nivel de HTTP. Objetos Request y Response

• Permite usar ADO (ActiveX Data Object) para acceso a datos

ASP.NET

• ASP.NET es el framework de programación web dentro de .NET

• Permite desarrollar aplicaciones Web con un modelo “similar” al utilizado para aplicaciones Windows

• El componente fundamental de ASP.NET es el WebForm

• Independencia del cliente (navegador, S.O., dispositivo físico, etc.)

• Permite utilizar cualquier lenguaje .NET

• Permite desarrollar Servicios Web XML

ASP.NET – Ventajas

• La “parte ejecutable” de una aplicación ASP.NET es COMPILADA

• Implementación y actualización de las aplicaciones sin reiniciar el servidor!

• Acceso a toda la .NET Class Library

• Independiente del lenguaje de programación

• Encapsulamiento de funcionalidad a través de controles de servidor y controles de usuario

ASP.NET – Ventajas (Cont.)

• Permite usar ADO.NET para acceso a datos

• Soporta XML, Hojas de estilo CSS, etc.

• Detección automática del navegador cliente, generando el lenguaje de marcas soportado por el mismo

• Mecanismo de Caching incorporado para páginas completa o partes de la misma frecuentemente solicitadas

Componentes de una aplicación ASP.NET

• WebForms (Formularios Web)

6

• Uno o más archivos con extensión .aspx

• Archivos Code-Behind

• Archivos asociados a WebForms que contienen código del lado del servidor (Ej. VB.NET, C#, etc.)

• Archivos de configuración con formato XML

• Un archivo Web.config por c/aplicación

• Un único archivo Machine.config por servidor

• Global.asax

• Eventos a nivel de aplicación

Componentes de una aplicación ASP.NET

• Directorio BIN

• Contiene el assembly de la aplicación (Ej.: MiAplic.dll)

• Cero o más assemblies (Componentes externos)

• Enlaces a Servicios Web XML

• Permiten a la aplicación ASP.NET enviar y recibir datos desde Servicios Web

Componentes de una aplicación ASP.NET

Servicios Web

Cliente

Internet

WebForm1.aspx.vb

WebForm1.aspx

WebForm2.aspx.vb

WebForm2.aspx

Global.asax

Web.config

Out

put C

ach

e

Comp.

BIN

Page 4: Programa Microsoft Desarrollador Cinco Estrella2

7

Las aplicaciones Web ASP.NET + IIS

• IIS es el servidor Web de la plataforma Windows

• Las aplicaciones Web solo pueden existir en una ubicación que es publicada por IIS como un Directorio Virtual

• Directorio Virtual: es un recurso compartido identificado por un alias y que representa una ubicación física en el servidor

• El famoso http://localhost hace referencia al directorio raíz del servidor web

• Por default, http://localhost “apunta” a C:\Inetpub\wwwroot

Las aplicaciones Web ASP.NET + IIS

• VS.NET por default crea las aplicaciones web bajo el directorio raíz, ej.:

• MiAplicacion

• Virtual: http://localhost/MiAplicacion

• Física: C:\Inetpub\wwwroot\MiAplicacion

• Podemos usar IIS para definir un directorio virtual donde alojar nuestras aplicaciones Web, diferente al predeterminado

Estructura de las aplicaciones Web

• El “perímetro” de una aplicación Web es determinada por su estructura de directorios

• Comienza por su directorio raíz, el cual contiene:

• La página o WebForm de inicio

• El archivo de configuración Web.config

• El directorio BIN

• El perímetro de la aplicación termina en su último directorio o cuando se encuentra el directorio raíz de otra aplicación Web

8

Plataforma de desarrollo Web Microsoft en el tiempo

WebForms - Generalidades

Los Formularios Web son archivos de texto que poseen la extensión .aspx que, generalmente, expresan la interfaz del usuario. Estos archivos son interpretados por ASP.NET vinculando la interfaz del usuario con el código del lado del servidor (code behind). Para lograr la vinculación, la directiva Page entra en juego:

<%@ Page compilewith="MiPagina.aspx.cs" classname="MiEspacioDeNombres.MiClase" %>

Code Behind (código detrás): logra el comportamiento deseado de un formulario web.

Definir clases como Partial Class permite que una misma clase esté definida de forma parcial en múltiples archivos (en versiones anteriores una clase sólo podía estar definida en un archivo). En ASP.NET 2.0 con la incorporación del concepto de clases parciales, puede encontrar el concepto Code Beside que podría traducirse como código al lado, con la misma funcionalidad que el code behind.

Visual Studio 2005 aprovecha esta característica para definir parte de la clase de la página ASPX en el propio archivo '.aspx', que ahora contiene definiciones de controles y eventos, y el código que gobierna su funcionamiento en un archivo aparte por medio de una clase parcial.

• Nótese los cambios en la directiva Page, ahora es indispensable indicar el archivo de la clase con la cual compilara la aspx y el nombre completo de la clase que corresponda.

• Formulario Web (ASP.NET web form)

• Es una página expresada en lenguaje de marcas que es compilada y ejecutada dinámicamente en el servidor para generar la salida solicitada por el cliente (explorador ó dispositivo).

• Code Behind

Visual Studio 6.0 Visual InterDev 6.0 IIS 5.0 SQL Server 2000 ASP

Visual Studio .NET 2002 .NET Framework 1.0 ASP.NET 1.0

Visual Studio .NET 2 003 .NET Framework 1.1 IIS 6.0 ASP.NET 1.1

Visual Studio 2005 Visual Web Developer Express Edition .NET Framework 2.0 SQL Server 2005 ASP.NET 2.0

Page 5: Programa Microsoft Desarrollador Cinco Estrella2

9

• Es el código que se ejecuta del lado del servidor para lograr el comportamiento deseado en un formulario web.

• Partial Class

• Un nuevo concepto, que es aplicado en ASP.NET para vincular las páginas aspx (la interfaz del usuario) con su Code Behind (comportamiento).

Controles de Servidor

• Componentes que se ejecutan en el lado del servidor

• Encapsulan partes de la interface de usuarios

• Poseen el atributo runat=“server”

• Mantienen su “estado” entre postbacks al servidor – ViewState

• Poseen un modelo de objetos común

• Ej.: todos tienen las propiedades Id y Text

• Generan HTML especifico según el browser cliente

Tipos de Controles de Servidor

Controles de Servidor HTML

• Por default, los elementos HTML no son accesibles desde código del lado del servidor

• Agregando runat=“server” y el atributo id, se convierten en Controles de Servidor HTML

Controles de Servidor Web

Conocidos como WebControls

Solo accesibles del lado del servidor

Muchos tipos

� Intrínsecos

� Validación

� “Ricos”

� Del tipo lista de datos

No tienen una relación 1:1 con elem. HTML

Equivalencias de Controles

• Botón HTML “clásico” (No es de Servidor)

<INPUT type="button" value="Buscar">

• Control de Servidor HTML

<INPUT type="button" value="Buscar"

10

id="cmdBuscar" runat="server" NAME="button1">

• Control de Servidor Web

<asp:Button id="cmdBuscar" runat="server"

Text="Buscar"/>

Controles de Servidor - Ejemplos

WebControlWebControlWebControlWebControl HTML equivalenteHTML equivalenteHTML equivalenteHTML equivalente

sp:button> <input type=submit>

<asp:checkbox> <input type=checkbox>

<asp:hyperlink> <a href="…"> </a>

<asp:image> <img src="…">

<asp:imagebutton> <input type=image>

<asp linkButton>

<asp:label> <span> </span>

<asp:panel> <div> </div>

<asp:radiobut ton> <input type=radiobutton>

<asp:table> <table> </table>

<asp:textbox> <input type=text>

<asp:listbox> <select size="5"> </select>

Controles de Servidor - Validación

Son elementos ocultos que validan las entradas de datos contra algún patrón

El proceso de validación puede ser llevado en:

� Cliente

� El browser cliente debe soportar lenguaje script

� Le da al usuario un feedback inmediato

� Reduce el número de postbacks

� Servidor

� Repite la validación del lado del cliente

Permite validar contra datos almacenados por ej. en una base de datos

Page 6: Programa Microsoft Desarrollador Cinco Estrella2

11

Controles de Servidor - Validación

ASP.NET proporciona 6 controles

� RequiredFieldValidator. Valor requerido.

� CompareValidator. Valida contra un valor constante o contra otro control.

� RangeValidator. Valor dentro de un rango de tipos.

� RegularExpressionValidator. Valida contra un patrón o expresión regular.

� CustomValidator. Lógica de validación proporcionada por nosotros.

� ValidationSummary. No es un validador, sino que muestra mensajes de error “agrupados”.

Controles de Servidor - Validación

En el lado del servidor se puede determinar si TODAS las validaciones fueron exitosas mediante Page.IsValid

Muy importante!

� La propiedad IsValid NO está disponible en los eventos Init ni Load del WebForm

Controles de Servidor – Controles “Ricos”

Controles con lógica de IU compleja encapsulados de forma sencilla

Ejemplos:

� AdRotator. Permite mostrar anuncios publicitarios (banners) de una secuencia predeterminada o aleatoria.

� Calendar. Permite disponer de un calendario altamente personalizable.

Controles de Usuario

• Simplifican la reutilización de código y componentes de la IU dentro de las aplicaciones Web ASP.NET

• Son del servidor definidos en un archivo .ascx

• Contienen HTML pero NO los tags <HTML>, <BODY> o <FORM>

<%@ Control Language="vb" %>

<%@ Control Language=“cs" %>

• Contiene también código en VB.NET o C#

¿Por qué usar Controles de Usuario?

• Son autocontenidos

• Pueden ser utilizados más de una vez

• Pueden estar escritos en diferentes lenguajes

12

Agregando Controles de Usuario

• Para usar un control de usuario en un WebForm se usa la directiva @Register

<%@Register TagPrefix="uc"

TagName="encabezado" Src="header.ascx" %>

• Dentro del WebForm...

<uc:encabezado id=“Enc1” runat=“server”> </uc:encabezado>

• Podemos acceder y crear propiedades como con cualquier otro control u objeto

Eventos en un WebForm (1/4)

El modelo de eventos de una página ASP.NET, trabaja como se muestra en el ejemplo gráfico. El cliente realiza una petición, el mensaje es recibido en el servidor, donde es analizado y atendido por el manejador de eventos que corresponda. Se arma la respuesta y el cliente obtiene la información que ha solicitado (ya sea una nueva página, un mensaje, etc.)

Modelo de Eventos Web Form

Eventos en un WebForm (2/4)

Visual Studio “Orcas” .NET Framework “Orcas” ASP.NET “Orcas”

WebForm2.aspx

FARMACIA

WebForm1.aspx

FARMACI

UserControl.ascx

FARMACIA

Server

Cliente Web

Analiza el mensaje

evento

manejador

mensaje

Page 7: Programa Microsoft Desarrollador Cinco Estrella2

13

Los eventos asociados con controles ASP.NET son generados en el cliente y atendidos en el servidor. Por este motivo, ASP.NET necesita que la información para atender el evento del cliente sea transferida al servidor por medio de una petición HTTP Post.

Para mantener el estado de los controles, se utiliza el View State. El estado de los controles se almacena en un campo oculto de la página que viaja en cada postback; si no se tiene control de su tamaño puede dificultar la navegación del sitio haciéndolo más lento. Para ello verifique el estado de la propiedad EnableViewState de todos los controles y utilice este mecanismo cuando sea necesario.

Existen otras técnicas que permiten comunicarse con el servidor:

Cuando se utiliza una página con la propiedad PostBackUrl, el evento generado en el cliente es atendido por una segunda página. La página que atiende el pedido puede hacer referencia a los controles de la página que la llamó desde la propiedad la PreviousPage que contiene todos los controles de la primera.

El Script CallBack de ASP .NET 2.0 permite atrapar eventos del lado del servidor evitando el refresco de pantalla

Nota: Para obtener información sobre Script CallBack en ASP.NET 2.0 vea el material de referencia.

• Eventos del lado del servidor

• Cuando se trabaja con controles ASP.NET, estos generan eventos en el servidor para responder a las peticiones del usuario, produciéndose PostBack.

• PostBack

• A instancias de un formulario web mostrado en el cliente cada evento sucedido en él genera un POST hacia el servidor y una respuesta. Este ida y vuelta dentro de un mismo formulario web se llama postback.

• View State

• Es un mecanismo que permite mantener el estado de los controles del formulario web entre postbacks. El estado de los controles viaja en el view state por cada postback.(ver diapositiva 36)

Eventos en un WebForm (3/4)

Como puede apreciarse en el ejemplo, en el cliente de la página web se declara un botón con el evento onclick el manejador del evento es un método protegido de la misma clase, que, se ubica del lado del servidor.

Es importante notar que los métodos que atienden eventos de este tipo, siempre tienen dos parámetros, un objeto que hace referencia al control que provoca el evento y un segundo parámetro que posee información necesaria para atender el llamado.

• Declaración de eventos en un control del lado del cliente:

<asp:Button ID="btnEjemplo" runat="server" Text="Aceptar" onclick="btnEjemploClick" />

Atención del evento en el servidor ( code behind )

• Ejemplo en C#:

protected void btnEjemploClick(object sender, EventArgs e)

{

if (!string.IsNullOrEmpty(txtEjemplo.Text)) 14

{

lblEjemplo.Text = txtEjemplo.Text;

}

}

Eventos en un WebForm (4/4)

En este ejemplo se atiende en visual Basic el evento onclick declarado en el control de ejemplo de la diapositiva anterior.

Atención del evento en el servidor ( code behind ) .

Ejemplo en Visual Basic:

Protected Sub btnEjemploClick(ByVal sender As Object, _ ByVal e As EventArgs)

If Not String.IsNullOrEmpty(txtEjemplo.Text) Then

lblEjemplo.Text = txtEjemplo.Text

End If

End Sub

Ciclo de vida de un WebForm

El ciclo de vida de un página web form corresponde al tiempo que transcurre entre la invocación del servidor Web (IIS) y el envío de la información de respuesta al cliente.

Detallaremos a continuación los sucesos mas importantes que ocurren en el ciclo de vida de una página ASP.NET

El ciclo de vida de una página ASP.NET comienza cuando el marco de ejecución de ASP.NET invoca al código asociado a la página .aspx requerida. Luego de instanciar los objetos de contexto request y response, crea el árbol de controles declarado en la página .aspx y determina si la página fue llamada en modo postback o no.

Luego ocurre la inicialización de objetos y la configuración de sus estados, produciéndose el disparo del evento Init en cada uno de ellos, y a posterior el evento Init de la página contenedora; a su vez se aplican los Themes que afecten a la página ( Los Themes, son estilos que se aplican a los controles web, más adelante en este curso se tratarán puntualmente).

Una vez inicializados los objetos, ASP.NET 2.0 carga en ellos sus estados y los valores del view state. A continuación se procesa el post y se cargan sus valores en cada uno de los objetos.

Este es el momento en que ocurre la carga de la página, en el cual el desarrollador podrá atrapar el evento Page_Load.

Una vez que la página ha sido inicializada, cargada y validada, se disparan y atienden los eventos que hayan sido solicitados en el cliente y para los cuales existen los manejadores de eventos programados por el desarrollador. Esta es la oportunidad para el desarrollador de ejecutar la lógica del negocio y acceso a datos.

En el paso siguiente, Render, el View State es salvado con los nuevos valores, y el lenguaje de marcas es generado (html, xml, etc).

Page 8: Programa Microsoft Desarrollador Cinco Estrella2

15

Antes de que el objeto Page sea liberado, los controles hijos son descargados, momento en el cual se dispara el evento UnLoad de cada uno de ellos y el de la página que los contiene.

Es responsabilidad del recolector de basura (Garbage Collector) destruir (Dispose) todos los objetos incluidos en el ciclo de vida de la página.

• Sucesos mas importantes del ciclo de vida de una página:

• Inicialización de objetos

• Carga View State

• Procesa datos del post

• Carga de la página

• Eventos Post Back

• Graba View State

• Render

• UnLoad

Conceptos principales (1/2)

El archivo de configuración web.config permite una fácil administración e instalación de una aplicación web ASP.NET conteniendo toda la información relevante de la aplicación (autenticación, sesiones, autorización, etc.) incluyendo valores referentes a la funcionalidad propia de la aplicación.

Al modificar el archivo de configuración web.config, no es necesario reiniciar la aplicación en el servidor, ésta lo detecta automáticamente.

El sistema de configuración de ASP.NET se compone de dos archivos:

• Machine.config: donde se guarda información de configuración para todo el servidor. (Existe un solo archivo machine.config instalado por cada versión de ASP.NET )

• Web.config: donde se guarda información de configuración específica de la aplicación, se pueden colocar múltiples archivos Web.Config en una aplicación, por ejemplo uno en la raíz y uno en cada uno de los subdirectorios que lo necesiten. Pero no puede haber más de uno por directorio.

Otra ventaja es que se pueden agregar archivos de configuración externos, referenciados desde el web.config, facilitando enormemente el trabajo para grandes equipos de desarrollo.

• Archivo Web.Config

• Es un archivo xml, donde se guarda información de configuración común a toda la aplicación como ser: cadenas de conexión, tipo de autenticación, etc.

• Arquitectura de configuración jerárquica

• El archivo de configuración posee una estructura jerárquica (xml) que permite una lectura rápida y facilita su modificación.

Conceptos principales (2/2)

En las versiones anteriores de ASP.NET, había que editar los archivos de configuración manualmente.

En ASP.NET 2.0, tanto el Visual Studio 2005 como Visual Web Developer 2005 Express Edition existe una herramienta visual Web Site Administration Tool para la administración de la configuración de la

16

aplicación. Así mismo, el servidor web IIS provee una interfaz de usuario (Snap-in de MMC) para el mismo fin.

Las secciones, de seguridad, acceso a datos, etc., pueden ser configuradas fácilmente por medio de estas herramientas.

Secciones y grupos de secciones

En ASP.NET 2.0 se incorporan nuevos grupos de secciones, como por ejemplo “connectionStrings”. Facilitando de este modo el acceso a las conexiones de datos y simplificando el código.

Herramientas administrativas

Snap-in de MMC para ASP.NET

Herramienta de administración del sitio web (Web Site Administration Tool)

Accediendo desde el código al web.config (1/2)

Esta porción de ejemplo de un archivo web.config declara la cadena de conexión a una base de datos. En la próxima diapositiva se leerá el valor desde el código.

Cabe destacar que el archivo web.config es de formato texto y puede ser editado fácilmente y en cualquier momento, durante el desarrollo o mientras la aplicación este en producción.

• Secciones configuración más simples

<configuration>

<connectionStrings>

<add name="northwind"

connectionString="server=(local);database=Northwind;Integrated

Security=SSPI" providerName="System.Data.SqlClient" />

</connectionStrings>

</configuration>

Accediendo desde el código al web.config (2/2)

ASP.NET 2.0 provee una API de configuración mas rica que versiones anteriores, facilitando la lectura y escritura de los archivos de configuración desde el código.

Este ejemplo muestra como recuperar el valor de una cadena de conexión a la base de datos, declarada en un web.config.

Acceso de lectura/escritura a especificaciones de configuración.

Ejemplo en C#:

SqlConnection connection = new SqlConnection(

ConfigurationManager.ConnectionStrings[

"ADVENTUREWORKSConnectionString"].ConnectionString);

Generalidades

Page 9: Programa Microsoft Desarrollador Cinco Estrella2

17

• ¿Qué es Autenticación?

• Es el mecanismo que permite afirmar que la persona que esta ingresando al sistema es quien dice ser.

• ¿Cómo Funciona?

• Se aceptan las credenciales ingresadas por el usuario (usuario – contraseña) y se validan contra una base de datos, el sistema operativo, un servicio web, u otro mecanismo definido según el tipo de autenticación.

Tipos de Autenticación

Existen 3 tipos de autenticación en aplicaciones .Net.

La autenticación basada en windows, utiliza la infraestructura de Windows para validar las credenciales, es apropiada para aplicaciones intranet.

La autenticación basada en formularios, utiliza generalmente bases de datos para la validación de credenciales, es apropiada para aplicaciones web.

La autenticación basada en MS Passport, utiliza un servicio web para la validación de credenciales, por lo cual no necesita guardar los datos de los usuarios en una base de datos, pero su utilización tiene un costo económico.

En el curso se introduce la autenticación por formularios, para más información de los otros tipos de autenticación, sugerimos consultar el material previo del programa Desarrollador 5 Estrellas, o consultar el sitio de MSDN Español.

• Basada en Windows

• Basada en Windows e IIS

• La solicitud de la página pasa por IIS

• Si IIS valida exitosamente la credencial, entonces se devuelve la página solicitada

• Basada en Formularios

• Las solicitudes no autenticadas son redireccionadas a un formulario de login

• Después de validar la credencial se envía al cliente una cookie de autenticación

• Basada en Microsoft Passport

• Servicio de autenticación centralizado

• Passport es un Web Service

Configurando la autenticación

Para utilizar la autenticación por formularios, hay que configurar en el web.config la sección correspondiente incorporando el elemento authentication como muestra el ejemplo; y a su vez indicar cual será la página de Login para que el usuario pueda ingresar sus credenciales.

El elemento authorization esta fuertemente relacionado con la autenticación, y determina si el usuario autenticado está autorizado a acceder a cierta página o no según sean sus privilegios asociados.

18

El ejemplo muestra que no se autoriza el acceso a la aplicación a ningún usuario que no haya sido previamente autenticado.

<system.web>

<authentication mode="Forms">

<forms loginUrl="login.aspx"></forms>

</authentication>

<authorization>

<deny users="?"/>

</authorization>

</system.web>

Controles de Login (1/2)

ASP.NET 2.0 provee un nuevo grupo de controles para la autenticación de usuarios, llamados Controles de Login

Estos controles brindan la funcionalidad de recibir y validar las credenciales de un usuario, crear usuarios, recuperar contraseñas, mostrar el usuario actual en las páginas de un sitio, etc.

El modelo de proveedores (*) de membresía (membership provider) trabaja fuertemente ligado con estos controles, facilitando el proceso de desarrollo.

Para utilizar estos controles, se debe habilitar la autenticación por formularios en la aplicación.

Vea los ejercicios de ejemplo que utilizan estos controles.

Page 10: Programa Microsoft Desarrollador Cinco Estrella2

19

Es importante aclarar que el modelo de la base de datos también es provisto por Microsoft y debe respetarse. En caso de querer usar un modelo propio para los datos de usuarios, roles, etc. deberá desarrollarse el proveedor correspondiente.

(*) Para mas información acerca del modelo de proveedores, vea los documentos recomendados al final del curso.

• Control Log In

<asp:Login ID="Login1" runat="server“ CreateUserUrl="~/CrearUsuario.aspx"

CreateUserText="Nuevo Usuario“

RememberMeText="Recordar mi usuario" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font- Names="Verdana" Font-Size="0.8em" ForeColor="#333333" >

<TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />

<InstructionTextStyle Font-Italic="True" ForeColor="Black" />

<TextBoxStyle Font-Size="0.8em" />

<LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />

</asp:Login>

Controles de Login (2/2)

El nuevo control de creación de usuarios hereda del nuevo control Wizard y se puede personalizar si se desea cambiar el idioma del control , los nombres de los botones, títulos etc.

Hay otros controles, como el visualizador de usuario, el recuperador de claves y para cambiar la clave. Todos estos controles encapsulan la funcionalidad requerida y solo requieren utilizar un modelo de datos propuesto y provisto por Microsoft.

Control de Creación de Usuarios

<asp:CreateUserWizard ID=“createUserWizard" runat="server"

CreateUserButtonText="Crear Usuario"

CompleteSuccessText="Usuario Creado" ContinueButtonText="Finalizar"

ContinueDestinationPageUrl="~/Default.aspx“

FinishDestinationPageUrl="~/Default.aspx“>

<WizardSteps>

<asp:CreateUserWizardStep ID=“createUserWizardStep" runat="server">

</asp:CreateUserWizardStep>

<asp:CompleteWizardStep ID=“completeWizardStep" runat="server"

Title="Usuario Creado“

Ejemplo del control

20

AllowReturn="true">

</asp:CompleteWizardStep>

</WizardSteps>

</asp:CreateUserWizard>

Generalidades

Como se mencionó anteriormente, las páginas HTML se transmiten por medio del protocolo HTTP de un servidor al cliente y viceversa.

Este protocolo es un protocolo “sin estado”, por consiguiente, la información de las páginas web se pierde entre los idas y vueltas al servidor.

Como en muchos casos es necesario conservar estos datos, ASP .Net provee distintos mecanismos que permiten mantener el estado de sus páginas a través de los idas y vueltas.

Entre los mecanismos, se encuentra el “ViewState”, “Application State”, “Session State”, es decir los datos se mantienen a nivel de aplicación y a nivel de sesión del usuario.

• Las páginas html de una aplicación web se transmiten por medio del protocolo HTTP, como se mencionó anteriormente. Este protocolo es un protocolo “sin estado”.

• Así, una vez que el usuario ingreso datos en el navegador, si no se mantiene el estado mediante algún mecanismo, se pierden los datos ingresados.

• Por este motivo, ASP.Net proporciona mecanismos para mantener el estado de sus variables a través de las distintas peticiones de páginas.

• Entre estos mecanismos se encuentran:

• Application State : mecanismo de almacenamiento global accesible desde todas las páginas de la aplicación Web

• Session State : mecanismo de almacenamiento limitado a la sesión actual del navegador

• View State :Mantiene valores entre múltiples solicitudes a la misma página

Administración de estados

Ejemplo del control

Page 11: Programa Microsoft Desarrollador Cinco Estrella2

21

Tipos de administración de estado

Administración de estados - Servidor

• Application State es un mecanismo de almacenamiento global accesible desde todas las páginas de la aplicación Web

• Seesion State está limitada a la sesión actual del browser

• Las sesiones ASP.NET se identifican con una cadena de caracteres ASCII y se guarda como una Cookie en el cliente

Administración de estados – Cliente

• Cookies para mantener el estado:

• Temporarias

• Persistentes

• Problema: el usuario puede borrarlas o deshabilitarlas

• Problemas de seguridad

• Espacio limitado a almacenar no más de 4KB

SessionID

Variables de Session y

Application

22

Global.asax

Este archivo (global.asax) contiene distintos eventos que son lanzados a nivel de aplicación. Estas declaraciones de evento no producen interfaz de usuario y sirven para mantener variables de estado de la aplicación y/o de la sesión.

Los eventos Application_Start y Application_End suceden cuando la aplicación es inicializada y descargada del servidor web respectivamente.

Los eventos Session_Start y Session_End suceden cuando un nuevo usuario se conecta y se desconecta con la aplicación respectivamente.

El archivo global.asax se ubica en el raíz del directorio virtual de la aplicación web.

ASP.NET analiza y compila el global.asax en una clase dinámica del Net Framework la primera vez que cualquier URL de la aplicación es activada o solicitada.

Las directivas del gobal.asax dan a las páginas ASP .NET instrucciones especiales a ser usadas en la compilación, una directiva puede ser:

<%@ Application Description=“Aquí describo al global.asax” %>.

• Administra eventos a nivel de aplicación y sesión.

• Los eventos referentes a la manutención del estado de aplicaciones web, son:

• Application_Start

• Application_End

• Session_Start

• Session_End

Estado de la aplicación(1/2)

La colección Application permite almacenar la información que es común a todos los usuarios que acceden al sitio y que deberá estar disponible en todo momento.

La carga en memoria de esta información sucede en el arranque de la aplicación web (aunque no necesariamente tiene que ser asi), es rara vez modificada y su mayor acceso es para lectura.

El ejemplo muestra como almacenar para toda la aplicación los datos de la sucursal en la cual está instalada.

Mediante el evento Application_Start se buscan los datos necesarios, una sola vez, y se mantendrán en memoria toda la vida de la aplicación.

El código muestra la carga de un objeto DataView que se guarda en una variable de aplicación: Application[“Sucursal"] .

Cookie

Page 12: Programa Microsoft Desarrollador Cinco Estrella2

23

Luego puede ser accedida desde las páginas del sitio.

El siguiente ejemplo muestra la recuperación de los datos de la sucursal en el evento Load y los muestra en una grilla:

void Page_Load(Object sender, EventArgs e)

{

DataView Source = (DataView)(Application[" Sucursal "]);

...

MyGridView.DataSource = Source;

...

}

• Permite almacenar información a nivel de aplicación, común a todas las sesiones. Esta información se almacena en una colección llamada Application .

• El acceso a esta información se realiza mediante el objeto intrínseco “Application”

• Ejemplo en C#

protected void Application_Start() {

DataSet ds = new DataSet();

try {

FileStream fs = new

FileStream(Server.MapPath("schemadata.xml"), FileMode.Open,FileAccess.Read);

StreamReader reader = new StreamReader(fs);

ds.ReadXml(reader);

}

finally { fs.Close(); }

DataView view = new DataView(ds.Tables[0]);

Application["Sucursal"] = view;

}

Estado de la aplicación(2/2)

El código muestra la carga de un objeto DataView que se guarda en una variable de aplicación: Application(“Sucursal“) .

Luego puede ser accedida desde las páginas del sitio.

El siguiente ejemplo muestra la recuperación de los datos de la sucursal en el evento Load y los muestra en una grilla:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim Source As DataView = CType((Application(“Sucursal")), DataView)

24

...

MyGridView.DataSource = Source

...

End Sub

Estado de la sesión (1/2)

ASP.NET provee un mecanismo para mantener información individual de cada interacción de un navegador con el servidor web llamado sesión.

La sesión perdura un tiempo determinado, previamente establecido en el archivo de configuración; y se renueva por cada pedido del cliente.

La colección Session permite almacenar la información particular de una sesión.

Cuando un usuario solicita por primera vez una página .aspx al servidor web, ASP.NET crea una nueva sesión para él. En este momento es factible la carga en memoria de la información del usuario.

Por defecto la información de sesión se guarda en memoria.

El ejemplo muestra como almacenar el código de cliente de un usuario.

Mediante el evento Session_Start se buscan los datos necesarios, que se mantendrán en memoria mientras el usuario este conectado.

El código de la diapositiva muestra la carga del código del cliente que se guarda en una variable de sesión: Session[“Codigo"].

Luego puede ser accedida desde las páginas del sitio.

El siguiente ejemplo muestra la recuperación del código del cliente en el evento Load, mostrándolo en un control TextBox:

void Page_Load(Object sender, EventArgs e)

{

string cliente = (Session[“Codigo"]);

...

txtCliente.Text = cliente;

...

}

• Una sesión es una interacción entre un navegador y un servidor web (comprende varios Requests a lo largo del tiempo)

• Es posible almacenar información únicamente relevante para una sesión.

• El acceso a esta información se realiza mediante el objeto intrínseco “Session”

• Ejemplo C#

Protected void Session_Start( object sender, EventArgs e ) {

//...

try

Page 13: Programa Microsoft Desarrollador Cinco Estrella2

25

{

conn = new SqlConnection( ConfigurationManager.ConnectionStrings[

"ADVENTUREWORKSConnectionString"].ConnectionString);

command.Connection = conn;

conn.Open();

object result = command.ExecuteScalar();

Session["codigo"] = result;

}

finally {

conn.Close();

}

}

El código de la diapositiva muestra la carga del código del cliente que se guarda en una variable de sesión: Session(“Codigo“).

Luego puede ser accedida desde las páginas del sitio.

View State

Para mantener el estado de los controles de una página aspx entre postbacks, ASP.NET utiliza el View State.

Esta técnica es utilizada por defecto en todos los controles, pero puede deshabilitarse en caso de no ser necesario, mediante la propiedad EnableViewState.

El View State se puede declarar por página (afectando a todos los controles de la misma) o por cada control.

El tamaño del campo oculto donde se almacena puede crecer innecesariamente dificultando la navegación del sitio; es por eso necesario moderar el uso del ViewState.

En el servidor se implementa como una colección: ViewState.

• Mantiene el estado de los controles, entre postback de una página.

• El View State se implementa mediante un campo oculto en el html generado y viaja en cada POST

Generalidades

Una página maestra permite añadir código, controles, estilos, etc. que deben ser compartidos por todas o la mayoría de las páginas de la aplicación.

Las páginas que están vinculadas con la página maestra heredando su contenido visualmente, se llaman páginas de contenido; estas son independientes de su página maestra, tanto en el código como en el lenguaje que se desee programar.

Es decir, puedo tener una master page codificada en C#, y las páginas de contenido en VB .Net.

26

Otro tema importante es que se pueden crear sitios con páginas maestras anidadas (Nested Master Pages). Es decir, un sitio puede tener distintos módulos, con una una página maestra que contiene un encabezado determinado para toda la aplicación, y luego crear otras páginas maestras para cada modulo, vinculadas con la ya definida, que posean el menú de cada modulo.

• Para comprender mejor este tema, vea el ejercicio correspondiente entre los incluidos en el curso.

• Logran herencia visual para las páginas Web

• Permite manejar áreas comunes de un sitio de manera consistente

• En ASP.NET 1.1, el problema de la herencia visual implicaba

• Copiar & Pegar

• Includes

• Herencia + User Controls

• Se basan en Templates (Master Page) y en páginas de contenido (Content Page).

• Permiten incluir menús, encabezados, navegaciones, etc.

Páginas Maestras

ASP.NET 2.0 provee un nuevo mecanismo para la creación de aplicaciones web que permite, mediante la declaración de una página maestra (master page), que todo el sitio posea la misma apariencia.

En versiones anteriores, si había que utilizar un menú, lo mas usual era crear un control de usuario con la funcionalidad del menú y luego incluirlo en todas las páginas.

Ahora, el menú solo debe incluirse en la página maestra, y todas las paginas de contenido que estén vinculadas con ella tendrán el menú.

Esto permite un código mas limpio y ordenado en la aplicación, haciendo al mismo más fácil de mantener.

La página maestra se puede configurar para toda la aplicación desde el web.config, o bien en la directiva @Page de las páginas que la utilicen.

• En lugar de la directiva @Page, utiliza la directiva @Master:

<%@ Master Language="C#“ CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

• Se trata como cualquier formulario web, con la extensión .master, y debe incluir el siguiente control:

<asp:contentplaceholder id="contenedor" runat="server“>

contenido por defecto

</asp:contentplaceholder>

Páginas de contenido

Las páginas de contenido son páginas aspx que tienen una referencia a alguna página maestra (MasterPageFile).

Los controles que se incorporen en ellas deben estar incluidos dentro del control asp:content, de este modo se respetará el espacio de la página web designado en la página maestra, logrando una interfaz homogénea para toda la aplicación.

Page 14: Programa Microsoft Desarrollador Cinco Estrella2

27

• Al crear un página de contenido, hay que elegir la página maestra. La directiva @page de la página sería:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"

CodeFile="Default.aspx.cs" Inherits="_Default" Title="Home" %>

• No repiten los tags de la página maestra, pero se pueden acceder desde el código.

• Debe contener el control

<asp:Content ID="cntDefault" ContentPlaceHolderID="contenedor" Runat="Server"> contenido de la página </asp:Content>

Themes y Skins - Generalidades

En las versiones anteriores de ASP.NET para que un sitio tuviera un estilo homogéneo había que crear hojas de estilo en cascada, y asignar a cada control de cada página el nombre del estilo que correspondiera.

En ASP.NET 2.0, con el nuevo concepto de Themes y Skins, se puede definir temas que contengan los archivos skin que sean necesarios y luego asignar ese tema a la aplicación o a la página. De este modo, todos los controles definidos en el tema de la aplicación (o página) tomaran su estilo de éste directamente.

Si no se desea asignar un tema a nivel de máquina, aplicación o página, se puede a cada control asignarle el tema de donde tomar su estilo.

• Skins: Son definiciones de formato y estilos que se aplican a los controles de servidor y se guardan en archivos de extensión .skin

• Themes: Son “paquetes” de Skins, también pueden contener hojas de estilo en cascada e imágenes asociados.

• ASP.NET 2.0 incluye una nueva carpeta virtual para la organización de los temas (APP_Themes).

• Se pueden configurar a nivel de maquina (en el machine config) a nivel de aplicación (en el web.config) o bien a nivel de página, dentro de la directiva Page.

Contenido de un archivo Skin

Los archivos *.skin contienen declaraciones de estilo y formato de los controles de ASP.NET.

En el ejemplo se puede ver el estilo asignado al control LoginName, uno de los nuevos controles del grupo Login.

El estilo declarado para este control debe poseer el atributo runat=“server” para ser reconocidos por ASP.NET.

• Los archivos *.skin contienen declaraciones de estilo y formato de los controles de ASP.NET

<asp:LoginName runat="server"

BorderWidth="1"

BorderColor="#FF9900"

ForeColor="navy"

28

Font-Names="verdana" />

Navegación - Menú

Las interfaces de usuario de navegación son tediosas de implementar, especialmente si están basadas en script del lado del cliente.

ASP.NET 2.0 incorpora nuevos controles de navegación, como el menú, treeview, site map, etc. facilitando la utilización de este tipo de controles.

En el ejemplo, el control menú hace referencia a un xml como DataSource, este xml tiene la estructura del mapa del sitio (web.SiteMap).

Vea en el ejemplo de código complementario.

Los datos para llenar el menú, pueden estar en un xml o bien en la base de datos, permitiendo varios niveles de menú.

La presentación puede mejorar su apariencia por medio de skins o bien, con la opción AutoFormat seleccionado manualmente los estilos presentados.

<asp:menu id="Menu"

datasourceid="SiteMapDataSource1“ disappearafter="500"

staticdisplaylevels="2" staticsubmenuindent="20" orientation="Vertical"

font-names="Trebuchet MS, Arial" DynamicMenuItemStyle-Width="150"

Width="150“ runat="server">

<staticmenuitemstyle backcolor="RoyalBlue" forecolor="WhiteSmoke" horizontalpadding="5" verticalpadding="2" />

<statichoverstyle backcolor="CornflowerBlue" forecolor="White" borderstyle="Solid" borderwidth="1px" />

<dynamicmenuitemstyle backcolor="RoyalBlue" forecolor="WhiteSmoke" horizontalpadding="5" verticalpadding="2" />

<dynamichoverstyle backcolor="CornflowerBlue" forecolor="White" borderstyle="Solid" borderwidth="1px" />

</asp:menu>

Ejemplo del control

Page 15: Programa Microsoft Desarrollador Cinco Estrella2

29

Control de Navegación

El control de navegación SiteMapPath indica de manera elegante, la ubicación en el mapa del sitio de la página actual que esta viendo el usuario.

Este control puede configurarse mediante estilos, templates y otros controles de ASP.NET.

Al estar basado en el modelo de proveedores no posee un mecanismo de DataBind (enlace de datos), desde el web.config se configura el proveedor indicando el archivo *.sitemap que será utilizado en el sitio.

El archivo *.sitemap, es un xml con la estructura del sitio, sus nodos principales son:

Nodo Raíz: <siteMap>

Nodos Hijos: <siteMapNode title="Book 1" url="~/book1/book1.aspx" description="Go To Book 1">

Los nodos hijos pueden tener a su vez mas nodos hijos, creando así una estructura mas compleja.

• Este control esta basado en el modelo de proveedores. (Se configura el proveedor en el web.config)

• A diferencia de otros controles de navegación no posee una propiedad “DataSource”.

• Al proveedor se le configura el archivo (xml) que posee el mapa del sitio, por ejemplo:

• siteMapFile="web.sitemap"

Controles de enlace de Datos

El control SQLDataSource permite trabajar con cualquiera de las bases de datos relacionales basadas en lenguaje SQL, tales como Microsoft SQL Server u Oracle.

<asp:SqlDataSource ID="SqlDataSource1" runat="server" SelectCommand="SELECT au_id, au_lname, au_fname FROM authors" ConnectionString="<%$ ConnectionStrings:Pubs %>" />

El ObjectDataSource permite enlazar contra clases de la capa de negocios y se declara de la siguiente forma:

<asp:ObjectDataSource TypeName="MyDataLayer" SelectMethod="GetRecords" UpdateMethod="UpdateRecord" DeleteMethod="DeleteRecord" InsertMethod="InsertRecord" runat="server"/>

En el TypeName se indica el nombre de la clase contra la cual se realiza el enlace, luego con las propiedades SelectMethod, UpdateMethod, DeleteMethod e InsertMethod se indica que método de la clase se utilizará para realizar las tareas de selección, modificación, eliminación e inserción de datos respectivamente.

Para mas información sobre este interesante tema se recomienda realizar los ejercicios propuestos y leer el material propuesto.

• Permiten realizar el enlace entre un control que muestra datos (gridview, detailsview, etc) y la lógica que los administra

• Control ObjectDataSource

• Enlaza los controles con una clase de la capa de negocios.

• Control SqlDataSource

• Enlaza los controles con una base de datos relacional.

30

• Control XmlDataSource

• Enlaza los controles con datos en formato xml.

Controles visualizadores (1/2)

El nuevo control GridView es una mejora de la DataGrid de ASP.NET 1.1 que permite entre otras cosas el enlace de datos contra los controles SQLDataSource (como en el ejemplo) y ObjectDataSource (visto anteriormente).

El control SQLDataSource, hace referencia a la cadena de conexión configurada en el web.config mediante el signo $. Esta es una nueva forma de hacer referencia al contenido del archivo de configuración desde el código del cliente.

De este modo el ordenamiento, modificación de registros, Paginado, etc. se realizan automáticamente indicándolo como en el ejemplo (ver las propiedades resaltadas).

Otra de las grandes ventajas sobre su grilla predecesora es que permite la definición de múltiples campos como clave primaria

DataGridView

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"

DataKeyNames="ProductID" AllowPaging="True" AllowSorting="True">

<Columns>

<asp:CommandField DeleteText="Excluir“ CancelText="Cancelar“

UpdateText="Atualizar" EditText="Editar"/>

<asp:BoundField ReadOnly="True" HeaderText="Cod" DataField="ProductID"/>

<asp:BoundField HeaderText="Produto" DataField="ProductName"/>

<asp:BoundField HeaderText="Estoque" DataField="UnitsInStock"

DataFormatString="{0:n0}"/>

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:myConnection %>"

UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName "

SelectCommand="SELECT [ProductID], [ProductName] … FROM [Products]"

InsertCommand="INSERT INTO [Products] ([ProductName] ..."

DeleteCommand="DELETE FROM [Products] WHERE [ProductID] ...">

</asp:SqlDataSource>

Page 16: Programa Microsoft Desarrollador Cinco Estrella2

31

Controles visualizadores (2/2)

DetailsView

Es un control que visualiza un registro por vez, opcionalmente provee botones de navegación que permite navegar entre los distintos registros asociados. Además de visualizar, también permite modificar el registro actual.

FormView

Es similar al anterior a diferencia que necesita la definición de un template para representar los campos.

• DetailsView

<asp:DetailsView AutoGenerateRows="False" DataKeyNames="au_id" DataSourceID="SqlDataSource3" HeaderText="Author Details" ID="DetailsView1" runat="server" Width="275px">

<Fields>

<asp:BoundField DataField="au_id" HeaderText="au_id" SortExpression="au_id" />

<asp:BoundField DataField="au_lname" HeaderText="au_lname" />

<asp:CheckBoxField DataField="contract" HeaderText="contract" />

</Fields>

</asp:DetailsView>

• FormView

<asp:FormView ID="FormView1" runat="server" DataSour ceID="ObjectDataSource1“> <ItemTemplate>

<asp:Label ID="CaptionLabel" runat="server" Text='<% # Eval("Caption") %>' /> <br />

<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("FileName", "images/{0}") %>' /> <br />

<asp:HyperLink ID="HyperLink1" Text=“Volver" Navigat eUrl='<%# Eval( "AlbumID", "PhotosDataList.aspx?ID={0}") %>' runat="server" />

</ItemTemplate> </asp:FormView>

Compilación e Instalación -Generalidades

ASP.NET 1.1 era capaz de compilar dinámicamente algunos tipos de archivo (aspx, asmx, ascx) en el momento en que por primera vez eran requeridos por la aplicación. Cualquier modificación a un archivo compilado dinámicamente se reflejaba en la página html de salida. Este mecanismo simplificaba el desarrollo de aplicaciones puesto que el desarrollador solo necesitaba copiar un archivo para provocar los cambios necesarios. Este modelo de compilación dinámica se extendió en ASP.NET 2.0 para otros tipos de archivo, típicamente archivos de clase. El nuevo modelo de compilación de ASP.NET evita la necesidad de una precompilación explicita desde Visual Studio.

Para que esta compilación dinámica sea efectiva los diferentes tipos de archivos deben residir en carpetas específicas (App_Code, App_Data, App_Themes, etc).

Sin embargo, al momento de hacer la instalación de la aplicación web se recomienda precompilarla, esto evita que los archivos de código fuente tengan que existir en el servidor.

32

La precompilación para instalación genera un manifiesto del sitio compuesto por: assemblies, archivos estáticos y archivos de configuración. Este manifiesto es generado en la máquina destino y también puede ser empaquetado y copiado a una máquina de producción. Para llevarla a cabo utilice la herramienta aspnet_compiler.exe.

Visual Studio 2005 permite crear un proyecto de despliegue (Web Setup Project). Encontrará la opción para crear este tipo de proyecto, en menú Create Project � Other Projects Type, el cual una vez configurado y compilado genera un archivo de instalación .msi

• Compilación dinámica de:

• Aspx, asmx, ascx

• Vb, cs, resx

• Sólo es necesario poner los archivos en los directorios específicos

• Precompilación e implementación sin código fuente

• Aspnet_compiler.exe precompila sitios y los instala sin el código fuente

Compilación dinámica

En esta diapositiva se muestra la estructura de directorios necesaria para la compilación dinámica de una aplicación web con ASP.NET 2.0

Creación y Acceso a Proyectos

Visual Web Developer 2005 Express Edition provee mayor flexibilidad al momento de administrar los archivos de una aplicación Web.

File System: Permite seleccionar la carpeta del disco local donde se van a alojar las páginas Web del sitio, de esta forma no es necesario el uso de IIS.

Local IIS: Permite un manejo mucho mas simple al momento de trabajar con un servidor Web IIS. Cuando crea un proyecto o intenta abrir uno existente, Visual Studio 2005 le permite ver todos los sitios Web y aplicaciones configuradas en su máquina. (http://localhost/Site1). Las extensiones de servidor de Front Page no son necesarias para desarrollar aplicaciones Web en un IIS local.

Page 17: Programa Microsoft Desarrollador Cinco Estrella2

33

FTP: Permite la edición y actualización de proyectos a través del protocolo estándar de transferencia de archivos FTP (File Transfer Protocol).

Sitio Remoto: Es posible publicar con un sitio Web a un servidor remoto, permitiendo mantener sincronizadas los archivos del proyecto local con los del servidor Web remoto (requiere las extensiones de servidor de Front Page).

• File System

• Permite desarrollar un sitio en cualquier carpeta de la PC.

• IIS Local

• Permite desarrollar localmente una aplicación web en un directorio virtual de IIS.

• Sitio FTP

• Permite editar y modificar proyectos web remotos utilizando el protocolo FTP.

• Sitio Remoto

• Se puede sincronizar el proyecto de desarrollo local con la aplicación instalada en producción.