Site Navigation using SiteMapPath control in ASP.Net 2.0

This article explains how to do site navigation for your web site

Introduction

Asp.net 2.0 has cool control for site navigation is SiteMapPath control.You can find SiteMapPath control in the Toolbox under the Navigation category.Using this control you can find where are you in this website.
First Add Web.sitemap in your project.Web.Sitemap has Title,Url and description attributes.like this,

Site Map

<?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">
<siteMapNode url="~/InsideUs.aspx" title="Inside Us" description="">
<siteMapNode url="~/VisionMission.aspx" title="Vision & Mission" description=""/>
<siteMapNode url="~/Culture.aspx" title="Culture" description=""/>
<siteMapNode url="~/Trust.aspx" title="Trust" description=""/>
<siteMapNode url="~/BusinessPriciples.aspx" title="Business Principles" description=""/>
</siteMapNode>
<siteMapNode url="~/contactus.aspx" title="Contact US" description="Contact US"/>
<siteMapNode url="~/aboutus.aspx" title="About Us" description="About Us"/>
</siteMapNode>
</siteMap>

Master Page for the application

Now add the master page in your project and then drag and drop the SiteMapPath control.like this,

<asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana" Font-Size="0.8em" PathSeparator=" : ">
<PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" />
<CurrentNodeStyle ForeColor="#333333" />
<NodeStyle Font-Bold="True" ForeColor="#7C6F57" />
<RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" />
</asp:SiteMapPath>

The SiteMapPath control will automatically bind itself to the Web.sitemap file.If you use default SiteMap provider will

automatically be used by SiteMapPath control and also you can set the SiteMapProvider property of SiteMapPath control.

Now when you are on Culture.aspx page then SiteMapPath control display like, Home : Inside Us : Culture
So you can easily go from "Culture" page to "Home" page or "Inside Us" page (root node) using SiteMapPath Control.

Here,I set PathSeparator property of SiteMapPath control to : by default is >.

PathDirection property use for in which direction you want to display link.CurrentToRoot display link start from current node to Parent node like Culture : Inside Us : Home.And other is RootToCurrent display link start from Parent node to Current node like Home : Inside Us : Culture.

How to create Menu based on Sitemap and Roles

The following code sample shows how to create Menu based on Sitemap and Roles.

The combination of ASP.NET role management and ASP.NET URL authorization provide
a way to restrict access to Web files based on security roles.

Security trimming is a very cool feature which allows you to hide the urls based
on the users roles.

First create Web.sitemap in website also add roles for access url.

<?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">
<siteMapNode url="~/contactus.aspx" title="Contact US" description="Contact US" />
<siteMapNode url="~/aboutus.aspx" title="About Us" description="About Us" roles="*"/>
<siteMapNode url="~/articles.aspx" title="Articles" description="Articles"/>
<siteMapNode url="~/admin.aspx" title="Admin" description="Articles" roles="Admin"/>
</siteMapNode>
</siteMap>

In above site admin.aspx is display only to person who has Admin role.and roles
"*" means display for everyone.

Now,define sitemap providers in web.config file and enable security trimming

(securityTrimmingEnabled is set to true ).


<siteMap defaultProvider="XmlSiteMapProvider" enabled="true">
<providers> <add name="UserMenuSiteMap" description="Used for Menu"
type="System.Web.XmlSiteMapProvider" siteMapFile="Web.siteMap" securityTrimmingEnabled="true"/>
</providers>
</siteMap>

Menu based on Sitemap

For creating menu based on sitemap,Firstly create Web.sitemap (Define Sitemap).Web.Sitemap has Title,Url and description attributes.

<?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">
<siteMapNode url="~/contactus.aspx" title="Contact US" description="Contact US"/>
<siteMapNode url="~/aboutus.aspx" title="About Us" description="About Us"/>
<siteMapNode url="~/articles.aspx" title="Articles" description="Articles"/>
</siteMapNode>
</siteMap>

Then,in master page or .aspx drag and drop asp.net control and SiteMapDataSource.And set menu DataSourceID property to SiteMapDataSource.

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Font-Names="Verdana"
Font-Size="0.8em" ForeColor="#7C6F57" Orientation="Horizontal" StaticSubMenuIndent="10px"
BackColor="#F7F6F3" DynamicHorizontalOffset="2" StaticDisplayLevels="2"></asp:Menu>



<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

When you required Horizontal or Vertical menu then just set Orientation property of menu.By default this property set to Vertical.

In code we use DynamicHorizontalOffset property of menu to Gets or sets the number of pixels to shift a dynamic menu horizontally relative to its parent menu item.

In code we use StaticDisplayLevels property of menu to specify the number of menu levels to display in a static menu.