Tutorial de ASP.NET
Vista Previa de ASP.NET 2.0

Usando controles de Navegación del Sitio

Usando controles de Navegación del Sitio

Los controles Menu, TreeView, SiteMapPath y SiteMapDataSource generan una interface de usuario (IU) de navegación basada en los datos de navegación. Estos datos pueden ser almacenados en archivos XML, o usando las capacidades de almacenamiento de la Navegación del Sitio. Los ejemplos de abajo muestran como usar estos controles en forma conjunta con la característica de Navegación del Sitio.

Creando el mapa del sitio de una aplicación

Las estructuras de navegación para los ejemplos de Inicio Rápido se representan en ficheros Web.sitemap. En este fichero sitemap, que podemos ver un poco más abajo, se muestra la estructura de navegación de todo el tutorial de inicio rápido de ASP.NET. Un fichero Web.sitemap contiene un solo elemento <siteMap> en el nivel más alto. Anidado dentro del elemento <siteMap> hay por lo menos un elemento <siteMapNode>. Siempre tiene que haber al menos un <siteMapNode> dentro del mapa del sitio. La característica de Navegación de Sitio requiere de un solo <siteMap> para asegurar que al movernos hacía arriba en una jerarquía de nodos se garantiza que todo ello converge a un único y conocido nodo. Podemos anidar tantos elementos <siteMapNode> por debajo del elemento <siteMap> como necesitemos. De forma adicional podemos anidar tantos elementos <siteMapNode> como queramos.

Un sólo elemento <siteMapNode> contiene normalmente los atributos Url, Title y Description. El atributo Url puede indicar un camino virtual que corresponde a una página dentro de nuestra aplicación. También puede contener caminos a las páginas de otras aplicaciones o URLs que apuntan a sitios web completamente diferentes. En el siguiente ejemplo todos los atributos Url utilizan una sintaxis relativa para hacer referencia a caminos que se encuentran dentro de la aplicación del Tutorial de Inicio Rápido de ASP.NET. El atributo Title se utiliza como texto a mostrar cuando se representa la Interfaz de Usuario (UI) para los datos de navegación. Por ejemplo, el control SiteMarPath utiliza el atributo Title para mostrar el texto de los hiperenlaces en el control. Si se encuentra el atributo Description, los controles de servidor pueden utilizar esta información para mostrar tooltips o texto ALT. Un desarrolador también puede añadir atributos personalizados a <siteMapNode>, los cuales se encontrarán accesibles mediante el indexador por defecto de la clase SiteMapNode. Para más información sobre otros atributos soportados por el elemento <siteMapNode> os remitimos a la documentación del Framework .NET.


Ejemplo de Web.sitemap
 

Utilizando los Controles de Navegación de Sitio

Una forma fácil de proporcionar la navegación de sitio en nuestrar páginar web es utilizar uno de los controles de navegación de sitio gráficos:SiteMapPath, TreeView and Menu.

  • SiteMapPath: un camino de navegación que devuelve la página en la que se encuentra el usuario y muestra la jerarquía de páginas. Esto permite a los usuarios volver a otras páginas de la jerarquía. SiteMapPath trabaja de forma exclusiva con el SiteMapProvides que se puede establecer mediante la propiedad SiteMapProvider del control.

  • TreeView: Proporciona la interfaz de usuario para expandir o contraer los nodos seleccionados en una página web así como la funcionalidad de check box para los elementos seleccionados. El control TreeView soporta el establecimiento de pelementos de datos o de controles de la fuente de datos mediante código o de forma declarativa. Si utilizamos el control SiteMapDataSource, el enlazado a datos será automático.

  • Menu: Proporciona una Interfaz de usuario horizontal o vertical que muestra submenús adicionales cuando un usuario se pone sobre un elemento. El control Menu soporta la fijación de los elementos de datos y de controles de fuente de datos de forma declarativa o mediante código. Si utilizamos el control SiteMapDataSource, el enlazado a datos será automático.
NOTA: Tanto el control TreeView como el control Menu se pueden utilizar para escenarios que no son de navegación.

Aquí tenemos una tabla en la que se resaltan algunas de las diferencias que hay entre los controles TreeView y Menu, que nos puede ayudar a elegir el control adecuado para nuestro escenario particular.

Característica Menu TreeView
Expansión PopOut Expansión en el propio lugar
Descarga bajo demanda No
Checkboxes No
Plantillas No
Diseño Horizontal & Vertical Vertical
Opciones de Estilo
Modelo de Selección Nivel Estático y Dinámicol Nivel o Padre/Root/Hoja, or por elemento de datos

En el siguiente ejemplo pordemos ver los controles TreeView y Menu con varias propiedades de estilo configuradas para diferentes áreas y acciones (por ejemplo NodeStyle y HoverNodeStyle). Los controles TreeView y Menu se conectan al control SiteMapSource de la página. El control SiteMapPath accede a los mismos datos a través del SiteMapProvider por defectro, que se establece en el fichero Web.config.

C# Controles de Navegación