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 <siteMapNode>
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＞
<cuerpo>
＜form id="form1" runat="servidor"＞
<div>
＜asp:Label ID="Label1" runat="servidor" Font-Size="XX-Large" ForeColor="Blue" Text="¡Bienvenido!"＞＜/asp:Label＞＜br /＞
<asp:SiteMapPath ID="SiteMapPath1" runat="servidor"
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 id="ContentPlaceHolder1" runat="servidor">
＜/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" %＞
<asp:ID de contenido="Contenido1"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Servidor">
＜centro＞
<tabla>
＜tr＞
＜td ancho="60%"＞
<asp:Label ID="Label1" runat="servidor" Font-Size="XL"
Text="¡Bienvenido a nuestro sitio web!"＞＜/asp:Label＞＜/td＞
＜/tr＞
＜tr＞
＜td ancho="60%"＞
<asp:HyperLink ID="HyperLink1" runat="servidor"
Font-Size="X-Large" NavigateUrl="~/Products/Default.aspx">Productos
＜/asp:HyperEnlace＞＜/td＞
＜/tr＞
＜tr＞
＜td ancho="60%"＞
<asp:HyperLink ID="HyperLink2" runat="servidor" Font-Size="XL"
NavigateUrl="~/Services/Default.aspx">Servicios
＜/asp:HyperEnlace＞＜/td＞
＜/tr＞
＜tr＞
＜td ancho="60%"＞
<asp:HyperLink ID="HyperLink3" runat="servidor"
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.
| Atributo de texto del | nombre del formulario web | Etiqueta
| ~/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＞
<cuerpo>
＜form id="form1" runat="servidor"＞
<asp:TreeView ID="TreeView1" runat="servidor" DataSourceID="SiteMapDataSource1"
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:
<siteMap defaultProvider="miproveedor" habilitado="true">
＜proveedores＞
＜añadir nombre="miproveedor"
tipo="System.Web.XmlSiteMapProvider"
siteMapFile="Recorte de seguridad.mapa del sitio"
seguridadTrimmingEnabled="true" />
＜/proveedores＞ |
Aquí, agrega la sección <siteMap> 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 <siteMap>, 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.
