几乎每个网站里,为了方便用户在网站中进行页面导航,都少不了使用页面导航控件。有了页面导航的功能,用户可以很方便地在一个复杂的网站中进行页面之间的跳转。在以往的WEB编程中,要写一个好的页面导航功能,并不是那么容易的,也要使用一些技巧。而在asp.net2.0中,为了方便进行页面导航,新增了一个叫做页面导航控件sitemapdatasource,其中还可以绑定到不同的其他页面控件,比如treeview,menu等,十分灵活,使到能很方便地实现页面导航的不同形式,而且还提供了运行时的编程接口,可以以编程的形式动态实现页面导航控件。本文将简单以几个例子来介绍一下在asp.net2.0中如何实现页面导航。
页面导航的结构和sitemapdatasource控件
在asp.net2.0中,要实现页面导航,应该先以xml的形式,提供出整个网站的页面结构层次。我们可以编写一个叫web.sitemap的XML文本文件,在该文件中定义出整个要导航页面的结构层次。举例如下:
<?xmlversion="1.0"encoding="utf-8"?>
<siteMap>
<siteMapNodetitle="Default"description="Home"url="Default.aspx">
<siteMapNodetitle="Members"description="Members"url="Members.aspx">
<siteMapNodetitle="MyAccount"description="MyAccount"url="MyAccount.aspx"/>
<siteMapNodetitle="Products"description="Products"url="Products.aspx"/>
</siteMapNode>
<siteMapNodetitle="Administration"description="Administration"url="~/Admin/Default.aspx">
<siteMapNodetitle="Customer"description="CustomerAdmin"url="~/Admin/Customer/default.aspx"/>
<siteMapNodetitle="ProductsAdmin"description="ProductsAdmin"url="~/Admin/ProductsAdmin.aspx"/>
</siteMapNode>
</siteMapNode>
</siteMap>
我们可以看到,其中,web.sitemap文件必须包含根结点sitemap。而且,设置一个父sitemapnode结点,该结点表明是默认的站点首页,在该父sitemapnode结点下,可以有若干个子sitemapnode结点,分别按层次结构代表了网站的各子栏目(留意一下上例中,各个子结点之间的包含关系)。而每一个sitemapnode结点中,有如下若干个属性:
1)URL属性:该属性指出要导航的栏目的地址链接,在web.sitemap中定义中,必须是每个栏目的相对地址。
2)Title属性:该属性指出每个子栏目的名称,显示在页面中。
3)Description属性:该属性指定时,则用户在鼠标移动到该栏目时,出现有关该栏目的相关提示,类似于tooltips属性。
在设计好sitemap属性后,接下来就可以一步步构建页面导航功能了,主要有两个步骤:
1)向页面中添加sitemapdatasource控件。该控件会自动感应绑定web.sitemap中的内容。
2)将sitemapdatasource控件绑定到如sitemappath,treeview,menu等控件中,也就是说,将它们的数据源设置为该sitemapdatasource控件。
知道了方法后,我们下面就分别以treeview,menu,sitemappath三种控件为例子,介绍一下如何和sitemapdatasource控件进行配合使用。
先来介绍使用treeview控件和sitemapdatasource控件配合使用的方法。Treeview树形列表控件十分适合于用来做页面导航,为了能具体说明,我们充分利用asp.net中的masterpage控件,先搭建出一个网站的基本框架架构。
在visualwebdeveloper2005beta1中,新建一个网站,之后添加上文的web.sitemap文件,再添加一个名叫Navigation的master类型的页面,代码如下:
<%@MasterLanguage="C#"%>
<htmlxmlns="">
<headid="Head1"runat="server">
<title>MasterPage</title>
</head>
<body>
<formid="form1"runat="server">
<div>
<tablestyle="width:100%;height:100%"border="1">
<tr>
<tdstyle="width:10%">
<asp:TreeViewID="TreeView1"Runat="server"DataSourceID="SiteMapDataSource1"
ExpandDepth="2"ShowExpandCollapse="False"NodeIndent="10">
<LevelStyles>
<asp:TreeNodeStyleFont-Bold="True"Font-Underline="False"/>
<asp:TreeNodeStyleFont-Italic="True"Font-Underline="False"/>
<asp:TreeNodeStyleFont-Size="X-Small"ImageUrl="bullet.gif"Font-Underline="False"/>
</LevelStyles>
<NodeStyleChildNodesPadding="10"/>
</asp:TreeView>
</td>
<tdstyle="width:100px">
<asp:contentplaceholderid="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</td>
</tr>
</table>
<asp:SiteMapDataSourceID="SiteMapDataSource1"Runat="server"/>
</div>
</form>
</body>
</html>