Building a Site Navigation and Site Menu Using ASP.NET Sitemap and SitemapDataSource Control

Introduction

With the new framework of ASP.NET 3.5, building a site map for your website is easier. I will cover the demonstration of using the new SiteMapDataSource and TreeView controls. 

Main

One of the great advantages of using a site map in the default web.sitemap file is that the file also can be the source of a breadcrumbs navigation. You probably have encountered these navigation on many sites. They list the trail of pages that you have navigated to reach the current page, and you can backtrack through the list by clicking on the listed links. It can simplify your navigation and give a quick view of a web structure. Its purpose is to give users a way to keep track of their location within programs or documents. Example of Breadcrumbs:



Now I am going to show how to create sitemap and navigation. After that, it is easier to add breadcrumbs from toolbox. First you can create a new project and then create a new website. Select asp.net website. After that you can add new item like the one below:

Visual Studio automatically creates the required initial code for web.sitemap and after that I can add a web structure as shown in below example.

<SITEMAP xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
  <SITEMAPNODE title="Welcome to WorldOfASP.NET" description="WorldOfASP.NET">
    <SITEMAPNODE title="About WorldOfASP.NET" description="WorldOfASP.NET" url="About.aspx" />
    <SITEMAPNODE title="Contact WorldOfASP.NET" description="WorldOfASP.NET" url="ContactUs.aspx" />
    <SITEMAPNODE title="Link to WorldOfASP.NET" description="WorldOfASP.NET" url="LinkToUs.aspx" />
  </SITEMAPNODE>
</SITEMAP>

You can find your sitemap file on Solution Explorer with the extension .sitemap.



Now, open the Design view of Default.aspx. From the Data section of the Toolbox, drag and drop SiteMapDataSource control to the form. From the Navigation section of the Toolbox, drag and drop a TreeView control to the form. Select the Properties of TreeView and set its DataSourceID property to the SiteMapDataSource control.



Once you select the SiteMapDataSource as the DataSource for the TreeView control, you will be able to view immediately the Site Map's contents inside it. Save and run the application.



A sitemap for the website already create using a TreeView control.

You can also bind the above Site Map file to a Menu control in one easy step. From the Navigation section of the Toolbox, drag and drop a Menu control on to the form and set its DataSourceID property to the SiteMapDataSource control. Run the application and you will be able to view the newly created menu as shown below. You can change its appearance by integrate skin from app_theme and its behavior from Properties window in Visual Studio 2008.




Below is the code snippet of default.aspx

<FORM id=form1 runat="server">
    <asp:SiteMapDataSource id=SiteMapDataSource1 runat="server"></asp:SiteMapDataSource>
    <asp:TreeView id=TreeView1 runat="server" DataSourceID="SiteMapDataSource1">
    </asp:TreeView>
    <asp:Menu id=Menu1 runat="server" DataSourceID="SiteMapDataSource1">
    </asp:Menu>
    </FORM>

Conclusion

The Sitemap is very useful especially in creating a complex menu control like dropdown web menu navigation with flexible depth depends on you. It is also very useful for creating a web navigation like breadcrumbs.

References

All the useful links or references that can help you learn more about it:

1. ASPdotnet Sitemap
2. ASPdotnet Site Navigation Overview