Saturday, January 23, 2016

[ ASP.Net ] - Understanding Navigation Controls SiteMapPath, Menu, TreeView

1. Introduction

The "Navigation Controls" are useful for maintaining the page hierarchy as well as the page navigation. There are three navigation controls that can be used in ASP.Net 2.0 and above. These controls are:

  1. SiteMapPath
  2. Menu
  3. TreeView

The above controls are grouped under Navigation” in your toolbox and this is shown in the below picture:

Fig 1. Navigation control in ToolBox
Fig 1. Navigation control in ToolBox

All three controls operate on the Web site map and the controls Menu and tree view should be tied with the Datasource. In this article, we will see creating and using these controls. The example application from Article Number 15 in section of this site is used to demonstrate the Navigation controls.

2. About the Example

The screenshot below shows the example:

  Fig 2. About the Example
Fig 2. About the Example

The item marked as one shows the usage of the "Menu Navigation" control. The menu can be laid horizontal or vertical. In our example the menu has the horizontal orientation. Item marked as 2 in the example shows the "TreeView Navigation Control" and it shows the Navigational link as well as the hierarchical Relationship between the links. If you see here, the links are grouped under the country names. The items marked as 3 shows the usage of the "SiteMapPath Navigation Control". The path navigation control is useful to know which page we are viewing in a big site and path to that page from the top level page. All these control together demonstrates the usage of the navigational control on ASP.Net 2.0 and above.

3. Making the Application

To create the application:
1) Download the MasterPage Example from this website. The Asp.Net section, article Number 15 has the link to that article and downloadable example.

2) Once you downloaded it, add four new .aspx pages called Home, India, USA and Egypt and some description for each pages. While adding the pages make sure to specify the MasterPage.Master as the Master Page.

3) Once all four pages are added, it is time to add the Web.SiteMap to the Project. This can be done by invoking “Add New Item” context menu for the project. The web.sitemap file is used to specify the hierarchical relationship between the pages. Now the below screenshot all the newly added files to the project:

Fig 3. Newly Added Files
Fig 3. Newly Added Files

4) Modify the web.sitemap to specify the hierarchy of web pages. In our example, the file groups the pages under three categories named 1) India 2) USA and 3) Egypt and the content of the web.SiteMap is given below:

Fig 4. Content of Web.SiteMap
Fig 4. Content of Web.SiteMap
Here, the root node is “SiteMap” (Marked as 1) and it has a “SiteMapNode” for the home page (Marked as 2). These two nodes are standard for almost all the ASP.Net web sites. After these nodes the hierarchy begins and varies from site to site & based on how the site was organized. In our example, you can see the web pages (Marked as 4) grouped under the category pages (Marked as 3).

Each SiteMapNode should have two important attributes defined in it. The URL attribute specifies the webpage name with extension and Title is used to specify the text that can be used by the navigation control (Displays these title as hyper links). Below video shows adding the pages are sitemap:

Video 1: Adding Webpages and SiteMap

4. Adding Navigation Controls

Once the site map for the web application is specified we can start using the navigational control. In our Example, first the “SiteMapPath control is added to the footer portion of the master Page. The design view is shown below:

Fig 5. Location SiteMapPath Control in the Form
Fig 5. Location SiteMapPath Control in the Form

After adding this control, “SiteMapDataSource control” is added to the web page. The control is added to the master page. However, the location of the control is not important as this is not going to be rendered on the web page. This is shown below:

Fig 6. Adding SiteMapDataSource to the Form
Fig 6. Adding SiteMapDataSource to the Form
Once this SiteMapDataSource control is added to the project, the other two navigational controls can be added to the project. The Menu navigation control is added to the header portion of the master page and the Treeview Navigation control is added to the left margin of the master page. These control need to specify the SiteMapDataSource through it properties. No coding is required as these two control queries the SiteMapDatasource to know the hierarchical relationship. Even though we don’t specify the linkage between DataSource and Web.SiteMap, the relationship will be automatically established once the control is added to the form. The video below shows adding these controls and examining how these Navigation controls work.

Video 2: Using the Navigation Controls

In the above video, you saw styles set for the Menu and TreeView and that has no effect. Since both controls are set with the formatting, the style won’t come into picture. Once you remove formatting (Through AutoFormat quicklink) these styles will be reflected on the controls.

Listing 1.1

 <?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="" >
<siteMapNode url="Home.aspx" title="Home Page"  
description="Home Page for Navigation Control Demo">
<siteMapNode url="India.aspx" title="India"  
  description="Country - India">
<siteMapNode url="HarmandirSahib.aspx" title="HarmandirSahib" 
description ="Harmandir Sahib"> </siteMapNode>
<siteMapNode url="AjantaCave.aspx" title="AjantaCave" 
description ="Ajanta Caves"> </siteMapNode>
<siteMapNode url="TajMahal.aspx" title="TajMahal" 
description ="TajMahal"> </siteMapNode>
<siteMapNode url="USA.aspx" title="United States of America"  
  description="Country - USA">
<siteMapNode url="NiagaraFalls.aspx" title="NiagaraFalls" 
description ="Niagara Falls"> </siteMapNode>
<siteMapNode url="Yellowstone.aspx" title="Yellowstone" 
description ="Yellow stone"> </siteMapNode>
<siteMapNode url="LasVegasStrip.aspx" title="LasVegasStrip" 
description ="LasVegas Strip"> </siteMapNode>
<siteMapNode url="Egypt.aspx" title="Egypt"  
  description="Country - Egypt">
<siteMapNode url="AbuSimbel.aspx" title="AbuSimbel" 
description ="AbuSimbel"> </siteMapNode>
<siteMapNode url="GizaNecropolis.aspx" title="GizaNecropolis" 
description ="Giza Necropolis"> </siteMapNode>
<siteMapNode url="RiverNileCruise.aspx" title="RiverNileCruise" 
description ="River Nil eCruise"> </siteMapNode>

Source Code: Download

No comments:

Post a Comment

Leave your comment(s) here.

Like this site? Tell it to your Firend :)