One of the ways to provide a Web site menu is by using an <asp:Menu> control, either hard coded with page links or in connection with an <asp:SiteMapDataSource> control to import an external file of links. This type of menu displays static and PopOut menus for navigating the site. A second way to populate a site menu is with an <asp:TreeView> control that provides the same functionality as a Menu control but in the form of expanding and contracting menu items. An example of a site with a TreeView menu is shown in Figure 12-18. As in previous examples, this menu is coded on the master page for the site.
Coding an <asp:TreeView> Control
A TreeView is a hierarical arrangement of items that can be expanded and contracted to reveal or hide nodes of the tree. It can be used as a Web site menu or for any other page displays of hierarchical information. The general format for creating an <asp:TreeView> control is shown below.
<asp:TreeView id="id" Runat="Server" CollapseImageToolTip="string" CollapseImageUrl="url" DataSourceID="id" ExpandDepth="n" ExpandImageToolTip="string" ExpandImageUrl="url" ImageSet="Arrows|BulletedList|BulletedList2|BulletedList3| BulletedList4|Contacts|Events|Faq|Inbox|News|Simple| Simple2|Msdn|WindowsHelp|XPFileExplorer" MaxDataBindDepth="n" NodeIndent="n" NodeWrap="False|True" NoExpandImageUrl="url" ShowExpandCollapse="False|True" ShowLines="False|True" Target="_blank|_parent|_search|_self|_top|framename" HoverNodeStyle-property="value"... LeafNodeStyle-property="value"... NodeStyle-property="value"... ParentNodeStyle-property="value"... RootNodeStyle-property="value"... SelectedNodeStyle-property="value"... property="value"... > <Nodes> <asp:TreeNode ImageToolTip="string" ImageUrl="url" NavigateUrl="url" Target="_blank|_parent|_search|_self|_top|framename" Text="string" /> ... </Nodes> <DataBindings> <asp:TreeNodeBinding DataMember="nodeName" NavigateUrlField="field" TextField="field" Target="_blank|_parent|_search|_self|_top|framename" /> </DataBindings> </asp:TreeView>
In its simplest format, a TreeView control contains a <Nodes> section inside of which <asp:TreeNode> controls describe the hierarchical structure of the tree. These items are structured in the same way as <asp:MenuItem> controls are arranged in an <asp:Menu> control. When used as a menu system, TreeNodes have NavigateUrl properties to link to pages and Text properties for the linking text.
Code for the previous example is shown below. The menu is coded on the master page for the site. Because HoverNodeStyle is applied to the links, Runat="Server" must be coded in the <head> tag.
<%@ Master %> <html> <head Runat="Server"> <title>Web Site</title> </head> <body> <form Runat="Server"> <table border="1"> <tr> <td style="width:140px; vertical-align:top; background-color:#E0E0E0"> <b>Menu</b><br/> <asp:TreeView id="NavigationTree" Runat="Server" HoverNodeStyle-Font-Bold="True" RootNodeStyle-ForeColor="Blue"> <Nodes> <asp:TreeNode Text="Page 1" NavigateUrl="Page1.aspx"> <asp:TreeNode Text="Page 1-1" NavigateUrl="Page1-1.aspx"/> <asp:TreeNode Text="Page 1-2" NavigateUrl="Page1-2.aspx"/> </asp:TreeNode> <asp:TreeNode Text="Page 2" NavigateUrl="Page2.aspx"> <asp:TreeNode Text="Page 2-1" NavigateUrl="Page2-1.aspx"/> <asp:TreeNode Text="Page 2-2" NavigateUrl="Page2-2.aspx"/> </asp:TreeNode> <asp:TreeNode Text="Page 3" NavigateUrl="Page3.aspx"> <asp:TreeNode Text="Page 3-1" NavigateUrl="Page3-1.aspx"/> <asp:TreeNode Text="Page 3-2" NavigateUrl="Page3-2.aspx"> <asp:TreeNode Text="Page 3-2-1" NavigateUrl="Page3-2-1.aspx"/> <asp:TreeNode Text="Page 3-2-2" NavigateUrl="Page3-2-2.aspx"/> </asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> </td> <td style="width:350px; vertical-align:top"> <asp:ContentPlaceHolder id="CONTENT" Runat="Server"/> </td> </tr> </table> </form> </body> </html>
Other style properties can be applied to the nodes. Root nodes are the main nodes, Parent nodes have lower-level Child nodes, and Leaf nodes have no lower-level nodes.
Binding to a SiteMapDataSource
It is not necessary to hard code menu nodes inside a TreeView. Recall from previous tutorials how an <asp:Menu> control can bind to an external SiteMapDataSource to present a site menu without having to code menu items inside the Menu control. In a like manner, a TreeView can bind to a SiteMapDataSource. This data source is the special XML file named web.sitemap stored in the root Web directory. Its coding in service to the previous Menu control is repeated below.
<?xml version="1.0" ?> <siteMap> <siteMapNode> <siteMapNode title="Page 1" url="Page1.aspx"> <siteMapNode title="Page 1-1" url="Page1-1.aspx"/> <siteMapNode title="Page 1-2" url="Page1-2.aspx"/> </siteMapNode> <siteMapNode title="Page 2" url="Page2.aspx"> <siteMapNode title="Page 2-1" url="Page2-1.aspx"/> <siteMapNode title="Page 2-2" url="Page2-2.aspx"/> </siteMapNode> <siteMapNode title="Page 3" url="Page3.aspx"> <siteMapNode title="Page 3-1" url="Page3-1.aspx"/> <siteMapNode title="Page 3-2" url="Page3-2.aspx"> <siteMapNode title="Page 3-2-1" url="Page3-2-1.aspx"/> <siteMapNode title="Page 3-2-2" url="Page3-2-2.aspx"/> </siteMapNode> </siteMapNode> </siteMapNode> </siteMap>
This web.sitemap file can provide input to a TreeView to produce a site menu, and to an accompanying SiteMapPath control for a breadcrumbs trail of visited links. All of these controls are put together in the following example.
Code for the full master Web page is shown below. The TreeView links to the SiteMapDataSource control through its DataSourceID property. Both the SiteMapDataSource and SiteMapPath controls assume input of the web.sitemap file in the root Web directory.
<%@ Master %> <html> <head Runat="Server"> <title>Web Site</title> </head> <body> <form Runat="Server"> <table border="1"> <tr> <td colspan="2"> <asp:SiteMapPath id="SitePath" Runat="Server" PathSeparator=" › " PathSeparatorStyle-Font-Size="14pt" NodeStyle-Font-Name="Verdana" NodeStyle-Font-Size="8pt" NodeStyle-ForeColor="#990000" CurrentNodeStyle-Font-Underline="False" CurrentNodeStyle-Font-Bold="True" CurrentNodeStyle-ForeColor="#FF0000"/> </td> </tr> <tr> <td style="width:140px; vertical-align:top; background-color:#E0E0E0"> <b>Menu</b><br/> <asp:SiteMapDataSource id="SiteMap" Runat="Server" ShowStartingNode="False"/> <asp:TreeView id="NavigationTree" Runat="Server" DataSourceID="SiteMap" ImageSet="Arrows" ExpandDepth="0" ShowLines="True" HoverNodeStyle-Font-Bold="True" RootNodeStyle-ForeColor="Blue"/> </td> <td style="width:350px; vertical-align:top"> <asp:ContentPlaceHolder id="CONTENT" Runat="Server"/> </td> </tr> </table> </form> </body> </html>
This TreeView has its ImageSet property set to "Arrows" for its menu expansion and contraction graphics; plus, ShowLines="True" is set to display connecting lines between menu items. Also, its ExpandDepth property gives the default level at which menu items are automatically expanded. The setting of "0" means that only the currently selected level of menu items is showing without having to manually expand lower levels.
As explained previously, a different file from the default web.sitemap file can be used as the data Provider for the SiteMapDataSource and SiteMapPath controls. Refer to the discussion on adding a Provider to the web.config file in the SiteMapDataSource tutorial.
Binding to an XML File
A second external source of a site menu is a standard XML file. This file does not have to be in the exacting format of a web.sitemap file. Neither does it have to appear in the root Web directory. Still, it must follow XML coding conventions. The following example site uses an XML file to produce a menu display similar to the above examples. A SiteMapPath control cannot be used to produce a breadcrumbs trail because an XML file is not linked through a SiteMapDataSource control.
XML File Format
An XML file for a site menu is in the same general format as the set of Nodes in a TreeView, as shown in the following SiteMap.xml file used in the current example. A single root node (<SiteMap> in this example, although any other node name can be used) encompases the site map. Individual menu items are identified by XML tags (<MenuItem> in this example, although other names can be used) structured according to the parent and child menu structure desired.
<?xml version="1.0" ?> <SiteMenu> <MenuItem Title="Page 1" URL="Page1.aspx"> <MenuItem Title="Page 1-1" URL="Page1-1.aspx"/> <MenuItem Title="Page 1-2" URL="Page1-2.aspx"/> </MenuItem> <MenuItem Title="Page 2" URL="Page2.aspx"> <MenuItem Title="Page 2-1" URL="Page2-1.aspx"/> <MenuItem Title="Page 2-2" URL="Page2-2.aspx"/> </MenuItem> <MenuItem Title="Page 3" URL="Page3.aspx"> <MenuItem Title="Page 3-1" URL="Page3-1.aspx"/> <MenuItem Title="Page 3-2" URL="Page3-2.aspx"> <MenuItem Title="Page 3-2-1" URL="Page3-2-1.aspx"/> <MenuItem Title="Page 3-2-2" URL="Page3-2-2.aspx"/> </MenuItem> </MenuItem> </SiteMenu>
Each menu item tag requires two attributes in order to map properly to the TreeView that displays it. In this example, Title identifies the text label to appear in the menu, and URL gives the link to the page. Any attribute names can be used since these are XML tags with no predefined names or attributes. The URL value is the relative path to the page. In this example, the pages are assumed to be in the same directory as the Web page that displays them; therefore, the path is simply the file name.
XML Data Source
Once the XML menu file is created, it needs to be linked to the TreeView which displays it. This linkage is made through an <asp:XmlDataSource> control tied to the TreeView. The general format for an XmlDataSource control is shown below.
<asp:XmlDataSource id="id" Runat="Server" DataFile="file" XPath="X-Path expression" />
This control has a DataFile property giving the path to an XML file. For the current example, this setting is DataFile="SiteMenu.xml" since the XML file is in the same directory as the master page containing the <asp:TreeView> control to which it relates. The XPath property gives the node path to the first XML node to be displayed in the menu. Since the root node <SiteMenu> is not displayed in the current example, the path to the first <MenuItem> node is XPath="SiteMenu/MenuItem".
Shown below is how the XmlDataSource and TreeView controls are linked together so that the XML file represented by the former control supples data for the menu displayed by the latter control.
<asp:XmlDataSource id="XMLMenuSource" Runat="Server" DataFile="SiteMenu.xml" XPath="SiteMenu/MenuItem"/> <asp:TreeView id="NavigationTree" Runat="Server" DataSourceID="XMLMenuSource" ... </asp:TreeView>
Data Bindings
Since the node names and attribute names appearing in the XML file are not predefined, there is the need to translate between these names and expected Text and NavigateUrl property names used by the TreeView to produce a menu. This translation process is governed by the <DataBindings> section of the TreeView. This section is shown below for the current example TreeView. Notice that the DataBinding section along with the XmlDataSource replace the Nodes section of the TreeView in the previous example.
<asp:XmlDataSource id="XMLMenuSource" Runat="Server" DataFile="SiteMenu.xml" XPath="SiteMenu/MenuItem"/> <asp:TreeView id="NavigationTree" Runat="Server" DataSourceID="XMLMenuSource" ImageSet="Arrows" HoverNodeStyle-Font-Bold="True" RootNodeStyle-ForeColor="Blue"> <DataBindings> <asp:TreeNodeBinding DataMember="MenuItem" TextField="Title" NavigateUrlField="URL"/> </DataBindings> </asp:TreeView>
The DataBindings section encloses one or more <asp:TreeNodeBinding> controls to translate between node and attribute names in the XML file and expected Text and NavigateUrl values for a TreeView. The DataMember property gives the XML node name of a menu item (MenuItem in this example); TextField identifies the XML node attribute used as the Text property of a menu item (Title in this example); and NavigateUrlField identifies the XML node attribute used as the NavigateUrl property of a menu item (URL in this example).