ONDotNet.com    
 Published on ONDotNet.com (http://www.ondotnet.com/)
 See this if you're having trouble printing code examples


Site Navigation in ASP.NET 2.0

by Wei-Meng Lee, author of ASP.NET 2.0: A Developer's Notebook
09/13/2004

As your web site grows in complexity, it is imperative that you make the effort to make your site more navigable. A common technique employed by web sites today uses a site map to display a breadcrumb navigational path on the page.

ASP.NET 2.0 comes with the SiteMapPath control to help you in site navigation. The SiteMapPath control is located in the Toolbox under the Navigation category (see Figure 1).


Figure 1. The SiteMapPath control

Building the Sample Application Using a Master Page

To illustrate the new controls available in ASP.NET 2.0 for site navigation, I will build a simple ASP.NET web application using a master page.

First, create a new web site using Visual Studio 2005 Beta 1. Create a new master page (right-click on project name in Solution Explorer and select Add New Item... Select Master Page) and name it "MasterPage.master." Populate the master page with the controls shown in Figure 2 (the actual controls used in this example are not critical to the understanding of this article).


Figure 2. Creating the master page

Add a new XML document to your project and name it Web.sitemap. Populate the file as follows:


<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
   <siteMapNode title="Home" description="" url="default.aspx">
      <siteMapNode title="CD Bookshelves" description="" 
         url="CDBookshelves.aspx">
         <siteMapNode title="The Networking CD Bookshelf" 
            description="" url="NetworkCD.aspx" />
         <siteMapNode title="The XML CD Bookshelf " 
            description="" url="XMLCD.aspx" />
      </siteMapNode>
      <siteMapNode title="Cookbooks" description="" 
         url="Cookbooks.aspx">
         <siteMapNode title="Access Cookbook" 
            description="" url="Access.aspx"/>
         <siteMapNode title="ASP.NET Cookbook" 
            description="" url="ASPNET.aspx"/>
      </siteMapNode>
   </siteMapNode>
</siteMap>

The Web.sitemap file specifies the logical structure of the site. Hence, add the following new web pages to your project:

All of the above new web pages will inherit from the master page. To inherit from a master page, simple add in the MasterPageFile attribute in the Page directive of each page:


<%@ Page Language="VB"  MasterPageFile="~/MasterPage.master" %>

Using the SiteMapPath Control

ASP.NET 2.0 comes with the SiteMapPath control that allows you to display a breadcrumb navigational link on your site. In the master page, drag and drop the SiteMapPath control (located under the Navigation tab in the Toolbox) and place it under the red navigation bar (see Figure 3).


Figure 3. Adding the SiteMapPath control

The SiteMapPath control will automatically bind itself to the Web.sitemap file in your project. To make the control stand out, set its BackColor property to Yellow (#FFFF80).

Press F5 to run the project. When the pages are loaded, the SiteMapPath control will display the navigation paths (see Figure 4).


Figure 4. The SiteMapPath control in action

To jump to a page directly (say, the Cookbook.aspx page), click on the Cookbooks link.

Using the Menu Control

Besides the new SiteMapPath control, you can also use the new Menu control to display site path information. To see how the Menu control works, drag and drop the Menu control (located under the Navigation tab in Toolbox) and place it under the SiteMapPath control in the master page. In the SmartTag, click on Auto Format... and select the Colorful scheme. Next, select <New data source...> (see Figure 5).


Figure 5. Configuring the Menu control

Select Site Map as the data source and click OK. The Menu control is now bound to the Web.sitemap file and a new SiteMapDataSource control will be created (see Figure 6).


Figure 6. Selecting the data source for the SiteMapPath control

The Menu control supports two display modes: vertical and horizontal. To change the mode, set the Orientation attribute. Figure 7 shows the Menu control displayed in Vertical mode and Horizontal mode, respectively.

You can click on a menu item to jump directly to a page.


Figure 7. The Menu control in action

TreeView control

One control that is not grouped under the Navigation tab in the Toolbox but which is useful for site navigation is the TreeView control. The TreeView control displays a tree similar to the MSDN site (see Figure 8).


Figure 8. The MSDN treeview navigation

Let's modify the master page so that every page on our site will display a hierarchical view of the site. Insert a 2-by-1 table (Layout -> Insert table). Drag the ContentPlaceHolder control into the right cell of the table and drag and drop the TreeView control (under the Standard tab in the Toolbox) into the left cell of the table (see Figure 9).


Figure 9. Using the TreeView control

To make the TreeView control look like MSDN's, set the BackColor property of the TreeView control to gray (#E0E0E0). Then click Auto Format... and select the MSDN scheme.

To ensure that both the TreeView and ContentPlaceHolder controls are aligned to the top of their cells, switch to Source view and add in the valign attribute in the two elements:


...
<td style="width: 100px; height: 221px" valign="top">
    <asp:TreeView ID="TreeView2" Runat="server" BackColor="#E0E0E0" 
          DataSourceID="SiteMapDataSource1"
          NodeIndent="10" ImageSet="Msdn" Height="140px" Width="269px">
       <SelectedNodeStyle BackColor="White" VerticalPadding="1" 
            BorderColor="#888888" BorderStyle="Solid"
            BorderWidth="1px" 
            HorizontalPadding="3"></SelectedNodeStyle>
       <NodeStyle VerticalPadding="2" Font-Names="Verdana" 
            Font-Size="8pt" NodeSpacing="1"
            HorizontalPadding="5" ForeColor="Black"></NodeStyle>
       <HoverNodeStyle BackColor="#CCCCCC" BorderColor="#888888" 
            BorderStyle="Solid" BorderWidth="1px"
            Font-Underline="True"></HoverNodeStyle>
    </asp:TreeView>
</td>

<td style="width: 486px; height: 221px" valign="top">
    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
    </asp:contentplaceholder>
</td>
...

Now, add some content to the ASPNET.aspx page (see Figure 10) and to the Cookbooks.aspx page (see Figure 11).


Figure 10. Populating the ASPNET.aspx page


Figure 11. Populating the Cookbooks.aspx page

You can now navigate the pages by clicking on the items in the TreeView control (see Figure 12).


Figure 12. Loading Cookbooks.aspx using the TreeView control

Notice that the TreeView control is synchronized with the page that is loaded (see Figure 13, where the ASP.NET Cookbook item is highlighted).


Figure 13. The TreeView control is synchronized with the page that is loaded

Summary

The new navigational controls in ASP.NET make creating site navigation a much simpler task. This article presents an overview of what the various controls can do; they are actually highly customizable. Check out the new controls if you have Visual Studio 2005 Beta 1.

Wei-Meng Lee (Microsoft MVP) http://weimenglee.blogspot.com is a technologist and founder of Developer Learning Solutions http://www.developerlearningsolutions.com, a technology company specializing in hands-on training on the latest Microsoft technologies.

ASP.NET 2.0: A Developer's Notebook

Related Reading

ASP.NET 2.0: A Developer's Notebook
By Wei-Meng Lee


Return to ONDotnet.com

Copyright © 2009 O'Reilly Media, Inc.