ptg 1074 CHAPTER 22 Using the Navigation Controls . RootNodeStyle—Applied to root nodes (Tree nodes with no parent nodes). . SelectedNodeStyle—Applied to the selected node. For example, the page in Listing 22.30 uses several of these Style objects to format a TreeView control (see Figure 22.23). FIGURE 22.23 Using Styles with the TreeView control. LISTING 22.30 TreeViewStyles.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”> .treeNode { color:blue; font:14px Arial, Sans-Serif; } .rootNode { font-size:18px; width:100%; border-bottom:Solid 1px black; From the Library of Wow! eBook ptg 1075 Using the TreeView Control 22 } .leafNode { border:Dotted 2px black; padding:4px; background-color:#eeeeee; font-weight:bold; } </style> <title>TreeView Styles</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:TreeView id=”TreeView1” NodeStyle-CssClass=”treeNode” RootNodeStyle-CssClass=”rootNode” LeafNodeStyle-CssClass=”leafNode” Runat=”server”> <Nodes> <asp:TreeNode Text=”Home”> <asp:TreeNode Text=”Products”> <asp:TreeNode Text=”First Product” /> <asp:TreeNode Text=”Second Product” /> </asp:TreeNode> <asp:TreeNode Text=”Services”> <asp:TreeNode Text=”First Service” /> <asp:TreeNode Text=”Second Service” /> </asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> </div> </form> </body> </html> Furthermore, you can apply styles to particular Tree node levels by taking advantage of the TreeView control’s LevelStyles property. The page in Listing 22.31 uses the LevelStyles property to format first level nodes differently than second level nodes and third level nodes (see Figure 22.24). From the Library of Wow! eBook ptg 1076 CHAPTER 22 Using the Navigation Controls LISTING 22.31 TreeViewLevelStyles.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”> .nodeLevel1 { font:40px Arial,Sans-Serif; } .nodeLevel2 { font:20px Arial,Sans-Serif; } .nodeLevel3 { font:10px Arial,Sans-Serif; } </style> <title>TreeView Level Styles</title> </head> <body> FIGURE 22.24 Applying styles to different TreeView node levels. From the Library of Wow! eBook ptg 1077 Building a SQL Hierarchical Data Source Control 22 <form id=”form1” runat=”server”> <div> <asp:TreeView id=”TreeView1” Runat=”server”> <LevelStyles> <asp:TreeNodeStyle CssClass=”nodeLevel1” /> <asp:TreeNodeStyle CssClass=”nodeLevel2” /> <asp:TreeNodeStyle CssClass=”nodeLevel3” /> </LevelStyles> <Nodes> <asp:TreeNode Text=”Home”> <asp:TreeNode Text=”Products”> <asp:TreeNode Text=”First Product” /> <asp:TreeNode Text=”Second Product” /> </asp:TreeNode> <asp:TreeNode Text=”Services”> <asp:TreeNode Text=”First Service” /> <asp:TreeNode Text=”Second Service” /> </asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> </div> </form> </body> </html> Building a SQL Hierarchical Data Source Control In this final section of this chapter, we build a SqlHierarchicalDataSource control. This custom control enables you to declaratively and (thus) easily bind controls such as the Menu and TreeView controls to data retrieved from a database. NOTE The code samples in this section can be found in the SqlHierarchicalDataSourceVB and SqlHierarchicalDataSourceCS applications in the accompanying source code on the book’s website. From the Library of Wow! eBook ptg 1078 CHAPTER 22 Using the Navigation Controls The page in Listing 22.32 illustrates how you can use the SqlHierarchicalDataSource control to bind a Menu control to a database table that contains nested categories. LISTING 22.32 ShowMenu.aspx <%@ Page Language=”C#” %> <%@ Register TagPrefix=”custom” Namespace=”AspNetUnleashed” %> <!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) { lblSelected.Text = Menu1.SelectedValue; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <style type=”text/css”> .menu { border:solid 1px black; padding:4px; } </style> <title>Show Menu</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Menu id=”Menu1” DataSourceId=”srcCategories” OnMenuItemClick=”Menu1_MenuItemClick” Orientation=”Horizontal” DynamicMenuStyle-CssClass=”menu” Runat=”server”> <DataBindings> <asp:MenuItemBinding TextField=”Name” ValueField=”Name” /> </DataBindings> </asp:Menu> <custom:SqlHierarchicalDataSource id=”srcCategories” ConnectionString=’<%$ ConnectionStrings:Categories %>’ From the Library of Wow! eBook ptg 1079 Building a SQL Hierarchical Data Source Control 22 DataKeyName=”CategoryId” DataParentKeyName=”ParentId” SelectCommand=”SELECT CategoryId, ParentId, Name FROM Categories” Runat=”server” /> <hr /> <asp:Label id=”lblSelected” Runat=”server” /> </div> </form> </body> </html> When you open the page in Listing 22.32, all the rows from the Categories table display in the Menu control. The SqlHierarchicalDataSource control includes two properties: DataKeyName and DataParentKeyName. The DataKeyName property represents the name of a database column that contains a unique value for each database table row. The DataParentKeyName column represents the name of a database column that relates each row to its parent row. Furthermore, the Menu control includes a MenuItemBinding, which associates the database Name column with the Menu item Text property and the Name column with the Menu item Value property. You also can use the SqlHierarchicalDataSource control when working with the TreeView control. The page in Listing 22.33 displays all the rows from the Discuss data- base table in a TreeView control. LISTING 22.33 ShowTreeView.aspx <%@ Page Language=”C#” %> <%@ Register TagPrefix=”custom” Namespace=”AspNetUnleashed” %> <!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) { lblSelected.Text = TreeView1.SelectedValue; } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> From the Library of Wow! eBook ptg 1080 CHAPTER 22 Using the Navigation Controls <title>Show TreeView</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:TreeView id=”TreeView1” DataSourceID=”srcDiscuss” OnSelectedNodeChanged=”TreeView1_SelectedNodeChanged” ImageSet=”News” Runat=”server”> <DataBindings> <asp:TreeNodeBinding TextField=”Subject” ValueField=”MessageId” /> </DataBindings> </asp:TreeView> <custom:SqlHierarchicalDataSource id=”srcDiscuss” ConnectionString=’<%$ ConnectionStrings:Discuss %>’ DataKeyName=”MessageId” DataParentKeyName=”ParentId” SelectCommand=”SELECT MessageId,ParentId,Subject FROM Discuss” Runat=”server” /> <hr /> You selected message number: <asp:Label id=”lblSelected” Runat=”server” /> </div> </form> </body> </html> When you open the page in Listing 22.33, the contents of the Discuss database table display in the TreeView control. All the code for the SqlHierarchicalDataSource control is included on the book’s website. The control is composed out of five separate classes: From the Library of Wow! eBook ptg 1081 Summary 22 . SqlHierarchicalDataSource—Represents the actual control. It inherits from the base SqlDataSource control and implements the IHierarchicalDataSource interface. . SqlHierarchicalDataSourceView—Represents the hierarchical data returned by the control. It inherits from the base HierarchicalDataSourceView class. . SqlHierarchicalEnumerable—Represents a collection of SqlNodes. . SqlNode—Represents a particular database row from the data source. It includes methods for retrieving child and parent rows. . SqlNodePropertyDescriptor—Inherits from the base PropertyDescriptor class. It converts the database columns represented by a SqlNode into class properties so that you can bind to the columns using TreeView and Menu control DataBindings. Summary In this chapter, you learned how to use the SiteMapPath, Menu, and TreeView controls. First, you learned how to use the SiteMapPath control to display a breadcrumb trail. You learned how to format the SiteMapPath control with styles and templates. Next, you explored the Menu control. You learned how to create both vertical and horizon- tal menus. You also learned how you can bind a Menu control to different data sources such as Site Maps, XML documents, and database data. The TreeView control was also discussed. You learned how to display check boxes with a TreeView control. You also learned how to bind a TreeView control to different data sources such as Site Maps, XML documents, and database data. You learned how to display a large set of Tree nodes efficiently by using AJAX and the TreeView control. Finally, we created a custom SqlHierarchicalDataSource control that enables you to easily bind controls such as the Menu and TreeView controls to hierarchical database data. From the Library of Wow! eBook ptg This page intentionally left blank From the Library of Wow! eBook ptg CHAPTER 23 Using Site Maps IN THIS CHAPTER . Using the SiteMapDataSource Control . Using the SiteMap Class . Advanced Site Map Configuration . Creating Custom Site Map Providers . Generating a Google SiteMap File . Summary This chapter jumps into the details of Site Maps. First, you learn how to use the SiteMapDataSource control to repre- sent a Site Map on a page. For example, you learn how to use the SiteMapDataSource control to display a list of all the pages contained in a folder. Next, you explore the SiteMap and SiteMapNode classes. You learn how to create new Site Map nodes dynamically. You also learn how to programmatically retrieve Site Map nodes and display the properties of a node in a page. This chapter also examines several advanced features of Site Maps. For example, you learn how to show different Site Maps to different users depending on their roles. You also learn how you can extend Site Maps with custom attributes. You also learn how to create custom Site Map providers. The first custom Site Map provider—the AutoSiteMapProvider—automatically builds a Site Map based on the folder and page structure of your website. The second custom Site Map provider—the SqlSiteMapProvider—enables you to store a Site Map in a Microsoft SQL Server database table. Finally, you learn how to generate Google SiteMaps from ASP.NET Site Maps automatically. You can use a Google SiteMap to improve the way that your website is indexed by the Google search engine. From the Library of Wow! eBook . < ;asp: TreeNode Text=”Products”> < ;asp: TreeNode Text=”First Product” /> < ;asp: TreeNode Text=”Second Product” /> < /asp: TreeNode> < ;asp: TreeNode Text=”Services”> < ;asp: TreeNode. < ;asp: TreeNode Text=”Home”> < ;asp: TreeNode Text=”Products”> < ;asp: TreeNode Text=”First Product” /> < ;asp: TreeNode Text=”Second Product” /> < /asp: TreeNode> < ;asp: TreeNode. 22.32 ShowMenu.aspx <%@ Page Language=”C#” %> <%@ Register TagPrefix=”custom” Namespace=”AspNetUnleashed” %> <!DOCTYPE html PUBLIC -/ /W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>