Using the SiteMapPath Control The SiteMapPath control enables you to navigate easily to any parent page of the current page. It displays the standard bread crumb trail that you see on many popular websites (see Figure 17.1). Figure 17.1. Bread crumb trail at Yahoo.com. 
You can use the SiteMapPath control simply by declaring the control in a page. The control automatically uses the Web.sitemap file located in the root of your application. For example, the page in Listing 17.2 includes the SiteMapPath control (see Figure 17.2). Figure 17.2. Displaying the SiteMapPath control. 
Listing 17.2. UsingSiteMapPath/DisplaySiteMapPath.aspx <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Display SiteMapPath</title> </head> <body> <form runat="server"> <div> <asp:SiteMapPath Runat="server" /> <hr /> <h1>Displaying a SiteMapPath Control</h1> </div> </form> </body> </html>
|
Notice that you can click the Home link rendered by the SiteMapPath control to navigate to the website's home page. The SiteMapPath uses both the title and description attributes from the <siteMapNode> elements contained in the Web.sitemap file. The title attribute is used for the node (link) text, and the description attribute is used for the node tool tip. Note Typically, you do not add a SiteMapPath control to individual pages in your website. If you add a SiteMapPath control to a Master Page, then you can display the SiteMapPath control automatically on every page. To learn more about Master Pages, see Chapter 5, "Designing Websites with Master Pages."
The SiteMapPath control supports the following properties: ParentLevelsDisplay Enables you to limit the number of parent nodes displayed. By default, a SiteMapPath control displays all the parent nodes. PathDirection Enables you to reverse the order of the links displayed by the SiteMapPath control. Possible values are RootToCurrent (the default) or CurrentToRoot. PathSeparator Enables you to specify the character used to separate the nodes displayed by the SiteMapPath control. The default value is >. RenderCurrentNodeAsLink Enables you to render the SiteMapPath node that represents the current page as a link. By default, the current node is not rendered as a link. ShowToolTips Enables you to disable the display of tool tips. SiteMapProvider Enables you to specify the name of an alternate Site Map provider to use with the SiteMapPath control. SkipLinkText Enables you to specify more specific text for skipping the links displayed by the SiteMapPath control. The default value for this property is Skip Navigation Links.
Web Standards Note All the navigation controls automatically render a skip navigation link to meet accessibility requirements. The skip navigation link is read by a screen reader, but it is not displayed in a normal browser. If you are interacting with a web page through a screen reader, you don't want to hear the list of navigation links each and every time you open a page. (It is the equivalent of listening to a phone menu every time you open a page.) The skip navigation link enables users of screen readers to skip the repetitive reading of links.
Formatting the SiteMapPath Control You can use either styles or templates to format the SiteMapPath control. The control supports the following Style objects: CurrentNodeStyle Formats the SiteMapPath node that represents the current page. NodeStyle Formats every node rendered by the SiteMapPath control. PathSeparatorStyle Formats the text displayed between each SiteMapPath node. RootNodeStyle Formats the root (first) node rendered by the SiteMapPath control.
For example, the page in Listing 17.3 takes advantage of all four Style properties to modify the default appearance of the SiteMapPath control (see Figure 17.3). Figure 17.3. Using styles with the SiteMapPath control. 
Listing 17.3. UsingSiteMapPath/SiteMapPathStyle.aspx <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <style type="text/css"> .siteMapPath { font:20px Comic Sans MS,Serif; } .currentNodeStyle { font-weight:bold; } .nodeStyle { text-decoration:none; } .pathSeparatorStyle { background-color:yellow; margin:10px; border:Solid 1px black; } .rootNodeStyle { text-decoration:none; } </style> <title>SiteMapPath Style</title> </head> <body> <form runat="server"> <div> <asp:SiteMapPath Css CurrentNodeStyle-Css NodeStyle-Css PathSeparatorStyle-Css RootNodeStyle-Css Runat="server" /> <hr /> <h1>SiteMapPath Style</h1> </div> </form> </body> </html>
|
Furthermore, you can use templates with the SiteMapPath control to format the appearance of the control (and change its behavior). The SiteMapPath control supports the following templates: CurrentNodeTemplate Template for the SiteMapPath node that represents the current page. NodeTemplate Template for each SiteMapPath node that is not the current or root node. PathSeparatorTemplate Template for the text displayed between each SiteMapPath node. RootNodeTemplate Template for the root (first) node rendered by the SiteMapPath control.
For example, the SiteMapPath control in Listing 17.4 includes a NodeTemplate. The NodeTemplate includes a HyperLink control that displays the current SiteMapPath node. The template also displays a count of the child nodes of the current node (see Figure 17.4). Figure 17.4. Using a template with the SiteMapPath control. 
Listing 17.4. UsingSiteMapPath/SiteMapPathTemplates.aspx <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>SiteMapPath Templates</title> </head> <body> <form runat="server"> <div> <asp:SiteMapPath Runat="server"> <NodeTemplate> <asp:HyperLink Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("Url") %>' ToolTip='<%# Eval("Description") %>' Runat="server" /> [<%# Eval("ChildNodes.Count") %>] </NodeTemplate> </asp:SiteMapPath> <hr /> <h1>SiteMapPath Templates</h1> </div> </form> </body> </html>
|
Within a template, the data item represents a SiteMapNode. Therefore, you can refer to any of the properties of the SiteMapNode class in a databinding expression. | 