1. Introduction to ASP.Net Navigation Control

The Navigation Controls are useful for maintaining the page hierarchy as well as the page navigation in ASP.Net. There are three navigation controls that one can use 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:

All three controls operate on the site map of a website. We can link the Menu and tree view controls with the Datasource. In this example, we will see how to create and use these controls with a web site. We already studied about creating and using Asp.Net Master Pages. We can use that example and study Navigation control on top of it.

2. About This Navigation Control Example

The screenshot below shows 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 direction. Item marked as 2 in the example shows the TreeView Navigation Control and it shows the Navigational link and the hierarchical Relation between them. If you see here, the site groups the links under the country names. The items marked as 3 show the usage of the SiteMapPath Navigation Control. The path navigation control helps the user to know which page they are viewing. This is handy in a big site, and the user can know the path to that page from the top-level of the page. All these controls together express the usage of the navigational control on ASP.Net 2.0 and above.

3. ‘Web.SiteMap’ File and SiteMapNode

You can follow the below steps to start with this example:

1. First, we will download the example from this article: ASP.Net Master Page Example. We will use navigation controls on this offline site.
2. After downloading it, we add four new ‘.aspx pages’ called Home, India, USA and Egypt and some description for each page. While adding the pages we must specify the ‘MasterPage.Master’ as the Master Page.
3. After adding all four pages, 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 specify the hierarchical relationship between the pages. Now the below screenshot shows all the newly added files to the project:
   

   Newly Added Files

4. Next, we change the ‘web.sitemap’ to specify the hierarchy of web pages. In our example, this file groups the pages under three categories named 1) India 2) USA and 3) Egypt. The content of the ‘web.SiteMap’ is below:

Here, the root node is SiteMap, and it has a SiteMapNode for the home page. 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 developer organized the website. In our example, you can see the web pages grouped under the category pages.

Each SiteMapNode should have two vital attributes set in it. The URL attribute shows the webpage name with extension and Title is to point out the text which will be used by the navigation control. These controls Displays these titles as hyperlinks. Below video shows adding the webpages to the sitemap.

---

Video 1: Adding Webpages and SiteMap
Note: MstechArticles is moved to Coding-Examples

---

4. Adding Navigation Controls to WebSite

In the last section, we defined the sitemap for the website. Now, the ASP.Net Navigation control can use it. In our Example, first we add the SiteMapPath Control to the footer portion of the master Page. The design view is below:

After adding this control, we add the SiteMapDataSource Control to the web page. We add this control to the master page so that the website will always displays it for all the webpages. However, the location of this Data Source in the master page is not important as this is not going to be rendered on the web page. The below picture shows we drag and dropped the SiteMapDataSource control to the master page:

Now we can add other two navigational controls to the project. We place the Menu Navigation Control to the header portion of the master page and the TreeView Navigation Control to the left margin of the master page. These controls need to know the data Supplier and hence we link the SiteMapDataSource via the property of the Navigational Control. Our page need no coding as these two controls query the SiteMapDatasource to know the hierarchic relation. We don’t even point out the linkage between DataSource and Web.SiteMap as the link will be automatically set once we drop the control to the form. The video below shows adding these controls. It also shows how the Navigation Controls work.

---

Video 2: Using the Navigation Controls

---

Source Code: Download ASP.Net Navigation Controls Example From Google Drive

• Java Wrapper Class & Boxing, Unboxing
• Java Exception Handling: Try Catch Finally

Categories: Asp 2.0

Tags: Menu Navigation Control, Navigation Controls, SiteMapDataSource Control, SiteMapPath Control, TreeView Navigation Control, Web.SiteMap File

This site uses Akismet to reduce spam. Learn how your comment data is processed.