Microsoft.NET

……………………………………………….Expertise in .NET Technologies

SiteMapDataSource Control Overview

Posted by Ravi Varma Thumati on April 29, 2009

The SiteMapDataSource Web server control is used with ASP.NET Site Navigation. The SiteMapDataSource retrieves navigation data from a site map provider and passes the data to controls that can display that data, such as the TreeView and Menu controls.

Background

The SiteMapDataSource control obtains navigation data from a site map. This data includes information about the pages in your Web site, such as the URL, title, description, and location in the navigation hierarchy. Storing your navigation data in one place makes it easier to add and remove items in the navigational menus of your Web site.

In earlier versions of ASP and ASP.NET, when you added a page to your Web site and then added a link to that new page from every other page in the Web site, you had to add the links manually, include a common file, or develop custom navigation functionality. ASP.NET version 2.0 includes navigation controls that make it easier for you to create, customize, and maintain navigational menus.

Examples

 

How to: Display Site-Map Data in Non-Hierarchical Web Server Controls

Site-map data is inherently hierarchical, which means that each node can contain zero or more child nodes. The TreeView and Menu controls are designed to work with hierarchical data. However, you can bind site-map data to non-hierarchical controls, such as the DropDownList, CheckBoxList, and other controls that display data in a linear, or flat, format.

The following code example uses a DropDownList control to display the site-map data from a Web.sitemap file.

When a client selects an item in the drop-down list, the browser is redirected to the selected page. This is accomplished by calling the Redirect method in the OnSelectedIndexChanged event handler.

If this code example is placed in a master page, then the StartFromCurrentNode property in the SiteMapDataSource control will ensure that the drop-down list always displays a site map that begins at the currently executing page

Visual Basic

 <%@ Page Language="VB"  AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <script runat="server">
  Public Sub _OnSelectedIndexChanged(ByVal Sender As Object, ByVal e As                EventArgs)
    Response.Redirect(DropDownList1.SelectedItem.Value)
  End Sub
</script>
 <html  >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="Server"
          StartFromCurrentNode="true"
          ShowStartingNode="false" />
      <asp:DropDownList ID="DropDownList1" Runat="Server" 
          DataSourceID="SiteMapDataSource1"
          AutoPostBack="True" 
          DataTextField="Title" 
          DataValueField="Url"
          OnSelectedIndexChanged="_OnSelectedIndexChanged" >
      </asp:DropDownList>
    </div>
    </form>
</body>
</html>
 C#
 <%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <script runat="server">
  void _OnSelectedIndexChanged(Object sender, EventArgs e)
  { 
    Response.Redirect(DropDownList1.SelectedItem.Value);
  }
</script>
 <html  >
<head runat="server">
    <title>DropDownList Bound to SiteMapDataSource</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="Server"
          StartFromCurrentNode="true"
          ShowStartingNode="false" />
      <asp:DropDownList ID="DropDownList1" Runat="Server" 
          DataSourceID="SiteMapDataSource1"
          AutoPostBack="True" 
          DataTextField="Title" 
          DataValueField="Url"
          OnSelectedIndexChanged="_OnSelectedIndexChanged" >
      </asp:DropDownList>
    </div>
    </form>
</body>
</html>
 If the page does not contain any child nodes, then the drop-down list will be empty. If the client selects an item for which there is no URL property set in the Web.sitemap file, then the client is redirected to the home page of the application. 

Compiling the Code

This example requires a valid Web.sitemap file that references the ASP.NET Web page that contains the code example. If you put this example code in a file that is not listed in one of the nodes in the Web.sitemap file, remove the following property from the control:

StartFromCurrentNode="true"

 

How to: Add Simple Site Navigation

You can use the SiteMapPath, TreeView, or Menu controls to provide a consistent way for users to navigate your Web site.

The SiteMapPath control displays a navigation path, which is also known as a breadcrumb, or eyebrow, that shows the current page location and displays links as a path back to the home page.

On a Web page, the SiteMapPath control displays something like the following if the user is browsing the Training page:

Home > Services > Training

The TreeView control displays a tree structure that users can traverse for links to different pages in your site. A node that contains child nodes can be expanded or collapsed by clicking it. When it is first rendered, the TreeView control is fully expanded. On a Web page, the TreeView control displays something like the following:

– Home

   – Services

       Training

       Consulting

The Menu control displays an expandable menu that users can traverse for links to different pages in your site. A node that contains child nodes is expanded when the cursor hovers over the menu item.

To use these site-navigation controls, you must describe the structure of your Web site in a Web.sitemap file.

To create a Web.sitemap file

1.      Create a file in the root directory of your Web site called Web.sitemap.

2.      Open the Web.sitemap file and add the following code.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="Home" >
    <siteMapNode title="Services" >
      <siteMapNode title="Training" url="~/Training.aspx"/>
      <siteMapNode title="Consulting" url=""/>
    </siteMapNode>
  </siteMapNode>
</siteMap>

Later in this topic, you will create the Training.aspx page.

3.      Save your file and then close it.

To add site navigation to a Web page

1.      Create a file in the root directory of your Web site called Training.aspx.

2.      Open Training.aspx and add the following code.

Visual Basic

<%@ Page Language="VB" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <script runat="server">
</script>
 <html  >
<head id="Head1" runat="server">
  <title>Simple Navigation Controls</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
   <h2>Using SiteMapPath</h2>
  <asp:SiteMapPath ID="SiteMapPath1" Runat="server">
  </asp:SiteMapPath>
   <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
   <h2>Using TreeView</h2>
  <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1">
  </asp:TreeView>
   <h2>Using Menu</h2>
  <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1">
  </asp:Menu>
   <h2>Using a Horizontal Menu</h2>
  <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
    Orientation="Horizontal" 
    StaticDisplayLevels="2" >
  </asp:Menu>
   </div>
  </form>
</body>
</html>
 C#
<%@ Page Language="C#" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <script runat="server">
</script>
 <html  >
<head runat="server">
  <title>Simple Navigation Controls</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
   <h2>Using SiteMapPath</h2>
  <asp:SiteMapPath ID="SiteMapPath1" Runat="server">
  </asp:SiteMapPath>
   <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
   <h2>Using TreeView</h2>
  <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1">
  </asp:TreeView>
   <h2>Using Menu</h2>
  <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1">
  </asp:Menu>
   <h2>Using a Horizontal Menu</h2>
  <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
    Orientation="Horizontal" 
    StaticDisplayLevels="2" >
  </asp:Menu>
   </div>
  </form>
</body>
</html>
 

3.      Save and close the file, and then you can view your file in a browser to see how the controls display the navigation structure of your Web site.

———————————————————————————

 

How to: Filter the Nodes Retrieved by SiteMapDataSource Web Server Controls

The SiteMapDataSource control retrieves site-map data from a site-map provider, such as the XmlSiteMapProvider, which is the default site-map provider for ASP.NET. You can configure the SiteMapDataSource control to return the entire collection of site-map nodes or a subset. This is useful when displaying more than one navigation structure on a page, each displaying a separate section of the site map. It is also useful when distributing site-navigation elements across separate master pages in your site, where each master page shows a different portion of the overall site map.

To use these site navigation controls, you must describe the structure of the site in a Web.sitemap file and create the .aspx files listed in your site map.

To create a Web.sitemap file

1.      Create a new file in the root directory of your Web site, and name the file Web.sitemap. Place the following required code in your file:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
</siteMap>

2.      Create a root siteMapNode element as a child of the siteMap element, defining the following attributes:

o        title   Assign a title to the site-map node, which will be displayed as the link text for the Web page.

o        url   Assign the URL for a Web page. You can use a fully qualified URL or a relative URL such as ~/Default.aspx. The tilde character (~) is used to indicate the root of the application. Later in this procedure, you will create Web pages for each URL listed in the site map because your application will fail if you list a URL that does not exist (or if you duplicate URLs). You can leave this attribute empty, but for the purposes of this example, set it to an .aspx file that you can edit.

3.      Create a siteMapNode element as a child of the root siteMapNode element. Set the same attributes as in the previous step.

4.      Create a siteMapNode element as a child of the previous siteMapNode element. Set the same attributes as in the previous step. For the purposes of this example, the site map must have three levels of siteMapNode elements.

The Web.sitemap file will be similar to the following example:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="Home" url="~/Default.aspx" roles="*">
    <siteMapNode title="Services" url="~/Services.aspx " >
      <siteMapNode title="Training" url="~/Training.aspx" />
    </siteMapNode>
    <siteMapNode title="Products" url="" />
  </siteMapNode>
</siteMap>

5.      Save the Web.sitemap file and close it.

To add site navigation to a Web page

1.      Create an .aspx page for each of the files you listed in the url attributes of your Web.sitemap file. In each of the .aspx files, replace the code with the following to display the site map in various controls that display site-map data. If an .aspx file is not listed in the site map, it cannot display a site-navigation control.

Visual Basic

<%@ Page Language="VB" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
 </script>
 <html  >
<head id="Head1" runat="server">
  <title>Simple Navigation Controls</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
   <h2>Using SiteMapPath</h2>
  <asp:SiteMapPath ID="SiteMapPath1" Runat="server">
  </asp:SiteMapPath>
   <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
   <h2>Using TreeView</h2>
  <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1">
  </asp:TreeView>
   <h2>Using Menu</h2>
  <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1">
  </asp:Menu>
   <h2>Using a Horizontal Menu</h2>
  <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
    Orientation="Horizontal" 
    StaticDisplayLevels="2" >
  </asp:Menu>
   </div>
  </form>
</body>
</html>

C#

<%@ Page Language="C#" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <script runat="server">
</script>
 <html  >
<head runat="server">
  <title>Simple Navigation Controls</title>
</head>
<body>
  <form id="form1" runat="server">
  <div>
   <h2>Using SiteMapPath</h2>
  <asp:SiteMapPath ID="SiteMapPath1" Runat="server">
  </asp:SiteMapPath>
   <asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />
   <h2>Using TreeView</h2>
  <asp:TreeView ID="TreeView1" Runat="Server" DataSourceID="SiteMapDataSource1">
  </asp:TreeView>
  <h2>Using Menu</h2>
  <asp:Menu ID="Menu2" Runat="server" DataSourceID="SiteMapDataSource1">
  </asp:Menu>
   <h2>Using a Horizontal Menu</h2>
  <asp:Menu ID="Menu1" Runat="server" DataSourceID="SiteMapDataSource1"
    Orientation="Horizontal" 
    StaticDisplayLevels="2" >
  </asp:Menu>
   </div>
  </form>
</body>
</html>
 

2.      Save your files.

To change the starting node returned to the navigation control

1.      In the .aspx page that is three levels deep in your site map, locate the SiteMapDataSource control, which might look like following line of code:

<asp: SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />

2.      Change the above line of code to look like the following:

<asp: SiteMapDataSource 
  ID="SiteMapDataSource1" 
  Runat="server"
  StartingNodeUrl="~/Services.aspx" />

3.      Save your file and view it in a browser.

The navigation structure in the Training.aspx page is different from the other two pages. The structures begin at the second node. The SiteMapPath control is unaffected because it obtains site-map data directly from the provider and does not need a SiteMapDataSource control.

The following other options exist for changing the starting node:

o        Setting the StartFromCurrentNode property to true retrieves the site-map structure, beginning with the node for the current page.

Setting the StartingNodeOffset property to 2 retrieves the site-map structure, beginning two nodes deep from the root node and following the path to the current page.

To hide the starting node

1.      In the .aspx page that is three levels deep in your site map, locate the SiteMapDataSource control, which might look like following line of code:

<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server" />

2.      Change the above line of code to look like the following:

<asp:SiteMapDataSource ID="SiteMapDataSource1" Runat="server"
  ShowStartingNode="~/Services.aspx" />

3.      Save your file and view it in a browser.

The navigation structure in this page is different from the other two pages. The result is different from setting the StartingNodeOffset property to 1 or setting the StartingNodeUrl property to ~/Services.aspx because the site-map node collection is not restricted to one branch of the entire site map, which allows you to see the Products node as well.

Class Reference

The following table lists the key classes that relate to the SiteMapDataSource control.

Member

Description

SiteMapDataSource

The main class for the control.

SiteMapPath

Displays a set of text or image hyperlinks and can bind to the SiteMapDataSource control.

TreeView

Displays hierarchical data in a tree structure and can bind to the SiteMapDataSource control.

Menu

Displays a menu and can bind to the SiteMapDataSource control.

 

Advertisements

One Response to “SiteMapDataSource Control Overview”

  1. Dave Moss said

    I think there is a typo in your last example, “To hide the starting node”

    I believe ShowStartingNode can only be set to true/false . I noticed the same possible error on Microsoft MSDN.

    http://msdn.microsoft.com/en-us/library/ms178423.aspx

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: