ASP.NET的网站地图Web服务器控件让你能够轻松地设置和定义一个Web应用程序的逻辑结构。它就是设计用来使用ASP.NET 2.0的Menu、SiteMapPath和TreeView等导航控件的。本文将叙述如何利用SiteMapPath控件实现用户友好的Web网站导航。
面包屑
ASP.NET 2.0的SiteMapPath控件会显示一个导航路径,以便用户能够知道他们当时在Web网站上所处的位置。事实上它提供了一个“你在这里”的功能。这种类型的导航元素常常被叫做面包屑(breadcrumb)。基本的表现是向用户显示当前页面所在的位置,并提供回到主页的链接。
下面是SiteMapPath控件的基本句法:
<asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath>
在默认状态下,SiteMapPath控件会显示根节点以及其他代表当前Web页面的节点。SiteMapPath控件还会显示网站地图的根节点与当前节点之间页面,形式是横向排列这些链接,每个链接之间用大于号(>)隔开。下面的例子显示了一个简单的网站地图,用户正位于逻辑结构的第三个页面处。
Home Page > Page One > Page Two
你可以通过很多可用的属性来控制SiteMapPath控件的表示以及单个的链接。下面的列表提供了这其中一部分属性:
- PathSeparator:让你能够用其他的字符作为链接的分隔符,而不用默认的大于号(>)。
- PathDirection:让你能够按照从左到右的顺序显示路径;也就是说,从当前结点开始,从该点向右移动(RootToCurrent),或者首先显示当前节点,向右显示到达根节点的路径(CurrentToRoot)。
- RenderCurrentNodeAsLink:用来表示当前节点是否被作为一个链接显示出来。这是一个布尔值。
- PathLevelsDisplayed:让你能够指定需要显示的结构的层数。
- ShowToolTips:用来表示当鼠标移动到一个链接上时,是否显示工具提示信息。工具提示信息在网站地图文件的节点描述属性里定义。
SiteMapPath控件的一个比较有意思的地方是,它不像Menu和TreeView控件那样需要使用SiteMapDataSource控件。 SiteMapPath控件在默认状态下与网站地图文件绑定在一起(也就是说它被放在应用程序的根里)。
使用SiteMapPath
由于SiteMapPath控件提供了一个所处网站位置的直观视觉表示,所以你可以很容易就把这个控件放在主页面上从而应用到整个网站上。下面的主页面就用到了这个控件:
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TechRepublic Test</title>
</head>
<body>
<form id="frmMaster" runat="server">
<div>
<asp:SiteMapPath ID="smpMaster" runat="server" PathSeparator=">>" ParentLevelsDisplayed="1" PathDirection="CurrentToRoot" RenderCurrentNodeAsLink="false" RootNodeStyle-ForeColor="orange" ShowToolTips="true">
</asp:SiteMapPath>
<asp:contentplaceholder id="cpMaster" runat="server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>
这个控件实例会取代默认的分隔符,并按从左到右的顺序显示链接。此外,当前的节点或者页面不会显示为一个链接;根节点用橙色的文本来表示,而每个链点都会显示工具提示。应用程序里的任何页面都会提供这个面包屑——只要这个页面被包含在应用程序的网站地图文件的节点里。
如果页面没有作为一个节点在网站地图文件里定义,那么SiteMapPath控件就不会显示出来。这是合理的,因为SiteMapPath控件需要通过网站地图文件获取显示在面包屑里的导航顺序和链接。
自定义单个节点
SiteMapPath控件可以让你通过可选的自定义元素更加精细地控制各个节点。下面都是这些可用元素的基本介绍:
- CurrentNodeStyle:用来控制当前显示的节点的表示。
- CurrentNodeTemplate:让你定义显示什么以及当前节点的样式。
- NodeStyle:用来控制所有节点的表示。
- NodeTemplate:让你定义显示什么以及所有节点的样式。
- PathSeparatorStyle:用来控制分隔符的表示。
- PathSeparatorTemplate:让你定义显示什么以及分隔符的样式。
- RootNodeStyle:用来控制根节点的表示。
- RootNodeTemplate:让你定义显示什么以及根节点的样式。
通过举例来说明这些元素自然会更好。下面的主页面用到了一个SiteMapPath控件的实例,它带有一些用于根节点和当前节点的自定义显示选项。
CSS类用来定义所有节点的样式,其中针对根节点、当前节点和其余的节点都有具体的类相对应。CSS类通过各自的样式元素被分配给元素。当前节点被方括号包围起来——这在其模板元素里已经定义好了。根节点被圆括号包围起来,这在它的模板里定义好了。要注意的是,Eval语句会取回和显示来自数据源(即网站地图文件)的数据项。
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>TechRepublic.com Test</title>
<style type="text/css"> .rnode {font-family: times; font-size: 12pt; color: red;} .cnode {font-family: courier; font-size: 14pt; color: green; font-weight: bold;} .node {font-family: times; font-size: 12pt; color: black;} </style>
</head>
<body>
<form id="frmMaster" runat="server">
<div>
<asp:SiteMapPath ID="SiteMapPath2" runat="server" PathSeparator=">>" PathDirection="rootToCurrent"
RenderCurrentNodeAsLink="false" ShowToolTips="true" RootNodeStyle-ForeColor="orange">
<NodeStyle CssClass="node" />
<CurrentNodeStyle CssClass="cnode" />
<CurrentNodeTemplate>
[[<%# Eval("title") %>]]
</CurrentNodeTemplate>
<RootNodeStyle CssClass="rnode" />
<RootNodeTemplate>
((<%# Eval("title") %>))
</RootNodeTemplate>
</asp:SiteMapPath>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder></div>
</form>
</body>
</html>
保持清醒
使用大型Web应用程序的一个棘手问题是记住你处在网站的什么位置。使用正确的导航控件会解决这一问题,方法是提供用户所处位置的视觉线索,以及到达Web网站其他区域的简单方式。ASP.NET的SiteMapPath控件让你能够轻松地提供一个面包屑样式的导航元素,这样用户就知道他们所处的位置以及如何到达那里了。
Web网站导航对于每个Web应用程序来说都是一个重要的设计问题。我们都碰到过导航信息不足的Web应用程序。将你的Web网站成功的导航经验和失败的痛苦经历与我们的开发社区一起分享吧。