Click here to Skip to main content
15,860,859 members
Articles / Web Development / ASP.NET
Article

Site Navigation in ASP.NET 2.0

Rate me:
Please Sign up or sign in to vote.
3.40/5 (21 votes)
20 Sep 20054 min read 182.7K   2.1K   55   20
Describes how to use Site Navigation capabilities in ASP.NET 2.0

Sample Image - SiteNavigation0.jpg

Introduction

Site Navigation was one of major problems in website programming with ASP and ASP.NET early versions.
Changing the location of a page or a resource lead to problems for internal links. Old solutions were not able to solve these problems.
ASP.NET 2.0 is coming with new features and controls to solve them. These features produced big enhancement in Site Navigation.
In this tutorial I'm going to describe these new features and site navigation controls group for you.
I use a sample website about smart devices in this tutorial.

Site map definition

Site Map definition (as I'll describe later) is not necessary to use with Site Navigation but it's common and useful.
In this section we define the structure of our site in a XML file which we use it for SiteMapDataProvider in next sections.
Now we add new file to our project that has .sitemap extension. Default name for this file is Web.sitemap. It has simple structure that you can see here:

XML
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="<A href="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">http://schemas.microsoft.com/AspNet/SiteMap-File-1.0</A>" >
    <siteMapNode url="Default.aspx" title="Home Page" 
  description="Home Page Of My Site">
  <siteMapNode url="PPC.aspx" title="Pocket PC" 
   description="About Pocket PC">
   <siteMapNode url="PPC.aspx?cat=WinMobile" title="Win Mobile For PPC" 
    description="About Windows Mobile" />
   <siteMapNode url="PPC.aspx?cat=PPCPE" title="PPCPE" 
    description="About PPCPE" />
   <siteMapNode url="PPC.aspx?cat=Software" title="Softwares" 
    description="About Pocket PC Softwares" />
  </siteMapNode>
  <siteMapNode url="SmartPhone.aspx" title="Smart Phone"
   description="About Smart Phones">
   <siteMapNode url="SmartPhone.aspx?cat=WinMobile" 
    title="Win Mobile For Smart Phone"
    description="About Windows Mobile" />
   <siteMapNode url="SmartPhone.aspx?cat=Game" title="Smart Phone Games"
    description="Latest Games for Smart Phones" />
  </siteMapNode>
  <siteMapNode url="News.aspx" title="News" 
   description="Latest News">
   <siteMapNode url="News.aspx?cat=PPC" title="PPC News"
    description="Latest News About PPC" />
   <siteMapNode url="News.aspx?cat=SmartPhone" title="Smart Phone News"
    description="Latest News About Smart Phone" />
  </siteMapNode>
    </siteMapNode>
</siteMap>
Structure is obvious just I describe some attrubitues:

urlRelative address of page
titleDemonstrates the title of page
descriptionShort decription about page

SiteMapDataProvider control

Many of Site Navigation controls use this DataProvider to connect to SiteMap file.
Usually this control uses a tree hierarchy to view data. But there are other methods for this purpose. I'm going to describe them here with their properties and values.

SiteMapViewType

This property demonstrates the method to view SiteMap file. It can get these values:

TreeSite map date will be viewed as tree hierachy
FlatSite map data will be viewed as flat strucutre. It's useful for some special controls like drop down list.
PathUsing this propery leads to viewing site map file as node to root strucutre. You'll see some thing similar to this later in SiteMapPath control.

StartingNodeType

This property demonstrates the order of showing nodes and can get these values:

CurrentAll nodes from current node to its childs
ParentAll nodes from parent of current node to its childs
RootAll nodes from root to childs. This is default property

Site Navigation controls

I don't want to describe each control and its properties. Just try to show how can they be used in site navigation and don't focus on their properties and methods and stylistic tags.

Menu

Surely this is one of useful added controls to ASP.NET 2.0. You can use it as easy as other navigation controls. Just add a SiteMapDataSource to your page and set its ID as DataSourceID property of your Menu control.
Attend to this code:

VB.NET
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

And its result: (SmartPhone.aspx)

Vertical Menu control

You can change the layout of this control with Orientation property. It can get two values: Horizontal and Vertical. By default you use Vertical.

VB.NET
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
 Orientation="Horizontal">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

Result: (SmartPhone.aspx)

Horizontal Menu control

Also you can change the style of this control with following tags but it's not in my goals here:
<StaticHoverStyle>
<StaticMenuItemStyle>
<StaticMenuStyle>
<StaticSelectedStyle>
<StaticTemplate>
<DynamicHoverStyle>
<DynamicMenuItemStyle>
<DynamicMenuStyle>
<DynamicSelectedStyle>
<DynamicTemplate>

SiteMapPath

Using this control is very simple. After that a SiteMapDataProvider is in place you can add this control to your page then view your page in browser.
Here you can see the code for PPC.aspx page (It will generate automatically):

VB.NET
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>

And this is the result:

SiteMapPath control

If you hover on different parts of this control you can see a description as ToolTip. ASP.NET uses your description attribute in Web.sitemap file for this page as ToolTip text.
Important properties of this control are:

ParentLevelsDisplay

If you have a site with many pages then you can define the number of parent nodes before current node with this property:

VB.NET
<asp:SiteMapPath ID="SiteMapPath1" 
 runat="server" ParentLevelsDisplayed="1">
</asp:SiteMapPath>

Result: (PPC.aspx?cat=PPCPE)

SiteMapPath control

PathSeparator

This control uses > character as default separator between links. You can use this property to change this character. Just look at this code:

VB.NET
<asp:SiteMapPath ID="SiteMapPath1" 
 runat="server" PathSeparator=" - ">
</asp:SiteMapPath>

This is the result: (PPC.aspx)

SiteMapPath control

Note that you can use <PathSeparatorStyle> to change the style of your separator (Like Background color, Font color, etc)

PathDirection

This property can get two values: RootToCurrent and CurrentToRoot. By default you use RootToCurrent. If you change it to CurrentToRoot direction of your links will be changed.

SiteMapPath control

TreeView

Working with this control is as simple as working with Menu control. Add a SiteMapDataSource to your page and set its ID as your TreeView control DataSourceID:

VB.NET
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />

Run the page and see this: (News.aspx)

Tree view control

This control has many properties and methods those need another article. This new version of TreeView control is really enhanced in ASP.NET.

Site Navigation in code

Not only you can deal with Site Navigation capabilities through controls but also you can work with them through your code.
Look at following table. It contains important properties in Site Navigation API:

CurrentNodeGives back current page
RootNodeGives back root page of current page
ParentNodeGives back parent node of current node
TitleGives back the title of current node (You had demonstrated it in site map file)

This code will show you how to use above properties:

VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    lblResult.Text = "Current Title: " & SiteMap.CurrentNode.Title & "<br>" & _
    "Parent: " & SiteMap.CurrentNode.ParentNode.Title.ToString & "<br>" & _
    "Root: " & SiteMap.CurrentNode.RootNode.ToString() & "<br>" & _
    "NextSibling: " & SiteMap.CurrentNode.NextSibling.ToString & "<br>" & _
    "Previous Sibling: " & SiteMap.CurrentNode.PreviousSibling.ToString & "<br>"
End Sub
Result: (SmartPhone.aspx)

Site Navigation in code

Bugs

When I tried to add SiteMapPath control to PPC.aspx page I got an error in this control but page worked properly.

History

  • 2005/08/25 - I posted article. This article is written by ASP.NET 2.0 Beta 2 so I'll update it with RTM version.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
Iran (Islamic Republic of) Iran (Islamic Republic of)
For more information about me just visit my blog @ Nayyeri.NET

Comments and Discussions

 
GeneralMy vote of 4 Pin
Alireza_136212-Sep-13 23:02
Alireza_136212-Sep-13 23:02 
QuestionWeb sitemapPath Pin
dabolo18-Nov-12 14:31
dabolo18-Nov-12 14:31 
QuestionMaking the hole field clickable? Pin
thomasa14-May-09 3:58
thomasa14-May-09 3:58 
Is it possible to make the hole field clickable?

Now, only the text fires the click event.
Questioncan you help me handle this? Pin
Nika Asgari6-Oct-08 19:32
Nika Asgari6-Oct-08 19:32 
GeneralDynamic Menu control using sitemapdatasource without using web.sitemap in C# Pin
Member 376777227-Jan-07 2:03
Member 376777227-Jan-07 2:03 
QuestionRegarding menu control using sitemap Pin
Coder.8621-Sep-06 19:30
Coder.8621-Sep-06 19:30 
GeneralMenu control with many root level items Pin
eggsovereasy7-Jun-06 10:37
eggsovereasy7-Jun-06 10:37 
GeneralRe: Menu control with many root level items Pin
eggsovereasy8-Jun-06 3:34
eggsovereasy8-Jun-06 3:34 
AnswerRe: Menu control with many root level items Pin
Greg Kniffin15-Jun-06 11:27
Greg Kniffin15-Jun-06 11:27 
GeneralThat's exactly what I was looking for! Pin
Alexandru Savescu23-Apr-06 15:58
Alexandru Savescu23-Apr-06 15:58 
Generalmenu control fire pop up window Pin
Anonymous4-Oct-05 3:19
Anonymous4-Oct-05 3:19 
AnswerRe: menu control fire pop up window Pin
Keyvan Nayyeri4-Oct-05 15:59
Keyvan Nayyeri4-Oct-05 15:59 
GeneralMenu Control Pin
Gfw21-Sep-05 7:54
Gfw21-Sep-05 7:54 
AnswerRe: Menu Control Pin
Keyvan Nayyeri21-Sep-05 16:37
Keyvan Nayyeri21-Sep-05 16:37 
GeneralRe: Menu Control Pin
Doug Wilson2-Jan-06 3:13
Doug Wilson2-Jan-06 3:13 
GeneralRe: Menu Control Pin
Keyvan Nayyeri19-Jan-06 16:25
Keyvan Nayyeri19-Jan-06 16:25 
GeneralRe: Menu Control Pin
Anna Williams24-May-06 3:26
Anna Williams24-May-06 3:26 
GeneralRe: Menu Control Pin
Danno31219-Dec-06 12:30
Danno31219-Dec-06 12:30 
GeneralRe: Menu Control Pin
ken4296526-Dec-06 6:40
ken4296526-Dec-06 6:40 
GeneralRe: Menu Control Pin
ReddyPaduri9-Mar-07 14:40
ReddyPaduri9-Mar-07 14:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.