El mapa del sitio ASP.NET 2.0 crea una estructura de navegación del sitio web

Autor：Eve Cole Fecha de actualización：2009-06-30 16:47:46

Si alguna vez ha viajado a un destino desconocido, sabe la importancia de los mapas: pueden ayudarle a que su viaje sea más cómodo. El mismo principio se aplica a los sitios web. Un sitio web debe presentar a los visitantes una estructura de navegación simple pero flexible para que puedan navegar fácilmente a diferentes partes del sitio web. ASP.NET 2.0 proporciona una característica llamada SiteMap que le ayuda a lograr esta funcionalidad. Este artículo explicará qué son los mapas de sitio y describirá cómo desarrollar una estructura de navegación de un sitio web que los utilice.

1. Mapa del sitio

Un mapa del sitio es un archivo XML (con extensión .sitemap) que describe en detalle todo el diseño de navegación de su sitio web. Puede utilizar archivos de mapas del sitio que se adapten a todos sus requisitos.

Un ejemplo ayudará a explicar los archivos de mapas del sitio. La Figura 1 muestra la estructura de directorios de un sitio web de ejemplo.

Figura 1: Estructura del sitio web

En la figura, la página de inicio (Default.aspx) y la página Contáctenos (contact.aspx) se encuentran en la carpeta raíz del sitio web. También hay dos subcarpetas llamadas Productos y Servicios. Hay dos formularios web debajo de cada subcarpeta: correspondientes a Producto1.aspx y Producto2.aspx, y Servicio1.aspx y Servicio2.aspx.

Ahora, simplemente siga estos pasos y podrá utilizar un mapa del sitio para describir la estructura de su sitio web:

1. Cree un nuevo sitio web usando VS.NET 2005.

2. Haga clic derecho en el sitio web y seleccione "Agregar nuevo elemento...".

3. Seleccione Mapa del sitio en el cuadro de diálogo "Agregar nuevo elemento..." (consulte la Figura 2) y asígnele el nombre Web.sitemap.

Figura 2: Agregar un nuevo mapa del sitio

Introduzca el siguiente formato XML en el archivo web.sitemap:

＜?xml versión="1.0" codificación="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Inicio" descripción="Mi sitio web"＞
＜siteMapNode url="~/products/default.aspx" title="Productos"＞
＜siteMapNode url="~/products/product1.aspx" title="Primer producto" /＞
＜siteMapNode url="~/products/product2.aspx" title="Segundo producto" /＞
＜/siteMapNode＞
＜siteMapNode url="~/services/default.aspx" title="Servicios"＞
＜siteMapNode url="~/services/service1.aspx" title="Primer servicio" /＞
＜siteMapNode url="~/services/service2.aspx" title="Segundo servicio" /＞
＜/siteMapNode＞
＜siteMapNode url="contacto.aspx" title="Contáctenos" /＞
＜/siteMapNode＞
＜/mapa del sitio＞

La raíz del archivo del mapa del sitio es siteMap. Contiene un nodo siteMapNode y, según la estructura de su sitio web, puede contener varios nodos siteMapNode.

Esta etiqueta siteMapNode tiene cuatro atributos importantes (consulte la Tabla 1).

El título

de descripción	de la propiedad
muestra	el título de la página. Los controles de navegación suelen utilizar esta propiedad para mostrar el título de la URL.
url	muestra la URL de la página descrita por este nodo.
descripción	especifica una descripción sobre esta página. Puede utilizar esta descripción para mostrar el contenido del mensaje.
roles	Al utilizar el recorte de seguridad (que se analiza más adelante), este atributo especifica los roles a los que se les permite acceder a esta página.

Tabla 1: Atributos importantes de la etiqueta

Esto forma su mapa del sitio. Ahora puedes usarlo con fines de navegación.
2. Cómo utilizar el mapa del sitio

Puede utilizar el archivo de mapa del sitio creado en la sección anterior de tres formas habituales:

· Usando el control SiteMapPath

· Uso del control de fuente de datos de SiteMap

· Usando la clase SiteMap

El control SiteMapPath le permite generar rutas de navegación. La Figura 3 muestra qué es la ruta de navegación.

Figura 3: Navegación de ruta de navegación

El control SiteMapPath muestra varios niveles de navegación. Por ejemplo, puede hacer clic en el nivel principal o raíz para retroceder o ir al nivel superior. Por supuesto, también puedes personalizar la jerarquía de navegación.

ASP.NET 2.0 también viene con un buen conjunto de controles de navegación, incluidos TreeView y menús. Con el control de fuente de datos SiteMap, puede vincular archivos de mapas del sitio a estos controles.

En algunos casos, es posible que los controles de navegación integrados no cumplan con sus requisitos. En este caso, puede acceder mediante programación al archivo del mapa del sitio y leer los distintos nodos del siteMapNode. Luego puede generar una estructura de navegación personalizada utilizando las propiedades de título y URL del siteMapNode.

3. Utilice el control SiteMapPath

Antes de entrar en detalles, primero creemos la estructura de directorios y el formulario web que necesitamos. Primero, agregue dos carpetas, Productos y Servicios, al sitio web. Luego, agregue una nueva página maestra MasterPage.master. A continuación, agregue los formularios web que se muestran en la Tabla 2 y asegúrese de configurar la página maestra para ellos cuando los agregue.

Carpeta	de nombre del formulario web
Default.aspx	Raíz del sitio web
Contact.aspx	Raíz del sitio web
Default.aspx	Productos
Producto1.aspx	Productos
Producto2.aspx	Productos
Default.aspx	Servicios
Servicio1.aspx	Servicios
Servicio2.aspx	Servicios

Tabla 2: Lista de formularios web

Ahora, abra la página maestra que agregó anteriormente. Arrastre un control Label y un control SiteMapPath sobre él. Luego, establezca la propiedad Texto de la Etiqueta en "¡Bienvenido!".

La siguiente lista muestra todas las etiquetas en la página MasterPage.master:

＜%@ Lenguaje maestro="C#" AutoEventWireup="true"
CodeFile="MasterPage.master.cs" Hereda="MasterPage" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜cabeza runat="servidor"＞
＜título＞Página sin título＜/título＞
＜/cabeza＞

＜form id="form1" runat="servidor"＞

＜asp:Label ID="Label1" runat="servidor" Font-Size="XX-Large" ForeColor="Blue" Text="¡Bienvenido!"＞＜/asp:Label＞＜br /＞
Font-Names="Verdana" Font-Size="0.8em" PathSeparator=": "＞
＜PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" /＞
＜CurrentNodeStyle ForeColor="#333333" /＞
＜NodeStyle Font-Bold="True" ForeColor="#7C6F57" /＞
＜RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" /＞
＜/asp:SiteMapPath＞
＜br /＞
＜br /＞

＜/asp:contentplaceholder＞
＜/div＞
＜/formulario＞
＜/cuerpo＞
＜/html＞

Ahora, abra Default.aspx desde la carpeta raíz. Default.aspx debería verse como en la Figura 4.

Figura 4: Ejecución de muestra de Default.aspx

Para diseñar esta página, agregue una tabla con 4 filas y 1 columna. Arrastre un control Etiqueta a la fila superior y establezca su propiedad Texto en "¡Bienvenido a nuestro sitio web!". Luego, arrastre los tres controles HyperLink a las filas restantes y establezca sus propiedades Text y NavigateUrl, como se muestra en la Tabla 3.

ID de hipervínculo Propiedad	de texto Propiedad	NavigateUrl
Productos	HyperLink1	~/products/default.aspx
Servicios	HyperLink2	~/Services/default.aspx
HyperLink3	Contáctenos	~/contact.aspxTabla

3: Configuración de las propiedades de los hipervínculos

La siguiente lista muestra el marcado completo en Default.aspx:

＜%@ Idioma de página="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Hereda = "_Default" Título = "Página sin título" %＞
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Servidor">
＜centro＞

＜tr＞
＜td ancho="60%"＞
Text="¡Bienvenido a nuestro sitio web!"＞＜/asp:Label＞＜/td＞
＜/tr＞
＜tr＞
＜td ancho="60%"＞
Font-Size="X-Large" NavigateUrl="~/Products/Default.aspx">Productos
＜/asp:HyperEnlace＞＜/td＞
＜/tr＞
＜tr＞
＜td ancho="60%"＞
NavigateUrl="~/Services/Default.aspx">Servicios
＜/asp:HyperEnlace＞＜/td＞
＜/tr＞
＜tr＞
＜td ancho="60%"＞
Font-Size="X-Large" NavigateUrl="~/Contact.aspx">Contáctenos
＜/asp:HyperEnlace＞＜/td＞
＜/tr＞
＜/mesa＞
＜/centro＞
＜/asp:Contenido＞

Ahora, abra Default.aspx desde la carpeta Productos y diséñelo como se muestra en la Figura 5.

Figura 5: Página predeterminada de la carpeta Productos

La Tabla 4 enumera todos los hipervínculos utilizados en formularios web.

ID de hipervínculo Propiedad	de texto Propiedad	NavigateUrl
Primer producto	HyperLink1	~/products/product1.aspx
HyperLink2	Segundo producto	~/products/product2.aspx

Tabla 4: Información de hipervínculo en la página predeterminada en la carpeta Productos

Siguiendo el mismo principio, diseñe Default.aspx desde la carpeta Servicios y el resultado se muestra en la Figura 6.

Figura 6. Página predeterminada de la carpeta Servicios

La Tabla 5 enumera la información de hipervínculos utilizada en los formularios web.

ID de hipervínculo Propiedad	de texto Propiedad	NavigateUrl
Primer servicio	HyperLink1	~/Services/service1.aspx
Segundo servicio	HyperLink2	~/Services/service2.aspx

Tabla 5: Información de hipervínculo en la página predeterminada en la carpeta Productos

Finalmente, agregue una etiqueta a cada formulario web y establezca su propiedad Texto como se muestra en la Tabla 6.

Etiqueta

Atributo de texto del	nombre del formulario web
~/Contact.aspx	Contáctenos
~/Products/Product1.aspx	Detalles del primer producto
~/Products/Product2.aspx	Detalles del segundo producto
~/Services/Service1.aspx	Detalles del primer servicio
~/Services/Service2. aspx	Segundo formulario de detalles del servicio

6: configuración de la propiedad Texto de la etiqueta del formulario web restante

Ahora, ejecute Default.aspx desde la carpeta raíz y navegue hasta la página Product1.aspx. La Figura 7 muestra una ejecución de muestra del formulario web.

Figura 7: Ejecución de muestra de Product1.aspx

Observe cómo los atributos de título y URL del archivo web.sitemap se utilizan para generar "rutas de navegación". Además, observe cómo se muestra el padre junto con el título de la página actual. Intente navegar a varias páginas y observar el control SiteMapPath.

4. Utilice el control de fuente de datos de SiteMap

El uso de mapas del sitio no se limita al control SiteMapPath. También puede adjuntar un mapa del sitio a un control navegable (como TreeView). En el siguiente ejemplo, utilizará el mismo archivo de mapa del sitio para implementar el enlace a un control TreeView.

Agregue un nuevo formulario web SiteMapDataSourceDemo.aspx al sitio web. Luego, arrastre un control de fuente de datos SiteMap (SiteMapDataSource1) y un control TreeView (TreeView1) al formulario. Establezca la propiedad DataSourceID de este control TreeView en SiteMapDataSource1. Además, establezca la propiedad ShowLines del control TreeView en verdadero. Aquí está el marcado completo de la página SiteMapDataSourceDemo.aspx:

＜%@ Idioma de página="C#" AutoEventWireup="true"
CodeFile="SiteMapDataSourceDemo.aspx.cs"
Hereda="SiteMapDataSourceDemo" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜cabeza runat="servidor"＞
＜título＞Página sin título＜/título＞
＜/cabeza＞

＜form id="form1" runat="servidor"＞
MostrarLineas="Verdadero"＞
＜/asp:TreeView＞
＜asp:SiteMapDataSource ID="SiteMapDataSource1" runat="servidor" /＞
＜/formulario＞
＜/cuerpo＞
＜/html＞

Ahora, ejecute el formulario web para ver cómo se genera automáticamente la misma estructura de navegación en TreeView (consulte la Figura 8).

Figura 8: Vincular el archivo del mapa del sitio a un control TreeView

5. Utilice la clase SiteMap

Mostrar datos del mapa del sitio en un control SiteMapPath o TreeView funciona muy bien. Sin embargo, a veces es posible que necesites diseñar una lógica de generación personalizada. Por ejemplo, es posible que desee desarrollar un control de navegación personalizado que muestre su padre solo verticalmente. En este caso, debe acceder al archivo del mapa del sitio mediante programación. La clase SiteMap le permite lograr exactamente esto.

Esta ruta de SiteMap tiene dos propiedades importantes: RootNode y CurrentNode. Todos sus tipos son SiteMapNode y ambos le permiten hacer referencia al nodo raíz y al nodo actual del mapa del sitio, respectivamente. La Tabla 7 enumera algunas propiedades importantes de la clase SiteMapNode.

Descripción	de la propiedad
ChildNodes	representa la colección de todos los nodos secundarios del nodo actual
HasChildNodes	indica si el nodo del mapa del sitio tiene nodos secundarios (verdadero/falso)
El título	devuelve el valor del atributo de título especificado en el archivo del mapa del sitio
La URL	devuelve en el archivo del mapa del sitio El valor del atributo de URL especificado
Descripción	devuelve el valor del atributo de descripción especificado en el archivo del mapa del sitio
ParentNode	indica la referencia del nodo del mapa del sitio principal del nodo actual

Tabla 7: Algunos atributos importantes de la clase SiteMapNode

El siguiente ejemplo utiliza una ruta de SiteMap para acceder a un único nodo de un archivo de mapa de sitio. Luego, agréguelos mediante programación a un control TreeView.

Agregue un formulario web llamado SiteMapCustom.aspx. Luego, arrastre un control TreeView sobre él. Agregue el código de listado al evento Page_Load de este formulario web:

Page_Load vacío protegido (remitente del objeto, EventArgs e)
{
int recuento = SiteMap.RootNode.ChildNodes.Count;
para (int i = 0; i < contar; i++)
{
SiteMapNode smNode=SiteMap.RootNode.ChildNodes[i];
TreeNode tvNode = new TreeNode(smNode.Title, "", "", smNode.Url, "");
TreeView1.Nodes.Add(tvNode);
si (smNode.HasChildNodes)
{
int childCount=smNode.ChildNodes.Count;
para (int j = 0; j < childCount; j++)
{
SiteMapNode smChildNode = smNode.ChildNodes[j];
TreeNode tvChildNode = nuevo TreeNode(smChildNode.Title,
"", "",
smChildNode.Url, "");
tvNode.ChildNodes.Add(tvChildNode);
}
}
}
}

Aquí, primero obtiene el número total de nodos secundarios en el nodo raíz. Luego, recorre la colección ChildNodes del nodo raíz. En cada iteración, crea una nueva instancia de la clase TreeNode y especifica su título y URL en su constructor. Luego, agrega este TreeNode a la colección de nodos de TreeView. Luego, verifica si el SiteMapNode actual tiene nodos secundarios. Si lo hay, lo recorre y repite el proceso de creación de TreeNode. Tenga en cuenta que esta vez agrega los nuevos TreeNodes a la colección ChildNodes del objeto TreeNode actual.

Tenga en cuenta que utiliza 2 en el bucle porque sabe que sólo hay dos niveles de anidamiento. Para hacer que su lógica sea más general, puede usar la recursividad para completar TreeView.

Ejecute el formulario web y verá nuevamente algo similar a la Figura 8.

6. Utilice mantenimiento de seguridad

A menudo, los sitios web implementan un modelo de seguridad basado en roles. Por ejemplo, puede tener diferentes roles en su aplicación, como administrador del sistema, probador de productos y probador de servicios. En situaciones como esta, a menudo es necesario controlar los enlaces de navegación del sitio que se muestran a los usuarios. Por ejemplo, si el usuario que ha iniciado sesión actualmente tiene la función de probador de productos, es posible que desee mostrar solo enlaces relacionados con el producto y ocultar cualquier otro enlace. Una forma de manejar roles es utilizar codificación manual; sin embargo, requiere implementar toda la lógica de autorización mediante programación. Afortunadamente, los archivos de mapas del sitio y el control de fuente de datos de SiteMap juntos brindan una función llamada recorte de seguridad para ayudarlo.

Para probar la revisión de seguridad, debe habilitar las funciones de membresía y función de su sitio. Abra el archivo web.config y agregue las siguientes etiquetas:

＜modo de autenticación="Formularios" /＞
＜autorización＞
＜denegar usuarios="?"＞＜/denegar＞
＜/autorización＞

Aquí, ha configurado el modo de autenticación en Formularios. También puede establecer reglas de autorización para que los usuarios anónimos no puedan acceder al sitio. Luego, debe habilitar la función de administración de roles agregando las siguientes marcas al archivo web.config:

＜roleManager habilitado="true" /＞

Luego, seleccione "Sitio web>Configuración ASP.NET" en el menú VS.NET para abrir la herramienta de administración de sitios web. Utilice esta herramienta para agregar dos roles: ProductTesters y ServiceTesters (consulte la Figura 9). Cuando un usuario que pertenece al rol ProductTesters inicia sesión, solo desea mostrar enlaces relacionados con el producto en el control TreeView de navegación. Del mismo modo, cuando un usuario que pertenece al rol de ServiceTesters se registra, solo se deben mostrar enlaces relacionados con el servicio en TreeView.

Figura 9: Agregar roles usando herramientas de administración de sitios web

Utilice la herramienta de administración de sitios web para crear dos usuarios, denominados usuario1 y usuario2. Agregue usuario1 a la función ProductTesters y usuario2 a la función ServiceTesters (consulte la Figura 10).

Figura 10: Creación de usuarios utilizando herramientas de administración de sitios web

Nota: De forma predeterminada, la información de usuario y función se almacena en la base de datos ASPNETDB en la carpeta App_Data de su sitio web. ASP.NET crea automáticamente esta base de datos si no existe.

Ahora, agregue un nuevo archivo de mapa del sitio SecurityTrimming.sitemap al sitio web e ingrese las siguientes etiquetas:

＜?xml versión="1.0" codificación="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Inicio" descripción="Mi sitio web"＞
＜siteMapNode title="Productos" roles="ProductTesters"＞
＜siteMapNode url="~/products/product1.aspx" title="Primer producto" /＞
＜siteMapNode url="~/products/product2.aspx" title="Segundo producto" /＞
＜/siteMapNode＞
＜siteMapNode title="Servicios" roles="ServiceTesters"＞
＜siteMapNode url="~/services/service1.aspx" title="Primer servicio" /＞
＜siteMapNode url="~/services/service2.aspx" title="Segundo servicio" /＞
＜/siteMapNode＞
＜siteMapNode url="contact.aspx" title="Contáctenos" /＞
＜/siteMapNode＞
＜/mapa del sitio＞

La mayor parte del marcado aquí es el mismo que en el archivo web.sitemap. Sin embargo, hay un atributo importante agregado a Productos y Servicios: siteMapNodes:roles. El atributo roles especifica los roles que pueden acceder a este nodo y sus nodos secundarios. Debido a que los enlaces asociados con productos solo se muestran a los usuarios que pertenecen al rol ProductTesters, establecerá el atributo de roles de Products siteMapNode en ProductTesters. Siguiendo la misma lógica, establecería el atributo roles de Servicios siteMapNode en ServiceTesters. Los SiteMapNodes sin el atributo de roles especificado son accesibles para todos los usuarios. Además, tenga en cuenta que los nodos Productos y Servicios ya no tienen atributos de URL especificados.

Ahora, debe configurar el proveedor del mapa del sitio y habilitar la renovación de la seguridad para que el control de la fuente de datos del SiteMap pueda comportarse de acuerdo con sus requisitos. Agregue las siguientes etiquetas al archivo web.config:

＜proveedores＞
＜añadir nombre="miproveedor"
tipo="System.Web.XmlSiteMapProvider"
siteMapFile="Recorte de seguridad.mapa del sitio"
seguridadTrimmingEnabled="true" />
＜/proveedores＞

Aquí, agrega la sección y especifica un proveedor que apunta al archivo SecurityTrimming.sitemap. Tenga en cuenta que el atributo securityTrimmingEnabled aquí está establecido en verdadero para admitir el recorte de seguridad. Después de configurar la sección , el control de fuente de datos de SiteMap "recoge" automáticamente esta configuración de esta sección.

Agregue un nuevo formulario web llamado Login.aspx al sitio web. Luego, arrastre un control de inicio de sesión y establezca su propiedad DestinationPageUrl en "~/SiteMapDataSourceDemo.aspx". Tenga en cuenta que previamente desarrolló SiteMapDataSourceDemo.aspx.

Ejecute Login.aspx (consulte la Figura 11) e ingrese las credenciales para el usuario1.

Figura 11: Página de inicio de sesión

Después de iniciar sesión correctamente, debería ver el TreeView que se muestra en la Figura 12. Como el usuario1 pertenece al rol ProductTesters, el enlace al servicio está oculto.

Figura 12: Utilice la restauración de seguridad

7. Resumen

Un mapa del sitio es un archivo XML que contiene todos los detalles de la estructura de su sitio web. Puede utilizar archivos de mapas del sitio para generar estructuras de navegación. Tres formas comunes de utilizar archivos de mapas del sitio son: utilizar el control SiteMapPath, utilizar el control de fuente de datos SiteMap o utilizar la clase SiteMap. También puede utilizar una función llamada recorte de seguridad para admitir la seguridad basada en roles en los enlaces de navegación generados. Juntos, estos controles y clases ayudan a crear una estructura de navegación profesional para su sitio web.