Section 2.4. Create a Site Map for Your Web Site

2.4. Create a Site Map for Your Web Site

Note: Your users will never be lost again if you create a site map for your web site!

Unless your web site contains only a single web page, you need a way for users to easily navigate between the pages of your site. In ASP.NET 2.0, there are four new controls that make it easy to implement site navigation. These controls are:


A control that represents a site map. A site map is an XML file that describes the logical structure of a web site and the relationship between its pages. The SiteMapDataSource control is not visible on the page when it is loaded, but its role is to act as a supplier of site information (taken from the site map file) to the SiteMapPath control.


A visual control that depicts the path to the current page, "bread crumb" style.


A visual control that displays information in menu form. The Menu control supports data binding to a site map.


A visual control that displays information in a hierarchical structure. The TreeView control supports data binding to a site map.

In the remaining labs in this chapter, you will learn how to use these controls to make it easy for users to navigate your web site. But first, let's take a closer look at the SiteMapDataSource and SiteMapPath controls.

2.4.1. How do I do that?

In this lab, you'll see how you can use the SiteMapPath control together with the Web.sitemap file to display navigation paths on your site pages. First, you'll create a web application that uses a Master page. When a Master page is used as a template for all other pages in a site, it's a good place to put a site map and controls that help users find their way around, because that information will be visible on every page a user visits. You'll create a site map file that describes the logical relationship between the pages of your site, and then you'll add a SiteMapPath control to the Master page so users can see where they are in the hierarchy and move "up" and "down" the path to their current page.

  1. Launch Visual Studio 2005 and create a new ASP.NET 2.0 web application. Name the project C:\ASPNET20\Chap02-Navigation.

  2. In Solution Explorer, add a site map to the application by right-clicking the project name and selecting Add New Item Site Map (see Figure 2-16).

    Figure 2-16. Adding a site map to the project

    Note: A site map is an XML document describing the logical layout of a web site.

  3. Populate the Web.sitemap file by opening it and typing in the code shown in Example 2-2.

    Tip: Remember to verify that your Web.sitemap XML document is well-formed (i.e., the document conforms to the rules of XML). The easiest way to do so is to load the XML document using Internet Explorer. If it is not well-formed, IE will tell you so.
    Example 2-2. A Web.sitemap file
    <?xml version="1.0" encoding="utf-8" ?> <siteMap>    <siteMapNode url="main.aspx"        title="Windows Mobile Home"       description=" Windows Mobile Home " roles="">       <siteMapNode url="whatiswinmobile.aspx"           title="What is Windows Mobile"            description=" What is Windows Mobile " roles="">       <siteMapNode url="windowsmobileoverview.aspx"           title=" Windows Mobile Overview"            description=" Windows Mobile Overview "           roles="" />       <siteMapNode url="comparedevices.aspx"           title="Compare Devices"            description=" Compare Devices " roles="" />       <siteMapNode url="software.aspx"           title="Software Features Tour"           description=" Software Features Tour "           roles="" />       <siteMapNode url="faq.aspx"           title="Frequently Asked Questions"           description=" Frequently Asked Questions "           roles="" />    </siteMapNode>               <siteMapNode url="devices.aspx" title="Devices"         description=" Devices " roles="" />       <siteMapNode url="downloads.aspx" title="Downloads"            description=" Downloads " roles="" />       <siteMapNode url="howto.aspx"           title="Help and How To"           description=" Help and How To " roles="" />       <siteMapNode url="communities.aspx"           title="Communities"            description=" Communities " roles="" />       <siteMapNode url="events.aspx"           title="News and Events"           description=" News and Events" roles="" />       <siteMapNode url="Administrator/Admin.aspx"           title="Administrator"           description=" Administrator" roles="" />    </siteMapNode> </siteMap>

    The Web.sitemap file simply describes the logical layout of the site. It does not matter where the various files are physically stored. Note that the schema for the document is straightforward; elements are nested to represent their logical groupings.

  4. Each <siteMapNode> element has four attributes:


    The text to display in each node of a SiteMapPath, TreeView, or Menu control


    The Tool Tip text to display when the mouse hovers over a node in a SiteMapPath, TreeView, or Menu control


    The role(s) for which this node is to be displayed


    The URL to navigate to when a node in a SiteMapPath, TreeView, or Menu control is clicked

    Tip: Note that the value of each url attribute in the <siteMapNode> element must be unique.

  5. Add a new folder to the project and name it Images (right-click the project name in Solution Explorer and select Add Folder Regular Folder). Copy the images shown in Figure 2-17 into the C:\ASPNET20\chap02-Navigation\Images\ folder. You'll use these on the Master page for this site.

    Figure 2-17. The images in the Images folder

  6. Next, add a new Master page to your project. Populate the Master page with the controls shown in Figure 2-18. The Master page is the ideal place to locate the SiteMapPath control, because all controls placed on this page are visible in any page that inherits from it. As a result, the "bread crumb" style site navigation path displayed by the SiteMapPath control will be visible in all pages.

    Figure 2-18. Populating the Master page

  7. Add a new Web Form to the project and name it Main.aspx. Check the "Select master page" option and select the Master page created in the previous step (see Figure 2-19).

    Figure 2-19. Selecting a Master page for a Web Form

  8. Populate Main.aspx with the content shown in Figure 2-20.

    Figure 2-20. The Main.aspx page

  9. Next, add another Web Form to the site and name it Windowsmobileoverview.aspx. Populate the form with the content shown in Figure 2-21.

    Figure 2-21. The Windowsmobileoverview.aspx page

  10. To test the pages, press F5 and load the Main.aspx and Windowsmobileoverview.aspx pages. You should be able to see the navigational path shown in Figure 2-22.

    Figure 2-22. Testing the SiteMapPath control

2.4.2. How it works

The SiteMapPath control by default reads the content of the Web.sitemap file and displays the site navigation path leading to the currently displayed page.

Tip: It is important to note that the SiteMapPath control displays its path information based on whatever is in the Web.Sitemap file. It does not necessarily mean that it will correspond to the physical organization of the site. If the content of the Web.sitemap file does not reflect your actual site structure, the information displayed by the SiteMapPath control would be incorrect as well.

Note that in ASP.NET 2.0 there is only one possible site map provider: XmlSiteMapProvider. The XmlSiteMapProvider reads site map information from a predefined XML document and, by default, that is the Web.sitemap file.

If you need to change the default name of the site map file, you can do so via the Web.config file. Example 2-3 shows how you can deregister the default XmlSiteMapProvider and register it again with a different site map name: My.sitemap (you can also register a new site map provider, such as one you've written yourself).

Example 2-3. Changing the default site map in Web.config
<configuration>   <system.web>     <siteMap>       <providers>         <remove name="AspNetXmlSiteMapProvider" />         <add name="AspNetXmlSiteMapProvider"           type="System.Web.XmlSiteMapProvider,                 System.Web, Version=1.2.3400.0,                  Culture=neutral,                 PublicKeyToken=b03f5f7f11d50a3a"                 siteMapFile="My.sitemap" />       </providers>     </siteMap>   </system.web> </configuration>

Tip: If you have created your own SiteMapProvider, change the SiteMapProvider property of the SiteMapPath control to the name of your own SiteMapProvider.

Note: Chapter 5 will discuss the provider model that is new in ASP.NET 2.0 in greater detail.

2.4.3. What about...

...customizing the SiteMapPath control?

The default view of the SiteMapPath control displays the navigation path using the string contained in the title attribute of the <siteMapNode> element in the site map file. Each navigation path is separated by the ">" character.

You can customize the look and feel of the SiteMapPath control by adding style information to it. You can customize the SiteMapPath control by switching to Source View of the page that contains the control (in our example it is the Master page).

Example 2-4 shows how you can override the default path-separator character and replace it with an Image control (the image used is saved in the Images folder of the application as arrow.gif ). The code also highlights the current path using a light green background color.

Example 2-4. Customizing the SiteMapPath control
<asp:SiteMapPath        Font-Name="Garamond"       Font-Size="12pt" RunAt="server">    <CurrentNodeStyle Height="24px"        BackColor="LightGreen"        Font-Bold="true" />    <NodeStyle Height="24px" />    <PathSeparatorTemplate>       <ItemTemplate>          <asp:Image              ImageUrl="~/Images/arrow.gif"              RunAt="server" />       </ItemTemplate>    </PathSeparatorTemplate> </asp:SiteMapPath>

Figure 2-23 shows how the SiteMapPath control looks like after the modification.

Figure 2-23. Customizing the look and feel of the SiteMapPath control

You can also programmatically modify the properties of the SiteMapPath control through the following properties:


Sets the order in which the paths are displayed. The default is RootToCurrent, which displays the topmost path down to the current path. To display in the reverse order, set this property to CurrentToRoot.


Sets the separator to display. Default is ">".


Displays the current path as a hyperlink. Default is false.

...accessing site map information programmatically?

If you are not using a SiteMapPath control, you can still programmatically access site map information through the Site Map API (found in the System.Web.SiteMap namespace). Example 2-5 (located in the code-behind of a Master page) shows how to display site navigation information programmatically.

Example 2-5. Displaying site information programmatically
Partial Class MasterPage_master Sub Page_Load(ByVal sender As Object, _               ByVal e As System.EventArgs) _               Handles Me.Load         Dim myCurrentNode As SiteMapNode         '---Gets the current node         myCurrentNode = SiteMap.CurrentNode         '---displays the navigational path---         Dim path As String = myCurrentNode.Title         While myCurrentNode.ParentNode IsNot Nothing             myCurrentNode = myCurrentNode.ParentNode             path = " > " & path             path = myCurrentNode.Title & path         End While         Response.Write(path)     End Sub End Class

Besides the CurrentNode property, additional properties are available for accessing site information, including:

  • SiteMap.CurrentNode.ParentNode

  • SiteMap.CurrentNode.PreviousSibling

  • SiteMap.CurrentNode.RootNode

  • SiteMap.CurrentNode.NextSibling

...hiding nodes from users who lack proper authorization?

If you examine the Web.sitemap file carefully, you will notice the role attribute. In the examples thus far, the role attribute is set to an empty string. By default, the SiteMapDataSource control makes all the nodes information in Web.sitemap visible. However, there are times when you would like to restrict the display of certain nodes to a particular group of users. For example, normal users should not be able to see the path to the admin web page, and so the SiteMapDataSource control should allow nodes to be hidden (or trimmed). This feature is known as security trimming. The XmlSiteMapProvider disables security trimming by default; to enable security trimming, you need to perform the following steps:

  1. Set the securityTrimmingEnabled attribute to true. To do so, you can de- and re-register the AspNetXmlSiteMapProvider in Web.config:

    <system.web>    <siteMap>       <providers>          <remove name="AspNetXmlSiteMapProvider" />          <add name="AspNetXmlSiteMapProvider"               type="System.Web.XmlSiteMapProvider,               System.Web, Version=1.2.3400.0,                Culture=neutral,               PublicKeyToken=b03f5f7f11d50a3a"               securityTrimmingEnabled="true"               siteMapFile="Web.sitemap" />       </providers> </siteMap>

  2. Next, specify the node that you want to enable for security trimming. Using the Web.sitemap file you have created in this lab, set the roles attribute for the last node to admin. In this case, the SiteMapPath control will display the Administrator node (pointing to the page Admin.aspx located in the /Administrator directory) only if the user belongs to the admin role:

             ...          <siteMapNode url="Administrator/Admin.aspx"              title="Administrator"              description=" Administrator" roles="admin" />     </siteMapNode>

  3. In the final step, you need to configure the /Administrator directory to deny access to all users and then fine-tune the access to allow users belonging to the admin role to access the Admin.aspx page. You do so by adding a Web.config file to the /Administrator directory that contains the code shown in Example 2-6.

Example 2-6. Web.config for the Administrator directory
<configuration xmlns=    "">    <system.web>       <compilation debug="false"/>       <!-- deny all users -->       <authorization>          <deny users="*" />       </authorization>    </system.web>    <!-- allow only Admin role users to see Admin.aspx -->    <location path="Admin.aspx">       <system.web>          <authorization>             <allow roles="Admin" />          </authorization>       </system.web>    </location> </configuration>

Once you have made these changes, only users in the admin role will be able to see the Administrator node.

Note: See Chapter 5 for more details on roles and membership.

2.4.4. Where can I learn more?

For more information on ASP.NET authorization, check out the following MSDN Help topic:

To learn more about Site Map Providers, check out the MSDN Help topic "ASP.NET Site Navigation Providers."

If the included AspNetXMLSiteMapProvider does not suit your purpose and you want to store your site map information in a data store other than XML (such as an Oracle database), check out the MSDN Help topic "Implementing a Site Map Provider."

ASP. NET 2.0(c) A Developer's Notebook 2005
ASP. NET 2.0(c) A Developer's Notebook 2005
Year: 2005
Pages: 104 © 2008-2017.
If you may any questions please contact us: