Defining a Site Map and Providing Site Navigation

objectives
 The basics of site navigation in ASP.NET
 Creating and defining your website’s structure
 Showing the user’s current location in the site’s structure using a breadcrumb
 Displaying the site’s structure using the TreeView Web control
 Using the Menu Web control

ASP.NET’s Site Navigation Features

ASP.NET provides a means to specify a hierarchical site map and includes Web controls for
displaying site-navigation controls based on the structure specified by the site map. The site map
is implemented as an XML file that defines the logical sections of the site and optionally ties
each section to a particular URL.
ASP.NET includes three navigation Web controls:
 SiteMapPath—Provides a breadcrumb, which is a single line of text showing the user her
location in the website’s structure.
o A breadcrumb allows the user to quickly see where she is in the site and to
navigate back through the logical hierarchy.
 TreeView—Displays a hierarchical view of the site’s structure.
 Menu—Displays the same data as the treeview, but renders it as a collection of menu
items and submenus.

Defining the Website’s Structure Using a Site Map

Let’s build an online bookstore.
Start by creating a new ASP.NET website in Visual Web Developer/Studio. Next, add five new
ASP.NET pages: Default.aspx, OnSale.aspx, Legal.aspx, Privacy.aspx, and About.aspx. Add
three folders to the website: Sports, Fiction, and Technology. In each of these folders, add a
single ASP.NET page, Default.aspx. Finally, in the Technology folder, add two subfolders,
Computers and Electronics, adding a Default.aspx page to each of these subfolders.

Adding the Site Map

To create the site map, follow the same steps as you normally would to add an ASP.NET page to
the project—right-click the project name in the Solution Explorer and choose the Add New Item
menu option. From the Add New Item dialog box, choose the Site Map option and click the Add
button. This adds a site map named Web.sitemap to your project.

1|Page
The site map file is an XML file that expresses the logical structure of the website.
XML documents impose strict formatting rules. For instance, XML is case sensitive. All
elements must have opening and closing tags.

Building the Site Map

Given the mock website we’ve created, let’s define a site map that exhibits the logical hierarchy
shown in following figure. Each node in the hierarchy shows the title and URL for the section
along with the section’s place in the hierarchy.

2|Page
Each <siteMapNode> element must contain a title attribute; the url and description attributes are
optional. Furthermore, each provided url attribute must be unique. You cannot have two
<siteMapNode> elements with the same url value.
The completed site map contents
<?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=””>
<siteMapNode url=”About.aspx” title=”About” description=””>
<siteMapNode url=”Legal.aspx” title=”Legal” description=””
/>
<siteMapNode url=”Privacy.aspx” title=”Privacy”
description=”” />
</siteMapNode>
<siteMapNode url=”OnSale.aspx” title=”On Sale” description=”” />
<siteMapNode url=”Fiction/Default.aspx” title=”Fiction”
description=”” />
<siteMapNode url=”Sports/Default.aspx” title=”Sports”
description=”” />
<siteMapNode url=”Technology/Default.aspx” title=”Technology”
description=””>
<siteMapNode url=”Technology/Computers/Default.aspx”
title=”Computers” description=”” />
<siteMapNode url=”Technology/Electronics/Default.aspx”
title=”Electronics” description=”” />
</siteMapNode>
</siteMapNode>
</siteMap>
Displaying a Breadcrumb with the SiteMapPath Control
ASP.NET provides three navigation Web controls for displaying a navigation user interface
based on the site map: the SiteMapPath, the TreeView, and the Menu.
The SiteMapPath control displays a breadcrumb, showing the user where in the site he is
currently visiting. All three of these controls are available from the Navigation section of the
Toolbox.

3|Page
Add the SiteMapPath control to the Default.aspx pages in the root directory, in the Technology
folder, and the Computers subfolder. From the designer, the SiteMapPath control shows the
layout based on the values in the site map and the page’s location in the site map.

Displaying the Site’s Structure in a TreeView

The TreeView control lists the sections of the website as defined in the site map using a
collapsible tree. A visitor can quickly see all the sections of the site and his position in the site

4|Page
structure hierarchy. Each node in the tree is rendered as a hyperlink that, when clicked, whisks
the user to the appropriate section.
Let’s add a TreeView to the Home section (Default.aspx in the root folder). To do so, we must
first add a SiteMapDataSource control to the page; this control can be found in the Data section
of the Toolbox.
Next, add the TreeView control to the page and, from its smart tag, select the
SiteMapDataSource we just added to the page from the Choose Data Source drop-down list.
Once the data source has been specified, the TreeView control’s appearance in the designer is
updated, mirroring the hierarchy expressed in site map.

Using Menus to Show the Site’s Structure

Like the TreeView, the Menu control displays the entire contents of the site map with the aid of a
SiteMapDataSource control. But rather than displaying the contents as a tree, the Menu control
displays the items using a menu interface. By default, each section defined in the site map is
rendered as an item in the menu with submenus used to reflect the hierarchy.

5|Page
Let’s add a Menu control to the Default.aspx page in the Fiction folder. Start by adding a
SiteMapDataSource control; next, add the Menu control and bind it to the SiteMapDataSource
control. After the data source is specified, the Menu’s appearance in the designer is updated to
reflect the structure of the site map. By default, the menu shows just the top-level element in the
site map hierarchy—Home, for our site map.

6|Page