1. Introducción
Cualquier sitio web que consta de varias páginas requiere algún tipo de interfaz de usuario de navegación, que se crea en dos pasos. Primero, se debe definir la estructura lógica del sitio; luego, se agregan elementos de la interfaz de usuario para permitir a los usuarios moverse hacia adelante y hacia atrás entre varias partes de la estructura del sitio. Antes de ASP.NET 2.0, los desarrolladores debían resolver estos dos problemas ellos mismos. Sin embargo, a partir de la versión 2.0, ASP.NET proporciona una forma sencilla de definir la estructura de un sitio e incluye una serie de controles web, diseñados específicamente para mostrar la interfaz de usuario de navegación del sitio.
En el artículo anterior, analizamos cómo crear un archivo de mapa de sitio XML Web.sitemap a través de controles de navegación web y cómo mostrar información de navegación del sitio, que incluye:
·SiteMapPath, que muestra una ruta de navegación (Inicio＞Electrónica＞XBOX)
·TreeView, que Muestra un árbol plegable verticalmente, utilizado para mostrar toda la jerarquía del mapa del sitio
. Menú, que muestra un menú alineado horizontal o verticalmente.
El artículo anterior solo proporcionó una función y capacidad para el archivo del mapa del sitio y el control de navegación web. . En esta sección, centraremos nuestra atención en controlar mediante programación la información del mapa del sitio y examinaremos en detalle el control web de navegación SiteMapPath.
2. Mapa del sitio
Los ejemplos de este artículo utilizan el mapa del sitio creado en la primera parte. Puede ver la sintaxis exacta del archivo XML del mapa del sitio en la Parte 1 o descargarlo al final de este artículo. A continuación se muestra una representación gráfica de la estructura del sitio utilizada en estos ejemplos:
3. Mapa del sitio controlado mediante programación
Un mapa del sitio es una colección de nodos del mapa del sitio asociados. Normalmente, cada nodo del mapa del sitio contiene un título, una URL y una descripción. La imagen que se muestra arriba es un ejemplo de un mapa del sitio, donde cada rectángulo representa un nodo del mapa del sitio. ASP.NET no requiere un formato específico para especificar mapas de sitio, aunque proporciona la opción predeterminada de utilizar un archivo en formato XML. (Consulte la Parte 1 para obtener detalles sobre archivos XML).
ASP.NET proporciona una clase llamada SiteMap, que proporciona acceso programático de solo lectura al mapa del sitio. Esta clase es utilizada internamente por dos controles, que analizaremos más adelante en este artículo:
SiteMapPath: genera una ruta de navegación basada en la ubicación de la página visitada y la estructura de su sitio. Específicamente, SiteMapPath comienza en el nodo devuelto por la propiedad SiteMap.CurrentNode y recorre la jerarquía hasta la raíz.
· SiteMapDataSource: este control crea una fuente de datos jerárquica: asigna la estructura del mapa del sitio. Para mostrar información del mapa del sitio en otro control web, como TreeView o Menú, el control web no consulta el mapa del sitio directamente; sino que se vincula a un control SiteMapDataSource, que es responsable de leer la estructura del mapa del sitio.
La clase SiteMap tiene dos propiedades: RootNode y CurrentNode. Ambas propiedades devuelven instancias de SiteMapNode. La clase SiteMapNode representa un nodo definido en el mapa del sitio y tiene propiedades que describen el nodo (título, URL y descripción), así como propiedades que controlan la jerarquía mediante programación: ParentNode, ChildNodes, NextSibling, PreviousSibling, etc.
Puede utilizar la clase SiteMap en sus propias páginas ASP.NET. Por ejemplo, podemos mostrar enlaces Siguiente, Anterior y Arriba en cada página, simplemente agregando tres controles HyperLink a la página principal del sitio, además de un poco de programación para verificar si CurrentNode tiene un NextSibling, PreviousSibling o ParentNode. Específicamente, agregará el siguiente marcado a su página principal:
[<asp:HyperLink ID="lnkPrev" runat="server">Prev</asp:HyperLink>] |
[<asp:HyperLink ID="lnkUp" runat="server">Arriba</asp:HyperLink>] |
[<asp:HyperLink ID="lnkNext" runat="server">Siguiente</asp:HyperLink>]
El controlador de eventos Page_Load de la página principal tiene el siguiente aspecto:
Si SiteMap.CurrentNode no es nada, entonces
'Establecer enlace siguiente/anterior/arriba si SiteMap.CurrentNode.PreviousSibling no es nada, entonces
lnkPrev.NavigateUrl = SiteMap.CurrentNode.PreviousSibling.Url
lnkPrev.Text = "< Anterior (" & SiteMap.CurrentNode.PreviousSibling.Title & ")"
Demás
lnkPrev.NavigateUrl = Cadena.Empty
lnkPrev.Text = "< Anterior"
Terminar si
Si SiteMap.CurrentNode.ParentNode no es nada, entonces
lnkUp.NavigateUrl = SiteMap.CurrentNode.ParentNode.Url
lnkUp.Text = "Arriba (" & SiteMap.CurrentNode.ParentNode.Title & ")"
Demás
lnkUp.NavigateUrl = Cadena.Empty
lnkUp.Text = "Arriba"
Terminar si
Si SiteMap.CurrentNode.NextSibling no es nada, entonces
lnkNext.NavigateUrl = SiteMap.CurrentNode.NextSibling.Url
lnkNext.Text = "(" & SiteMap.CurrentNode.NextSibling.Title & ") Siguiente >"
Demás
lnkNext.NavigateUrl = Cadena.Empty
lnkNext.Text = "Siguiente >"
Terminar si
Finalizar si
esto agregará tres hipervínculos Siguiente, Arriba y Anterior a cada página que hereda de la página principal; vea la instantánea a continuación.
4. Utilice el control SiteMapPath para mostrar rutas de navegación.
El control SiteMapPath muestra una ruta de navegación: se utiliza para mostrar a los usuarios dónde se encuentran en la estructura del sitio. La salida del control SiteMapPath está determinada por los siguientes tres factores:
· la estructura del sitio, según lo definido por el mapa del sitio,
· la página que se visita y
· los valores de propiedad del control SiteMapPath
cuando una página con
. Cuando se accede a un control SiteMapPath, el control SiteMapPath intenta convertir la página. La URL se asigna al valor de URL de un nodo de mapa del sitio definido en el mapa del sitio. Si se encuentra una coincidencia, el control atravesará la estructura hasta la raíz y producirá el siguiente resultado: RootNode>ParentNode>...>ParentNode>CurrentNode. El CurrentNode aquí es el título del nodo del mapa del sitio: se utiliza para asignar la URL de la solicitud de la página actual; RootNode y ParentNodes se generan como hipervínculos si el nodo del mapa del sitio tiene un valor de URL definido en el mapa del sitio. Un control SiteMapPath en la página "Libros de Historia" (Libros/Historia.aspx) generará Inicio>Libros>Historia, y también generará Inicio y Libros en forma de hipervínculos, apuntando a Default.aspx y Libros/Default.aspx respectivamente. . Al acceder a Libros/Default.aspx, SiteMapPath genera Inicio>Libros.
Para ser muy claros, el resultado de SiteMapPath depende tanto del mapa del sitio como de la página que se visita. La salida de SiteMapPath se puede personalizar a través de las propiedades de este control. Hay algunas propiedades en el formato de control web estándar (BackColor, Font, ForeColor, etc.) y hay algunas configuraciones específicas de SiteMapPath, que incluyen:
u PathDirection: puede tomar uno de dos valores, RootToCurrent (el valor predeterminado) o CurrentToRoot. Cuando el valor es RootToCurrent, la ruta de navegación en la página "Libros de historia" se genera como Inicio>Libros>Historial; cuando el valor es CurrentToRoot, la salida será Historia>Libros>Inicio.
·PathSeparator: especifica la cadena utilizada para separar cada nodo en la ruta de navegación; el valor predeterminado es >
·RenderCurrentNodeAsLink: un atributo booleano: especifica si el CurrentNode debe generarse como un enlace.
·ParentLevelsDisplayed - un valor entero - se puede utilizar para limitar la altura de la estructura de árbol mostrada por la ruta de navegación. De forma predeterminada, el valor de este atributo es -1, lo que significa que no hay límite; establecer su valor en 1 generará una ruta de navegación Libros>Historia en la página "Libros de historia". La raíz no se incluye porque el control SiteMapPath solo atraviesa un padre: desde "Historial" hasta "Libro".
· ShowToolTips: si un nodo de mapa del sitio tiene un valor de descripción, la descripción se muestra como un texto de información sobre herramientas para cada nodo de ruta de navegación si esta propiedad está establecida en Verdadero (el valor predeterminado).
También hay propiedades de estilo que se pueden usar para configurar BackColor, Font, ForeColor, etc., para varias partes del control SiteMapPath. Puede usar la propiedad NodeStyle para personalizar la apariencia de los nodos en la ruta de navegación; puede usar RootNodeStyle y CurrentNodeStyle para personalizar aún más el primer y el último nodo en la ruta de navegación. Generalmente, la forma más fácil y estéticamente más agradable de formatear el control SiteMapPath es utilizar su asistente de "Formato automático"; esto se puede habilitar a través de la etiqueta sensible del control.
5. Personalice el resultado generado con plantillas
SiteMapPath contiene cuatro plantillas que permiten una mayor personalización del resultado generado. Las plantillas le permiten combinar marcado HTML estático, controles web y sintaxis de enlace de datos. Si ha utilizado controles DataList o Repetidor antes, ya está familiarizado con las plantillas. Las plantillas en ASP.NET 2.0 son básicamente las mismas que en ASP.NET 1.x, excepto que ASP.NET 2.0 introduce una sintaxis nueva y más concisa para expresiones de enlace de datos. Por ejemplo, en ASP.NET 1.x, debe utilizar la sintaxis <%# DataBinder.Eval(Container.DataItem, PropertyName) %> para obtener el valor de una columna. En ASP.NET 2.0, esta antigua sintaxis aún se puede usar, pero opcionalmente puede usar la versión más corta <%# Eval(PropertyName) %>.
De forma predeterminada, SiteMapPath genera nodos raíz y principal como hipervínculos regulares para que cuando los usuarios hagan clic en el vínculo, puedan retroceder rápidamente en el árbol de jerarquía de control. Sin embargo, es posible que desee realizar algún procesamiento del lado del servidor antes de enviar la información al usuario; tal vez desee registrar adónde va el usuario o guardar automáticamente cualquier cambio que realice en la página. Esto se puede lograr utilizando una plantilla y generando el nodo como LinkButton.
Por ejemplo, si solo desea generar el nodo raíz de SiteMapPath como LinkButton, puede usar la siguiente etiqueta para agregar un <RootNodeTemplate> al control SiteMapPath:
<asp:SiteMapPath ID="SiteMapPath1" runat="server" ＞
＜Plantilla de nodo raíz＞
<asp:LinkButton ID="LinkButton1" runat="servidor"
Texto='＜%# Eval("título") %＞'
CommandArgument='＜%# Eval("url") %＞'
OnCommand="LinkButton1_Command">
＜/asp:BotónEnlace＞
＜/RootNodeTemplate＞
</asp:SiteMapPath>
Esta etiqueta agrega un control LinkButton a SiteMapPath; su propiedad Texto se asigna a la propiedad Título del SiteMapNode correspondiente. Cuando se hace clic en LinkButton, se genera una devolución de datos y se activa el evento Command del control; esto activa el controlador de eventos LinkButton1_Command. La propiedad Url de SiteMapNode se pasa a este controlador de eventos a través de la propiedad CommandArgument. En este controlador de eventos, puede realizar cualquier procesamiento del lado del servidor necesario y luego dirigir al usuario a la página que solicitó a través de Response.Redirect (e.CommandArgument).
