三创建母版页和站点导航.docx

1、三创建母版页和站点导航在ASP.NET 2.0中操作数据之三：创建母版页和站点导航作者：heker2007 字体：增加减小 类型：转载时间：2016-04-29我要评论本文主要介绍在ASP.NET如何创建母版页以及站点地图等操作，母版页的实现的功能有点类似自定义用户控件，可以实现网站页面统一的设计和布局。导言通常，用户友好的个性化站点都有着一致的，站点统一的页面布局和导航体系。A 2.0引入的两个新特性给我们在统一站点的页面布局和站点导航上提供了简单而有效的工具，它们是母板页和站点导航。母板页允许开发者创建统一的站点模板和指定的可编辑区域。这样，aspx页面只需要给模板页中指定的可编辑区域提供

2、填充内容就可以了，所有在母板页中定义的其他标记将出现在所有使用了该母板页的aspx页面中。这种模式允许开发者可以统一的管理和定义站点的页面布局，因此可以容易的得到拥有统一的视觉和感觉的页面并且还易于更新。站点导航系统允许开发者定义站点地图并提供了API以便通过程序查询站点地图信息。新的导航控件包括Menu,TreeView和SiteMapPath,这样可以很容易的在一个一般的导航用户界面元素里呈现全部或者部分站点地图。我们将使用默认的站点导航提供者，这意味着我们的站点地图将定义在一个xml格式的文件中。为说明这些观念并且使我们的教程的示例站点可用性更佳，让我们通过本次课程定义一个站点统一的页面

3、布局，实现一个站点地图，并且添加导航UI。在这个课程结束时我们的课程示例站点就拥有一个优美的设计效果了。图1：本课程的最终成果步骤1：创建母板页第一步是为我们的站点创建母板页。到目前为止我们的站点只有一个类型化的DataSet（Northwind.xsd,位于App_Code文件夹），业务逻辑层类库（ProductsBLL.cs,CategoriesBLL.cs等等，这些都在App_Code文件夹里），数据库（NORTHWIND.MDF,位于App_Data文件夹），配置文件（web.config）,和一个CSS文件（Style.css）。我整理这些页面和文件以说明前面两次课程中介绍的数据访问

4、层和业务逻辑层将会在以后课程的更多细节中重用这些示例。图2：我们项目中的文件要创建一个母板页，用右键点击解决方案管理器中的项目名称并选择添加新项。然后从模板列表窗口中选择母板类型并且命名为Site.master图3：添加一个母板页到站点中在母板页中定义站点统一的页面布局。你可以用设计视图定义你需要的布局或者控件，你还可以手动的在代码视图中添加标记。在我们的母板页中使用了定义在外部文件Style.css中的层叠样式表来定义位置和风格。也许你不知道下面这些标记怎样显示，样式表规则定义了导航用的标签中的内容绝对定位在页面的左边并且宽度固定为200像素。Site.master?123456789101

5、112131415161718192021222324252627282930313233343536Working with Data TutorialsWorking with Data TutorialsTODO: Breadcrumb will go here.TODO: Menu will go here.一个母板页定义了固定的布局和可以被那些使用了母板页的aspx页面填充的可编辑区域这个可编辑区域是通过ContentPlaceHolder控件显示，位于标记中。我们的母板页中只有一个ContentPlaceHolder(MainContent),但是母板页中是可以包含多个Conten

6、tPlaceHolder控件的。输入上面的标记，切换到设计视图观察母板页的布局。所有的使用了这个母板页的aspx页面都会有这样统一的布局，而MainContent区域是留给aspx页面展现自己才华的地方。图4：在设计视图中显示的母板页步骤2：给站点添加一个主页定义母板页后，我们准备给站点添加一些aspx页面。让我们从添加我们的首页Degault.aspx开始吧。在解决方案管理器中右键点击项目名称并且选择添加新建项目。从模板列表中选择Web Form选项并且命名为Default.aspx。并且，勾上“选择母板页”的复选框。图5：添加一个新Web Form并且勾上“选择母板页”的复选框点击确定按钮

7、后，将会询问你新建的这个aspx页面使用哪个母板页。也许你有多个母板页在你的项目中，但是我们只有一个。图6：选择你要使用的母板页选择母板页后，新建的aspx会包含下面这些标记：Default.aspx?12345在Page指令中有一个指向母板页的引用(MasterPageFile=”/Site.master”),并且aspx页面的标记中包含了一个Content控件对应母板页中定义的ContentPlaceHolder控件，这个Content控件的ContentPlaceHolderID属性映射到指定的ContentPlaceHolder控件。你可以在Content控件中放置你想显示在相应Con

8、tentPlaceHolder控件位置的标记。设置Page指令的Title属性为Home并且添加一些欢迎词到Content控件中：Default.aspx?1234567891011121314151617181920212223242526272829Welcome to the Working with Data Tutorial SiteThis site isbeing built aspart of a setof tutorials thatillustrate some of the newdata access and databinding features inASP.NE

9、T 2.0 and Visual Web Developer.Over time, it will include a host of samples thatdemonstrate:Building a DAL (data access layer),Using strongly typed TableAdapters and DataTablesMaster-Detail reportsFilteringPaging,Two-way databinding,Editing,Deleting,Inserting,Hierarchical data browsing,Hierarchical

10、drill-down,Optimistic concurrency,And more!Page指令中的Title属性允许我们可以在aspx页面定义标题，即使母板页中已经定义了元素。我们还可以使用Page.Title的编程方式设置页面的标题。需要注意的是母板页中引用的样式表（如Style.css）会自动校正以应用到每个aspx页面中，这是与aspx页面的目录和母板页目录之间的关系无关。切换到设计视图我们会看到我们的页面将在浏览器中的显示效果。注意：在设计视图里，aspx页面的内容只有可编辑区域可以被修改，在母板页定义的非ContentPlaceHolder部分标记被显示成灰色。图7：在设计视图中

11、显示的可编辑区域及非可编辑区域当Default.aspx页面被浏览器访问时，引擎会合并母板页的内容和aspx页的内容，并且将合并的内容呈现为最终的HTML发送到浏览器。当母板页的内容被更新，所有使用了这个母板页的aspx页面会在下次被请求时重新和新的母板页内容合并。简单的说，母板页模型允许定义一个统一的布局模板（母板页），当它改变时整个站点会反应这种改变。添加更多的页面到站点中让我们花一点时间添加另外的页面到站点中，以便支持最终的各种各样的课程的示例。这里总共会有超过35个示例，所以我们先创建一部分。以后会有很多类别的示例，为了更好的管理这些示例我们给每个分类添加一个文件夹。现在我们添加三个文

12、件夹： BasicReporting Filtering CustomFormatting最后，如图8所示向解决方案管理器中添加新文件。每添加一个文件的时候记住要勾上“选择母板页”的复选框。图8：添加下列文件第三步：添加站点地图管理一个由大量网页组成的网站的其中一个挑战是要为访问者浏览网站提供一个捷径。作为开始，站点的导航结构必须被定义。下一步，这个结构必须转换成适于导航的用户界面元素，比如菜单或者位置导航。当有新页面添加到站点和已有的页面被移除的时候这个过程将要修改和校正。在 2.0以前，开发者需要自己创建站点导航结构，维护它并且将它转化为适于导航的用户界面元素。在 2.0里，开发者可以利用

13、非常灵活的且内置的站点导航系统。A 2.0站点导航系统允许开发者定义一个站点地图并且提供了可以访问这些信息的API。默认的A站点地图提供者期望站点地图信息存储在xml格式的文件中。但是，建立在提供者模型上的站点导航系统是可以被扩展的以支持多种方式储存的站点地图。Jeff Prosise的文章，The SQL Site Map Provider Youve Been Waiting For展示了怎样创建将站点地图存储在SQL Server数据库里的提供者；另外一个选择是基于文件系统的站点地图提供者。在这个指南中，我们仍然使用ASP.NET2.0里默认的站点地图提供者。要创建站点地图，在解决方案管

14、理器里右键点击项目名称，选择添加新项，然后选择站点地图类型。命名为Web.sitemap然后单击添加按钮。图9：向你的项目中添加站点地图站点地图文件是一个xml文件。注意：Visual Studio可以为站点地图结构提供智能感知。站点地图文件必须含有作为根节点，它必须至少含有一个子节点。这个元素又可以包含任意数量的子元素。站点地图模拟了文件系统。为每个文件夹添加一个元素，并且为每个aspx页面添加一个子元素，如此：Web.sitemap:?123456789101112131415161718192021222324252627282930313233343536373839404142434

15、44546474849505152535455565758596061626364siteMapxmlns=站点地图定义了这个站点的导航结构，它是层次结构的以便描述站点中各种各样的区域。在Web.sitemap中的每个元素描述了一个站点结构中的一个区域。图10：站点地图描述了一个层次的导航结构A通过DotNET 框架中的SiteMap类显示站点地图的结构。这个类有一个CurrentNode属性，它返回当前用户正在访问的节点的信息；RootNode属性返回站点地图的根节点信息（在我们的站点地图中是Home）。CurrentNode呵RootNode属性都返回SiteMapNode实例，SiteM

16、apNode包含ParentNode,ChildNodes,NextSibling,PreviousSibling等属性，这些属性允许站点地图的层次可以被遍历。步骤4：利用站点地图显示菜单在 2.0中我们可以像 1.x一样，有多种编程方式可以访问数据，还可以通过新的数据源控件访问。这里有多个内置的数据源控件，比如用来访问关系数据库数据的SqlDataSource控件，用来访问类所提供的数据的ObjectDataSoruce控件等等。你还可以创建你自己的自定义数据源控件。数据源控件作为你的aspx页面和底层数据的代理。为了显示数据源控件查询到的数据，我们要添加其他Web控件到页面上，并且将它和数

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