If you've ever traveled to unfamiliar destinations, you know the importance of maps. They help you to travel easily, making your journey more pleasurable. The same holds true for Web sites. A Web site should present visitors with a simple yet flexible navigation structure so that they can travel to various parts of the site easily. ASP.NET 2.0 provides a feature called SiteMap that helps you implement this functionality. This article explains what site maps are and describes how to develop Web site navigation structures that use them.
A site map is an XML file (with a .sitemap extension) that details the overall navigational layout of your Web site. You can consume the site map file as per your requirement.
An example will help explain site map files. Figure 1 shows the directory structure of a sample Web site.
Figure 1: Web Site Structure
The home page (Default.aspx) and Contact Us page (contact.aspx) reside in the root folder of the Web site. There are two sub folders called Products and Services. Each has two Web forms: Product1.aspx and Product2.aspx, and Service1.aspx and Service2.aspx, respectively.
Now, by taking the following steps, you'll use a site map to represent this Web site's structure:
Create a new Web site using VS.NET 2005.
Right-click on the Web site and choose "Add New Item...".
Select Site Map from the "Add New Item..." dialog (see Figure 2) and name it Web.sitemap.
The root of the site map file is siteMap. It contains a node called siteMapNode, and depending on your Web site structure, it can contain several siteMapNodes.
The siteMapNode tag has four important attributes (see Table 1).
Attribute
Description
title
Indicates the title of the page. This attribute often is used by navigation controls to display the title for the URL.
url
Indicates the URL of the page that this node represents.
description
Specifies description of this page. You can use this description to show tooltips.
roles
By using security trimming (discussed later), this attribute specifies the roles that are allowed to access this page.
Table 1: Important Attributes of the <siteMapNode> Tag
This makes your site map. You now can think of using it for navigation purposes.
Ways to Consume SiteMap
You can consume the site map file created in the previous section in three common ways:
Use the SiteMapPath control
Use the SiteMap data source control
Use the SiteMap class
The SiteMapPath control allows you to render what are often called breadcrumbs. Figure 3 shows what breadcrumbs are.
Figure 3: Breadcrumb Navigation
The SiteMapPath controls display various levels of navigation. For example, you can click on the parent or root levels to navigate back or at the top level. And, of course, you can customize the navigation levels.
ASP.NET 2.0 also comes with a nice set of navigation controls, including TreeView and menu. With the SiteMap data source control, you can bind the site map file with these controls.
At times, the built-in navigation controls may not meet your requirements. In such cases, you can access the site map file programmatically and read various siteMapNodes. You then can render a custom navigation structure using the title and URL attributes of siteMapNode.
Using the SiteMapPath Control
Before delving into mode details, create the required directory structure and Web forms first. Begin by adding two folders called Products and Services to the Web site. Then, add a new Master Page called MasterPage.master. Add the Web forms shown in Table 2, and be sure to set the master page for all of them as you add them.
Web Form Name
Folder
Default.aspx
Web site root
Contact.aspx
Web site root
Default.aspx
Products
Product1.aspx
Products
Product2.aspx
Products
Default.aspx
Services
Service1.aspx
Services
Service2.aspx
Services
Table 2: List of Web Forms
Now, open the Master Page that you added previously. Drag and drop a Label control and a SiteMapPath control onto it (find the SiteMapPath control in the Navigation node of the VS.NET Toolbox). Set the Text property of the Label to "Welcome!".
The following listing shows the complete markup for MasterPage.master:
Now, open Default.aspx from the root folder. The Default.aspx should look like Figure 4.
Figure 4: Sample Run of Default.aspx
To design this page, add a table with four rows and one column. Drag and drop a Label control in the uppermost row and set its Text property to "Welcome to our Web site!". Then, drag and drop three HyperLink controls in the remaining rows and set their Text and NavigateUrl properties as shown in Table 3.
HyperLink ID
Text Property
NavigateUrl Property
HyperLink1
Products
~/products/default.aspx
HyperLink2
Services
~/Services/default.aspx
HyperLink3
Contact Us
~/contact.aspx
Table 3: Setting Properties of HyperLinks
The following listing shows the complete markup for Default.aspx:
Now, open Default.aspx from the Products folder and design it as shown in Figure 5.
Figure 5: Default Page of Products Folder
Table 4 lists the HyperLinks used in the Web form.
HyperLink ID
Text Property
NavigateUrl Property
HyperLink1
First Product
~/products/product1.aspx
HyperLink2
Second Product
~/products/product2.aspx
Table 4: HyperLinks of Default Page from Products Folder
Along similar lines, design Default.aspx from the Services folder as shown in Figure 6.
Figure 6: Default Page of Services Folder
Table 5 lists the HyperLinks used in the Web form.
HyperLink ID
Text Property
NavigateUrl Property
HyperLink1
First Service
~/Services/service1.aspx
HyperLink2
Second Service
~/Services/service2.aspx
Table 5: HyperLinks of Default Page from Products Folder
Finally, add one label to each of the remaining Web forms and set its Text property as shown in Table 6.
Web Form Name
Text Property of Label
~/Contact.aspx
Contact Us
~/Products/Product1.aspx
First Product Details
~/Products/Product2.aspx
Second Product Details
~/Services/Service1.aspx
First Service Details
~/Services/Service2.aspx
Second Service Details
Table 6: Setting Text Property of Labels from Remaining Web Forms
Now, run the Default.aspx from the root folder and navigate to the Product1.aspx page. Figure 7 shows the sample run of the Web form.
Figure 7: Sample Run of Product1.aspx
Note how the title and URL attributes from the web.sitemap file are used to render the "breadcrumbs." Also, note how the parent levels are displayed along with the current page title. Try navigating to various pages and observe the SiteMapPath control.
Add www.codeguru.com to your favorites Add www.codeguru.com to your browser search box IE 7 | Firefox 2.0 | Firefox 1.5.xReceive news via our XML/RSS feed
RATE THIS ARTICLE:
Excellent Very Good Average Below Average Poor
(You must be signed in to rank an article. Not a member? Click here to register)
Latest Comments:
No Comments Posted.
Add a Comment:
Title:
Comment:
Pre-Formatted:
Check this if you want the text to display with the formatting as typed (good for source code)
(You must be signed in to comment on an article. Not a member? Click here to register)
All
IE 7
Firefox 2.0
