ASP.NET 4 site navigation using sitemaps

Today’s web applications generally consist of more than one page. In fact, they are a complex, inter-related set of pages that allow user to perform meaningful tasks by providing a clean and effective navigation. Providing the user the knowledge of all these different pages is hard and cumbersome using standard hyperlinks.
ASP.NET 4 has solved this problem by introducing the concepts of sitemaps – a navigation system that’s makes it trivial for the site developer to provide a complete navigation experience to the end user. This navigation system consists of 2 key elements: An XML file named web.sitemap that is an XML description of your site structure and a SiteMapPath server controls that generates the breadcrumb data making it easier for the user to navigate your site.

Web.sitemap xml file

Web.sitemap file can be used to define the navigational structure of all the pages in your application and how they relate to one another. This file provides a logical structure that can be used by ASP.NET to provide a clean navigation system. To create a sitemap for your application, simply add an xml file named web.sitemap or use the standard template to add it. A basic auto generated sitemap is shown below:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title=""  description="">
<siteMapNode url="" title=""  description="" />
<siteMapNode url="" title=""  description="" />
</siteMapNode>
</siteMap>

As you can see, the top level element is <siteMap>. Only one such node can exist in the file. The topmost (root) page is generally represented using a root <siteMapNode> element. The key attributes of a sitemapNode element include  the following:

• title: The title attribute provides a textual description of the link.
• description: The description attribute not only reminds you what the link is for, but also is used for the ToolTip attribute on the link.
• url: The url attribute describes where the file is located in the project.

Once you have defined the root sitemapNode, you can now layout your entire site as a series of sub nodes. Although hierarchy can go quite deep, it is recommended that you do not go beyond 3 – 4 levels deep. Note that your pages can all still be at the root level in the project but your sitemap can define complex navigation hierarchies.

A more realistic example of a sitemap is shown below:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode title="Home" description="Home Page" url="Default.aspx">
<siteMapNode title="News" description="The Latest News" url="News.aspx">
<siteMapNode title="U.S." description="U.S. News" url="News.aspx?cat=us" />
<siteMapNode title="World" description="World News" url="News.aspx?cat=world" />
<siteMapNode title="Technology" description="Technology News" url="News.aspx?cat=tech" />
<siteMapNode title="Sports" description="Sports News" url="News.aspx?cat=sport" />
</siteMapNode>
<siteMapNode title="Finance" description="The Latest Financial Information" url="Finance.aspx">
<siteMapNode title="Quotes" description="Get the Latest Quotes" url="Quotes.aspx" />
<siteMapNode title="Markets" description="The Latest Market Information" url="Markets.aspx">
<siteMapNode title="U.S." description="Looking at the U.S. Market" url="MarketsUS.aspx" />
<siteMapNode title="NYSE" description="The New York Stock Exchange" url="NYSE.aspx" />
</siteMapNode>
<siteMapNode title="Funds" description="Mutual Funds" url="Funds.aspx" />
</siteMapNode>
<siteMapNode title="Weather" description="The Latest Weather" url="Weather.aspx" />
</siteMapNode>
</siteMap>

SiteMapPath server control

The SiteMapPath server control can be used to consume the web.sitemap xml file to provide users with the breadcrumb navigational pattern. This pattern gives the user a visual clue about where they are in the application relative to the home and other parts of the site.

To add the SiteMapPath control, simply drag-and-drop the control from the Toolbox:

The code snippet shows the code for MarketUS.aspx page (as defined by the web.sitemap) with the SiteMapPath control on the page:

<%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind="MarketUS.aspx.cs" Inherits="SitemapTest.MarketUS" %>

<!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>US Market Data</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:sitemappath ID="Sitemappath1" runat="server">
</asp:sitemappath>

</div>
</form>
</body>
</html>

Running this simple page allows the SiteMapPath control to use the web.sitemap file and generates the following output:



As you can see, it was quite simple to show the navigation stack (so to speak) using just barebones coding. Additionally, the description for the “Markets” node shows up as tooltip.