Please navigate to the bottom of the page for Table of Contents

Wednesday, May 25, 2011

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:
image
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:

image

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.

8 comments:

  1. hi! this is vishwanath.I am very thnkful to you that you proivide such kind of information about ASP.NET. since, I am fresher it helps me a lot. If i get an opportunity to work under certain environment & technology I will be very happy.
    Regards,
    Vishwanath Talekar
    (9029671225).

    ReplyDelete
  2. Long Live Mr. Nikhil Singhal & his Team, !!!!!!!!!!!!!!!!!!!!!
    HIp HIp Hurrey.......................................:)

    ReplyDelete
  3. efforts to implement the hygiene of the oral cavity, the tongue of all dirt / food scraps. Dental hygiene and bad mouth not only causes bad breath, tooth decay and gingivitis, but also increases the risk of heart disease and other health problems. The simplest way is to brush the teeth twice a day after breakfast and before bed.... My Web : Tips Memilih Jasa Penyewaan Truk Terpercaya di Indonesia

    ReplyDelete
  4. I will prefer this blog because it has much more informative stuff.
    mobile app agencies

    ReplyDelete
  5. We have severe enemy of counterfeiting approaches that try to dispense with even the littlest occurrences of duplicating from crafted by our Pay Someone To Do My Research Paper authors. Aside from an advanced apparatus, we likewise have a group of editors who direct these issues and ensure that your paper is 100% copyright infringement free.

    ReplyDelete
  6. Going through this piece is a lot of joy. I looked at it carefully. Please keep improving your website. I really value the information on your website. However, if you ever need to order an essay online, make use of our assignment writers qatar service. I will suggest this service to you because students frequently use it to get help with their assignments.

    ReplyDelete
  7. It appears that you've mentioned programming interview questions and answers in the context of assignment provider services online. If you're looking for assistance with programming assignments or interview questions, you've come to the right place. Our assignment provider services online offer expert guidance and solutions for programming-related tasks editing help best writing an academic essay

    ReplyDelete