Set Your Web Site’s Navigation Structure Easily with ASP.NET 2.0 Site Maps

If you’ve ever traveled to unfamiliar destinations, you know the importance of maps. They help you to travel easily, making your journey more pleasurable. The same holds true for Web sites. A Web site should present visitors with a simple yet flexible navigation structure so that they can travel to various parts of the site easily. ASP.NET 2.0 provides a feature called SiteMap that helps you implement this functionality. This article explains what site maps are and describes how to develop Web site navigation structures that use them.

The SiteMap

A site map is an XML file (with a .sitemap extension) that details the overall navigational layout of your Web site. You can consume the site map file as per your requirement.

An example will help explain site map files. Figure 1 shows the directory structure of a sample Web site.

Figure 1: Web Site Structure

The home page (Default.aspx) and Contact Us page (contact.aspx) reside in the root folder of the Web site. There are two sub folders called Products and Services. Each has two Web forms: Product1.aspx and Product2.aspx, and Service1.aspx and Service2.aspx, respectively.

Now, by taking the following steps, you’ll use a site map to represent this Web site’s structure:

  1. Create a new Web site using VS.NET 2005.
  2. Right-click on the Web site and choose “Add New Item…”.
  3. Select Site Map from the “Add New Item…” dialog (see Figure 2) and name it Web.sitemap.

    Figure 2: Adding a New Site Map

  4. Key in the following XML markup in the web.sitemap file:

    <?xml version="1.0" encoding="utf-8" ?>
    <siteMap  >
    <siteMapNode url="default.aspx" title="Home"
                 description="My Web Site">
       <siteMapNode url="~/products/default.aspx" title="Products">
          <siteMapNode url="~/products/product1.aspx"
                       title="First Product" />
          <siteMapNode url="~/products/product2.aspx"
                       title="Second Product" />
       </net/codeguru-sitemap/Node>
       <siteMapNode url="~/services/default.aspx" title="Services">
          <siteMapNode url="~/services/service1.aspx"
                       title="First Service" />
          <siteMapNode url="~/services/service2.aspx"
                       title="Second Service" />
       </net/codeguru-sitemap/Node>
    <siteMapNode url="contact.aspx" title="Contact Us" />
    </net/codeguru-sitemap/Node>
    </net/codeguru-sitemap/>

The root of the site map file is siteMap. It contains a node called siteMapNode, and depending on your Web site structure, it can contain several siteMapNodes.

The siteMapNode tag has four important attributes (see Table 1).

Attribute Description
title Indicates the title of the page. This attribute often is used by navigation controls to display the title for the URL.
url Indicates the URL of the page that this node represents.
description Specifies description of this page. You can use this description to show tooltips.
roles By using security trimming (discussed later), this attribute specifies the roles that are allowed to access this page.

Table 1: Important Attributes of the <siteMapNode> Tag

This makes your site map. You now can think of using it for navigation purposes.

Ways to Consume SiteMap

You can consume the site map file created in the previous section in three common ways:

  • Use the SiteMapPath control
  • Use the SiteMap data source control
  • Use the SiteMap class

The SiteMapPath control allows you to render what are often called breadcrumbs. Figure 3 shows what breadcrumbs are.

Figure 3: Breadcrumb Navigation

The SiteMapPath controls display various levels of navigation. For example, you can click on the parent or root levels to navigate back or at the top level. And, of course, you can customize the navigation levels.

ASP.NET 2.0 also comes with a nice set of navigation controls, including TreeView and menu. With the SiteMap data source control, you can bind the site map file with these controls.

At times, the built-in navigation controls may not meet your requirements. In such cases, you can access the site map file programmatically and read various siteMapNodes. You then can render a custom navigation structure using the title and URL attributes of siteMapNode.

Using the SiteMapPath Control

Before delving into mode details, create the required directory structure and Web forms first. Begin by adding two folders called Products and Services to the Web site. Then, add a new Master Page called MasterPage.master. Add the Web forms shown in Table 2, and be sure to set the master page for all of them as you add them.

Web Form Name Folder
Default.aspx Web site root
Contact.aspx Web site root
Default.aspx Products
Product1.aspx Products
Product2.aspx Products
Default.aspx Services
Service1.aspx Services
Service2.aspx Services

Table 2: List of Web Forms

Now, open the Master Page that you added previously. Drag and drop a Label control and a SiteMapPath control onto it (find the SiteMapPath control in the Navigation node of the VS.NET Toolbox). Set the Text property of the Label to “Welcome!”.

The following listing shows the complete markup for MasterPage.master:

<%@ Master Language="C#" AutoEventWireup="true"
    CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<html  >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Font-Size="XX-Large"
           ForeColor="Blue" Text="Welcome!"></asp:Label><br />
<asp:SiteMapPath ID="SiteMapPath1" runat="server"
                 Font-Names="Verdana" Font-Size="0.8em"
PathSeparator=" : ">
<PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" />
<CurrentNodeStyle ForeColor="#333333" />
<NodeStyle Font-Bold="True" ForeColor="#7C6F57" />
<RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" />
</asp:SiteMapPath>
<br />
<br />
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>

Now, open Default.aspx from the root folder. The Default.aspx should look like Figure 4.

Figure 4: Sample Run of Default.aspx

To design this page, add a table with four rows and one column. Drag and drop a Label control in the uppermost row and set its Text property to “Welcome to our Web site!”. Then, drag and drop three HyperLink controls in the remaining rows and set their Text and NavigateUrl properties as shown in Table 3.

HyperLink ID Text Property NavigateUrl Property
HyperLink1 Products ~/products/default.aspx
HyperLink2 Services ~/Services/default.aspx
HyperLink3 Contact Us ~/contact.aspx

Table 3: Setting Properties of HyperLinks

The following listing shows the complete markup for Default.aspx:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
    AutoEventWireup="true" CodeFile="Default.aspx.cs"
    Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1"
             ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<center>
<table>
   <tr>
      <td width="60%">
         <asp:Label ID="Label1" runat="server" Font-Size="X-Large"
                    Text="Welcome to our Web site!"></asp:Label></td>
   </tr>
   <tr>
      <td width="60%">
         <asp:HyperLink ID="HyperLink1" runat="server"
                        Font-Size="X-Large"
                        NavigateUrl="~/Products/Default.aspx">Products
                        </asp:HyperLink></td>
   </tr>
   <tr>
      <td width="60%">
         <asp:HyperLink ID="HyperLink2" runat="server"
                        Font-Size="X-Large"
                        NavigateUrl="~/Services/Default.aspx">Services
                        </asp:HyperLink></td>
   </tr>
   <tr>
      <td width="60%">
         <asp:HyperLink ID="HyperLink3" runat="server"
                        Font-Size="X-Large"
                        NavigateUrl="~/Contact.aspx">Contact Us
                        </asp:HyperLink></td>
   </tr>
</table>
</center>
</asp:Content>

Now, open Default.aspx from the Products folder and design it as shown in Figure 5.

Figure 5: Default Page of Products Folder

Table 4 lists the HyperLinks used in the Web form.

HyperLink ID Text Property NavigateUrl Property
HyperLink1 First Product ~/products/product1.aspx
HyperLink2 Second Product ~/products/product2.aspx

Table 4: HyperLinks of Default Page from Products Folder

Along similar lines, design Default.aspx from the Services folder as shown in Figure 6.

Figure 6: Default Page of Services Folder

Table 5 lists the HyperLinks used in the Web form.

HyperLink ID Text Property NavigateUrl Property
HyperLink1 First Service ~/Services/service1.aspx
HyperLink2 Second Service ~/Services/service2.aspx

Table 5: HyperLinks of Default Page from Products Folder

Finally, add one label to each of the remaining Web forms and set its Text property as shown in Table 6.

Web Form Name Text Property of Label
~/Contact.aspx Contact Us
~/Products/Product1.aspx First Product Details
~/Products/Product2.aspx Second Product Details
~/Services/Service1.aspx First Service Details
~/Services/Service2.aspx Second Service Details

Table 6: Setting Text Property of Labels from Remaining Web Forms

Now, run the Default.aspx from the root folder and navigate to the Product1.aspx page. Figure 7 shows the sample run of the Web form.

Figure 7: Sample Run of Product1.aspx

Note how the title and URL attributes from the web.sitemap file are used to render the “breadcrumbs.” Also, note how the parent levels are displayed along with the current page title. Try navigating to various pages and observe the SiteMapPath control.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read