Web Site Navigation Using a SiteMap

This article will explain how to implement site navigation using the ASP.NET 2.0 infrastructure consisting of SiteMap, SiteMapDataSource and navigational controls. These pieces can help you to quickly put up an aesthetically pleasing web site.

The SiteMap Class

For web site navigation, ASP.NET 2.0 offers an infrastructure that provides site map information for web page development using navigational controls and SiteMapDataSource controls. The SiteMap class depends therefore on SiteMapProvider and XmlSiteMapProvider (default) classes. The navigation support infrastructure may use all of the following items:

  • Provider classes
  • Web.sitemap file (XML)
  • Navigational Controls
  • SiteMapPath control

SiteMap is a container of site information (folders and files) represented in an XML format that provides the root node of the site, the SiteMapProvider used, and tracks the provider objects. System.Web.SiteMap inherits from System.Object. The default provider XMLSiteMapProvider works through the Web.sitemap. Besides being useful for site navigation, the sitemap also provides a easy way for search engines to look for pages on the site.

Create the folder structure for the site

Here is an example of a site with two folders, ColdFusion61 and MSAccess at the site http://localhost/Tutorials. This was the same site that was created in the tutorial for describing the concept of a Master page in VS2005. The unexpanded folder structure is shown in this picture.

 

The ColdFusionMX61 contains two web pages, Default.aspx and Coldfusion.aspx. The MSAccess folder contains three web pages, Ado.aspx, DAP.aspx, and Default.aspx. Besides these, each of the folders have their own images directory (now empty) to keep the images related to these folders. This detail is shown in the next picture.

{mospagebreak title=Adding a SiteMap to the site}

After highlighting the project, right click to access the drop-down menu. Click on Add New Item… which brings up the following window.

When you highlight the SiteMap icon you will find Web.sitemap as the name of the file. If you click on the Add button this file will be added to your site as shown. Before clicking the Add button you may choose a name of your own, but do not change the extension. Extensions such as *.sitemap and *.config are protected by ASP.NET for security reasons.

Site structure is in an XML file

Web.sitemap is an XML file with a special structure. It comes with a default template for a folder and a folder/file structure with three attributes, URL, Title, and Description as shown. In a rendered page these can be seen in the address bar, item’s control name, and a tool-tip text showing the description.

Here <siteMap/> is the root and it has <siteMapNode/> children. These children represent the folder. These children also contain children which are the files in the folder. As shown here, the default that is added has three <siteMapNodes/> which can be used to represent one folder and two files in the folder.

The SiteMap XML file has been modified to reflect the folder structure shown earlier, as shown in the next picture. Only the structure of the ColdFusionMX61 folder has been partially implemented in this file. Also shown is the provision made for the MSAccess Folder to contain the files DAP.aspx and Ado.aspx. It must be remembered that all the ASPX files will be ContentHolder files (refer to the Master Page tutorial). The title, URL and description values for both the ColdFusionMX61 folder and the file it contains have been added to the declaration. The comments should help in identifying these attributes.

Add the structure of the MSAccess folder along the same lines. Make use of intellisense at every step as shown. This will add to the correctness of the formatting.

The completed Web.sitemap file is shown in the next paragraph.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<!--Home Page--> <siteMapNode url="~/Default.aspx" title="Home" description="Home Page"> <!--ColdFusionMX61 Folder &
Contents-->
<-- Folder --> <siteMapNode title="ColdFusionMX61" url="~/ColdFusionMX61/Default.aspx" Description="CFMX Tutorials"> <-- File -->
<siteMapNode url="~/ColdFusionMX61/Coldfusion.aspx" title="CFMX" description="All tutorials on CFMX" /> </siteMapNode> <!--MS Access Folder & Files--> <-- Folder -->
<siteMapNode title="MSAccess" url="~/MSAccess/Default.aspx" description="MS Access 2003 related">
<-- Two Files -->
<siteMapNode title="ActiveXDataObjects" url="~/MSAccess/Ado.aspx" description="Using MS Access Application"/> <siteMapNode title="Data Access Pages" url="~/MSAccess/DAP.aspx" description="Enabling for the web"/> </siteMapNode> </siteMapNode> </siteMap>

{mospagebreak title=Site Navigation with Menu Control}

Site navigation as implemented in ASP.NET 2.0 uses the idea of providers to interact with the site structure data captured in the XML file Web.sitemap. The default provider that is provided reads the Web.sitemap file and creates a SiteMap object. The navigational controls that you will find in the toolbox use the sitemap object to implement the navigation. Instead of the default provider, a custom provider may also be used. This tutorial uses the built-in or default provider for site navigation.

For navigational aids there are several options like drop-down, Treeview, and Menu which are not specific for navigation but are wired to the hierarchical structure of the site by means of the SiteMapDataSource control (as we shall see presently) as shown. On the other hand you may also use a SiteMapPath control which is specially programmed for site navigation. This tutorial will be demonstrating the use of the Menu control to navigate the Tutorials site. Future tutorials will look at other controls that can be used.

{mospagebreak title=Where should we place the menu control?}

Since the navigational menu should be available from all pages, the ideal place for the menu control is the Master Page. We need to add a SiteMapDataSource control which runs at the "Server" that extracts site structure related data that feeds a navigational control. We also need to add a navigational control which will look up this data source to navigate through the web pages. We will be adding two controls from the toolbox where they are shown in the next picture.

You may drag and drop them onto the locations shown on the MasterPage.

The design view of this page is shown in the next picture.

The menu control has a large number of properties, both static and dynamic, as well as for interactive display. However its DataSourceID property should match with the SitaMapDataSource’s ID Property as shown in the next picture.

<asp:Menu ID="Menu1" 
                  runat="server" 
                  DataSourceID="SiteMapDataSource1"  Height="277px" 
                  BackColor="#FFFBD6" 
                  DynamicHorizontalOffset="2" 
                  Font-Names="Verdana" 
                  Font-Size="0.4em" 
                  ForeColor="#990000" 
                  StaticSubMenuIndent="10px">
            <StaticMenuItemStyle HorizontalPadding="5px" 
                                 VerticalPadding="2px" 
                                 Font-Size="Small" />
            <DynamicHoverStyle BackColor="#990000" 
                               ForeColor="White" />
            <DynamicMenuStyle BackColor="#FFFBD6" />
            <StaticSelectedStyle BackColor="#FFCC66" />
            <DynamicSelectedStyle BackColor="#FFCC66" />
            <DynamicMenuItemStyle Font-Size="Medium" 
                                  HorizontalPadding="5px" 
                                  VerticalPadding="2px" />
            <StaticHoverStyle BackColor="#990000" 
                              ForeColor="Maroon" Font-Size="Medium" />
            <StaticMenuStyle BackColor="#FFFFC0" BorderColor="#C0C000" />
        </asp:Menu>
             
            <asp:SiteMapDataSource ID="SiteMapDataSource1"  
runat="server" />

With this association between the menu control and the SiteMapDataSource, the site navigation can be immediately verified as shown in the following two displays. This picture shows the page Coldfusion.aspx. When you hover over the menu you can see the various pages to which you can navigate using this menu. The placement of the menu control and its look may not be aesthetically pleasing, but the idea is to demonstrate the functionality of navigation.

You may navigate to another page, such as Ado.aspx, and you will see the following display in your browser.

 

Summary

Site navigation is extremly easy to implement using the ASP.NET 2.0 infrastructure consisting of SiteMap, SiteMapDataSource and navigational controls. This can be very useful for those interested in getting an aesthetically pleasing web site up and running in record time. For those of you who used the Site Diagram, the Site Designer and the Navigation Bar controls in Visual InterDev, the functionality provided with in .NET Framework for site navigation should be a Godsend. It must be remembered that site pages not included in the Web.sitemap cannot be reached by the navigation controls unless you take other measures.

3 thoughts on “Web Site Navigation Using a SiteMap

  1. A good navigation system is essential for user satisfaction. Can you always comeback to home when you are lost? Can you go from here to there as quickly as you can? Lots of web sites have poor navigation. VS 2005 come with the out of the box site navagation tools. Compare this to the painful one in VS 6.0 [Visual Interdev].Like to hear from you. Sincerely, Jayaram Krishnaswamy

  2. My problem is explained in the falowing:

    Compiler Error Message: CS0716: Cannot convert to static type ‘System.Web.SiteMap’

    Source Error:

    Line 118: public sitemap_aspx() {
    Line 119: string[] dependencies;
    Line 120: ((SiteMap)(this)).AppRelativeVirtualPath = “~/SiteMap.aspx”;
    Line 121: if ((global::ASP.sitemap_aspx.@__initialized == false)) {
    Line 122: dependencies = new string[5];

[gp-comments width="770" linklove="off" ]