C#: Working with the SiteMapPath Control

Category: ASP.NET

C#: SiteMapPath Control

By: Zack Turnbow

Introduction

Most business web sites can have a large footprint, that is, several pages to visit. It can be difficult to navigate through the site with just normal menus. Many companies started creating “bread crumb” trails so that a user will know exactly where they are in the web site. This becomes increasingly difficult when a site keeps adding pages as it evolves. ASP.NET 2.0 solved this issue by introducing the SiteMapPath control.

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

Implementation

Start fresh with a new web application in Visual Studio. The SiteMapPath control is used in conjunction with a Web.sitemap file. So the first action required is to add a Web.sitemap item to the project.


[Click to see full-size]

Before adding anything to the new file, a little explanation and planning needs to take place. The Web.sitemap file is just an XML file that holds the structure of the web site. So it is a good idea to take some time to plan the initial layout of the web site. Below is a basic structure of a typical web site:

Home
About Us
Mission Statement
Company History
Press Releases
Products
Product 1
Product 2
Services and Parts
Parts for Sale
Repair Service
Technical Assistance
Documentation
Forum
Support
Sales
New Customer
Existing Customer
Customer Feedback

We are using Server Intellect and have found that by far, they are the most friendly, responsive, and knowledgeable support team we've ever dealt with!

As shown, the site layout might cause a user (customer) to get lost in the site. So with this lay out in mind, enter the following code into the Web.sitemap file.





























Each level of the layout above corresponds to an outer node of the Web.sitemap file. For instance, the About Us node is


.
.
.

with the mission statement, history, and press releases nodes being inside the About Us node. This XML file will give an easier way of tracking site navigation and the ability to add, change, or delete pages. Now that the sitemap has been defined, the next step is to create the master page to be the template for each page.

Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.


[Click to see full-size]

On the master page, add a SiteMapPath control and a Menu control to the page. Now it is time to create each of the pages listed in the Web.sitemap file. For this article, only the Home, the AboutUs, the Mission, the History, and the Press aspx pages will be created. Make sure to set the master page to the once created above when adding the pages to the project.

Go back to the master page and format the Menu control to have the layout displayed below.


[Click to see full-size]

Go to the Home page and a Label on the work area and give the label the name of Home.


[Click to see full-size]

****************************

Repeat the steps for the AboutUs, the Mission, the History, and the Press aspx pages. Once this is complete, run the application and navigate the pages using the SiteMapPath control.


[Click to see full-size]

 


[Click to see full-size]

This article has shown another option for a user to navigate a web site as well an easy way for the developer to keep track of site navigation.

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

 

 

What have we learned?

How to create a Web.sitemap file to be used in site navigation.
How to create a master page so that all other pages use it as a template.
How to incorporate the SiteMapPath control along with a Menu control to assist in site navigation.

Attachments



Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!