Hands-On Lab

Desarrollo Web usando ASP.NET 2.0

LAB 4 Agregando Navegacin a nuestro Sitio Web

LABORATORIO: Agregando Navegacin a Nuestro Sitio Web

En este laboratorio, usted aprender a usar los nuevos controles de navegacin de ASP.NET 2.0, para agregar una navegacin mejorada a nuestros Sitios Web.

Pgina |1

Ejercicio 1: Usando el control TreView

Objetivo: En este ejercicio usted usar controles TreView para mostrar informacin jerarquiza en una vista de rbol, y proveer una navegacin inteligente.

Paso 1: Abrir el proyecto

1. Abrir el proyecto creado, al finalizar Hand on Lab anterior, para eso nos vamos a la carpeta C:\ASPNET\AppWeb\slnTheBeerHouse, y abrimos el siguiente archivo slnTheBeerHouse.sln, o tambin, copiamos la carpeta slnTheBeerHouse ubicado en la carpeta C:\ASPNET\HOLs\HOL 04\Starter:

Pgina |2

Paso 2: Usando un TreeView

1. Nos vamos a la vista Source de Template.master, y haciendo uso de ventana Document Outline, ubicamos al elemento div leftcol: la

2. Agregamos un control ContentPlaceHolder con el ID LeftContent, dentro del elemento div con el id leftcol:

3. Hacemos clic derecho en el Sitio Web, y seleccionamos Add New Item:

Pgina |3

4. Seleccionamos el tem Web Form, le damos el nombre de ShowForums.aspx, marcamos los dos checkbox y hacemos clic en el botn Add:

5. Seleccionamos la pgina maestra de nuestro sitio, y hacemos clic en el botn Ok:

Pgina |4

6. Nos vamos a la vista Design de la pgina ShowForums.aspx, ubicamos el control Content2, y arrastramos un control TreeView:

7. Nos vamos a la vista Source de la pgina ShowForums.aspx, cambiamos el nombre del control TreeView agregado, y agregamos el siguiente cdigo:

Pgina |5

8. Nos vamos a la vista diseo de la misma pgina, el control trevForos pulsamos su smartTag, y hacemos clic en Auto Format:

9. Seleccionamos el esquema Arrows 2, y hacemos clic en el botn Ok:

10. Guardamos los cambios nos vamos a la ventana Solution Explorer, hacemos clic derecho en la pgina ShowForums.aspx Browser. 11. Como podemos apreciar entre el nodo seleccionado, y el nodo por seleccionar no se nota la diferencia: y seleccionamos View in

Pgina |6

12. Cerramos el navegador, volvemos a Visual Studio, nos vamos a la vista Source de la pgina ShowForums.aspx, y dentro del control trevForos cambiamos los siguientes elementos:

13. Otro cambio que haremos en el control trevForos, es agregar el atributo SelectAction con el valor Expand, a los siguientes nodos:

Pgina |7

14. Volvemos a ejecutar la pgina ShowForums.aspx. Ntese, que ahora los elementos seleccionados tiene otro tono distinto a los por seleccionar, adems slo el ltimo nodo del nivel uno (Pedidos) se puede seleccionar, si hacemos clic en los nodos de nivel uno (Sobre la, y Evento) slo lograremos expandir o contraer los submens, ms no seleccionar:

15. Volvemos a Visual Studio, nos vamos a la parte superior de la vista Source de la pgina ShowForums.aspx y agregamos la siguiente directiva:

16. Seleccionamos el control trevForos, nos vamos a la ventana Properties, y en la pestaa de eventos hacemos doble clic en SelectedNodeChanged:

Pgina |8

17. Y agregamos el siguiente cdigo:

18. Guardamos los cambios nos vamos a la ventana Solution Explorer, hacemos clic derecho en la pgina ShowForums.aspx Browser. 19. Ahora al seleccionar un foro apreciamos, este en la barra de navegacin: y seleccionamos View in

Pgina |9

Paso 3: Usando un TreeView con seleccin

1. Hacemos clic derecho sobre el sitio Web, y seleccionamos Add Existing Item:

2. Navegamos hacia la carpeta C:\ASPNET\HOLs\HOL 04\Files, seleccionamos los siguientes archivos y hacemos clic en el botn Add:

3. Nos vamos a la vista Design de ArchivedNewsletters.aspx, pulsamos el smarTag del control TreeView1, y hacemos clic sobre Edit Nodes:

P g i n a | 10

4. Agregamos los siguientes nodos, y al finalizar hacemos clic en el botn Ok:

5. En la misma pgina arrastramos un control TextBox, le asignamos a la propiedad ID el valor de txtEmail, adems cambiamos el texto del control botn por Subscribirse:

6. Hago doble clic sobre el control Button1, para ir al mtodo del evento Click del botn. 7. Agregamos el siguiente cdigo al mtodo del evento Click:

P g i n a | 11

8. Guardamos los cambios nos vamos a la ventana Solution Explorer, hacemos clic derecho en la pgina ArchivedNewsletters.aspx y seleccionamos View in Browser:

9. Marcamos algunas opciones, y pulsamos el botn Subscribirse:

P g i n a | 12

10. Cerramos el navegador, volvemos a Visual Studio. 11. Nos vamos a la pgina a la vista Source de la pgina ArchivedNewsletters.aspx, y agregamos el siguiente atributo a la directiva Page, para mantener la posicin de las barras de desplazamiento del navegador durante un postback:

12. Nos vamos a la vista diseo de la misma pgina, y agregamos dos controles de validacin, el control RequiredFieldValidator y el control RegularExpressionValidator, al costado del control txtEmail:

P g i n a | 13

13. Seleccionamos el control RequiredFieldValidator1, y cambiamos las siguientes propiedades:

14. Seleccionamos el siguientes

control

RegularExpressionValidator1, adems pulsamos el botn de

cambiamos las la propiedad

propiedades,

ValidationExpression, para escoger la expresin regular para la validacin:

P g i n a | 14

15. Seleccionamos Internet e-mail address, y hacemos clic en el botn Ok:

16. Guardamos los cambios nos vamos a la ventana Solution Explorer, hacemos clic derecho en la pgina ArchivedNewsletters.aspx y seleccionamos View in Browser. 17. Ahora intentamos subscribirnos sin ingresar un email, o un email invlido, y la aplicacin no lo dejar:

P g i n a | 15

P g i n a | 16

Ejercicio 2: Agregando navegacin a nuestro sitio

Objetivo: En este ejercicio usted, aprender a usar los controles Menu, SiteMapPath, y

SiteMapDataSource, para agregar una navegacin inteligente a nuestro Sitio Web.

Paso 1: Usando un control Menu

1. Nos vamos a la vista Source de la pgina Template.master, abrimos la ventana Document Outline, y ubicamos el elemento headermenu dentro del elemento header:

2. Arrastramos un control Menu dentro del elemento div con id header2:

P g i n a | 17

3. Y agregamos los siguientes tems al men, adems le damos el nombre mnuHeader al men:

4. Nos vamos a la vista Design de la misma pgina, Template.master, seleccionamos el control mnuHeader y cambiamos las siguientes propiedades, de preferencia trate de cambiar primero las propiedades de la parte inferior para ver el impacto de los cambios en la vista diseo del control:

P g i n a | 18

5. Adems asignamos headermenulink a la propiedad CssClass, del control mnuHeader:

6. Guardamos los cambios nos vamos a la ventana Solution Explorer, hacemos clic derecho en la pgina Default.aspx y seleccionamos View in Browser. 7. Y podremos apreciar nuestro men:

P g i n a | 19

Paso 2: Agregando navegacin para todo el sitio

1. Hacemos clic derecho en nuestro sitio Web, y seleccionamos Add New Item:

2. Seleccionamos el tem Site Map, y hacemos clic en el botn Add:

3. Agregamos el siguiente cdigo al archivo Web.sitemap:

P g i n a | 20

4. Nos vamos a la vista Source de la pgina Template.master, abrimos la ventana Document Outline, y ubicamos el elemento footermenu dentro del elemento footer:

5. Agregamos un control Menu, y le damos el nombre mnuFooter:

6. Nos vamos a la vista diseo de la misma pgina, seleccionamos el control mnuFooter, pulsamos su smartTag, y seleccionamos un nuevo Data Source:

P g i n a | 21

7. Seleccionamos un Site Map como Data Source, y hacemos clic en el botn Ok:

8. Seleccionamos el control mnuFooter, y cambiamos las siguientes propiedades:

P g i n a | 22

9. Tambin cambiamos las siguientes propiedades:

10. Nos vamos a la vista Source de la pgina About.aspx, y en la directiva Page asignamos nuestra pgina maestra a la propiedad MasterPageFile:

P g i n a | 23

11. Guardamos los cambios nos vamos a la ventana Solution Explorer, hacemos clic derecho en la pgina Default.aspx y seleccionamos View in Browser. 12. Y podemos apreciar nuestro men en la parte inferior:

13. Cerramos el navegador, y volvemos a Visual Studio. 14. Nos vamos a la vista Source de Template.master, en el ventana Document Outline, ubicamos el elemento div breadcrumb:

P g i n a | 24

15. Y agregamos un control SiteMapPath:

16. Nos vamos la vista cdigo de la pgina Template.master, y eliminamos la propiedad Titulo. 17. Nos vamos a la vista cdigo de la pgina Default.aspx, y comentamos o eliminamos la siguiente lnea de cdigo:

P g i n a | 25

18. De igual manera nos vamos a la vista cdigo de la pgina Contact.aspx, y eliminamos el bloque de cdigo dentro del mtodo del evento Load de la pgina. 19. Guardamos los cambios nos vamos a la ventana Solution Explorer, hacemos clic derecho en la pgina Default.aspx y seleccionamos View in Browser. 20. Apreciamos que nos indica que estamos en Home:

21. Si hacemos clic en cualquier otro men, vemos que la navegacin se actualiza y da la posibilidad de regresar a la pgina anterior:

P g i n a | 26

Paso 3: Creando un archivo de navegacin personalizado

1. Hacemos clic derecho en el sitio Web, y seleccionamos Add Existing Item:

2. Seleccionamos el archivo TBH.sitemap, y hacemos clic en el botn Add:

3. Abrimos el archivo de configuracin web.config, y agregamos un elemento siteMap, dentro del elemento system.web:

P g i n a | 27

4. Nos vamos a la vista Source de la pgina Template.master, y el control SiteMapDataSource agregamos SiteMapProvider y le asignamos el provider agregado en el web.config, TBHSiteMapProvider:

5. Guardamos los cambios nos vamos a la ventana Solution Explorer, hacemos clic derecho en la pgina Default.aspx y seleccionamos View in Browser. 6. Podemos apreciar que la navegacin, y el men del footer, estn asociados a distintos archivos de navegacin:

P g i n a | 28

7. Al control SiteMapPath tambin podemos cambiar el provider de navegacin, al reciente provider creado:

8. Y por qu funcionaba sin tener un provider asociado?, Por qu, el provider por defecto es el archivo Web.sitemap?, Puedo cambiar el provider por defecto? 9. Navegamos hacia la carpeta C:\WINDOWS\Microsoft.NET\Framework \v2.0.50727\CONFIG, y abrimos el archivo web.config con el Notepad, o nuestro editor favorito:

P g i n a | 29

10. Y ese archivo vamos a encontrar el provider definido, para el SiteMap, asignado al archivo web.sitemap:

11. Nosotros desde nuestro archivo de configuracin web.config, podemos definir el provider por defecto, borrar todos los providers, o remover algn en particular:

P g i n a | 30

P g i n a | 31