Nine ASP.NET Site Navigation Problem Solutions: Part 1

o far, there's been plenty of ink expended on ASP.NET 2.0's site navigation controls, but most of that coverage lacks details on how to use the new navigation features in the real world. For example, some common real-world questions are: How do you integrate database driven content into your site's navigation? How do you architect your solution to automatically hide pages to which a user lacks permission? What about differentiating the active top level page, or displaying only the children of that active page? Perhaps you need to display navigational elements as images, but aren't sure how to store the filename or image size.

This two-part series explores nine of the most common site map problems and shows how to solve them with ASP.NET 2.0's new navigation features. Part 1 demonstrates how to:

• Set up ASP.NET 2.0 site navigation
• Display images in navigation
• Differentiate active pages
• Navigate site map data
• Display breadcrumbs (a list of pages between the home page and the current page)
• Use custom site map attributes
• Construct a site map page

Part two will delve into more advanced site map solutions, such as:

• Implementing page security and integrating it with site map data
• Integrating database driven content by extending the provider model

Initial Setup: Mind-blowing Simplicity
The ASP.NET 2.0 solution to site navigation is extremely easy to set up. Initial configuration takes less than a minute. If you are starting with a blank solution add a few pages such as Default.aspx and SiteMap.aspx. Then, in Visual Studio 2005 add a new item of type "Site Map" named Web.sitemap.

Inside your new Web.sitemap XML file, add siteMapNode elements for each of your pages. Specify the locations and titles for your pages using the url and title attributes. Here's a sample snippet of a Web.sitemap file:

   <?xml version="1.0" encoding="utf-8" ?>
   <siteMap xmlns=
      "http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
     <siteMapNode url="~/Default.aspx" title="Home" >
         <siteMapNode url="~/SiteMap.aspx" title="Site Map" >
     </siteMapNode>
   </siteMap>

Next you must tell ASP.NET to use the Web.sitemap file. Before the closing element in your Web.config file, add:

   <siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
     <providers>
       <clear />
       <add name="XmlSiteMapProvider"
         description="Default SiteMap provider"
         type="System.Web.XmlSiteMapProvider"
         siteMapFile="Web.sitemap"
         />
     </providers>
   </siteMap>

To see how this works add the following to Default.aspx or your master page:

   <h1><%= SiteMap.CurrentNode.Title %>!</h1>

When you run the application, the title of the Default.aspx page displays as "Home!"

#1: Making Buckets Pretty
The most common site navigation problem developers face is displaying a site's buckets (top level pages). Displaying buckets as images is slightly more interesting than displaying them as plain text, because you must store the image's filename, and perhaps its size. This first solution shows how to display top-tier images as a set of "tabs" by binding a Repeater control to a SiteMapDataSource control and using the IsDescendantOf() method of ASP.NET 2.0's new System.Web.SiteMap class.

Figure 1 shows the final result for a Site Map page where each bucket is represented by an image.

Figure 1: Image-oriented Navigation: The "tabs" in the page shown in this figure are images that correspond to the buckets, or top-level pages in the application, as shown by the arrows connecting them to the hierarchical set of links.

The MasterPage.master file in this solution contains two controls: a SiteMapDataSource control and a Repeater control:

   <asp:SiteMapDataSource ID="srcBuckets" runat="server" 
      ShowStartingNode="False" />
   
   <asp:Repeater ID="rpt" runat="server" DataSourceID="srcBuckets">
     <ItemTemplate><%# 
       String.Format("<a href=\"{0}\" onmouseover=\"imgon('{2}');\" 
               onmouseout=\"imgoff('{2}');\"><img src=\"{2}.gif\"
               alt=\"{1}\" name=\"{2}\" /></a>," 
         ((SiteMapNode)Container.DataItem).Url, 
         ((SiteMapNode)Container.DataItem).Title, 
         ((SiteMapNode)Container.DataItem)["imageName"])
     %></ItemTemplate>
   </asp:Repeater>

The SiteMapDataSource control provides easy programmatic access to the hierarchical site map information contained in Web.sitemap. Of all SiteMapDataSource's properties, ShowStartingNode is the most useful. Setting it to false removes the mandatory one-and-only-one top-level siteMapNode in Web.sitemap, and exposes its children (the buckets). StartingNodeOffset is the next most useful property because it lets you move up and down the site map navigational tree. I'll explain this topic in greater detail in Solution #4. The most common properties of SiteMapDataSource are described in Table 1.

Table 1: Commonly SiteMapDataSource Properties: The table shows the most commonly-used SiteMapDataSource properties and a description of each.

Property	Description
ShowStartingNode	True by default. Setting this property to false removes the mandatory one-and-only-one top-level siteMapNode in Web.sitemap, and exposes its children (the buckets).
StartFromCurrentNode	False by default. Setting this property to true exposes the current page rather than the topmost page. If you were to use this property in conjunction with a StartingNodeOffset of 1 you would expose the children of the current page.
StartingNodeOffset	This has a value of zero by default. Setting it to a positive number exposes the children of the node that would otherwise be exposed (negative numbers move up the navigation tree). For example, if you were to use a StartingNodeOffset of 1 in conjunction with a ShowStartingNode with a value of false, you would expose the children of the currently active bucket. See Solution #4 for details.
StartingNodeUrl	This property allows you to set a specific page as the starting node that SiteMapDataSource exposes. If you were to use this property in conjunction with a StartingNodeOffset of 1, you could display the children of a particular node. This technique might be particularly useful when used in conjunction with database-driven site map content as described in the second article in this series.

A TreeView is one of the few controls that can display all a SiteMapDataSource's pages, because it can handle hierarchical information natively. The repeater used above, however, typically does not. What it will do is display the topmost pages exposed by the SiteMapDataSource. This is why SiteMapDataSource's ShowStartingNode property is so useful.

By binding to the SiteMapDataSource through the DataSourceID property, the repeater can access the siteMapNode elements contained in the SiteMapDataSource. Each SiteMapNode object corresponds to one of the entries in the Web.sitemap file (see earlier example). The repeater may then access the siteMapNode element's attributes, such as url and title.

But what about storing and retrieving other attributes, such as imageName? What makes ASP.NET 2.0's approach to site navigation so wonderful is its extensibility. You can add arbitrary attributes to the siteMapNode elements in the Web.sitemap file, and then access them in code. The solution above adds the imageName attribute to the Web.sitemap file as shown below:

   <siteMapNode url="~/Default.aspx" title="Home" imageName="tab1">

Then, you can access the value in the RepeaterItemTemplate:

   ((SiteMapNode)Container.DataItem)["imageName"])

You could easily add image height and width attributes as well. That covers the basics of displaying image-oriented navigation. The next sections expand on this approach by showing how to identify active buckets.