ptg 1044 CHAPTER 22 Using the Navigation Controls The MenuItemStyle controls are applied to the menu level that corresponds to their order of declaration. The first MenuItemStyle is applied to the first menu level, the second MenuItemStyle is applied to the second menu level, and so on. Finally, the MenuItem class itself includes several useful formatting properties: . ImageUrl—Enables you to specify the URL for an image that is displayed next to a menu item. . PopOutImageUrl—Enables you to specify the URL for an image that is displayed when a menu item contains child menu items. . SeparatorImageUrl—Enables you to specify the URL for an image that appears below a menu item. . Selectable—Enables you to prevent users from selecting (clicking) a menu item. . Selected—Enables you to specify whether a menu item is selected. . Target—Enables you to specify the name of the window that opens when you click a menu item. For example, the page in Listing 22.16 displays a menu that resembles a traditional desktop application menu (see Figure 22.13). FIGURE 22.13 Displaying a desktop application menu. From the Library of Wow! eBook ptg 1045 Using the Menu Control 22 LISTING 22.16 MenuDesktop.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”> .staticMenuItem { color:black; border:solid 1px black; padding:2px 4px; } .menuHover { color:white; background-color:blue; } .dynamicMenuItem { color:black; padding:2px 4px; } .dynamicMenu { border:Solid 1px black; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=’gray’, Positive=’true’)” } </style> <title>Menu Desktop</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Menu id=”Menu1” Orientation=”Horizontal” StaticMenuItemStyle-CssClass=”staticMenuItem” StaticHoverStyle-CssClass=”menuHover” DynamicHoverStyle-CssClass=”menuHover” DynamicMenuItemStyle-CssClass=”dynamicMenuItem” DynamicMenuStyle-CssClass=”dynamicMenu” Runat=”server”> From the Library of Wow! eBook ptg 1046 CHAPTER 22 Using the Navigation Controls <Items> <asp:MenuItem Text=”File” Selectable=”false”> <asp:MenuItem Text=”Save” /> <asp:MenuItem Text=”Open” /> </asp:MenuItem> <asp:MenuItem Text=”Format” Selectable=”false”> <asp:MenuItem Text=”Bold” ImageUrl=”Images/Bold.gif” /> <asp:MenuItem Text=”Italic” ImageUrl=”Images/Italic.gif” /> <asp:MenuItem Text=”Underline” ImageUrl=”Images/Underline.gif” SeparatorImageUrl=”Images/Divider.gif” /> <asp:MenuItem Text=”Left Align” ImageUrl=”Images/JustifyLeft.gif” /> <asp:MenuItem Text=”Center Align” ImageUrl=”Images/JustifyCenter.gif” /> <asp:MenuItem Text=”Right Align” ImageUrl=”Images/JustifyRight.gif” /> </asp:MenuItem> </Items> </asp:Menu> </div> </form> </body> </html> Using Templates with the Menu Control The Menu control supports templates. You can use templates to completely customize the appearance of the Menu control. From the Library of Wow! eBook ptg 1047 Using the Menu Control 22 The Menu control supports the following two templates: . DynamicItemTemplate—Applied to dynamic menu items. . StaticItemTemplate—Applied to static menu items. The page in Listing 22.17 uses both templates to display menu items. The templates display a count of child items for each menu item (see Figure 22.14). FIGURE 22.14 Using templates with the Menu control. LISTING 22.17 MenuTemplates.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 = Menu1.SelectedValue; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> .menuItem From the Library of Wow! eBook ptg 1048 CHAPTER 22 Using the Navigation Controls { color:black; border:Solid 1px Gray; background-color:#c9c9c9; padding:2px 5px; } </style> <title>Menu Templates</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Menu id=”Menu1” OnMenuItemClick=”Menu1_MenuItemClick” Orientation=”Horizontal” StaticMenuItemStyle-CssClass=”menuItem” DynamicMenuItemStyle-CssClass=”menuItem” Runat=”server”> <StaticItemTemplate> <%# Eval(“Text”) %> (<%# Eval(“ChildItems.Count”) %>) </StaticItemTemplate> <DynamicItemTemplate> <%# Eval(“Text”) %> (<%# Eval(“ChildItems.Count”) %>) </DynamicItemTemplate> <Items> <asp:MenuItem Text=”Produce”> <asp:MenuItem Text=”Apples” /> <asp:MenuItem Text=”Oranges” /> </asp:MenuItem> <asp:MenuItem Text=”Beverages”> <asp:MenuItem Text=”Soda”> <asp:MenuItem Text=”Coke” /> <asp:MenuItem Text=”Pepsi” /> </asp:MenuItem> </asp:MenuItem> </Items> </asp:Menu> From the Library of Wow! eBook ptg 1049 Using the TreeView Control 22 <hr /> <asp:Label id=”lblMessage” EnableViewState=”false” Runat=”server” /> </div> </form> </body> </html> You do not need to create LinkButton controls in the templates. The content of the template is wrapped in a link automatically when it is appropriate. Using the TreeView Control The TreeView control is similar to the Menu control. Like the Menu control, you can use the TreeView control to display hierarchical data. The TreeView control binds to any data source that implements the IHierarchicalDataSource or IHiearchicalEnumerable interface. In this section, you learn how to add items declaratively to the TreeView control. You also learn how to bind a TreeView control to hierarchical data sources such as the SiteMapDataSource and XmlDataSource controls. You also see how you can use the TreeView control with database data. A TreeView is built programmatically from database data. Finally, you learn how you can use AJAX with the TreeView control to display large sets of data efficiently. By taking advantage of AJAX, you can update a TreeView without posting a page back to the server. Declaratively Adding Tree Nodes A TreeView control is made up of TreeNode objects. You can build a TreeView control by declaring TreeNode objects in the TreeView control’s Items collection. For example, Listing 22.18 contains a TreeView which renders a nested set of links to pages (see Figure 22.15). From the Library of Wow! eBook ptg 1050 CHAPTER 22 Using the Navigation Controls LISTING 22.18 TreeViewDeclare.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>TreeView Declare</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:TreeView id=”TreeView1” Runat=”server”> <Nodes> <asp:TreeNode Text=”Home” FIGURE 22.15 Displaying a TreeView control. From the Library of Wow! eBook ptg 1051 Using the TreeView Control 22 NavigateUrl=”~/Default.aspx”> <asp:TreeNode Text=”Products”> <asp:TreeNode Text=”First Product” NavigateUrl=”~/Products/FirstProduct.aspx” /> <asp:TreeNode Text=”Second Product” NavigateUrl=”~/Products/SecondProduct.aspx” /> </asp:TreeNode> <asp:TreeNode Text=”Services”> <asp:TreeNode Text=”First Service” NavigateUrl=”~/Services/FirstService.aspx” /> <asp:TreeNode Text=”Second Service” NavigateUrl=”~/Services/SecondService.aspx” /> </asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> </div> </form> </body> </html> Some of the TreeNodes in Listing 22.18 include a Text property, and some of the TreeNodes include both a Text and NavigateUrl property. You can click the TreeNodes that include a NavigateUrl property to link to a new page. You also can associate a Value property with a TreeNode. This is useful when you want to post back to the same page. For example, the page in Listing 22.19 enables you to display the value of the selected TreeNode in a Label control (see Figure 22.16). From the Library of Wow! eBook ptg 1052 CHAPTER 22 Using the Navigation Controls LISTING 22.19 TreeViewValue.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 TreeView1_SelectedNodeChanged(object sender, EventArgs e) { lblMessage.Text = TreeView1.SelectedValue; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> html { background-color:silver; } .content { float:left; FIGURE 22.16 Selecting a TreeView node. From the Library of Wow! eBook ptg 1053 Using the TreeView Control 22 width:350px; height:500px; padding:20px; margin:10px; background-color:white; } </style> <title>TreeView Value</title> </head> <body> <form id=”form1” runat=”server”> <div class=”content”> <asp:TreeView id=”TreeView1” OnSelectedNodeChanged=”TreeView1_SelectedNodeChanged” Runat=”server” > <Nodes> <asp:TreeNode Text=”Home” Value=”Home”> <asp:TreeNode Text=”Products”> <asp:TreeNode Text=”First Product” Value=”FirstProduct” /> <asp:TreeNode Text=”Second Product” Value=”SecondProduct” /> </asp:TreeNode> <asp:TreeNode Text=”Services”> <asp:TreeNode Text=”First Service” Value=”FirstService” /> <asp:TreeNode Text=”Second Service” Value=”SecondService” /> </asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> </div> From the Library of Wow! eBook . Control 22 NavigateUrl=”~/Default.aspx”> < ;asp: TreeNode Text=”Products”> < ;asp: TreeNode Text=”First Product” NavigateUrl=”~/Products/FirstProduct.aspx” /> < ;asp: TreeNode Text=”Second Product” NavigateUrl=”~/Products/SecondProduct.aspx”. Text=”Beverages”> < ;asp: MenuItem Text=”Soda”> < ;asp: MenuItem Text=”Coke” /> < ;asp: MenuItem Text=”Pepsi” /> < /asp: MenuItem> < /asp: MenuItem> </Items> < /asp: Menu> . </DynamicItemTemplate> <Items> < ;asp: MenuItem Text=”Produce”> < ;asp: MenuItem Text=”Apples” /> < ;asp: MenuItem Text=”Oranges” /> < /asp: MenuItem> < ;asp: MenuItem Text=”Beverages”> < ;asp: MenuItem