§ ITPOW >> 文档 >> ASP.NET >> 用户界面元素

用 SiteMap 实现三种导航方式

作者：vkvi 来源：ITPOW（原创）日期：2007-8-20

ASP.NET 中可以非常轻松地实现：菜单、树形菜单、路径导航这三种导航方式。

web.sitemap

要实现这三种导航方式，首先都需要一个 web.sitemap 文件，该文件名称必须是：web.sitemap，同时该文件必须位于网站根目录或虚拟目录根目录之下，位于普通目录之下无效。

位于网站根目录下的 web.sitemap 对整个站点有效（网站下的虚拟目录除外）；
位于虚拟目录下的 web.sitemap 对整个目录有效（虚拟目录下的虚拟目录除外）。

web.sitemap 是一个 XML 格式的文件，根结点名称是：siteMap，子结点名称是：siteMapNode，siteMapNode 可以嵌套。

siteMapNode 有三个常用属性：

url 表示超链接地址，请参见 siteMapNode 中 url 的设置；
title 表示超链接文字；
description 表示描述，指鼠标移到超链接文字上显示的提示。

示例

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="/" title="ITPOW" description="ITPOW">
    <siteMapNode url="/products/" title="产品" description="ITPOW自主开发的产品" />
    <siteMapNode url="/docs/" title="文档" description="ITPOW原创文档">
      <siteMapNode url="/docs/asp/" title="ASP"></siteMapNode>
      <siteMapNode url="/docs/asp.net/" title="ASP.NET" />
      <siteMapNode url="/docs/javascript/" title="JavaScript"></siteMapNode>
      <siteMapNode url="/docs/xhtmlcss/" title="XHTML+CSS"></siteMapNode>
      <siteMapNode url="/docs/sqlserver/" title="SQL Server"></siteMapNode>
      <siteMapNode url="/docs/server/" title="服务器"></siteMapNode>
      <siteMapNode url="/docs/archives/" title="专题档案"></siteMapNode>
    </siteMapNode>
    <siteMapNode url="/specials/" title="专题" description="ITPOW精心制作的专题" />
    <siteMapNode url="/references/" title="参考" description="网页开发者必备电子参考书" />
    <siteMapNode url="/tools/" title="工具" description="网页开发者常用工具" />
</siteMapNode>
</siteMap>

SiteMap 控件

要实现这三种导航方式，只需要几个控件。

<asp:SiteMapDataSource ID="smds" runat="server" />

SiteMapDataSource 提供数据源支持，注意不需要指定 web.sitemap。

<asp:Menu ID="smMenu" runat="server" DataSourceID="smds"></asp:Menu>

注意，需要指定 DataSourceID（不是 DataSource），为 SiteMapDataSource 的 ID。

<asp:TreeView ID="smTreeView" runat="server" DataSourceID="smds"></asp:TreeView>

注意，需要指定 DataSourceID（不是 DataSource），为 SiteMapDataSource 的 ID。

<asp:SiteMapPath ID="smSiteMapPath" runat="server" ></asp:SiteMapPath>

注意，没有使用 DataSourceID。

Menu 和 TreeView 都指定了 DataSourceID，SiteMapPath 没有，原因是：

Menu 和 TreeView 通过 SiteMapDataSource 与 SiteMapProvider 通信，SiteMapProvider 再与 XmlSiteMapProvider 通信，XmlSiteMapProvider 再与 web.sitemap 通信。
而 SiteMapPath 是直接与 SiteMapProvider 通信，所以不需要 SiteMapDataSource。

那为什么 Menu 和 TreeView 不能直接与 SiteMapProvider 通信呢？这是因为这两个控件除了可以显示网站导航外，还具有其它功能，如果直接与 SiteMapProvider 通信就限制了这两个控件的其它功能。

示例

<%@ Page Language="C#" Debug="true" %>
<!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>用 SiteMap 实现三种导航方式</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:SiteMapDataSource ID="smds" runat="server" />
    <div>
      <asp:Menu ID="smMenu" runat="server" DataSourceID="smds"></asp:Menu>
    </div>
    <hr />
    <div>
      <asp:TreeView ID="smTreeView" runat="server" DataSourceID="smds"></asp:TreeView>
    </div>
    <hr />
    <div>
      <asp:SiteMapPath ID="smSiteMapPath" runat="server" ></asp:SiteMapPath>
    </div>
    </form>
</body>
</html>

演示截图

SiteMap 导航

扩展

以上实现了导航的功能，通过改变属性和样式表设置，可以实现更多的功能，可以显示和你网站风格匹配的导航，由于设置简单，就不介绍了。