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:
<siteMap xmlns="<A href="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">http://schemas.microsoft.com/AspNet/SiteMap-File-1.0</A>" >
Structure is obvious just I describe some attrubitues:
|url||Relative address of page|
|title||Demonstrates the title of page|
|description||Short decription about page|
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.
This property demonstrates the method to view SiteMap file. It can get these values:
|Tree||Site map date will be viewed as tree hierachy|
|Flat||Site map data will be viewed as flat strucutre. It's useful for some special controls like drop down list.|
|Path||Using 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.|
This property demonstrates the order of showing nodes and can get these values:
|Current||All nodes from current node to its childs|
|Parent||All nodes from parent of current node to its childs|
|Root||All 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.
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:
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1">
And its result: (SmartPhone.aspx)
You can change the layout of this control with Orientation property. It can get two values:
Vertical. By default you use
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
Also you can change the style of this control with following tags but it's not in my goals here:
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):
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
And this is the result:
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:
If you have a site with many pages then you can define the number of parent nodes before current node with this property:
This control uses
> character as default separator between links. You can use this property to change this character. Just look at this code:
runat="server" PathSeparator=" - ">
This is the result: (PPC.aspx)
Note that you can use <PathSeparatorStyle> to change the style of your separator (Like Background color, Font color, etc)
This property can get two values:
CurrentToRoot. By default you use
RootToCurrent. If you change it to
CurrentToRoot direction of your links will be changed.
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
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1">
Run the page and see this: (News.aspx)
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:
|CurrentNode||Gives back current page|
|RootNode||Gives back root page of current page|
|ParentNode||Gives back parent node of current node|
|Title||Gives back the title of current node (You had demonstrated it in site map file)|
This code will show you how to use above properties:
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>"
When I tried to add SiteMapPath control to PPC.aspx page I got an error in this control but page worked properly.
- 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.