Tutorial: Agregar la funcin de exploracin de

sitios Web
En cualquier sitio que no tenga un nmero muy reducido de pginas puede resultar difcil crear un
sistema de exploracin que permita a los usuarios desplazarse libremente por las pginas, sobre
todo si se realizan cambios en el sitio. La funcin de exploracin de sitios de ASP.NET permite crear
un mapa centralizado de las pginas del sitio.
En este tutorial se muestra cmo configurar el mapa de un sitio y cmo utilizar controles que
dependan del mapa del sitio para agregar funciones de exploracin a las pginas del sitio Web.
Durante este tutorial aprender a hacer lo siguiente:
Crear un sitio Web que tenga pginas de ejemplo y un archivo de mapa del sitio que
describa el diseo de las pginas.
Utilizar el control TreeView como men de exploracin que permita a los usuarios ir
directamente a cualquier pgina del sitio.
Utilizar el control SiteMapPath para agregar una ruta de exploracin que permita a un
usuario ver la jerarqua del sitio y retroceder a niveles superiores desde la pgina actual.
Utilizar el control Menu para agregar un men de exploracin que permita a los usuarios ver
un nivel de nodos a la vez. Al pausar el puntero del mouse sobre un nodo que tenga nodos
secundarios, se generar un submen de los nodos secundarios.
Utilizar la exploracin del sitio y los controles en una pgina principal para que slo tenga
que definir una vez las funciones de exploracin del sitio.
Requisitos previos

Para poder completar este tutorial, necesitar lo siguiente:
Herramienta de desarrollo Web Microsoft Visual Web Developer.
El entorno .NET Framework
En este tutorial se supone que sabe utilizar Visual Web Developer.
Crear un sitio Web con pginas de ejemplo y un mapa
del sitio



Si ya ha creado un sitio Web en Visual Web Developer en Tutorial: Crear una pgina Web bsica en
Visual Web Developer, puede utilizar ese sitio Web e ir a la seccin siguiente. De lo contrario, cree un
sitio Web y una pgina nuevos siguiendo estos pasos.
Crear un sitio Web de sistema de archivos
Para crear un sitio Web del sistema de archivos
1. Abra Visual Web Developer.
2. En el men Archivo, haga clic en Nuevo sitio Web (o en el men Archivo, haga clic en
Nuevo y, a continuacin, haga clic en Sitio Web).
Aparece el cuadro de dilogo Nuevo sitio Web.
3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.
4. En el cuadro Ubicacin situado en el extremo izquierdo, haga clic en Sistema de archivos
y, en el cuadro Ubicacin situado en el extremo derecho, escriba el nombre de la carpeta
en la que desea mantener las pginas del sitio Web.
Por ejemplo, escriba el nombre de carpeta C:\WebSites\SiteNavigation.
5. En el cuadro Lenguaje, haga clic en el lenguaje de programacin con el que prefiera
trabajar.
El lenguaje de programacin que elija ser el lenguaje predeterminado de su sitio Web,
pero tambin puede establecer el lenguaje de programacin de cada pgina de forma
individual.
6. Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una nueva pgina denominada Default.aspx.
Crear un mapa del sitio
Para la exploracin del sitio, necesita un medio de describir la disposicin de las pginas en el sitio.
El mtodo predeterminado consiste en crear un archivo .xml que contenga la jerarqua del sitio,
incluidos los ttulos de las pginas y las direcciones URL.
La estructura del archivo .xml refleja la estructura del sitio. Cada pgina se representa como un
elemento siteMapNode en el mapa del sitio. El nodo de nivel superior representa la pgina
principal y los nodos secundarios representan pginas que se encuentran en un nivel ms profundo
en el sitio.
Para crear un mapa del sitio
1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el nombre
del sitio Web y, a continuacin, haga clic en Agregar nuevo elemento.


2. En el cuadro de dilogo Agregar nuevo elemento <rutaDeAcceso>:
1. En Plantillas instaladas de Visual Studio, haga clic en Mapa del sitio.
2. En el cuadro Nombre, asegrese de que el nombre es Web.sitemap.
Nota
El archivo se debe denominar Web.sitemap y tiene que aparecer en la raz del sitio Web.
3. Haga clic en Agregar.
3. Copie el siguiente contenido XML en el archivo Web.sitemap, de modo que se sobrescriba
el contenido predeterminado.
Copiar
<siteMap>
<siteMapNode title="Home" description="Home" url="~/home.aspx" >
<siteMapNode title="Products" description="Our products"
url="~/Products.aspx">
<siteMapNode title="Hardware"
description="Hardware we offer"
url="~/Hardware.aspx" />
<siteMapNode title="Software"
description="Software for sale"
url="~/Software.aspx" />
</siteMapNode>
<siteMapNode title="Services" description="Services we offer"
url="~/Services.aspx">
<siteMapNode title="Training" description="Training"
url="~/Training.aspx" />
<siteMapNode title="Consulting" description="Consulting"
url="~/Consulting.aspx" />
<siteMapNode title="Support" description="Support"


url="~/Support.aspx" />
</siteMapNode>
</siteMapNode>
</siteMap>
El archivo Web.sitemap contiene un conjunto de elementos siteMapNode que se anidan en
tres niveles. La estructura de cada elemento es la misma. La nica diferencia entre ellos
radica en su ubicacin dentro de la jerarqua XML.
La direccin URL de las pginas que se definen en el archivo .xml de ejemplo es incompleta.
Esto significa que todas las pginas se tratan como si tuvieran direcciones URL relativas a la
raz de la aplicacin. Sin embargo, puede especificar cualquier URL para una pgina
determinada: la estructura lgica que defina en el mapa del sitio no tiene por qu
corresponder al diseo fsico de las pginas en las carpetas.
4. Guarde el archivo y cirrelo.
Crear pginas para la exploracin
En esta seccin slo crear algunas de las pginas que se describen en el mapa del sitio que defini
en la seccin anterior. (El mapa del sitio es ms amplio para que pueda ver una jerarqua completa
al probar las pginas en este tutorial).
Para crear las pginas para la exploracin
1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el nombre
del sitio Web y, a continuacin, haga clic en Agregar nuevo elemento.
2. En el cuadro de dilogo Agregar nuevo elemento <rutaDeAcceso>:
1. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
2. En el cuadro Nombre, escriba Home.aspx y, a continuacin, haga clic en Agregar.
3. Cambie a la vista Diseo.
4. En la pgina Home.aspx, escriba Inicio y, a continuacin, aplique el formato como
Encabezado 1
Repita este procedimiento y cree cuatro pginas adicionales con los nombres
Products.aspx, Hardware.aspx, Software.aspx y Training.aspx. Utilice el nombre de la pgina
(por ejemplo, Productos) como encabezado para poder reconocer cada pgina cuando se
muestre en el explorador.
No es importante qu paginas se creen especficamente. Las pginas que se enumeran en
este procedimiento son sugerencias que le permitirn ver la jerarqua del sitio anidada en
tres niveles.
Crear un men de exploracin con el control TreeView



Ahora que tiene un mapa del sitio y algunas pginas, puede agregar funciones de exploracin al
sitio. Utilizar el control TreeView como men de exploracin contrable.

Para agregar un men de exploracin de tipo rbol
1. Abra la pgina Home.aspx.
2. Desde el Cuadro de herramientas, arrastre a la pgina un control SiteMapDataSource del
grupo Datos.
En su configuracin predeterminada, el control SiteMapDataSource recupera la informacin
que necesita del archivo Web.sitemap que cre anteriormente en este tutorial, en la seccin
"Crear un mapa del sitio", por lo que no tendr que especificar informacin adicional para el
control.
3. Arrastre un control TreeView desde el grupo Exploracin del Cuadro de herramientas
hasta la pgina.
4. En el men Tareas de Treeview, en el cuadro Elegir origen de datos, haga clic en
SiteMapDataSource1.
5. Guarde la pgina.
Probar el men de exploracin de tipo rbol
Ahora puede realizar una prueba provisional del sistema de exploracin.
Para probar el men de exploracin
1. Presione CTRL+F5 para ejecutar la pgina Home.aspx.
En el rbol se muestran dos niveles de nodos.


2. Haga clic en Productos para ver la pgina Productos.
o Si no cre ninguna pgina Products.aspx, haga clic en el vnculo de otra pgina que
haya creado.
En el estado actual del sitio Web, el men de exploracin slo aparece en la pgina principal (Inicio).
Puede agregar los mismos controles SiteMapDataSource y TreeView a cada pgina de la
aplicacin para mostrar un men de exploracin en cada pgina. Sin embargo, ver ms adelante
en este tutorial cmo colocar el men de exploracin en una pgina principal de modo que el men
de exploracin aparezca automticamente con todas las pginas.
Mostrar el historial de exploracin con el control
SiteMapPath

Adems de crear un men de exploracin mediante el control TreeView, en cada pgina puede
agregar funciones de exploracin que muestren dnde se encuentra la pgina en la jerarqua actual.
Este tipo de control de exploracin tambin se conoce como ruta de exploracin. ASP.NET
proporciona el control SiteMapPath que puede implementar automticamente funciones de
exploracin de pginas.
Para que se muestre el historial de exploracin
1. Abra la pgina Products.aspx y cambie a la vista Diseo.
2. Desde el grupo Exploracin del Cuadro de herramientas, arrastre un control SiteMapPath
hasta la pgina, coloque el cursor delante del control SiteMapPath y, a continuacin,
presione ENTRAR para crear una nueva lnea.
El control SiteMapPath muestra la posicin de la pgina actual en la jerarqua de las
pginas. De forma predeterminada, el control SiteMapPath representa la jerarqua que se
crea en el archivo Web.sitemap. Por ejemplo, cuando muestra la pgina Products.aspx, el
control SiteMapPath muestra la ruta de acceso siguiente:
Inicio > Productos
3. Repita este procedimiento para las otras pginas que ha creado en este tutorial, excepto la
pgina principal (Inicio).
Aunque no coloque un control SiteMapPath en todas las pginas, para la prueba
necesitar un control en cada nivel de la jerarqua del sitio (por ejemplo, en las pginas
Products.aspx y Hardware.aspx).
Probar el historial de exploracin
Puede probar la exploracin de las pginas viendo pginas que estn en el segundo y tercer niveles
de la jerarqua.


Para probar la exploracin por las pginas
1. Abra la pgina Home.aspx y, a continuacin, presione CTRL+F5 para ejecutar la pgina.
2. Utilice el control TreeView para desplazarse a la pgina Productos.
En la ubicacin de la pgina donde coloca el control SiteMapPath, ver una ruta de acceso
similar a la siguiente:
Inicio > Productos
3. Haga clic en Inicio para ir a la pgina principal.
4. Utilice el control TreeView para desplazarse hasta la pgina Hardware.
En esta ocasin ver una ruta de acceso similar a la siguiente:
Inicio > Productos > Hardware
Todos los nombres de pgina que muestra el control SiteMapPath son vnculos, excepto el ltimo,
que representa la pgina actual. Puede convertir el nodo actual en un vnculo si establece la
propiedad RenderCurrentNodeAsLink del control SiteMapPath en true.
El control SiteMapPath permite a los usuarios retroceder a niveles superiores de la jerarqua, pero
no saltar a una pgina que no se encuentre en la ruta de la jerarqua actual.
Crear un men de exploracin con el control Menu

Adems de crear un men de exploracin mediante el control TreeView, puede utilizar el control
Menu para que se muestre un men de exploracin expandible que permita a los usuarios ver un
nivel de nodos a la vez. Al pausar el puntero del mouse sobre un nodo que tenga nodos
secundarios, se generar un submen de los nodos secundarios.
Para agregar un recurso de exploracin de tipo men
1. Abra la pgina Products.aspx y cambie a la vista Diseo.
2. Arrastre un control Menu desde el grupo Exploracin del Cuadro de herramientas hasta la
pgina.
3. En el men Tareas de men, en el cuadro Elegir origen de datos, haga clic en
NewDataSource.
4. En el asistente Configurar origen de datos <Datasourcename>, haga clic en Mapa del
sitio y, a continuacin, haga clic en Aceptar.
5. Guarde la pgina.
Probar el recurso de exploracin de tipo men


Ahora puede realizar una prueba provisional del sistema de exploracin.
Para probar el men de exploracin
1. Cierre Tareas de men.
2. Abra la pgina Home.aspx.
3. Presione CTRL+F5 para ejecutar la pgina Home.aspx.
En el rbol se muestran dos niveles de nodos.
4. Haga clic en Productos para ver la pgina Productos.
o Si no cre ninguna pgina Products.aspx, haga clic en el vnculo de otra pgina que
haya creado.
5. En el men de exploracin, site el puntero del mouse en el vnculo Inicio para expandir el
men.
En el estado actual del sitio Web, el men de exploracin slo aparece en la pgina principal. Puede
agregar los mismos controles SiteMapDataSource y Menu a cada pgina de la aplicacin para
mostrar un men de exploracin en cada pgina. Sin embargo, en la seccin siguiente de este
tutorial ver cmo colocar el men de exploracin en una pgina principal de modo que aparezca
automticamente con cada pgina.
Combinar la funcin de exploracin del sitio con pginas
principales

En las pginas que ha creado hasta ahora en este tutorial ha agregado los controles de exploracin
del sitio a las pginas de forma individual. Esto no resulta especialmente complejo, porque no es
necesario configurar los controles de un modo distinto para cada pgina. Sin embargo, puede
aumentar el costo de mantenimiento del sitio. Por ejemplo, si deseara cambiar la ubicacin del
control SiteMapPath en las pginas del sitio, tendra que cambiar individualmente cada pgina.
Si utiliza los controles de exploracin del sitio en combinacin con las pginas principales, puede
crear un diseo que contenga los controles de exploracin en una ubicacin. Podr mostrar pginas
como contenido dentro de la pgina principal.
Para crear la pgina principal para la exploracin
1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el nombre
del sitio Web y, a continuacin, haga clic en Agregar nuevo elemento.
2. En el cuadro de dilogo Agregar nuevo elemento <rutaDeAcceso>:
1. En Plantillas instaladas de Visual Studio, haga clic en Pgina principal.
2. En el cuadro Nombre, escriba Navigation.master y haga clic en Agregar.
3. Cambie a la vista Diseo.


La pgina principal aparece con un control ContentPlaceHolder predeterminado.
En el procedimiento siguiente crear una pgina principal con un diseo sencillo para los controles
de exploracin. En una aplicacin real es probable que utilice un formato ms complejo, pero las
tcnicas de uso de los controles de exploracin en una pgina principal sern similares.
Para agregar controles de exploracin a la pgina principal
1. Haga clic en la barra de ttulo para el control ContentPlaceHolder, presione la FLECHA
IZQUIERDA y, a continuacin, presione la BARRA ESPACIADORA.
De ese modo se inserta una lnea en blanco delante del control ContentPlaceHolder.
2. Desde el grupo Datos del Cuadro de herramientas, arrastre un control SiteMapDataSource
hasta la pgina principal y colquelo sobre el control ContentPlaceHolder.
Nota
No coloque el control SiteMapDataSource en el control ContentPlaceHolder.
3. De forma predeterminada, el control SiteMapDataSource utilizar el archivo Web.sitemap
que cre anteriormente en este tutorial, en la seccin "Crear un mapa del sitio".
4. Haga clic en el control SiteMapDataSource, presione la FLECHA DERECHA y, a
continuacin, presione la BARRA ESPACIADORA.
De este modo se inserta una lnea en blanco bajo el control SiteMapDataSource.
5. En el men Diseo, haga clic en Insertar tabla y, a continuacin, inserte una tabla que
tenga una fila, dos columnas y un ancho del 100%.
6. Desde el grupo Exploracin del Cuadro de herramientas, arrastre un control TreeView
hasta la celda izquierda de la tabla.
7. En el men Tareas de Treeview, en el cuadro Elegir origen de datos, haga clic en
SiteMapDataSource1.
8. Desde el grupo Exploracin del Cuadro de herramientas, arrastre un control SiteMapPath
hasta la celda derecha de la tabla.
9. En la celda derecha, haga clic en el rea en blanco y, a continuacin, presione
MAYS+ENTRAR para crear una nueva lnea.
10. Arrastre el control ContentPlaceholder hasta la celda derecha de la tabla y colquelo bajo
el control SiteMapPath.
Cuando se utiliza una pgina principal, las pginas del sitio se crean como pginas de contenido.
Las pginas de contenido utilizan controles Content para definir el texto y los controles que se
muestran en el control ContentPlaceholder de la pgina principal. Por consiguiente, tendr que
volver a crear las pginas Inicio, Productos, y Hardware como pginas de contenido.


Para crear las pginas de contenido del sitio
1. En el Explorador de soluciones, haga clic con el botn secundario del mouse en la pgina
Home.aspx, haga clic en Eliminar y, a continuacin, haga clic en Aceptar.
2. Repita el paso 1 para las pginas Products.aspx, Software.aspx, Training.aspx, Hardware.aspx
y cualquier otra pgina que haya creado.
Volver a crear las pginas como pginas de contenido que utilizan una pgina principal.
3. En el Explorador de soluciones, haga clic con el botn secundario del mouse en el nombre
del sitio Web y, a continuacin, haga clic en Agregar nuevo elemento.
4. En el cuadro de dilogo Agregar nuevo elemento:
1. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
2. En el cuadro Nombre, escriba Home.aspx.
3. Active la casilla de verificacin Seleccionar la pgina principal.
4. Haga clic en Agregar.
Aparece el cuadro de dilogo Seleccionar una pgina principal.
5. En Contenido de la carpeta, haga clic en Navigation.master y, a continuacin, haga clic
en Aceptar.
Ha creado una pgina de contenido que se enlaza a la pgina principal que cre en la
seccin anterior.
6. Cambie a la vista Diseo.
En la vista Diseo, ver el diseo que ha creado para la pgina principal, con una regin que
se puede editar en un control Content1 que corresponde al control ContentPlaceHolder1
en la pgina principal.
7. Haga clic dentro de la ventana Content.
Aqu es donde puede agregar contenido para esta pgina en concreto.
8. Escriba Inicio y, a continuacin, d formato al texto como Encabezado 1.
Ha creado el texto esttico (especficamente, el encabezado) para la pgina Inicio.
9. Repita los pasos 3 a 8 para crear una pgina de contenido Products.aspx y una pgina de
contenido Hardware.aspx. En el paso 8, escriba Productos y Hardware, respectivamente, en
lugar de Inicio.
Probar los controles de exploracin en la pgina principal
Realizar pruebas con pginas principales y con pginas de contenido es igual que probar pginas
individuales.


Para probar los controles de exploracin en la pgina principal
1. Abra la pgina Products.aspx y, a continuacin, presione CTRL+F5 para ejecutar la pgina.
La pgina de contenido Productos se combina con la pgina principal. En el explorador,
ver una pgina que contiene el encabezado Productos y los controles de exploracin que
agreg a la pgina principal.
2. En el control TreeView, haga clic en Hardware.
La pgina Hardware se muestra con el mismo diseo que la pgina Productos, slo que el
control SiteMapPath muestra una ruta de acceso diferente.
Pasos siguientes

En este tutorial se muestra la funcionalidad bsica de exploracin de sitios y los controles de
exploracin de ASP.NET. Quizs desee probar otras caractersticas de exploracin. Por ejemplo,
puede hacer lo siguiente:
Dar formato al control SiteMapPath para personalizar su apariencia. El control admite
numerosas opciones con las que administrar cmo se muestran los vnculos. Para obtener
ms informacin, vea SiteMapPath.
Personalizar la presentacin de las pginas en el control TreeView. Por ejemplo, podra
resaltar la pgina actual en el nodo de Treeview.
Trabajar mediante programacin con la informacin de exploracin del sitio. En la pgina
actual hay disponible un control SiteMapPath que se puede utilizar para mostrar mediante
programacin la informacin de exploracin.
Utilizar un almacn de datos diferente para la informacin del mapa del sitio. En lugar de
utilizar el archivo XML de mapa del sitio predeterminado, quiz desee utilizar un mapa de
sitio existente o almacenar informacin del mapa del sitio en una base de datos. Para la
funcin de exploracin de sitios de ASP.NET se utiliza un modelo de proveedor. Puede crear
un componente que administre informacin del mapa del sitio y, a continuacin, configurar
su aplicacin para que utilice ese componente en lugar del proveedor de mapas de sitio
predeterminado. Para obtener ms informacin, vea Proveedores de exploracin del sitio de
ASP.NET.