NET 站点导航Word格式.docx

1、包含了网站的页面数据，以及它们之间的层次关系，也可以理解为网站的逻辑结构。 导航控件（Navigation Controls）：以菜单、树、列表等形式组织的页面链接，链接的内容来自于站点地图中包含的数据；ASP.NET提供了3个非常好用的导航控件。菜单（Menu）。树视图（TreeView）。地图路径（SiteMapPath）。 站点地图提供器（Site Map Providers）。提供器是一个中间桥梁，把站点地图数据传递给导航控件。 可编程控件（Programmatic Controls）。通过编程的方式，更加灵活的用代码实现导航。16.1.2 从网站到导航控件下面将总体看一下从网站到导航

2、控件的整体流程。利用ASP.NET导航系统实现站点导航的过程，可以分为以下几个步骤，如图16.3所示。图16.3 ASP.NET中的导航系统（1）网站外存地图地图刻画了网站的逻辑结构，可以用XML文件、数据库，或者ASP.NET默认的Web.sitemap文件进行存储；（2）外存地图地图提供器可以使用默认的读取XML文件的提供器，也可以使用其他的提供器；（3）地图提供器SiteMap内存对象SiteMap是内存中的网站地图；（4）SiteMap内存对象导航控件利用导航控件，把SiteMap对象中的地图显示出来，常用的控件包括SiteMapPath、TreeView，以及Menu。16.3 导航

3、控件上一节介绍了内存中的地图对象SiteMap，下面来看如何利用导航控件将地图展现出来。常用的导航控件包括： 面包屑：SiteMapPath。 树视图：TreeView。 菜单：Menu。16.3.1 使用SiteMapPath导航【本节参考示例代码：示例代码C16SiteMapPath】面包屑（SiteMapPath）这个导航控件显示一条路径，这条路径显示了从网站的首页到当前页面的层次结构，一个典型的示例如图16.8所示。图16.8 eShop示例中的SiteMapPath在格林童话汉泽尔和格雷特尔中，当汉泽尔和格雷特尔穿过黑暗的森林时，他们在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助

4、他们找到回家的路。使用SiteMapPath好处有很多，例如再eShop中，当用户发现商品不够满意时，就可以通过SiteMapPath快速回到上一层商品目录，或直接进入上层产品目录寻找其他的类似产品。用“面包屑”的方式呈现浏览用户走过的路径，可以轻松完成这些功能。SiteMapPath控件从SiteMap类中获取站点的地图信息，并用超级链接列表的形式显示在页面上，常用属性如图16.9所示。图16.9 SiteMapPath常用属性一览属性说明如表16.4所示。表16.4 SiteMapPath常用属性属性/方法说明 ParentLevelsDisplayed获取或设置控件显示的相对于当前显示节

5、点的父节点级别数；默认值为-1，指示对控件显示的父级别数没有限制 PathDirection获取或设置导航路径节点的呈现顺序 PathSeparator获取或设置一个字符串，该字符串在呈现的导航路径中分隔 Provider获取或设置与Web服务器控件关联的SiteMapProvider；如果没有显式设置提供器，将使用默认的站点地图提供器 RenderCurrentNodeAsLink指示是否将表示当前显示页的站点导航节点呈现为超链接 SiteMapProvider获取或设置用于呈现站点导航控件的SiteMapProvider的名称下面，仍以eShop为例，实现如图16.8所示的导航。1新建示例

6、新建网站SiteMapPath，站点逻辑结构同【16.2.2】示例相同，请参考图16.2。2添加Web.sitemap文件请参考【16.2.4】节示例第2步。3在母版页添加SiteMapPath为了保证网站的每个页面上都可以导航，面包屑控件常常添加在母版页中。有两种方式向母版页中添加一个面包屑控件。 拖放方式打开母版页的设计视图，然后从工具窗口的“导航”面板中，拖放“”到母版页中，然后在面包屑控件的智能标记中选择“自动套用格式”，在弹出的“自动套用格式”对话框中，可以选择常用的格式，如图16.10所示。图16.10 自动套用SiteMapPath格式选择某一种格式，然后单击“确定”按钮，即可在

7、母版页中添加一个SiteMapPath控件，以彩色型为例，拖放后母版页将自动添加如下代码。代码16-7 彩色格式的SiteMapPath控件代码：MasterPage.master1. asp:SiteMapPath ID=SiteMapPath1 runat=server Font-Names=Verdana 2. PathSeparator= : 3. 4. CurrentNodeStyle ForeColor=#3333335. NodeStyle Font-Bold=6. RootNodeStyle Font-Bold=#FF80007. 代码方式在页面的代码视图中，通过直接输入如代码

8、16-7所示的代码，也可以向页面中添加一个SiteMapPath代码。4首页跳转为了显示面包屑的导航功能，在站点首页Default.aspx的页面加载事件中加入跳转语句，使页面跳转到“古代文学”页面。代码16-8 系统首页跳转：Default.aspx.cs1. / 2. / 页面加载事件：跳转到“古代文学”3. / 4. protected void Page_Load（object sender, EventArgs e）5. 6. Response.Redirect（AncientLiterature.aspx）;7. 5编译执行按CtrlF5执行程序，结果如图16.8所示。6示例小结本

9、例中，没有给页面上添加的SiteMapPath控件指定站点地图，即使用默认的SiteMap对象，读取用Web.sitemap文件描述的站点逻辑结构。这是最简单、最常用的方式，不用写一句代码便可以轻松实现。在【16.4.1】节中，将对如何使用多个地图文件创建面包屑做更深一步的探讨。16.3.2 使用TreeView导航树视图（TreeView）是一个层次结构的超链集合，组织了站点所有页面，典型的TreeView示例如图16.11所示。图16.11 eShop示例中的TreeView同SiteMapPath不同，TreeView无法直接显示SiteMap对象中的地图，而必须通过另外一个中间对象Si

10、teMapDataSource才可以。即SiteMapDataSource从SiteMap对象中取得网站地图，然后作为TreeView的数据源，如图16.12所示。图16.12 地图数据源是SiteMap和TreeView、Menu之间的桥梁TreeView的常用成员如图16.13所示。图16.13 SiteMapPath常用属性和事件一览常用成员说明如表16.5所示。表16.5 SiteMapPath常用成员 AutoGenerateDataBindings获取或设置一个值，指示TreeView 控件是否自动生成树节点绑定 CollapseImageToolTip获取或设置可折叠节点的指示符

11、所显示图像的工具提示 DataSourceID获取或设置数据源对象ID SelectedNode获取表示TreeView 控件中选定节点对象 SelectedNodeChanged当选择TreeView 控件中的节点时发生 TreeNodeCollapsed当折叠TreeView 控件中的节点时发生 TreeNodeExpanded当扩展TreeView 控件中的节点时发生同SiteMapPath类似的是，默认情况下新建一个SiteMapDataSource对象，它将使用默认的SiteMap对象，读取用Web.sitemap文件描述的站点逻辑结构。下面的例子说明了这个特性。新建网站TreeVi

12、ew，站点逻辑结构同【16.2.2】示例相同，请参考如图16.2所示。3在母版页添加TreeView同SiteMapPath类似，TreeView也常常添加在母版页中。有两种方式向母版页中添加一个面包屑控件：”到母版页中，然后在面包屑控件的智能标记中选择“自动套用格式”命令，在弹出的“自动套用格式”对话框中，可以选择常用的格式，如图16.14所示。选择某一种格式，然后单击“确定”按钮。继续单击智能标记中的“选择数据源”下拉框，选择“新建数据源”窗口，如图16.15所示。图16.14 自动套用TreeView格式 图16.15 为TreeView新建数据源从图16.15中可以看出，有两种方式建立

13、数据源。基于XML文件：从一个XML文件中，获取站点地图数据。基于站点地图：从站点地图SiteMap对象中，获取站点地图数据。此处，采用第二种方式，即选择“站点地图”项，并指定数据源ID为默认的“SiteMapDataSource1”，然后单击“确定”按钮，即可。查看母版页的代码视图，将看到如下的TreeView实现代码。代码16-9 FAQ格式的TreeView控件代码：TreeView ID=TreeView1DataSourceID=SiteMapDataSource1 ImageSet=Faq2. SiteMapDataSource ID=在页面的代码视图中，通过直接输入如代码16-9

14、所示的代码，也可以向页面中添加一个TreeView代码。4编译执行按CtrlF5执行程序，结果如图16.11所示。5示例小结本例中，没有给TreeView指定XML文件格式的数据源，而是使用默认的SiteMap对象，读取用Web.sitemap文件描述的站点逻辑结构。同面包屑一样，这是最简单、最常用的方式，开发者不用写一句代码便可以轻松实现。在【16.4.3】节中，将对如何更加灵活的使用XML文件创建TreeView做更深一步的探讨。16.3.3 使用Menu导航示例代码C16Menu】同树视图类似，菜单（Menu）也是一个层次结构的超链集合，也是最常用的控件之一。典型的Menu示例如图16.

15、16所示。图16.16 eShop示例中的Menu同TreeView类似，Menu也需要SiteMapDataSource数据源提供数据，此处不在赘述。Menu其常用的属性和方法一览如图16.17所示。图16.17 SiteMapPath常用属性和事件一览常用成员说明如表14.6所示。表14.6 SiteMapPath常用成员 DisappearAfter获取或设置鼠标指针不再置于菜单上后显示动态菜单的持续时间 Items获取 System.Web.UI.WebControls.MenuItemCollection 对象，该对象包含 System.Web.UI.WebControls.Menu

16、 控件中的所有菜单项 MaximumDynamicDisplayLevels获取或设置动态菜单的菜单呈现级别数 MenuItemClick在单击 System.Web.UI.WebControls.Menu 控件中的菜单项时发生下面的示例实现图16.16所示的站点菜单。新建网站Menu，站点逻辑结构同【16.2.2】示例相同，请参考图16.2。3在母版页添加Menu同SiteMapPath类似，Menu也常常添加在母版页中。有两种方式向母版页中添加一个菜单控件：”到母版页中，然后在面包屑控件的智能标记中选择“自动套用格式”命令，在弹出的“自动套用格式”对话框中，可以选择常用的格式，如图16.1

17、8所示。图16.18 自动套用TreeView格式继续单击智能标记中的“选择数据源”下拉框，选择“新建数据源”窗口，同TreeView相同，Menu也有两种数据源。本例中，同样选择基于站点地图的数据源，并指定数据源ID为默认的“SiteMapDataSource1”，然后单击“确定”按钮。查看母版页的代码视图，将看到如下的Menu实现代码。代码16-10 彩色格式的Menu控件代码：Menu ID=Menu1 DataSourceID=2. DynamicHorizontalOffset=2StaticSubMenuIndent=10pxStaticMenuItemStyle Horizont

18、alPadding=2pxDynamicHoverStyle BackColor=WhiteDynamicMenuStyle BackColor=#FFFBD6StaticSelectedStyle BackColor=#FFCC66DynamicSelectedStyle BackColor=8. DynamicMenuItemStyle HorizontalPadding=9. StaticHoverStyle BackColor=10. 11. 在页面的代码视图中，通过直接输入如代码16-10所示的代码，也可以向页面中添加一个Menu代码。按CtrlF5执行程序，结果如图16.18所示。

19、同TreeView类似，本例中也没有给Menu指定XML文件格式的数据源，而是使用默认的SiteMap对象。在【16.4.4】节中，将对如何更加灵活的使用XML文件创建Menu做更深一步的探讨。温故知新 完成本章的学习后，读者需要回到以下问题：1ASP.NET 2.0 导航系统中包含哪些元素？从网站到导航控件的流程是怎样的？2什么是站点地图SiteMap，它和SiteMapNode对象、SiteMapProvider对象有什么联系？3如何利用默认的Map.sitemap文件，获取SiteMap？4能够使用默认的方法，读取Map.sitemap文件，并用SiteMapPath、TreeView，以及Menu导航控件，实现网站的导航？5如何为网站配置多个SiteMapProvider？6如何利用XML文件，实现TreeView和Menu控件？7扩展学习：利用数据库存储网站地图，并用TreeView和Menu控件实现导航。 在下一章，读者将了解：1利用样式表CSS指定HTML元素、HTML服务器控件，以及标准控件的格式。2利用VS2005图形化界面创建样式表的技术。3ASP.NET 2.0 主题和外观的概念，以及如何建立和使用它们。