asp.net|导航|数据|站点

　　导言

　　通常，用户友好的个性化站点都有着一致的，站点统一的页面布局和导航体系。Asp.net 2.0引入的两个新特性给我们在统一站点的页面布局和站点导航上提供了简单而有效的工具，它们是母板页和站点导航。母板页允许开发者创建统一的站点模板和指定的可编辑区域。这样，aspx页面只需要给模板页中指定的可编辑区域提供填充内容就可以了，所有在母板页中定义的其他标记将出现在所有使用了该母板页的aspx页面中。这种模式允许开发者可以统一的管理和定义站点的页面布局，因此可以容易的得到拥有统一的视觉和感觉的页面并且还易于更新。

　　站点导航系统允许开发者定义站点地图并提供了API以便通过程序查询站点地图信息。新的导航控件包括Menu,TreeView和SiteMapPath,这样可以很容易的在一个一般的导航用户界面元素里呈现全部或者部分站点地图。我们将使用默认的站点导航提供者，这意味着我们的站点地图将定义在一个xml格式的文件中。

　　为说明这些观念并且使我们的教程的示例站点可用性更佳，让我们通过本次课程定义一个站点统一的页面布局，实现一个站点地图，并且添加导航UI。在这个课程结束时我们的课程示例站点就拥有一个优美的设计效果了。

图1：本课程的最终成果

　　步骤1：创建母板页

　　第一步是为我们的站点创建母板页。到目前为止我们的站点只有一个类型化的DataSet（Northwind.xsd,位于App_Code文件夹），业务逻辑层类库（ProductsBLL.cs,CategoriesBLL.cs等等，这些都在App_Code文件夹里），数据库（NORTHWIND.MDF,位于App_Data文件夹），配置文件（web.config）,和一个CSS文件（Style.css）。

　　我整理这些页面和文件以说明前面两次课程中介绍的数据访问层和业务逻辑层将会在以后课程的更多细节中重用这些示例。

图2：我们项目中的文件

　　要创建一个母板页，用右键点击解决方案管理器中的项目名称并选择添加新项。然后从模板列表窗口中选择母板类型并且命名为Site.master

图3：添加一个母板页到站点中

　　在母板页中定义站点统一的页面布局。你可以用设计视图定义你需要的布局或者控件，你还可以手动的在代码视图中添加标记。在我们的母板页中使用了定义在外部文件Style.css中的层叠样式表来定义位置和风格。也许你不知道下面这些标记怎样显示，样式表规则定义了导航用的＜div＞标签中的内容绝对定位在页面的左边并且宽度固定为200像素。

1＜%MasterLanguage="C#"AutoEventWireup="true"CodeFile="Site.master.cs"Inherits="Site"%＞
2
3＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
4
5＜htmlxmlns="http://www.w3.org/1999/xhtml"＞
6＜headrunat="server"＞
7＜title＞WorkingwithDataTutorials＜/title＞
8＜linkalign=center>

图10：站点地图描述了一个层次的导航结构

　　Asp.net通过DotNET 框架中的SiteMap类显示站点地图的结构。这个类有一个CurrentNode属性，它返回当前用户正在访问的节点的信息；RootNode属性返回站点地图的根节点信息（在我们的站点地图中是Home）。CurrentNode呵RootNode属性都返回SiteMapNode实例，SiteMapNode包含ParentNode,ChildNodes,NextSibling,PreviousSibling等属性，这些属性允许站点地图的层次可以被遍历。

　　步骤4：利用站点地图显示菜单

　　在asp.net 2.0中我们可以像asp.net 1.x一样，有多种编程方式可以访问数据，还可以通过新的数据源控件访问。

　　这里有多个内置的数据源控件，比如用来访问关系数据库数据的SqlDataSource控件，用来访问类所提供的数据的ObjectDataSoruce控件等等。你还可以创建你自己的自定义数据源控件。

　　数据源控件作为你的aspx页面和底层数据的代理。为了显示数据源控件查询到的数据，我们要添加其他Web控件到页面上，并且将它和数据源控件绑定。要绑定一个Web控件到一个数据源控件，只需要简单的设置这个Web控件的DataSourceID属性值为数据源控件的ID属性值。

　　为了获取站点地图中的数据，asp.net提供了SiteMapDataSource控件，它允许我们绑定一个Web控件来显示我们的站点地图。TreeView和Menu这两个Web控件常常用来提供导航用户界面。要绑定站点地图中的数据到这两个控件，添加一个SiteMapDataSource控件到页面中，设置TreeView或者Menu控件的DataSourceID属性值为SiteMapDataSource控件的ID属性值就可以了。举个例子，我们可以用下面这些标记将Menu控件到母板页中：

1＜divid="navigation"＞
2＜asp:MenuID="Menu1"runat="server"
3DataSourceID="SiteMapDataSource1"＞
4＜/asp:Menu＞
5
6＜asp:SiteMapDataSourceID="SiteMapDataSource1"runat="server"/＞
7＜/div＞

　　为了生成优化的HTML，我们可以绑定SiteMapDataSource控件到Repeater控件，如下：

1＜divid="navigation"＞
2＜ul＞
3＜li＞＜asp:HyperLinkrunat="server"ID="lnkHome"
4NavigateUrl="~/Default.aspx"＞Home＜/asp:HyperLink＞＜/li＞
5
6＜asp:Repeaterrunat="server"ID="menu"
7DataSourceID="SiteMapDataSource1"＞
8＜ItemTemplate＞
9＜li＞
10＜asp:HyperLinkrunat="server"
11NavigateUrl="＜%#Eval("Url")%＞"＞
12＜%#Eval("Title")%＞
13＜/asp:HyperLink＞
14＜/li＞
15＜/ItemTemplate＞
16＜/asp:Repeater＞
17＜/ul＞
18
19＜asp:SiteMapDataSourceID="SiteMapDataSource1"
20runat="server"ShowStartingNode="false"/＞
21＜/div＞

　　SiteMapDataSource控件每次返回站点地图层次中的一级，从站点地图中的根节点开始(在我们的站点地图中是Home),然后是下一个级(Basic Reporting,Filtering Reports和Customized Formatting)等等。

　　当将SiteMapDataSource绑定到Repeater时，它遍历第一级并且用ItemTemplate显示第一级的每个SiteMapNode实例。我们可以使用Eval(属性名称)访问SiteMapNode的细节，这样我们就可以得到SiteMapNode的Url和Title属性给HyperLink控件。

　　下面显示的是上面使用Repeater控件例子生成的HTML标记：

1＜li＞
2＜aalign=center>

图14：用户控件已经添加到Default.aspx页面上

图15：Basic Reporting指南的列表

　　总结

　　完成站点地图和母板页后，现在我们的教程站点拥有统一的页面布局和导航体系。尽管我们的站点有很多页面，但是我们可以集中的更新站点页面布局和站点导航信息。明确一点，页面布局信息在母板页Site.master中定义，站点地图在Web.sitemap中定义。我们不需要写任何代码就完成了站点页面布局和导航机制，Visual Studio提供了所见即所得的设计时支持。

　　完成了数据访问层和业务逻辑层并且定义了一个统一的页面布局和站点导航系统，下一步我们将探索通用报表模式。在接下来的三个指南里我们将会看到基本报表任务-用GridView,DetailsView和FormView控件显示从业务逻辑层获取的数据。