If you want your visitors to be able to move comfortably to various areas of your website, you need to present them with easy to use navigational controls. This article delves into the three most common navigational controls and explains how to set them up with ASP.NET 3.5.
It is important that before you read this tutorial, you have a basic understanding on the concept and creation of a web.sitemap XML file in ASP.NET 3.5. You can refer to yesterday's tutorial on creating an ASP.NET 3.5 XML sitemap for navigational web controls.
As an overview, to display navigational content to your website visitors, you need to make use of navigational web controls in ASP.NET. There are three common navigational web controls available:
a. Breadcrumbs or SitemapPath
b. Menu
c. Treeview
Each of these will be discussed thoroughly in this tutorial. However, these navigational web controls depend entirely on the contents of your web.sitemap XML file, which resides in your website root directory.
Without web.sitemap, you will not be able to display navigational content to the browser using these web controls. As a summary:
The screen shot above shows that web.sitemap is the data source for all of these navigational web controls. The yellow boxes are the client side (browser output) whiles the green/blue boxes are executed on the server side.
This is relatively simple, but it is indeed complicated if you have a website that is designed without using "master pages." Discussion of master pages is beyond the scope of this article. You can read some information about master pages at the link.
"Master pages" are a site wide template that gives your web pages a consistent look, design and layout. If you edit this single master page, these changes will be reflected in every web page that depends on the master page design.
Why is this important in relation to SitemapPath and TreeView? To illustrate, follow the steps below:
2. Launch/Open that website using Visual Web Developer Express.
3. You can see the ASP.NET web pages in it, for example the home page Default.aspx, the contact page Contact.aspx, and so on. This website project does not use master pages.
4. Go to the Source View of Default.aspx and then go to View -> Toolbox -> Navigation -> SiteMapPath and add next to these pieces of code:
This is the homepage.
<br /><br/>
Leave the Treeview sample code untouched; you will learn more about this later. After doing this; the code in the <body></body> of Default.aspx will be:
6. Do the same for all ASP.NET pages (Contact.aspx, About/Default.aspx, Terms.aspx, Privacy.aspx, etc). Click and drag the SiteMapPath web control in between the <form><div></div></form> tag in each of those pages manually.
So most of these pages (except Default.aspx, which is the home page) will now have a <body></body> as follows (example for Privacy.aspx):
<body>
<formid="form1"runat="server">
<div>
This is the privacy page.
<br/>
<br/>
<asp:SiteMapPathID="SiteMapPath1"runat="server">
</asp:SiteMapPath>
</div>
</form>
</body>
File -> View in Browser.
You should see the output with a TreeView structure of the website.
8. Click the "Peter author page" link in the TreeView. You should see only the breadcrumbs and no TreeView. There is a sample screen shot of steps 7 and 8 below:
The above screen shot shows the Default.aspx output (home page) and the /About/Peter.aspx page.
Since the TreeView code can only be found in the home page, you will not see the TreeView in Peter's page.
But the SiteMapPath web control has been added to all pages, so you should see unique breadcrumb link output for all of the pages that depend on the website structure.
Here is an explanation of the difference between TreeView and SitemapPath in terms of development and output:
1. You need to add a SiteMapDataSource before you can use TreeView.
2. TreeView shows the entire website navigation structure according to web.sitemap XML contents, while SiteMapPath only shows the breadcrumb links relevant to the visited page.
Here is a useful application of breadcrumbs and TreeView:
1. In a deep vertical website structure, visitors can easily get confused while navigating pages. Breadcrumbs can be added to help visitors return to where they came from.
For example, in the screen shot shown earlier, suppose a visitor drills down to the Peter author page. To go back to the home page or one level higher in the hierarchy, they would just need to click the links in the breadcrumb.
To implement breadcrumbs, add the SiteMapPath web control to all of the website's ASP.NET pages. This can be complicated if you have thousands of pages in your server.
Instead, as stated earlier, if you use "master pages" you will just need to place this SiteMapPath web control in the master page. It will be reflected automatically to all of the website's pages.
2. As to what you saw in the earlier screen shot, TreeView can display the entire website hierarchical structure on a single ASP.NET page according to the content of your web.sitemap XML file.
This is very useful for troubleshooting web.sitemap-related problems. First, if the designer is formulating the website structure on a piece of paper like this:
and then using sitemap generators/classes to generate the contents of web.sitemap, the developer can confirm that the website structure is consistent with what has been presented on the TreeView browser output.
3. TreeView can be used as a normal sitemap or a sidebar navigation menu for your website's visitors. In this case, you need to add the TreeView web control to each of those ASP.NET pages, or use master pages for more efficient development.
A more customizable navigational web control for presenting the entire web structure is a menu. Let's replace the TreeView control with a menu on the Default.aspx page so that you can see how menu navigation works. Delete this TreeView code:
2. Add Menu next to SiteMapDataSource (View -> Toolbox -> Navigation -> Menu).
3. Go to the Design view of Default.aspx.
4. Right click on the menu web control (it displays the word "root") and click "Show Smart Tag."
5. In Choose Data Source, select "SiteMapDataSource1."
6. Set the views to "Static."
Feel free to experiment with the properties of the menu to display a different variety of static and dynamic contents of the navigation. "Static" content is shown by default in the page. The "dynamic" content of the menu will only be shown if the user interacts with the menu (such as when you "mouse over" the menu).
For this example, the static content at the home page shows only a "Homepage" link. But when you mouse over the link, it shows the deeper structure of the website, like this:
Contact, Privacy, Terms and Conditions are children of the Homepage. These "child" pages are set as dynamic content (will only show if the user mouses over the Homepage link). Other example could be if you mouse over the "About" link, which will show its child pages, namely John author page and Peter author.
Dynamic Sitemap and Navigation in ASP.Net
