Site Navigation in ASP.NET 3.5
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 3.5 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 3.5
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 3.5
<?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.
Above listing 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 3.5 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 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:
- NodeStyle property: Applies styles to all links in the sitemap uniformly
- RootNodeStyle property : Applies styles to the root link in the SiteMapPath navigation
- CurrentNodeStyle property: Gets the style used for the display text for the current node.
Menu Server Control:
Another important navigation control in ASP.NET 3.5 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 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 3.5 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 with out writing single piece of code.
