如何：添加简单的站点导航

项目
10/22/2014

更新：2007 年 11 月

可以使用 SiteMapPath、TreeView 或 Menu 控件为用户提供在网站中导航的一致的方法。

SiteMapPath 控件显示导航路径（也称为 Breadcrumb 或 Eyebrow），该路径显示当前页的位置并显示作为返回主页的路径的链接。

说明：
如果一个 .aspx 页包含一个 SiteMapPath 控件，为呈现此控件，必须在 Web.sitemap 文件中列出该 .aspx 页。

如果用户在网页上浏览“培训”页，则 SiteMapPath 控件会显示与下面类似的内容：

主页 > 服务 > 培训

TreeView 控件显示一个树结构，用户可通过此树结构遍历指向站点中不同页的链接。单击包含子节点的节点可将其展开或折叠。第一次呈现时，TreeView 控件完全展开。在网页上，TreeView 控件显示与下面类似的内容：

- 主页

- 服务

+ 培训

Menu 控件显示一个可扩展菜单，用户可通过此菜单遍历指向站点中不同页的链接。当光标悬停于菜单项上时，将展开该包含子节点的节点。有关在 Menu 控件中显示站点地图的代码示例，请参见如何：在非分层 Web 服务器控件中显示站点地图数据。

若要使用这些站点导航控件，您必须在 Web.sitemap 文件中描述您的网站结构。

创建 Web.sitemap 文件

在您的网站的根目录中创建一个名为 Web.sitemap 的文件。

打开此 Web.sitemap 文件，并添加下面的代码。

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

说明：
如果列出了不存在的 URL 或列出了重复的 URL，则您的 Web 应用程序将失败。url 属性可以以快捷方式“~/”开头，该快捷方式表示应用程序根目录。有关更多信息，请参见 ASP.NET 网站路径。

在本主题稍后部分将创建 Training.aspx 页。

保存文件，然后将其关闭。

向网页添加站点导航

在您的网站的根目录中创建一个名为 Training.aspx 的文件。

打开 Training.aspx 并添加下面的代码。

<%@ 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>

<%@ 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>

保存并关闭该文件，然后您可以在浏览器中查看您的文件以了解控件如何显示您的网站的导航结构。

安全性

可以向特定安全角色的成员隐藏导航结构中的链接。有关更多信息，请参见 ASP.NET 站点地图安全性调整。

请参见

通过

如何：添加简单的站点导航

创建 Web.sitemap 文件

向网页添加站点导航

安全性

请参见

任务

概念

参考

其他资源

其他资源