ptg 1014 CHAPTER 22 Using the Navigation Controls FIGURE 22.1 Breadcrumb trail at Yahoo.com. FIGURE 22.2 Displaying the SiteMapPath control. From the Library of Wow! eBook ptg 1015 Using the SiteMapPath Control LISTING 22.2 UsingSiteMapPath/DisplaySiteMapPath.aspx <%@ Page Language=”C#” %> <!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 id=”Head1” runat=”server”> <title>Display SiteMapPath</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:SiteMapPath id=”SiteMapPath1” Runat=”server” /> <hr /> <h1>Displaying a SiteMapPath Control</h1> </div> </form> </body> </html> 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, 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. 22 From the Library of Wow! eBook ptg 1016 CHAPTER 22 Using the Navigation Controls . 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 repre- sents 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 alternative Site Map provider to use with the SiteMapPath control. . SkipLinkText—Enables you to specify more specific text for skipping the links dis- played 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 accessi- bility 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 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 22.3 takes advantage of all four Style properties to modify the default appearance of the SiteMapPath control (see Figure 22.3). From the Library of Wow! eBook ptg 1017 Using the SiteMapPath Control LISTING 22.3 UsingSiteMapPath/SiteMapPathStyle.aspx <%@ Page Language=”C#” %> <!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 id=”Head1” 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; 22 FIGURE 22.3 Using styles with the SiteMapPath control. From the Library of Wow! eBook ptg 1018 CHAPTER 22 Using the Navigation Controls margin:10px; border:Solid 1px black; } .rootNodeStyle { text-decoration:none; } </style> <title>SiteMapPath Style</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:SiteMapPath id=”SiteMapPath1” CssClass=”siteMapPath” CurrentNodeStyle-CssClass=”currentNodeStyle” NodeStyle-CssClass=”nodeStyle” PathSeparatorStyle-CssClass=”pathSeparatorStyle” RootNodeStyle-CssClass=”rootNodeStyle” Runat=”server” /> <hr /> <h1>SiteMapPath Style</h1> </div> </form> </body> </html> Furthermore, you can use templates with the SiteMapPath control to format the appear- ance of the control (and change its behavior). The SiteMapPath control supports the following templates: . CurrentNodeTemplate—For the SiteMapPath node that represents the current page. . NodeTemplate—For each SiteMapPath node that is not the current or root node. . PathSeparatorTemplate—For the text displayed between each SiteMapPath node. . RootNodeTemplate—For the root (first) node rendered by the SiteMapPath control. From the Library of Wow! eBook ptg 1019 Using the SiteMapPath Control LISTING 22.4 UsingSiteMapPath/SiteMapPathTemplates.aspx <%@ Page Language=”C#” %> <!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 id=”Head1” runat=”server”> <title>SiteMapPath Templates</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:SiteMapPath id=”SiteMapPath1” Runat=”server”> <NodeTemplate> <asp:HyperLink 22 FIGURE 22.4 Using a template with the SiteMapPath control. For example, the SiteMapPath control in Listing 22.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 22.4). From the Library of Wow! eBook ptg 1020 CHAPTER 22 Using the Navigation Controls id=”lnkPage” 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. Using the Menu Control The Menu control enables you to create two types of menus. You can use the Menu control to create the left-column menu that appears in many websites. In other words, you can use the Menu control to display a vertical list of links. You also can use the Menu control to create a menu that more closely resembles the drop- down menus that appear in traditional desktop applications. In this case, the Menu control renders a horizontal list of links. Unlike the SiteMapPath control, the Menu control can represent other types of data than Site Map data. Technically, you can bind a Menu control to any data source that imple- ments the IHiearchicalDataSource or IHiearchicalEnumerable interface. In this section, you learn how to create different types of menus with the Menu control. First, you learn how to add menu declaratively items to a Menu control. Next, we discuss how the Menu control can be used with the MultiView control to display a tabbed page. You also examine how you can bind the Menu control to different types of data sources. You learn how to use the Menu control with Site Map data, XML data, and database data. From the Library of Wow! eBook ptg 1021 Using the Menu Control LISTING 22.5 MenuHyperLink.aspx <%@ Page Language=”C#” %> <!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 id=”Head1” runat=”server”> <title>Menu HyperLink</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Menu id=”Menu1” 22 FIGURE 22.5 Displaying a menu with the Menu control. Declaratively Adding Menu Items You can display a menu with the Menu control by adding one or more MenuItem objects to its Items property. For example, the page in Listing 22.5 uses a Menu control to create a simple vertical menu (see Figure 22.5). From the Library of Wow! eBook ptg 1022 CHAPTER 22 Using the Navigation Controls Runat=”server”> <Items> <asp:MenuItem Text=”Products” NavigateUrl=”Products.aspx” /> <asp:MenuItem Text=”Services” NavigateUrl=”Services.aspx”> <asp:MenuItem Text=”Training” NavigateUrl=”Training.aspx” /> <asp:MenuItem Text=”Consulting” NavigateUrl=”Consulting.aspx” /> </asp:MenuItem> </Items> </asp:Menu> </div> </form> </body> </html> The Menu in Listing 22.5 is created from MenuItem objects. Each menu item in Listing 22.5 contains a link to another page. MenuItem objects can be nested. The second MenuItem object—Services—includes two child MenuItem objects. When you hover your mouse over a parent menu item, the child menu items display. Each MenuItem in Listing 22.5 includes a Text and NavigateUrl property. Rather than use a MenuItem to link to a new page, you also can use a MenuItem to link back to the same page. In other words, each MenuItem can act like a Linkbutton control instead of a HyperLink control. For example, each MenuItem object in Listing 22.6 includes a Text and Value property. When you click a menu item, the same page is reloaded, and the value of the selected menu item displays (see Figure 22.6). From the Library of Wow! eBook ptg 1023 Using the Menu Control 22 LISTING 22.6 MenuLinkButton.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <script runat=”server”> protected void Menu1_MenuItemClick(object sender, MenuEventArgs e) { lblMessage.Text = “You selected “ + Menu1.SelectedValue; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Menu LinkButton</title> </head> <body> <form id=”form1” runat=”server”> <div> FIGURE 22.6 Selecting menu items. From the Library of Wow! eBook . <div> < ;asp: SiteMapPath id=”SiteMapPath1” CssClass=”siteMapPath” CurrentNodeStyle-CssClass=”currentNodeStyle” NodeStyle-CssClass=”nodeStyle” PathSeparatorStyle-CssClass=”pathSeparatorStyle”. eBook ptg 1017 Using the SiteMapPath Control LISTING 22.3 UsingSiteMapPath/SiteMapPathStyle.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>. eBook ptg 1015 Using the SiteMapPath Control LISTING 22.2 UsingSiteMapPath/DisplaySiteMapPath.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>