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.
The SiteMap
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.
Figure 2: Adding a New Site Map
- Key in the following XML markup in the web.sitemap file:
<?xml version="1.0" encoding="utf-8" ?> <siteMap > <siteMapNode url="default.aspx" title="Home" description="My Web Site"> <siteMapNode url="~/products/default.aspx" title="Products"> <siteMapNode url="~/products/product1.aspx" title="First Product" /> <siteMapNode url="~/products/product2.aspx" title="Second Product" /> </net/codeguru-sitemap/Node> <siteMapNode url="~/services/default.aspx" title="Services"> <siteMapNode url="~/services/service1.aspx" title="First Service" /> <siteMapNode url="~/services/service2.aspx" title="Second Service" /> </net/codeguru-sitemap/Node> <siteMapNode url="contact.aspx" title="Contact Us" /> </net/codeguru-sitemap/Node> </net/codeguru-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:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <html > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Font-Size="XX-Large" ForeColor="Blue" Text="Welcome!"></asp:Label><br /> <asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana" Font-Size="0.8em" PathSeparator=" : "> <PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" /> <CurrentNodeStyle ForeColor="#333333" /> <NodeStyle Font-Bold="True" ForeColor="#7C6F57" /> <RootNodeStyle Font-Bold="True" ForeColor="#5D7B9D" /> </asp:SiteMapPath> <br /> <br /> <asp:contentplaceholder id="ContentPlaceHolder1" runat="server"> </asp:contentplaceholder> </div> </form> </body> </html>
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:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <center> <table> <tr> <td width="60%"> <asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Welcome to our Web site!"></asp:Label></td> </tr> <tr> <td width="60%"> <asp:HyperLink ID="HyperLink1" runat="server" Font-Size="X-Large" NavigateUrl="~/Products/Default.aspx">Products </asp:HyperLink></td> </tr> <tr> <td width="60%"> <asp:HyperLink ID="HyperLink2" runat="server" Font-Size="X-Large" NavigateUrl="~/Services/Default.aspx">Services </asp:HyperLink></td> </tr> <tr> <td width="60%"> <asp:HyperLink ID="HyperLink3" runat="server" Font-Size="X-Large" NavigateUrl="~/Contact.aspx">Contact Us </asp:HyperLink></td> </tr> </table> </center> </asp:Content>
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.