用 SiteMap 实现三种导航方式

作者:vkvi 来源:千一网络(原创) 日期: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="千一网络"  description="千一网络">
    <siteMapNode url="/products/" title="产品"  description="千一自主开发的产品" />
    <siteMapNode url="/docs/" title="文档"  description="千一原创文档">
      <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="千一精心制作的专题" />
    <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 导航

扩展

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

相关阅读

你前面那位网友看了:Photoshop 将照片变清晰的另类方法

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
  • 1 楼:评论
    怎么样使sitemap中的上一页变成超链接形式
  • 2 楼:评论
赞助商们