通常，用户友好的个性化站点都有着一致的，站点统一的页面布局和导航体系。Asp.net 2.0引入的两个新特性给我们在统一站点的页面布局和站点导航上提供了简单而有效的工具，它们是母板页和站点导航。母板页允许开发者创建统一的站点模板和指定的可编辑区域。这样，aspx页面只需要给模板页中指定的可编辑区域提供填充内容就可以了，所有在母板页中定义的其他标记将出现在所有使用了该母板页的aspx页面中。这种模式允许开发者可以统一的管理和定义站点的页面布局，因此可以容易的得到拥有统一的视觉和感觉的页面并且还易于更新。
站点导航系统允许开发者定义站点地图并提供了API以便通过程序查询站点地图信息。新的导航控件包括Menu,TreeView和SiteMapPath,这样可以很容易的在一个一般的导航用户界面元素里呈现全部或者部分站点地图。我们将使用默认的站点导航提供者，这意味着我们的站点地图将定义在一个xml格式的文件中。
为说明这些观念并且使我们的教程的示例站点可用性更佳，让我们通过本次课程定义一个站点统一的页面布局，实现一个站点地图，并且添加导航UI。在这个课程结束时我们的课程示例站点就拥有一个优美的设计效果了。
我整理这些页面和文件以说明前面两次课程中介绍的数据访问层和业务逻辑层将会在以后课程的更多细节中重用这些示例。
要创建一个母板页，用右键点击解决方案管理器中的项目名称并选择添加新项。然后从模板列表窗口中选择母板类型并且命名为Site.master
在母板页中定义站点统一的页面布局。你可以用设计视图定义你需要的布局或者控件，你还可以手动的在代码视图中添加标记。在我们的母板页中使用了定义在外部文件Style.css中的层叠样式表来定义和风格。也许你不知道下面这些标记怎样显示，样式表规则定义了导航用的＜div＞标签中的内容绝对定位在页面的左边并且宽度固定为200像素。
@MasterLanguage=C#AutoEventWireup=trueCodeFile=Site.master.csInherits=Site%＞
＜!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN＞
＜linkhref=Styles.cssrel=stylesheettype=text/css/＞
＜spanclass=title＞WorkingwithDataTutorials＜/span＞
一个母板页定义了固定的布局和可以被那些使用了母板页的aspx页面填充的可编辑区域，这个可编辑区域是通过ContentPlaceHolder控件显示，位于＜div＞标记中。我们的母板页中只有一个ContentPlaceHolder(MainContent),但是母板页中是可以包含多个ContentPlaceHolder控件的。
输入的标记，切换到设计视图观察母板页的布局。所有的使用了这个母板页的aspx页面都会有这样统一的布局，而MainContent区域是留给aspx页面展现自己才华的地方。
定义母板页后，我们准备给站点添加一些aspx页面。让我们从添加我们的首页Degault.aspx开始吧。在解决方案管理器中右键点击项目名称并且选择添加新建项目。从模板列表中选择Web Form选项并且命名为Deult.aspx。并且，勾上“选择母板页”的复选框。
点击确定按钮后，将会询问你新建的这个aspx页面使用哪个母板页。也许你有多个母板页在你的项目中，但是我们只有一个。
@PageLanguage=C#MasterPageFile=~/Site.masterAutoEventWireup=true
＜asp:ContentID=Content1ContentPlaceHolderID=MainContent
@PageLanguage=C#MasterPageFile=~/Site.masterAutoEventWireup=true
＜asp:ContentID=Content1ContentPlaceHolderID=MainContent
＜h1＞WelcometotheWorkingwithDataTutorialSite＜/h1＞
＜p＞Thissiteisbeingbuiltaspartosetoftutorialsthat
illustratesomeofthenewdataaccessanddatabindingfeaturesin
＜li＞UsingstronglytypedTableAdaptersandDataTables＜/li＞
@Page指令中的Title属性允许我们可以在aspx页面定义标题，即使母板页中已经定义了＜title＞元素。我们还可以使用Page.Title的编程方式设置页面的标题。需要注意的是母板页中引用的样式表（如Style.css）会自动校正以应用到每个aspx页面中，这是与aspx页面的目录和母板页目录之间的关系无关。
切换到设计视图我们会看到我们的页面将在浏览器中的显示效果。注意：在设计视图里，aspx页面的内容只有可编辑区域可以被修改，在母板页定义的非ContentPlaceHolder部分标记被显示成灰色。
当Deult.aspx页面被浏览器访问时，擎会合并母板页的内容和aspx页的内容，并且将合并的内容呈现为最终的HTML发送到浏览器。当母板页的内容被更新，所有使用了这个母板页的aspx页面会在下次被请求时重新和新的母板页内容合并。简单的说，母板页模型允许定义一个统一的布局模板（母板页），当它改变时整个站点会反应这种改变。
让我们花一点时间添加另外的页面到站点中，以便支持最终的各种各样的课程的示例。这里总共会有超过35个示例，所以我们先创建一部分。以后会有很多类别的示例，为了更好的管理这些示例我们给每个分类添加一个文件夹。现在我们添加三个文件夹：
最后，如图8所示向解决方案管理器中添加新文件。每添加一个文件的时候记住要勾上“选择母板页”的复选框。
管理一个由大量网页组成的网站的其中一个挑战是要为访问者浏览网站提供一个捷径。作为开始，站点的导航结构必须被定义。下一步，这个结构必须转换成适于导航的用户界面元素，比如菜单或者导航。当有新页面添加到站点和已有的页面被移除的时候这个过程将要修改和校正。
在2.0以前，开发者需要自己创建站点导航结构，它并且将它为适于导航的用户界面元素。在asp.net 2.0里，开发者可以利用非常灵活的且内置的站点导航系统。Asp.net 2.0站点导航系统允许开发者定义一个站点地图并且提供了可以访问这些信息的API。
默认的Asp.net站点地图提供者期望站点地图信息存储在xml格式的文件中。但是，建立在提供者模型上的站点导航系统是可以被扩展的以支持多种方式储存的站点地图。Jeff Prosise的文章，The SQL Site Map Provider You’ve Been Waiting For展示了怎样创建将站点地图存储在SQL Server数据库里的提供者；另外一个选择是基于文件系统的站点地图提供者。
在这个指南中，我们仍然使用ASP.NET2.0里默认的站点地图提供者。要创建站点地图，在解决方案管理器里右键点击项目名称，选择添加新项，然后选择站点地图类型。命名为Web.sitemap然后单击添加按钮。
站点地图文件是一个xml文件。注意：Visual Studio可以为站点地图结构提供智能。站点地图文件必须含有＜siteMap＞作为根节点，它必须至少含有一个＜siteMapNode＞子节点。这个＜siteMapNode＞元素又可以包含任意数量的＜siteMapNode＞子元素。
站点地图模拟了文件系统。为每个文件夹添加一个＜siteMapNode＞元素，并且为每个aspx页面添加一个＜siteMapNode＞子元素，如此：
＜siteMapNodeurl=~/Deult.aspxtitle=Homedescription=Home＞
＜siteMapNodeurl=~/BasicReporting/SimpleDisplay.aspx
＜siteMapNodeurl=~/BasicReporting/DeclarativeParams.aspx
＜siteMapNodeurl=~/BasicReporting/ProgrammaticParams.aspx
description=SamplesofReportsthatSupportFiltering＞
＜siteMapNodeurl=~/Filtering/FilterByDropDownList.aspx
description=Filterresultsusingadrop-downlist./＞
＜siteMapNodeurl=~/Filtering/MasterDetailsDetails.aspx
＜siteMapNodeurl=~/Filtering/DetailsBySelecting.aspx
description=ShowdetailresultsforaselectediteminaGridView./＞
description=SamplesofReportsWhoseFormatsareCustomized＞
＜siteMapNodeurl=~/CustomFormatting/CustomColors.aspx
url=~/CustomFormatting/GridViewTemplateField.aspx
url=~/CustomFormatting/DetailsViewTemplateField.aspx
description=ShowsusingtheTemplateFieldtocustomize
＜siteMapNodeurl=~/CustomFormatting/FormView.aspx
＜siteMapNodeurl=~/CustomFormatting/SummaryDataInFooter.aspx
description=Displaysummarydatainthegridsfooter./＞
站点地图定义了这个站点的导航结构，它是层次结构的以便描述站点中各种各样的区域。在Web.sitemap中的每个＜siteMapNode＞元素描述了一个站点结构中的一个区域。
在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控件到母板页中：
＜asp:SiteMapDataSourceID=SiteMapDataSource1runat=server/＞
NavigateUrl=~/Deult.aspx＞Home＜/asp:HyperLink＞＜/li＞
＜ahref=/Code/BasicReporting/Deult.aspx＞BasicReporting＜/a＞
＜ahref=/Code/Filtering/Deult.aspx＞FilteringReports＜/a＞
＜asp:Repeaterrunat=serverID=menuDataSourceID=SiteMapDataSource1＞
＜ahref=/Code/BasicReporting/Deult.aspx＞BasicReporting＜/a＞
＜ahref=/Code/BasicReporting/SimpleDisplay.aspx＞
＜ahref=/Code/BasicReporting/DeclarativeParams.aspx＞
＜ahref=/Code/BasicReporting/ProgrammaticParams.aspx＞
＜ahref=/Code/Filtering/Deult.aspx＞FilteringReports＜/a＞
这个菜单在母板页中定义的，绑定了在Web.sitemap中定义的站点地图，这意味着所有站点地图的修改会立即反应到所有使用了Site.master母板页的页面。
所有的件可以随意的保持它们的状态到View State（译注：当原文中采用的是开头字母大写的ViewState将不翻译）中，最终生成HTML时它被系列化并保存在一个隐藏的表单域中。控件用ViewState来记忆它们在页面返回时被程序改变的状态，比如Web控件绑定的数据。如果视图状态允许信息可以在页面返回时保持，它会增大发送到客户端HTML代码的尺寸，如果在没有确切的下会使页面膨胀得很厉害。数据显示控件－尤其是GridView控件－会显著地增加大量的额外的标记到页面中。当然，这些增长可能对宽带用户毫无影响，但是视图状态会给拨号上网的用户增加几秒钟的延迟。
要观察视图状态的影响，在浏览器里打开这个页面然后查看页面的源代码(对于Internet Explorer,点击”查看”菜单并且选择源代码选项)。你还可以打开页面选项以观察这个页面上每个控件的视图状态。视图状态的信息被系列化并放在位于跟随在＜form＞标签后面的＜div＞元素里的名为_VIEWSTATE的隐藏表单域中。
视图状态只在页面上使用了Form时才会被保持；如果你的aspx页面没有包含＜form runat=”server”＞的声明，那么最后产生的HTML标记中将不含有VIEWSTATE隐藏表单域。
母板页产生的VIEWSTATE隐藏表单域大概有1800个字节。这些额外的数据主要是SiteMapDataSource控件为Repeater控件提供的数据内容产生的。也许1800字节左右看起来还不算很多，但是使用了GridView并且使用了很多字段和记录的视图状态很容易就膨胀10倍或更多。
可以将EnableViewState属性设为lse在页面级或者控件级关闭视图状态，从而可以减少产生的标记的大小。Web控件利用视图状态在页面返回时保持要绑定到数据显示控件的数据，当关闭了数据显示控件的视图状态后，在每次页面返回时都必须重新绑定数据到控件。在asp.net 1.x的时候这个职责落到开发者身上；在asp.net 2.0里，页面返回时，数据显示控件会在必要的时候重新绑定数据。
设置Repeater控件的EnableViewState为lse可以减少页面的视图状态。可以通过属性窗口设置或者在代码视图里手动修改。通过这些改变,Repeater标记将会像这样：
＜asp:Repeaterrunat=serverID=menuDataSourceID=SiteMapDataSource1EnableViewState=False＞
经过这些变化，页面产生的视图状态减少到52个字节，减少了97％的视图状态数据！在这个指南系列里我会关闭所有数据控件的视图状态以减少产生标记的大小。在大多数例子里会在没有提示的情况下将EnableViewState属性设为lse。
为完成母板页，让我们给每个页面添加一个breadcrumb导航UI元素。breadcrum导航会快速的显示用户当前在站点中的。添加一个breadcrumb导航在2.0中是简单的－只要添加一个SiteMapPath控件到页面上就可以了；不需要更多的代码。
breadcrum导航控件显示了用户当前访问的页面以及它的父级节点，直至到根节点（在我们的站点地图中是Home）。
让我们再次使用Repeater显示一个无序列表，不过这次我们会显示指南的标题和描述。我们需要在每个Deult.aspx页面重复这些标记和代码，我们可以将这个UI逻辑封装成一个User Control。在站点中添加一个名为UserControls的文件夹并添加一个名为SectionLevelTutorialListing.ascx的Web用户控件，它包含一下标记：
＜asp:RepeaterID=TutorialListrunat=serverEnableViewState=False＞
protectedvoidPage_Load(objectsender,EventArgse)
TutorialList.DataSource=SiteMap.CurrentNode.ChildNodes;
在前面的Repeater例子中我将SiteMap的数据绑定到Repeater上；当然，这个SectionLevelTutorialListing用户控件也将使用这种方法。在Page_Load事件里，有一个检测程序以确保这是否是第一次访问该页面（不是返回）并且这个页面的URL要映射到站点地图中的一个节点。如果页面使用了这个用户控件，那么就没有对应的
＜siteMapNode＞,SiteMap.CurrentNode会返回null并且将没有数据绑定到Repeater控件。假设我们有一个CurrentNode,我可以将它的ChildNodes集合绑定到这个Repeater。每个部分的Deult.aspx页面是这个部分内教程的父节点，这些代码会展示每个部分内教程的连接和描述，下面是屏幕截图：
一旦这个Repeater创建好后，在设计视图里打开每个文件夹的Deult.aspx页面，将这个用户控件拖到你要显示的地方。
完成站点地图和母板页后，现在我们的教程站点拥有统一的页面布局和导航体系。尽管我们的站点有很多页面，但是我们可以集中的更新站点页面布局和站点导航信息。明确一点，页面布局信息在母板页Site.master中定义，站点地图在Web.sitemap中定义。我们不需要写任何代码就完成了站点页面布局和导航机制，Visual Studio提供了所见即所得的设计时支持。
完成了数据访问层和业务逻辑层并且定义了一个统一的页面布局和站点导航系统，下一步我们将探索通用报表模式。在接下来的三个指南里我们将会看到基本报表任务-用GridView,DetailsView和FormView控件显示从业务逻辑层获取的数据。
网友评论 ()条 查看