JavaScript Editor jscript editor     Web designer 
↑


Main Page

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.

NoteNote

If an .aspx page contains a SiteMapPath control, the .aspx page must be listed in the Web.sitemap file for the control to render.

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

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. For a code example that displays a site map in a Menu control, see How to: Display Site-Map Data in Non-hierarchical Web Server Controls.

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.

    В CopyCode imageCopy Code
    <?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode title="Home" >
    <siteMapNode title="Services" >
      <siteMapNode title="Training" url="~/Training.aspx"/>
    </siteMapNode>
  </siteMapNode>
</siteMap>
    NoteNote

    Your Web application will fail if you list a URL that does not exist, or if you list a duplicate URL. The url attribute can start with the "~/" shortcut which indicates the application root. For more information, see ASP.NET Web Site Paths.

    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В CopyCode imageCopy Code
    <%@ 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 xmlns="http://www.w3.org/1999/xhtml" >
<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#В CopyCode imageCopy Code
    <%@ 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 xmlns="http://www.w3.org/1999/xhtml" >
<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.

Security

You can hide the links in your navigation structure from members of specific security roles. For more information, see ASP.NET Site-Map Security Trimming.

See Also



JavaScript Editor jscript editor     Web designer 
→