Web Site Navigation in ASP.NET 2.0

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.

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.

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.

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.

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

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 impress your clients with feature rich solution already tested well in many other sites worldwide. Check Design, Advanced, Programming and Look-Like menu items on ExpertMenu page to see what this control can do.

Tutorial toolbar:  Tell A Friend  |  Add to favorites  |  Feedback  |   Google