几乎每个网站里为了方便用户在网站中进行页面导航都少不了使用页面导航控件有了页面导航的功能用户可以很方便地在一个复杂的网站中进行页面之间的跳转在以往的WEB编程中要写一个好的页面导航功能并不是那么容易的也要使用一些技巧而在 中为了方便进行页面导航新增了一个叫做页面导航控件sitemapdatasource其中还可以绑定到不同的其他页面控件比如treeviewmenu等十分灵活使到能很方便地实现页面导航的不同形式而且还提供了运行时的编程接口可以以编程的形式动态实现页面导航控件本文将简单以几个例子来介绍一下在 中如何实现页面导航
页面导航的结构和sitemapdatasource控件
在 中要实现页面导航应该先以xml的形式提供出整个网站的页面结构层次我们可以编写一个叫websitemap的XML文本文件在该文件中定义出整个要导航页面的结构层次举例如下
<?xml version= encoding=utf ?>
<siteMap>
<siteMapNode title=Default description=Home url=Defaultaspx >
<siteMapNode title=Members description=Members url=Membersaspx>
<siteMapNode title=My Account description=My Account url=MyAccountaspx />
<siteMapNode title=Products description=Products url=Productsaspx />
</siteMapNode>
<siteMapNode title=Administration description=Administration url=~/Admin/Defaultaspx>
<siteMapNode title=Customer description=Customer Admin url=~/Admin/Customer/defaultaspx />
<siteMapNode title=Products Admin description=Products Admin url=~/Admin/ProductsAdminaspx />
</siteMapNode>
</siteMapNode>
</siteMap>
我们可以看到其中websitemap文件必须包含根结点sitemap而且设置一个父sitemapnode结点该结点表明是默认的站点首页在该父sitemapnode结点下可以有若干个子sitemapnode结点分别按层次结构代表了网站的各子栏目(留意一下上例中各个子结点之间的包含关系)而每一个sitemapnode结点中有如下若干个属性
)URL属性该属性指出要导航的栏目的地址链接在websitemap中定义中必须是每个栏目的相对地址
)Title属性该属性指出每个子栏目的名称显示在页面中
)Description属性该属性指定时则用户在鼠标移动到该栏目时出现有关该栏目的相关提示类似于tooltips属性
在设计好sitemap属性后接下来就可以一步步构建页面导航功能了主要有两个步骤
) 向页面中添加sitemapdatasource控件该控件会自动感应绑定websitemap中的内容
) 将sitemapdatasource控件绑定到如sitemappathtreeviewmenu等控件中也就是说将它们的数据源设置为该sitemapdatasource控件
知道了方法后我们下面就分别以treeviewmenusitemappath三种控件为例子介绍一下如何和sitemapdatasource控件进行配合使用
先来介绍使用treeview控件和sitemapdatasource 控件配合使用的方法Treeview树形列表控件十分适合于用来做页面导航为了能具体说明我们充分利用中的masterpage控件先搭建出一个网站的基本框架架构
在visual web developer beta 中新建一个网站之后添加上文的websitemap文件再添加一个名叫Navigation的master类型的页面代码如下
<%@ Master Language=C# %>
<html xmlns=//xhtml >
<head id=Head runat=server>
<title>Master Page</title>
</head>
<body>
<form id=form runat=server>
<div>
<table border=>
<tr>
<td >
<asp:TreeView ID=TreeView Runat=server DataSourceID=SiteMapDataSource
ExpandDepth= ShowExpandCollapse=False NodeIndent=>
<LevelStyles>
<asp:TreeNodeStyle FontBold=True FontUnderline=False/>
<asp:TreeNodeStyle FontItalic=True FontUnderline=False />
<asp:TreeNodeStyle FontSize=XSmall ImageUrl=bulletgif FontUnderline=False />
</LevelStyles>
<NodeStyle ChildNodesPadding= />
</asp:TreeView>
</td>
<td >
<asp:contentplaceholder id=ContentPlaceHolderrunat=server>
</asp:contentplaceholder>
</td>
</tr>
</table>
<asp:SiteMapDataSource ID=SiteMapDataSource Runat=server/>
</div>
</form>
</body>
</html>
在上面的代码中其中的TREEVIEW控件中的DATASORUCE属性中就指定了sitemapdatasource控件并且在treeview控件中也定义了不同结点的样式
在完成了masterpage页面后就等于已经把网站的模版页建立起来了接下来就可以新建其他子页面以继承masterpage页面并且新建各自页面的内容了比如新建一个defaultaspx页面代码如下
<%@ Page Language=C# MasterPageFile=Navigationmaster Title=Default Page%>
<asp:Content ContentPlaceHolderID=ContentPlaceHolder
ID=Content Runat=Server>
This is the default page
</asp:Content>
可以看到当建立了模版页后就可以新建其他的子页面了只需要在其中的contentplaceholderid中写入不同的内容就可以了运行起来后效果如图
educitycn/img_///jpg > 接下来我们来介绍如何将menu菜单控件和sitemapdatasource 控件配合使用其中我们在上面的例子的基础上在<table border=>下面增加如下代码就可以了
<tr height=px>
<td colspan= align=left>
<asp:Menu ID=Menu Runat=Server
DataSourceID=SiteMapDataSource>
</asp:Menu>
</td>
</tr>
其中我们增加了一个menu控件其中将其datasourceid属性设定为sitemapdatasource就可以了运行如下图当然我们可以改变menu控件的显示位置如可以将其改成垂直样式显示
educitycn/img_///jpg > 而对于我们经常见到的显示出页面当前路径的导航条功能在 中也可以轻易实现我们可以使用其中的sitemappath控件我们紧接着在上文代码中的menu控件下增加如下代码
<tr height=px>
<td colspan= align=left>
Currently Selected Page is:
<asp:SiteMapPath Runat=Server ID=SiteMapPath></asp:SiteMapPath>
</td>
</tr>
要注意的是只要增加sitemappath控件就可以了因为它会自动和已经增加的sitemapdatasource控件进行绑定的我们为了说明问题另外增加一个页面memberaspx代码如下
<%@ Page Language=C# MasterPageFile=Navigationmaster Title=Members Page%>
<asp:Content ContentPlaceHolderID=ContentPlaceHolder ID=Content Runat=Server>
This is the members page
</asp:Content>
运行结果如下
educitycn/img_///jpg > 最后我们看一下如何通过编程的方式来获取页面导航中的相关数据其中必须引用到的是sitemap类该类提供了很多相关的方法和属性最重要的是currentnode属性它可以指出当前用户正在浏览的是哪一个栏目页面这用来跟蹤用户在网站中的行动轨迹并进行站点数据统计有时是很有用的举例如下
<%@ Page Language=C# MasterPageFile=Navigationmaster Title=Members Page%>
<script runat=Server>
void Page_Load(object sender EventArgs e)
{
ResponseWrite(The currently selected root node is: + SiteMapCurrentNodeDescription + <br>);
ResponseWrite(The Parent for the currently selected node is : +
SiteMa
