ptg 1024 <asp:Menu id=”Menu1” OnMenuItemClick=”Menu1_MenuItemClick” Runat=”server”> <Items> <asp:MenuItem Text=”Products Page” Value=”Products” /> <asp:MenuItem Text=”Services Page” Value=”Services”> <asp:MenuItem Text=”Training Page” Value=”Training” /> <asp:MenuItem Text=”Consulting Page” Value=”Consulting” /> </asp:MenuItem> </Items> </asp:Menu> <hr /> <asp:Label id=”lblMessage” EnableViewState=”false” Runat=”server” /> </div> </form> </body> </html> The page includes a MenuItemClick event handler. When you click a MenuItem (and the MenuItem does not have a NavigateUrl property), the MenuItemClick event is raised. In Listing 22.6, the MenuItemClick handler displays the value of the selected MenuItem in a Label control. Using the Menu Control with the MultiView Control When the Menu control is used with the MultiView control, you can create tabbed pages. You use the Menu control to display the tabs, and the MultiView control to display the content that corresponds to the selected tab. For example, the page in Listing 22.7 displays three tabs (see Figure 22.7). CHAPTER 22 Using the Navigation Controls From the Library of Wow! eBook ptg 1025 Using the Menu Control 22 LISTING 22.7 MenuTabStrip.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 menuTabs_MenuItemClick(object sender, MenuEventArgs e) { multiTabs.ActiveViewIndex = Int32.Parse(menuTabs.SelectedValue); } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> html { background-color:silver; } .menuTabs { position:relative; top:1px; FIGURE 22.7 Displaying a tabbed page. From the Library of Wow! eBook ptg 1026 left:10px; } .tab { border:Solid 1px black; border-bottom:none; padding:0px 10px; background-color:#eeeeee; } .selectedTab { border:Solid 1px black; border-bottom:Solid 1px white; padding:0px 10px; background-color:white; } .tabBody { border:Solid 1px black; padding:20px; background-color:white; } </style> <title>Menu Tab Strip</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Menu id=”menuTabs” CssClass=”menuTabs” StaticMenuItemStyle-CssClass=”tab” StaticSelectedStyle-CssClass=”selectedTab” Orientation=”Horizontal” OnMenuItemClick=”menuTabs_MenuItemClick” Runat=”server”> <Items> <asp:MenuItem Text=”Tab 1” Value=”0” Selected=”true” /> <asp:MenuItem Text=”Tab 2” Value=”1”/> <asp:MenuItem CHAPTER 22 Using the Navigation Controls From the Library of Wow! eBook ptg 1027 Using the Menu Control 22 Text=”Tab 3” Value=”2” /> </Items> </asp:Menu> <div class=”tabBody”> <asp:MultiView id=”multiTabs” ActiveViewIndex=”0” Runat=”server”> <asp:View ID=”view1” runat=”server”> Contents of first tab </asp:View> <asp:View ID=”view2” runat=”server”> Contents of second tab </asp:View> <asp:View ID=”view3” runat=”server”> Contents of third tab </asp:View> </asp:MultiView> </div> </div> </form> </body> </html> After you open the page in Listing 22.7 and click a tab, the MenuItemClick event is raised. The MenuItemClick event handler changes the ActiveViewIndex property of the MultiView control to display the content of the selected tab. Binding to a Site Map Like the SiteMapPath control, you can use the Menu control with a Site Map. Users can click menu items to navigate to particular pages in your website. Unlike the SiteMapPath control, however, the Menu control does not automatically bind to a Site Map. You must explicitly bind the Menu control to a SiteMapDataSource control to display nodes from a Site Map. From the Library of Wow! eBook ptg 1028 CHAPTER 22 Using the Navigation Controls For example, the page in Listing 22.8 contains a menu that contains links to all the pages in a website (see Figure 22.8). FIGURE 22.8 Displaying a Site Map with a Menu control. LISTING 22.8 UsingMenu/MenuSiteMap.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 SiteMap</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Menu id=”Menu1” DataSourceID=”srcSiteMap” Runat=”server” /> <asp:SiteMapDataSource id=”srcSiteMap” From the Library of Wow! eBook ptg 1029 Using the Menu Control 22 Runat=”server” /> </div> </form> </body> </html> When you initially open the page in Listing 22.8, the only menu item that appears is the link to the Home page. If you hover your mouse over this link, links to additional pages display. Normally, you do not want the Home link to display in a navigation menu. Instead, you want to display the second level of menu items. You can use the ShowStartingNode prop- erty of the SiteMapDataSource control to hide the topmost node in a Site Map. For example, the page in Listing 22.9 uses a Menu control that renders a standard left- column navigational menu (see Figure 22.9). FIGURE 22.9 Displaying a navigation menu. LISTING 22.9 UsingMenu/MenuNavigate.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” > From the Library of Wow! eBook ptg 1030 CHAPTER 22 Using the Navigation Controls <head id=”Head1” runat=”server”> <style type=”text/css”> html { background-color:silver; } .navigation { float:left; width:280px; height:500px; padding:20px; background-color:#eeeeee; } .content { float:left; width:550px; height:500px; padding:20px; background-color:white; } .menuItem { border:Outset 1px black; background-color:Gray; font:14px Arial; color:White; padding:8px; } </style> <title>Menu Navigate</title> </head> <body> <form id=”form1” runat=”server”> <div class=”navigation”> <asp:Menu id=”Menu1” DataSourceID=”srcSiteMap” StaticMenuItemStyle-CssClass=”menuItem” DynamicMenuItemStyle-CssClass=”menuItem” Runat=”server” /> From the Library of Wow! eBook ptg 1031 Using the Menu Control 22 <asp:SiteMapDataSource id=”srcSiteMap” ShowStartingNode=”false” Runat=”server” /> </div> <div class=”content”> <h1>Displaying a Website menu with the Menu control</h1> </div> </form> </body> </html> When you open the page in Listing 22.9, the second-level nodes from the Site Map initially display. Furthermore, the Menu control is styled to appear more like a traditional website navigation menu. Binding to an XML File As an alternative to binding a Menu control to a SiteMapDataSource control, you can bind the control to an XML document by using the XmlDataSource control. For example, suppose that you have the XML file in Listing 22.10. LISTING 22.10 Menu.xml <?xml version=”1.0” encoding=”utf-8” ?> <menu> <appetizer> <soup /> <cheese /> </appetizer> <entree> <duck /> <chicken /> </entree> <dessert> <cake /> <pie /> </dessert> </menu> From the Library of Wow! eBook ptg 1032 CHAPTER 22 Using the Navigation Controls The page in Listing 22.11 displays the contents of Listing 22.10 by using an XmlDataSource control to represent the XML document. LISTING 22.11 MenuXML.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 XML</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Menu id=”Menu1” DataSourceID=”srcMenu” Runat=”server” /> <asp:XmlDataSource id=”srcMenu” DataFile=”Menu.xml” Runat=”server” /> </div> </form> </body> </html> When using the XmlDataSource control, you can use the XPath property to supply an xpath query that restricts the nodes returned by the XmlDataSource. You also can use either the Transform or TransformFile property to apply an XSLT Style Sheet to the XML document and transform the nodes returned by the XmlDataSource. The XML file in Listing 22.10 is simple. The nodes do not contain any attributes. When you bind the Menu control to the XML file, the ToString() method is called on each XML file node. You also can bind the Menu control to more complex XML documents. For example, the item nodes in the XML document in Listing 22.12 include two attributes: text and price. From the Library of Wow! eBook ptg 1033 Using the Menu Control 22 LISTING 22.12 MenuComplex.xml <?xml version=”1.0” encoding=”utf-8” ?> <menu> <category text=”appetizer”> <item text=”soup” price=”12.56” /> <item text=”cheese” price=”17.23” /> </category> <category text=”entree”> <item text=”duck” price=”89.21” /> <item text=”chicken” price=”34.56” /> </category> <category text=”dessert”> <item text=”cake” price=”23.43” /> <item text=”pie” price=”115.46” /> </category> </menu> When you bind to the XML document in Listing 22.12, you must specify one or more menu item bindings. The menu item bindings specify the relationship between node attributes and the menu items displayed by the Menu control. The Menu control in Listing 22.13 includes MenuItemBinding subtags (see Figure 22.10). FIGURE 22.10 Displaying an XML document with the Menu control. From the Library of Wow! eBook . black; border-bottom:none; padding:0px 10px; background-color:#eeeeee; } .selectedTab { border:Solid 1px black; border-bottom:Solid 1px white; padding:0px 10px; background-color:white; }. ptg 10 24 < ;asp: Menu id=”Menu1” OnMenuItemClick=”Menu1_MenuItemClick” Runat=”server”> <Items> < ;asp: MenuItem Text=”Products Page” Value=”Products” /> < ;asp: MenuItem. Runat=”server”> < ;asp: View ID=”view1” runat=”server”> Contents of first tab < /asp: View> < ;asp: View ID=”view2” runat=”server”> Contents of second tab < /asp: View> < ;asp: View ID=”view3”