Navigation

People rarely build Web applications that are made up of just a single page instance. Instead, applications are usually made up of multiple pages that are all related to each other in some fashion. Some applications have a workflow through which end users can work from page to page, while other applications have a navigation structure that allows for free roaming throughout the pages. Sometimes the navigation structure of a site gets complex, and managing this complexity can become rather cumbersome. ASP.NET 2.0 includes a way of managing the navigational structure of your Web applications. Using this system, you first define your navigational structure through an XML file that can then be bound to a couple of different server controls focused on navigation.

This makes it rather easy when you have to introduce changes to the structure of your navigation or make name changes to pages contained within this structure. Instead of going from page to page throughout your entire application, changing titles or page destinations, you can now make these changes in one place - an XML file - and the changes are instantaneously reflected throughout your application.

The first step in working with the ASP.NET navigation system is to reflect your navigational structure in the web.sitemap file, the XML file that will contain the complete site structure. For instance, suppose you want the following site structure:

 Home      Books      Magazines            U.S. Magazines            European Magazines

This site structure has three levels to it, with multiple items in the lowest level. You can reflect this in the web.sitemap file as follows:

  <?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >    <siteMapNode url="default.aspx" title="Home" description="The site homepage">       <siteMapNode url="books.aspx" title="Books"        description="Books from our catalog" />       <siteMapNode url="magazines.aspx" title="Magazines"        description="Magazines from our catalog">          <siteMapNode url="magazines_us.aspx" title="U.S. Magazines"           description="Magazines from the U.S." />          <siteMapNode url="magazines_eur.aspx" title="European Magazines"           description="Magazines from Europe" />       </siteMapNode>    </siteMapNode> </siteMap> 

To create a web.sitemap file in Visual Studio 2005, go to the Add New Items dialog and select the Site Map option. You can place the preceding content in this file. To move a level down in the hierarchy, nest <siteMapNode> elements within other <siteMapNode> elements. A <siteMapNode> element can contain several different attributes, as defined in the following table:

Open table as spreadsheet

Attribute	Description
Title	The title attribute provides a textual description of the link. The String value used here is the text used for the link.
Description	The description attribute not only reminds you what the link is for, it is also used for the ToolTip attribute on the link. The ToolTip attribute is the yellow box that shows up next to the link when the end user hovers the cursor over the link for a couple of seconds.
Url	The url attribute describes where the file is located in the solution. If the file is in the root directory, then simply use the filename, such as default.aspx. If the file is located in a subfolder, be sure to include the folders in the String value used for this attribute, e.g., MySubFolder/MyFile.aspx.
Roles	If ASP.NET security trimming is enabled, you can use the roles attribute to define which roles are allowed to view and click the provided link in the navigation.

Using the SiteMapPath Server Control

One of the available server controls that works with a web.sitemap file is the SiteMapPath control. This control provides a popular structure found on many Internet websites. Sometimes called breadcrumb navigation, this feature is simple to implement in ASP.NET.

To see an example of this control at work, let’s create a page that would be at the bottom of the site map structure. Within the project that contains your web.sitemap file, create an ASP.NET page named maga zines_us.aspx. On this page, simply drag and drop a SiteMapPath control onto the page. You will find this control under the Navigation section in the Visual Studio Toolbox. This control’s code looks as follows:

  <asp:SiteMapPath  runat="server"></asp:SiteMapPath> 

What else do you need to do to get this control to work? Well, nothing! Simply build and run the page to see the results shown in Figure 20-20.

Figure 20-20

The SiteMapPath control defines the end user’s place in the application’s site structure. It shows the current page the user is on (U.S. Magazines) as well as the two pages above it in the hierarchy.

The SiteMapPath control requires no DataSource control, as it automatically binds itself to any .sitemap file it finds in the project, and nothing is required on your part to make this happen. The SiteMapPath’s smart tag enables you to customize the control’s appearance too, so you can produce other results, as shown in Figure 20-21.

Figure 20-21

The code for this version of the SiteMapPath control is as follows:

  <asp:SiteMapPath  runat="server" PathSeparator=" : "  Font-Names="Verdana" Font-Size="0.8em">    <PathSeparatorStyle Font-Bold="True" ForeColor="#507CD1"></PathSeparatorStyle>    <CurrentNodeStyle ForeColor="#333333"></CurrentNodeStyle>    <NodeStyle Font-Bold="True" ForeColor="#284E98"></NodeStyle>    <RootNodeStyle Font-Bold="True" ForeColor="#507CD1"></RootNodeStyle> </asp:SiteMapPath> 

This example illustrates that a lot of style elements and attributes can be used with the SiteMapPath control. Many options at your disposal enable you to create breadcrumb navigation that is unique.

Menu Server Control

Another navigation control enables end users of your application to navigate throughout the pages based upon information stored within the web.sitemap file. The Menu server control produces a compact navigation system that pops up sub-options when the user hovers the mouse over an option. The result of the Menu server control when bound to the site map is shown in Figure 20-22.

Figure 20-22

To build this, you must be working off of the web.sitemap file created earlier. After the web.sitemap file is in place, place a Menu server control on the page, along with a SiteMapDataSource control:

  <asp:Menu  runat="server" DataSource> </asp:Menu> <asp:SiteMapDataSource  runat="server" /> 

The SiteMapDataSource control automatically works with the application’s web.sitemap file. In addition to the SiteMapDataSource control, the other item included is the Menu server control, which uses the typical ID and Runat attributes, in addition to the DataSourceID attribute, to connect this control with what is retrieved from the SiteMapDataSource control.

Like the other controls provided by ASP.NET, you can easily modify the look and feel of this control. By clicking the Auto Format link in the control’s smart tag, you can give the control the "classic" look and feel. This setting produces the result shown in Figure 20-23.

Figure 20-23

As with the other controls, a lot of sub-elements contribute to the changing look of the control’s style:

  <asp:Menu  runat="server" DataSource  Font-Names="Verdana" Font-Size="0.8em" BackColor="#B5C7DE" ForeColor="#284E98"  StaticSubMenuIndent="10px" DynamicHorizontalOffset="2">    <StaticSelectedStyle BackColor="#507CD1"></StaticSelectedStyle>    <StaticMenuItemStyle HorizontalPadding="5"     VerticalPadding="2"></StaticMenuItemStyle>    <DynamicMenuStyle BackColor="#B5C7DE"></DynamicMenuStyle>    <DynamicSelectedStyle BackColor="#507CD1"></DynamicSelectedStyle>    <DynamicMenuItemStyle HorizontalPadding="5"     VerticalPadding="2"></DynamicMenuItemStyle>    <DynamicHoverStyle ForeColor="White" Font-Bold="True"     BackColor="#284E98"></DynamicHoverStyle>    <StaticHoverStyle ForeColor="White" Font-Bold="True"     BackColor="#284E98"></StaticHoverStyle> </asp:Menu> 

The TreeView Server Control

The last navigation server control to look at is the TreeView control. This control enables you to render a hierarchy of data. The TreeView control is not only meant for displaying what is contained within the .sitemap file; you can also use this control to represent other forms of hierarchical data, such as data that you might store in a standard XML file.

You may have encountered a similar TreeView control in .NET when using the IE Web controls, which also contained a TreeView control. That previous TreeView control was limited to working only in Microsoft’s Internet Explorer, whereas the new TreeView control works in a wide variety of browsers.

The TreeView control is similar to the Menu control in that it won’t bind automatically to the web.sitemap file, but instead requires an underlying DataSource control. The code for displaying the contents of the .sitemap file is shown in the following example:

  <asp:TreeView  runat="server" DataSource> </asp:TreeView> <asp:SiteMapDataSource  runat="server" /> 

As with the Menu control example, a SiteMapDataSource is needed. After a basic SiteMapDataSource control is in place, position a TreeView control on the page and set the DataSourceId property to SiteMapDataSource1. This simple construction produces the result shown in Figure 20-24.

Figure 20-24

Remember that by using the Auto Format link from the control’s smart tag, you can format the TreeView control in a wide variety of ways.

The TreeView isn’t meant only for site maps; as mentioned, it can build upon any underlying hierarchical data set. For instance, you can display a hierarchical data structure from a standard XML file just as easily. Suppose you have the following XML file:

  <?xml version="1.0" encoding="utf-8" ?> <Hardware>    <Item Category="Motherboards">       <Option Choice="Asus" />       <Option Choice="Abit" />    </Item>    <Item Category="Memory">       <Option Choice="128mb" />       <Option Choice="256mb" />       <Option Choice="512mb" />    </Item>    <Item Category="Hard Drives">       <Option Choice="40GB" />       <Option Choice="80GB" />       <Option Choice="100GB" />    </Item>    <Item Category="Drives">       <Option Choice="CD" />       <Option Choice="DVD" />       <Option Choice="DVD Burner" />    </Item> </Hardware> 

It’s obvious that this XML file is not meant for site navigation, but for options from which end user can make selections. As stated, the TreeView control is quite extensible. For example, the following code creates a page that uses the preceding XML file:

  <%@ Page Language="VB" %> <script runat="server">     Protected Sub Button1_Click(ByVal sender As Object, _        ByVal e As System.EventArgs)         If TreeView1.CheckedNodes.Count > 0 Then             Label1.Text = "We are sending you information on:<p>"             For Each node As TreeNode In TreeView1.CheckedNodes                 Label1.Text += node.Text & " " & node.Parent.Text & "<br>"             Next         Else             label1.Text = "You didn't select anything. Sorry!"         End If     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">     <title>The TreeView Control</title> </head> <body>     <form  runat="server">     <div>         Please select the following items that you are interesting in:         <br />         <br />         <asp:TreeView  runat="server"          DataSource ShowLines="True">             <DataBindings>                 <asp:TreeNodeBinding TextField="Category"                  DataMember="Item"></asp:TreeNodeBinding>                 <asp:TreeNodeBinding ShowCheckBox="True" TextField="Choice"                  DataMember="Option"></asp:TreeNodeBinding>             </DataBindings>         </asp:TreeView>&nbsp;<br />         <br />         <asp:Button  runat="server"          Text="Submit Choices" OnClick="Button1_Click" />         <br />         <br />         <asp:Label  runat="server"></asp:Label>         <asp:XmlDataSource  runat="server"          DataFile="~/Hardware.xml">         </asp:XmlDataSource>     </div>     </form> </body> </html> 

This example uses an XmlDataSource control instead of the SiteMapDataSource control. The XmlDataSource control associates itself with the XML file shown earlier (Hardware.xml) through the use of the DataFile attribute.

The TreeView control then binds itself to the XmlDataSource control through the use of the DataSourceID attribute, which here is pointed to XmlDataSource1. Another interesting addition in the root TreeView node is the ShowLines attribute, set to True. This feature of the TreeView causes every node in the hierarchy to show its connection to its parent node through a visual line.

When working with XML files, which can basically be of any construction, you must bind the nodes of the TreeView control to specific values that come from the XML file. This is done through the use of the <DataBindings> element. This element encapsulates one or more TreeNodeBinding objects. Two of the more important available properties of a TreeNodeBinding object are DataMember and TextField. The DataMember property points to the name of the XML element that the TreeView control should look for. The TextField property specifies the XML attribute of that particular XML element. If you do this correctly with the use of the <DataBindings> construct, you get the result shown in Figure 20-25.

Figure 20-25

In the button click event from our example, you can see how easy it is to iterate through each of the checked nodes from the TreeView selection by creating instances of TreeNode objects. These selections are made from one of the TreeNodeBinding objects, which sets the ShowCheckBox property to True.