使用站点导航控件和母版页.doc

资源描述

《使用站点导航控件和母版页.doc》由会员分享，可在线阅读，更多相关《使用站点导航控件和母版页.doc（21页珍藏版）》请在三一办公上搜索。

1、第5章使用站点导航控件和母版页本章导读Web应用开发中有一个非常重要的环节就是站点风格的统一。例如，可以在每个页面的左上角显示站标（logo），在固定的位置显示站点的主题文字，从而加深浏览者的印象，并突出站点主题。ASP.NET提供了一种比较简单的方法保持风格的统一，那就是使用母版页。母版页是ASP.NET2.0新增的一个重用技术，母版页是一个以“.master”作为后缀名的文件，它可以把页面上的公用元素（如网站Logo、广告条、导航条等）整合到一个可以共享的通用页面上。母版页为应用程序的所有页面或者一组特定页面提供统一的页面布局和设计风格，有利于站点修改和维护，并且降低了应用程序开发和维护

2、的成本。在平时上网的时候，总有各种各样的导航，我们单击链接，就可以导航到该页面。在ASP.NET中可以使用导航控件实现站点的导航。本章将通过实例来详细介绍站点导航控件和母版页的使用方法，并使用站点导航控件和母版页布局新闻发布系统页面。学习目标：1掌握各种站点导航控件的使用方法；2掌握创建母版页和生成内容页的方法；3熟练使用常用的Web服务器控件。学习任务：1建立新闻发布系统导航系统；2为新闻发布系统后台构建母版页。5.1使用导航控件一个好的Web站点应该为用户提供站点导航功能。在ASP.NET2.0中提供了用于页面导航的控件，使用这些控件就可以实现站点的导航。在学习导航控件之前我们先介绍站点地

3、图文件。5.1.1站点地图为了使用ASP.NET2.0的导航功能，必须有一种标准的方法描述站点中的每个页面。这个标准不仅包含每个网页的名称，还应该能够表明它们的层次结构关系。比如，网易的站点，有可能就是这样一个导航路径：网易新闻中心国内新闻。在ASP.NET中，有一个叫做站点地图的文件包含这些信息。站点地图是一个XML文件，用来描述站点的结构信息。站点地图文件名必须为Web.sitemap，并且要放置于站点的根目录。可以使用如下方法创建站点地图文件：（1）在“解决方案资源管理器”中鼠标右键单击站点，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项”对话框，如图5-1所示。在“模板”列表框

4、中选择“站点地图”选项，单击“添加”按钮。这时将在站点根目录下创建一个名为Web.sitemap的站点地图文件，同时打开站点地图文件。图5-1“添加新项”对话框（2）编写站点地图文件代码。例如，下面这段代码就是站点地图的代码：siteMap xmlns= 其中各节点描述如下：siteMap：为根节点，一个站点地图只能有一个siteMap元素。siteMapNode：对应于页面的节点，一个节点描述一个页面。url：用于设置节点导航的URL地址。是可选的，如果提供的话，站点地图中的每一个URL必须是唯一的。title：提供链接的文本描述。descrption：设置节点说明性文本，并提供光标停留时显

5、示的内容。编写站点地图的注意事项如下：（1）站点地图根节点为元素，每个文件有且仅有一个根节点。（2）下一级有且仅有一个节点。（3）下面可以包含多个新的节点。（4）站点地图中，同一个URL仅能出现一次。5.1.2使用SiteMapPath控件在站点的设计中，我们需要给用户提供一个方便的路径，比如图5-2所示的网易新闻导航。网易新闻中心体育新闻奥运图5-2网易新闻导航这就是典型的面包屑导航。该导航显示了从站点的首页（根节点）到当前页面之间的路径。SiteMapPath控件用来指示页面在站点的逻辑位置的导航，这种类型的导航可以帮助用户理解站点结构。通过该导航，可以迅速找到相关的位置。SiteMapP

6、ath控件必须与站点地图文件相结合，如果当前站点中有已经编写好的站点地图文件，只要将SiteMapPath控件拖到页面中，该控件将会自动与站点地图文件结合，而不需要编写代码。SiteMapPath控件只能显示从根节点到当前节点之间的路径，通过单击超链接可以转向某个页面，而不能向前选择页面。表5-1列出了SiteMapPath控件的重要属性。表5-1 SiteMapPath控件的重要属性属性说明ParentLevelsDisplayed设置要显示的父节点的数目。如设置为2，则只显示当前页面前面的两个父节点。默认为-1，表示将所有节点全部展开。PathDirection设置路径显示的方向，有两种选

7、择：RootToCurrent，从根节点到当前页面；CurrentToRoot，从当前页面到根节点。PathSeparator 设置显示在每个节点之间的分隔符字符串，可以通过编辑分隔符模板更改分隔符为任意样式。RenderCurrentNodeAsLink 设置当前节点是否呈现为链接，取值为True或False。【示例5-1】新闻发布系统的文件结构如图5-3所示，创建这些页面，并为每个页面添加站点导航。 NewsList.aspx（新闻浏览） ShowNews.aspx（浏览显示） Search.aspx（新闻搜索）用户管理 MemberUserRegister.aspx（用户注册） Mem

8、berUserLogin.aspx（用户登录） Admin/default.aspx（后台管理）default.aspx（首页）图5-3新闻发布系统的文件结构实现步骤：（1）创建站点地图文件（Web.sitemap）。在“解决方案资源管理器”中鼠标右键单击站点chapter5，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项”对话框；在“模板”列表框中选择“站点地图”选项，单击“添加”按钮。（2）编写站点地图文件的代码如下：注意：站点地图文件名必须为Web.sitemap，且必须置于Web应用程序（站点）的根目录下。（3）添加站点地图中涉及到的窗体页。（4）在每个窗体页中添加SiteMa

9、pPath控件。打开要添加SiteMapPath控件的窗体页，这里打开“Admin/Default.aspx”。切换到“设计”视图，从左侧工具箱“导航”选项中拖出“SiteMapPath”控件即可。运行该页面即可看到SiteMapPath控件导航的效果了。（5）为SiteMapPath控件自动套用格式。在“设计”视图中鼠标右键单击SiteMapPath控件，在弹出的快捷菜单中选择“自动套用格式”命令，打开的“自动套用格式”对话框。如图5-4所示。在“选择方案”列表框中选择方案为“彩色型”，单击“确定”按钮。图5-4“自动套用格式”对话框（6）将SiteMapPath的分隔符设置为图片。在“设计

10、”视图中单击SiteMapPath控件右上角的小三角按钮，弹出“SiteMapPath任务”窗格。单击“编辑模板”命令，在“显示”下拉列表框中选择“PathSeparatorTemplate”选项，如图5-5所示。图5-5“SiteMapPath任务”窗格在PathSeparatorTemplate模板中拖入Image控件，设置ImageUrl=/images/PathSeparator.jpg属性值，PathSeparator.jpg是分隔符图片。该页面自动生成的源代码如下：运行Admin/Default.aspx页面，可以看到分隔符是图片时的运行效果。如图5-6所示。图5-6 SiteM

11、apPath控件应用示例注意：站点地图中必须有当前页的URL，否则该站点导航控件将不会显示。5.1.3使用TreeView控件使用TreeView控件可以生成用于显示分层数据的用户菜单界面，它与Windows资源管理器中的树非常类似。TreeView控件可以使用站点地图作为数据源，也可以自行编写简单的XML文件作为数据源。1采用站点地图作为TreeView控件的数据源【示例5-2】利用TreeView控件为新闻发布系统的首页创建目录导航页面。实现步骤：（1）打开新闻发布系统的首页“default.aspx”文件，将TreeView控件拖入页面。（2）设置数据源。单击TreeView控件右上角的

12、小三角按钮，弹出“TreeView任务”窗格。在“选择数据源”下拉列表框中选择“新建数据源”选项，打开“数据源配置向导”对话框，如图5-7所示。选择“站点地图”选项，并为数据源指定ID为：SiteMapDataSource1（默认值）。单击“确定”按钮。图5-7“数据源配置向导”对话框（3）设置自动套用格式。在“设计”视图中鼠标右键单击TreeView控件，在弹出的快捷菜单中选择“自动套用格式”命令；打开“自动套用格式”对话框，如图5-8所示。在“选择方案”列表框中选择方案为“箭头”。单击“确定”按钮。图5-8“自动套用格式”对话框运行default.aspx页面，运行结果如图5-9所示。图5

13、-9 TreeView控件应用示例2使用XML文件作为TreeView控件的数据源刚才我们使用了站点地图文件作为TreeView控件的数据源，但由于一般的树形导航不会把所有页面列出来。比如用户管理后台，可能只会列出几个管理员需要的功能页面入口。在这种情况下，就不能使用站点地图文件作为TreeView控件的数据源。现在我们编写一个管理员后台的导航系统，使用XML文件作为数据源来实现。【示例5-3】为新闻发布系统后台创建新闻管理目录导航页面，并说明XML文件作为数据源的使用方法。为方便管理，管理员后台的所有页面都在站点根目录下的Admin文件夹中，现在要在该文件夹中添加默认页Default.asp

14、x，在该页面设置TreeView导航。此处假设管理员后台有用户管理、新闻发布管理、新闻类别管理等页面。实现步骤：（1）创建XML文件。在“解决方案资源管理器”中鼠标右键单击站点chapter5，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项”对话框；在“模板”列表框中选择“XML文件”，在“名称”文本框中输入文件名，这里输入“Manager.xml”。单击“添加”按钮。这时在站点根目录下创建一个名为Manager.xml的文件，同时打开该文件；编写Manager.xml文件代码如下：（2）在“Admin文件夹”下创建名为“default.aspx”窗体页，并将TreeView控件拖入页

15、面。（3）设置数据源。单击TreeView控件右上角的小三角按钮，弹出“TreeView任务”窗格。在“选择数据源”下拉列表框中选择“新建数据源”选项，打开“数据源配置向导”对话框。选择“XML文件”选项，并为数据源指定ID为：XmlDataSource1（默认值）。单击“确定”按钮。打开“配置数据源”对话框，如图5-10所示。单击“浏览”按钮；在弹出的“选择XML文件”对话框中选定XML文件，这里选择“Manager.xml”，单击“确定”按钮。图5-10“配置数据源”对话框鼠标单击TreeView控件右上角的小三角按钮，在弹出的“TreeView任务”窗格中选择“编辑TreeNode数据绑

16、定”命令；打开“TreeView DataBindings编辑器”对话框，如图5-11所示。为siteMapNode节点设置NavigateUrlField属性值为url、TextField属性值为tilte，单击“确定”按钮。图5-11“TreeView DataBindings编辑器”对话框其中数据绑定属性说明如下：TextField：设置显示的文字所绑定的字段或元素；NavigateUrlField：设置链接对应的字段或元素值；（4）设置自动套用格式。在“设计”视图中鼠标右键单击TreeView控件，在弹出的快捷菜单中选择“自动套用格式”命令；打开“自动套用格式”对话框，在“选择方案”

17、列表框中选择方案为“FAQ”。单击“确定”按钮。运行该页面，运行结果如图5-12所示。图5-12 TreeView控件应用示例5.1.4使用Menu控件Menu控件提供静态和动态混合的菜单功能。静态部分是直接显示在页面上，动态部分是仅在需要的时候才显示。动态菜单和静态菜单结合，可以提供更多的选项，又不必担心占用页面的空间。【示例5-4】使用Menu控件制作一个运行效果如图5-13所示的树形菜单页面。图5-13 Menu控件应用示例实现步骤：（1）在chapter5站点中，新建一个名为eg5-4.aspx的页面文件，在该页面中添加一个Menu控件，设置该控件的Orientation属性为Hori

18、zontal（设置布局方式采用水平方式呈现）。（2）编辑在菜单中显示的项。单击Menu控件右上角的小三角按钮，弹出“Menu任务”窗格。选择“编辑菜单项”命令，打开“菜单项编辑器”对话框。如图5-14所示。图5-14“菜单项编辑器”对话框以下是几个属性设置的说明：NavigateUrl：菜单项被选中时定位到的URL。Target：链接的文件显示的位置。Text：菜单项的显示文本。单击左侧“添加根项”按钮，在右侧的属性设置中设置其Text属性为“首页”、NavigateUrl属性为“default.aspx”，用同样的方法添加“课程设置”项。选中“课程设置”项，单击“添加子项”按钮，为“课程设置

19、”项添加子项“课程定位”、“课程设计”、“课程建设规划”。用同样的方法添加其他项、子项。单击“确定”按钮。（3）设置自动套用格式。在“设计”视图中鼠标右键单击Menu控件，在弹出的快捷菜单中选择“自动套用格式”命令；打开“自动套用格式”对话框，如图5-15所示。在“选择方案”列表框中选择方案为“专业型”。单击“确定”按钮。图5-15“自动套用格式”对话框运行该页面，运行效果如图5-13所示。注意：Menu控件除了用此方法显示菜单项外，也可以像TreeView控件那样使用站点地图和XML文件作为数据源；此外，TreeView控件也可以使用编辑节点方法显示树形菜单。5.2使用母版页Web应用开发中

20、一个非常重要的环节就是站点风格的统一，在ASP.NET中提供了一种比较简单的方法保持风格的统一，那就是使用母版页。母版页是ASP.NET2.0新增的一个重用技术，母版页是一个以“.master”作为后缀名的文件，它可以把页面上的公用元素（如网站Logo、广告条、导航条等）整合到一个可以共享的通用页面上。母版页为应用程序的所有页面或者一组特定页面提供统一的页面布局和设计风格，有利于站点修改和维护，并且降低了应用程序开发和维护的成本。母版页有以下优点。（1）使用母版页可以集中处理页面的通用功能，以便可以只在一个位置上进行更新。（2）使用母版页可以方便地创建一组控件和代码，并将结果应用于一组页。例如

21、，可以在母版页上使用控件来创建一个应用于所有页的菜单。（3）通过控制内容占位符控件的呈现方式，母版页可以在细节上控制最终页面的布局。（4）母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页。5.2.1创建母版页【示例5-5】为新闻发布系统前台创建如图5-16所示的母版页。图5-16 母版页应用示例实现步骤：（1）在“解决方案资源管理器”中鼠标右键单击站点chapter5，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项”对话框。如图5-17所示。图5-17“添加新项”对话框选择“母版页”选项，母版页的扩展名为.master。这里命名为newsPage.master，单击“

22、添加”按钮。newsPage.master中自动生成的主要代码如下：其中，contentplaceholder为内容位置控件（内容占位控件），它是母版页的专用控件，是给内容页预留位置的。以上母版页只有一个内容位置控件且命名为contentplaceholder1。一个母版页至少需要一个contentplaceholder控件。（2）设计页面样式。准备新闻发布系统网站静态页面公共元素如样式表文件，页面头部的banner图片、页脚的foot图片以及网站美工设计；并使用HTML的DIV（层）+TABLE（表格）+CSS（样式表）格式进行页面布局；可将设计好的静态页面公共部分代码存成一个.html文

24、nbsp; | 教育新闻 | 生活新闻 |用户登录 Copyright© 2010-201X 宏博工作室：All Rights Reserved 如果您对我们的服务有任何意见或建议，请惠赐E-mail至：teach-ie联系电话：025-12345678 联系人：大浪淘沙CSS（样式表）文件style.css文件的参考代码如下：#containerwidth:1024px;padding:0px;margin:0px auto 0px auto;background-co

25、lor: #DAFF74;text-align: left;#contentfont-size: 12px;margin: 10px;padding: 2px;#navigationfont-size:12px;background-color:#9AB65F;padding:2px;height:24px;text-align: right;margin: 0px;color:#000000;#leftfloat: left;width:30%;font-size:14px;#rigthfloat: right;width:70%;#footerclear: both;text-align:

26、center;font-size: 12px;margin-top: 10px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 10px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;line-height: 20px;height: 80px;background-image: url(images/bottom1.jpg);a:link font-size: 12px;color: #000000;text-decoration: non

27、e;a:visited font-size: 12px;color: #000000;text-decoration: none;a:hover font-size: 12px;color: #0000FF;text-decoration: underline;5.2.2添加内容页母版页可以说是页面的框架，还需要有内容页支撑页面内容。每一个内容页需要对应母版页中的一个位置（contentplaceholder控件）。添加内容页有两种方式：一种是在母版页任意位置右键，点击添加内容页；一种是创建页面时，在生成.aspx页面时勾选“选择母版页”。【示例5-6】使用母版页创建新闻发布系统首页。实现步骤

28、：（1）在母版页任意位置单击鼠标右键，在弹出的快捷菜单中选择“添加内容页”，这时自动生成名为default.aspx页面文件，如图5-18所示。图5-18 default.aspx页面（2）在左侧内容页添加一个四行两列的表格，在该表格中添加站内搜索内容，右侧内容页输入“欢迎进行新闻发布系统首页！”。运行该页面，运行效果如图5-19所示。图5-19 内容页运行结果5.3综合应用实例母版页用于控制站点上页面的整体布局，可以控制多个页面的显示格式，导航控件常常也在多个页面中的相同位置出现，所以导航控件常和母版页结合使用。下面我们就使用母版页和导航控件来搭建新闻发布系统的后台页面布局。【示例5-7】创建如图5-20所示的母版页，页面的左侧是一个树形导航，内容部分上面有“面包屑”导航。图5-20新闻发布系统的后台页面布局实现步骤：（1）编写站点地图文件Web.sitemap。 siteMapNode url=admin/exit.aspx title=退出 description=

展开阅读全文