Web Site Navigation in ASP.NET 2.

Web applications that you develop will have multiple pages interconnected with each other in some
fashion. You need to have a navigation system in place which can help the end user to successfully work
through your application. There is no standard mechanism which offers well-defined navigation system for
the web application in ASP.NET 1.x. Only known method for building navigation within web application is to
fill the pages with hyperlinks. Problem arises when you move pages around or change page names.
Hyperlinks don't work phew!! As site grows and new pages are added, it will be a nightmare for the
developer to manage all the links in the application.
ASP.NET 2.0 eliminates this problems with a built in site navigation feature which provides a consistent
way for the user to navigate your website. The new site navigation system allows defining all the links at a
central location file usually an XML file and display those links in lists or navigation menus in each required
page using navigation-based server controls.
Different ways to implement Site Navigation in ASP.NET 2.0
Site maps: Site maps are XML files which describes the logical structure of your web application. We can
use it to define the layout of all pages in application and how they relate to one another. You can add or
remove links/pages to your site map there by managing navigation of website effectively. Site maps are
defined with .sitemap extension. You can interact with site maps in variety of ways. You can use sitemap
class for programmatic access to site map file. You can also use new SiteMapDataSource control to help
bind the information in the site map file to new navigation server controls provided by ASP.NET 2.0
<?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="Home Page">
<siteMapNode url="News.aspx" title="News" description="The Latest News" >
<siteMapNode title ="U.S" description ="U.S News" url ="News.aspx?cat=us" />
<siteMapNode title ="UK" description ="UK News" url ="News.aspx?cat=uk" />
<siteMapNode title="Asia" description ="Asia News" url="News.aspx?cat=asia" />
</siteMapNode>
<siteMapNode url="finance.aspx" title="Finance" description="The Latest Finance" >
<siteMapNode title="NASDAQ" description="NASDAQ" url="finance.aspx?cat=nasdaq" />
<siteMapNode title="NY" description ="Newyork" url="finance.aspx?cat=ny"/>
<siteMapNode title ="HONGKONG" description ="HongKong" url="finance.aspx?cat=hongkong"/>
</siteMapNode>
<siteMapNode url="weather.aspx" description ="Latest Weather" title="Weather">
<siteMapNode title="NYC" description="NewYorkCity Weather" url ="weather.aspx?cat=nyc"/>
<siteMapNode title="Chicago" description ="Chicago Weather" url="weather.aspx?cat=chicago" />
</siteMapNode>
</siteMapNode >
</siteMap>

Sitemap file listing

The root node of sitemap is <sitemap> element. Only one <sitemap> element can exist in the file.
Within the <sitemap> element, there is a <siteMapNode> element. This is generally the start page of
the application. In above listing the root <siteMapNode> points to the Default.aspx page the start
page.
<siteMapNode url="Default.aspx" title="Home" description="Home Page">
Title: attribute provides a textual description of the link
Description: this is used for ToolTip attribute on the link
URL: this gives the location of the physical file
You can place as many additional <siteMapNode> elements as you want. Additional link-levels can be
created by adding child <SiteMapNode> elements for any parent <SiteMapNode> in the structure.
Listing above defines following logical structure
Home
News
U.S News
UK News
Asia News
 Finance
NASDAQ
NY
HONGKONG
Weather
NYC
Chicago
SiteMapPath Server Control
ASP.NET 2.0 provides new SiteMapPath Server control which works exclusively with .sitemap files. You
can find this new control in the Navigation section of Visual Studio 2005 IDE.

The SiteMapPath control creates navigation mechanism which is generally referred to as breadcrumb
navigation. This is a linear path defining where the user is currently located in navigation structure. It
usually helps end user to know his location in relation to the rest of the site.

Breadcrumb navigation in msn website. Surrounded by Black box

Let's create an example to demonstrate capabilities of SiteMapPath Server Control.

We have already seen the structure of sitemap file. We will use the same sitemap for our example. The
SiteMapPath server control is so easy to use that you can simply drag and drop the server control onto
any page and it shows breadcrumb navigation for that page.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AsiaNews.aspx.cs" Inherits="AsiaNews"
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
 <form id="form1" runat="server">
<div>
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>

</div>
</form>
</body>
</html>
SiteMapPath Server control listing
In the above sample, I have added SiteMapPath control to AsiaNews.aspx and you can see in output when
you open AsiaNews.aspx, you will observe that this page belongs to News section of the site which is turn
belongs to Home section of website.
The SiteMapPath control creates breadcrumb navigation with very little effort on your part.

Output Listing of AsiaNews page displaying breadcrumb navigation

Properties of SiteMapPath Control
PathSeparator Property
PathSeparator property defines the element to separate the link elements. By default, (>) greater than
symbol is used to separate link elements as shown in above listing

PathDirection Property
This property changes the direction of the links generated in the
output. Possible settings for this property are RootToCurrent
and CurrentToRoot. In the above example, I have used default
RootToCurrent setting. If we change the setting to CurrentToRoot
you will the output as shown below. I think you got the difference.

Output listing with PathDirection set to

CurrentToRoot
Few more properties in nut shell
a) NodeStyle property: Applies styles to all links in the sitemap uniformly
b) RootNodeStyle property: Applies styles to the root link in the SiteMapPath navigation
c) CurrentNodeStyle property: Gets the style used for the display text for the current node.
Menu Server Control
Another important navigation control in ASP.NET 2.0 which allows the end user to navigate through a large
collection of options (links) with very less effort. This is used to display menu in a web page and used in
combination with SiteMapDataSource control for navigating a web site. You can customize the
appearance of menu control through styles, user-defined templates and themes.
Menu control displays two types of menus: a Static menu and Dynamic menu. The static menu is always
displayed in menu control. By default, only menu items at the root levels are displayed. You can also
display additional menu levels by setting StaticDisplayLevels property.
Menu items with a higher level than the value specified by StaticDisplayLevels property are displayed
in dynamic menu. A Dynamic menu appears only when the user positions the mouse pointer over the
parent menu item that contains a Dynamic submenu.
Menu control exposes events such as MenuItemClick, Load, UnLoad, Prerender, DataBound and certain
other events. MenuItemClick event enables you to take some action when end user clicks one of the
available menu items.
When the user clicks a menu item, the Menu control can either navigate to a linked Web page or simply
post back to the server. If the NavigateUrl of a menu item is set, the Menu control navigates to the
linked page; Otherwise, it posts the page back to the server for processing. By default, a linked page is
displayed in the same window as menu control.
We will again use same sitemap for menu server control too.
Drag and drop the menu server control from Navigation Section of Toolbox and similarly drag and drop the
SiteMapDataSource control from Data Section of Toolbox and connect the two by using Menu control's
DataSourceId property. From this example, you can see that I'm using a SiteMapDataSource control
that automatically works with the application's web.sitemap file. DataSourceID property will connect the
menu control with SiteMapDataSource control.

Menu Control Properties dialog box

You can change the appearance and style of menu control by using predefined styles and define your own
custom styles. Appearance and style are always left you to decide. I have chosen Professional predefined
style in SmartTag for the menu control. There are plenty of properties available for you to configure the
style of mouse pointer, display text style and styles for dynamic menus and static menus. Play around with
the various properties and see the change for yourself.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="News.aspx.cs" Inherits="News" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" BackColor="#B5C7DE"
DataSourceID="SiteMapDataSource1"
DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98"
StaticSubMenuIndent="10px">
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicMenuStyle BackColor="#B5C7DE" />
<StaticSelectedStyle BackColor="#507CD1" />
<DynamicSelectedStyle BackColor="#507CD1" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
</asp:Menu>
</div>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</form>
</body>
</html>
HTML listing of Menu Control

Output listing for Menu Control using SiteMapDataSource control using sitemap xml file
ASP.NET 2.0 provides powerful navigation mechanisms. The core of the new navigation model is the ability
to represent the navigation structure in an xml file which can then used by navigation controls such as
SiteMapPath controls. You can design navigation structure for your application without writing single piece
of code.
If you are professional software developer, you have deadlines and your time is your most important
resource. With standard ASP.NET Menu server control you can do a lot of things, but everything will take
time. If you suppose that you will lose too much time in menu issues, it will be better to get some more
advanced solution like ExpertMenu. With this control you can save a lot of programming (and debugging)
hours and get nice looking, feature rich solution, already well tested in many other sites worldwide.