ASP.NET学习——导航条设计方案

2.4 导航条设计方案

一个Web站点，尤其是信息量大的大中型Web站点，应为用户提供站点导航。站点导航是每个网站必不可少的，它相当于城市公路的路标。通过导航条设计方案，可以使网站浏览者找到自己想要的内容。

2.4.1 树型导航条设计方案

树型导航条设计主要应用TreeView控件，TreeView控件对数据有着良好的支持，通过显示一个树状结构或菜单，让用户可以遍历访问站点中的不同页面。

1．方案分析

树型导航条主要应用的是Web服务器控件中的TreeView控件。对于一个导航文字很多，并且可以对导航内容进行分类的网站来说，可以将页面的导航文字以树形的形式显示，这样不仅可以有效地节约页面，而且也可以方便用户查看。应用TreeView控件增加了网站非常灵活性的交互功能。

在TreeView控件所具有的功能中有两点最为重要：

l 支持数据绑定。即允许通过数据绑定方式，使得控件节点与XML、表格、关系型数据等结构化数据建立紧密联系。

l 支持站点导航功能。即通过集成SiteMapDataSource控件，实现站点导航功能。

在应用TreeView控件实现树形导航时，首先对其组成要有一定了解。TreeView是由任意多个TreeNode对象组成，而每个TreeNode还可以包含任意多个子TreeNode对象。图2.27所示显示了TreeView控件节点类型。

图2.27 TreeView控件节点类型图

上图显示的TreeView控件只有一个根节点，事实上TreeView控件可以创建具有多个根节点的树形结构。

TreeView控件的基本功能可以总结为：将有序的层次数据，显示为树形结构。其主要应用可分为基本应用和较复杂应用。在较复杂应用中，TreeView控件将与层次性数据源控件如SiteMapDataSource和XMLDataSoure控件一起应用来实现站点导航。

2．实施过程

方案实施一 TreeView控件的基本应用

实例位置：光盘/mr/02/2.4/2.4.1/01

在网站开发过程中，TreeView控件的基本应用很常见。如在网上企业办公自动化管理系统中可应用TreeView控件实现简单的页面导航。

在TreeView控件的树形结构中，包括一个根节点和5个子节点，控件被设置为类似Windows帮助文档的外观样式，当用户点击“管理系统功能区“内的”公司管理“选项时将会导航到一个指定URL的页面。

此方案的实施主要涉及两大步骤：一是为TreeView控件添加自定义节点，二是设置控件外观属性。实例运行效果如图2.28所示。

图2.28应用TreeView控件实现导航

具体实施过程：

（1）新建一个网站，将其命名为07，默认主页名为Default.aspx。

（2）在页面Default.aspx中添加一个TreeView控件用于显示导航信息，这时将会出现一个“TreeView任务”对话框，如图2.29所示。

图2.29 设置控件属性

首先对TreeView控件定义节点。单击“编辑节点…”选项，将会弹出如图2.30所示的对话框。该对话框用于定义TreeView控件的节点和相关属性。对话框左边为节点命令按钮和控件预览窗口；对话框右列是当前节点相关属性。如此图所示，当前选中节点名为“管理系统功能区”的根节点，可对其Text、Value和NavigateUrl属性进行设置。其它节点类似。

图2.30手动添加节点

（3）设置TreeView控件外观属性。可应用两种方法对其进行外观设置。一种方法是通过Visual Studio 2005中的属性窗口设置其外观属性；另一种方法就是使用TreeView控件的自动格式化方法。本实例使用最后一种方法，该方法简单快捷。

单击“TreeView任务”对话框中的“自动套用格式”选项，将会弹出如图2.31所示的对话框。该对话框用于设置TreeView控件的外观样式。左列列出的是Visual Studio2005内置的多种样外观样式名称，右列是对应外观样式的预览窗口。如当在左列窗口选择“收件箱”样式时，此时右列窗口中将显示其选择的样式效果。

图2.31设置控件外观属性

从以上操作过程可看出，Visual Studio 2005对TreeView控件的支持是比较完善的。另外，设置TreeView控件的外观也可以应用ASP.NET2.0的一种新技术——主题来设置。

（4）TreeView控件的基本应用很简单，甚至可以不编写一行代码就可完成。但作为开发人员，对TreeView控件的源代码一定要有一个了解。如本实例中TreeView控件的节点定义的源代码如下：

<Nodes>

<asp:TreeNode Value="管理系统功能区" Text="管理系统功能区" SelectAction="None">

<asp:TreeNode Value="公司管理" NavigateUrl="~/User/UserPage.aspx" Text="公司管理"></asp:TreeNode>

<asp:TreeNode Value="业务管理" NavigateUrl="~/User/UserPage.aspx" Text="业务管理"></asp:TreeNode>

<asp:TreeNode Value="公司产品" NavigateUrl="~/User/UserPage.aspx" Text="公司产品"></asp:TreeNode>

<asp:TreeNode Value="文稿赏析" NavigateUrl="~/User/UserPage.aspx" Text="文稿赏析"></asp:TreeNode>

<asp:TreeNode NavigateUrl="~/User/UserPage.aspx" Text="资源管理" Value="资源管理"></asp:TreeNode>

</asp:TreeNode>

</Nodes>

方案实施二 TreeView控件的复杂应用

实例位置：光盘/mr/02/2.4/2.4.1/02

在开发一些较为复杂的网站时，页面导航信息是相当重要的，它就像一个路标指引方向。下面以我公司在开发一个名为“明日度假村”的网站项目为例，由于此项目涉及很多页面信息，所以应用了TreeView控件对数据源控件良好的绑定支持技术。

在开发此项目的站点导航信息时，主要通过TreeView控件分别与SiteMapDataSource控件和XMLDataSource控件进行数据绑定来实现导航功能。

在绑定过程中主要通过设置TreeView控件的DataSourceID属性值为数据源控件的ID属性值，完成数据绑定任务。TreeView控件绑定数据源控件实质就是绑定到XML文件。

知识扩展：“可扩展标记语言”（XML）提供一种描述结构化数据的方法。其自描述性使其非常适用于不同应用间的数据交换，而且这种交换不以预先定义的一组数据结构为前提，因此具备很强的开放性。由于XML是可扩展标记语言，其本身有一套定义语义标记的规则，而不像HTML那样定义了许多标记。在定义XML时必须做到格式良好且有效，不要只有定义了标记而在应用程序中没有使用。

在此方案的实施过程中应用了两个XML文件，分别为Web.sitemap文件和普通XML文件。这两个文件将分别应用到SiteMapDataSource和XMLDataSource两个数据源控件中，它们最终实现的导航功能相同。

Web.sitemap文件文件是站点导航信息的数据存储，其数据采用普通XML格式，将站点逻辑结构层次化的列出。

知识扩展：站点地图。它是一种扩展名.sitemap的标准XML文件，其中包括了站点结构信息，例如，站点分为多少个模块，每个模块中包含多少个子模块，每个模块的入口页面URL地址等。默认情况下，站点地图文件件被命名为Web.sitemap，且此文件必须存储在应用程序根目录下。

方案运行效果如图2.32所示。

图2.32 TreeView控件的复杂应用

具体实施过程：

（1）首先，创建一个Web.sitemap文件，具体步骤如下。

右键单击解决方案资源管理器中的Web站点，并选择“添加新项…“命令，在弹出的对话框中选择“站点地图”图标，并将其命名为Web.sitemap，如图2.33所示，然后单击【添加】按钮即可。此时Visual Studio2005将在应用程序根目录下自动添加一个Web.sitemap文件。

图2.33添加站点地图

本方案所使用的Web.sitemap文件源代码如下：

<?xml version="1.0" encoding="utf-8" ?>

</siteMapNode>

</siteMapNode>

</siteMapNode>

</siteMap>

由以上代码可知，Web.sitemap文件内容严格遵循XML文件格式。该文件包括一个根节点sitMap，在根节点下包括多个siteMapNode子节点，其中设置了title和url属性。

（2）定义完Web.sitemap文件后，创建Web窗体，并对TreeView控件属性进行设置。在应用程序中添加一个名为Default.aspx页，在此页的窗体中，从工具箱中分别拖放一个TreeView控件和一个SiteMapDataSource控件。

说明：TreeView控件只有得到SiteMapDataSource控件的支持，才能正确显示存储在Web.sitemap文件中的数据。这是因为，SiteMapDataSource控件默认处理Web.sitemap文件，如果应用程序中包含Web.sitemap文件，那么就不需要进行相关设置工作了。

如图2.34所示，接下来对TreeView控件的操作只需在“TreeView任务”的对话框中选择本实例的数据源SiteMapDataSource1即可。

图2.34 选择数据源

通过以上设置，TreeView控件就会立即加载Web.sitemap文件中的数据，并将结果显示出来。此时，TreeView控件的DataSourceID属性值就等于SiteMapDataSource控件的ID属性值了，从而实现了TreeView控件与SiteMapDataSource控件之间的数据绑定关系。通过以上操作，读者可以发现除编写Web.sitemap文件外其它操作几乎就是无代码操作。

（3）在网站导航开发过程中，某些结构化信息一般都要存储在普通的XML文件中，TreeView控件同样了也可以对其绑定，但处理过程稍微复杂些。以下重点介绍TreeView控件绑定普通XML文件的实现方法。

创建XML文件与创建Web.sitemap文件步骤相似，只是在“添加新项…”对话框中选择“XML文件”图标即可。本实例创建的XML文件名称为Computer.xml，该文件源代码如下：

<?xml version="1.0" encoding="utf-8"?>

</Item>

</Option>

</Item>

</Option>

</Item>

</Hardware>

以上列出的是一个简单的XML文件，其中包括了一个根节点，一些子节点和相关属性。

（4）建立完名为Computer.xml的XML文件后，在应用程序中添加一个名为TreeViewBindXML.aspx页，在此页的窗体中，从工具箱中分别拖放一个TreeView控件和一个XMLDataSource控件。

首先配置XMLDataSource数据源控件。如图2.35所示XMLDataSource控件的任务栏中包括两个常用任务：配置数据源和刷新架构。单击“配置数据源”选项，将会弹出“配置数据源”窗口，此实例只需配置XML文件路径，如图2.36所示。结束以上配置后，单击【确定】按钮。

图2.35 XmlDataSource控件及其常用任务列表

图2.36 配置数据源窗口

其次，配置TreeView控件的相关属性。主要包括两个方面内容：一是选择数据源，二是设置节点数据绑定。在TreeView控件常用任务列表中选择“数据源数据”选项，如图2.37所示，即可完成与XMLDataSource控件的数据绑定。

图2.37 选择数据源

另外，设置节点数据绑定可单击TreeView控件常用任务列表中的“编辑TreeNode数据绑定”选项，此时可在弹出的对话框中对TreeView控件的节点进行动态数据绑定配置，如图2.38所示。TreeView控件的数据绑定部分包括FormatString、ImageToolTipField、ImageUrlField、TextField、ToolTipField和ValueField属性。这些都是TreeView控件的节点属性，其属性值配置为XML文件中的属性。这样TreeView控件的属性就与XML文件发生了关联关系。例如，图中Option项的TextField属性可通过下拉框来选择其属性值Choise，而此属性值Choise是XML文件中的一个子节点。

图2.38 配置TreeView控件的数据绑定

说明：图中左列上部是可用数据绑定选项，显示的内容为Computer.xml文件中可供数据绑定的选项。可用数据绑定的选项为树形结构，该结构表现出与XML文件一样的嵌套结构；左列下部为是选中数据绑定项，此时图的右列将会显示出详细的属性列表信息，XML文件中的属性值将配置为TreeView控件中的节点属性值。

完成以上配置工作后，单击【确定】按钮即可完成TreeView控件与普通XML文件的集成。

3．补充说明

站点地图是表示一个Web站点中存在的所有页面和目录的图，它是一种层次性信息，可以用作一个层次性数据源控件（如SiteMapDataSource）的输入。SiteMapDataSource控件包含来自站点地图的导航数据，该数据中包括有关网站中的页的信息，如URL、标题、说明和导航层次结构中的位置等。若将导航数据存储在一个路径下，则可以更方便地在网站的导航菜单中添加和删除项。

XmlDataSource控件是一种特殊的数据源控件，同时支持表格和层次性数据视图。XML数据的表格式视图只是层次结构的，给定层上的一个节点列表。同时XmlDataSource控件有其特殊之处，它是惟一一个同时实现了IdataSource和IhierachicalDataSource接口的内置数据源控件，虽然有两个接口，但是该控件没有进一步实现Select方法。同时XmlDataSource控件不适合于使用read/write XML数据存储的应用程序，因为它不支持Delete，Insert和Update等方法。

2.4.2 水平导航条设计方案

水平导航条控件主要应用SitMapPath控件，SitMapPath控件用于显示一组文本或图像超级链接，以便在使用最少页面空间的同时更加轻松地定位网站。

1．方案分析

在开发一个大型的网站时，开发人页可能因为站点内容的不断增加以及在站点内来回切换网页，使得管理所有的链接变得比较困难。应用ASP.NET Web服务器控件中的SitMapPath站点导航控件可很好地解决这个问题，此站点导航控件可使所有页面的链接都存储在一个中央位置，并实现站点的水平导航。另外，通过调整相关属性，可以自定义SitMapPath控件的外观以及其它内容，从而适应站点的总体设计风格。

SitMapPath控件及其常用任务列表如图2.39所示。

图2.39 SitMapPath控件及其常用任务列表

SitMapPath控件的每个节点都可由SitMapNodeItem对象表示，节点通常显示为静态文本或者超级链接。SitMapPath控件有模板定义方法，通过模板定义，能够在很大程度上提高SitMapPath控件的灵活性。

在SitMapPath控件中，共包含4种模板，如图2.40所示。这些模板能够对SitMapPath控件的当前节点、普通节点、节点分隔符和根节点自行定义。需要注意的是，如果为节点设置了自定义模板，那么模板将会自动覆盖为节点定义的任何属性。

图2.40 SitMapPath控件4种模板

与其他普通服务器控件一样，SitMapPath控件的使用非常简单。当SitMapPath控件放置到Web窗体后，该控件将根据默认站点地图文件（Web.sitemap文件）中的数据自动显示导航信息，所以在应用程序中必须定义好Web.sitemap文件的内容。

2．实施过程

方案实施一水平导航控件SitMapPath的基本应用

实例位置：光盘/mr/02/2.4/2.4.2/01

在本实例中主要应用SitMapPath站点导航控件来实现一个供求网站导航，为站点创建一个一致的、容易管理的导航条。首先创建一个TreeView控件，其节点分布如图2.41所示。这些节点中的“供求网站导航“节点将对应SitMapPath控件中的根节点。

图2.41 TreeView控件的应用

单击上图中的“楼房改造业”选项，将会弹出运行效果可如图2.42所示的页面，在此页面中应用了SitMapPath控件实现供求网站的导航。

水平导航条

图2.42 SitMapPath控件的应用

TreeView控件中”农副食品加工业“和”金融业“节点对应SitMapPath控件中的父节点；而SitMapPath控件中的当前节点对应的是”食品制造业“、“银行业”等TreeView控件中的叶节点。

具体实施过程：

（1）新建一个网站，命名为08，将其主页命名为TreeViewPage.aspx。

（2）在该网站的解决方案下，右键单击网站名称，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项…”对话框，创建一个名为TreeViewPage.aspx页。

在该页面中添加一个TreeView控件，用来显示所有供求网站的导航条；再添加一个SiteMapDataSource控件，为TreeView控件提供绑定的站点地图数据。

（3）创建5个新Web页，并在每个页中添加一个SiteMapPath控件作为该页的导航条。

（5）主要程序代码。

SitMapPath控件直接使用网站的站点地图数据。本实例中创建的站点地图名为Web.sitemsp的XML文件，此文件用来描述网站结构。其主要代码如下：

<?xml version="1.0" encoding="utf-8" ?>

</siteMapNode>

</siteMapNode>

</siteMap>

注意：上述XML文件中列出的URL必须存在且不能重复，否则用户的Web应用程序将失败。

为了方便用户访问站点中的不同页面，创建了显示树型控件页TreeViewPage.aspx，该页实现的主要功能是将SiteMapDataSource控件的ID属性赋给TreeView控件的DataSourceID属性。主要代码如下：

<asp:TreeView ID="TreeView1" runat="server" Width =100% Height =100% DataSourceID="SiteMapDataSource1" ImageSet="WindowsHelp" >

方案实施二水平导航控件SitMapPath的自定义模板的应用

实例位置：光盘/mr/02/2.4/2.4.2/02

本实例主要应用SitMapPath控件自定义模板方法，以应用程序中创建的Web.sitemsp文件为数据基础来创建一个包含位置信息的导航条。

实例运行效果如图2.43所示。

图2.43 SitMapPath控件自定义模板方法

具体实施过程：

（1）新建一个网站，命名为09。默认主页名为usersitemaps.aspx。

（2）在该网站的解决方案下，右键单击网站名称，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项…”对话框，创建一个名为 usersitemaps.aspx页，并将此页设置为主页面。

将SitMapPath控件拖放到这个主页面中，此时会弹出如图2.44所示的控件和任务列表。该任务列表中包括两个任务：自动套用格式和编辑模板。单击“编辑模板”将会出现如图2.45所示的任务列表。此任务列表中包含了SitMapPath控件的4个模板类型。

图2.44 设置SitMapPath控件模板1

图2.45 设置SitMapPath控件模板2

SitMapPath控件的4种自定义模板定义如下所示（SitMapPath控件具体的编码方法）。

<asp:SiteMapPath ID="SiteMapPath1" runat="server" >

……

</RootNodeTemplate>

……

</PathSeparatorTemplate>

……

</CurrentNodeTemplate>

……

</NodeTemplate>

</asp:SiteMapPath>

（3）在根节点模板和节点分隔符模板中分别用图片代替SitMapPath控件的根节点和分隔符。如图2.46设置的RootNodeTemplate模板的具体内容为一幅图片，同样方法设置PathSeparator Template的内容。

说明：在自定义模板中，可以根据设计需要，在模板中放置Image、Lable等Web控件。

3．补充说明

在使用自定义模板过程中，需要注意以下几点。

l 当根节点应用CurrentNodeTemplate后，将自动覆盖当前节点的文本以及样式，当前节点是根节点除外。

l 当节点应用NodeTemplate后，将自动覆盖所有节点的文本以及样式，但对于设置了CurrentNodeTemplate或RootNodeTemplate的当前节点和根节点除外。

l 如果SiteMapPath控件中设置了PathSeparatorTemplate，那么属性PathSeparator和PathSeparatorStyle的设置内容都将被忽略。

l 当节点应用RootNodeTemplate后，将自动覆盖根节点的文本以及样式。

2.4.3 下拉菜单导航条设计方案

网站中的导航条在整个网站中充当着网站路标的作用。如果一个网站的导航条太长，将会影响网站页面的美观。利用ASP.NET服务器控件Menu可实现下拉菜单导航，使网站的导航条位置更加合理。

1．方案分析

为了更好地实现下拉菜单导航这种优化的设计方案，ASP.NET2.0提供了一个功能强大的服务器控件——Menu，它与Windows应用程序的命令菜单极其相似。Menu控件的功能简介如下。

Menu控件最常用的功能是有着良好的数据绑定功能，开发人员可以将此控件与SiteMapDataSource、XMLDataSource等数据源控件集成，使之成为站点导航菜单。实现这类数据绑定的关键是，将Menu控件的DataSourceID属性值设置为数据源控件的ID值即可。另外，应用此控件还可以实现自定义外观、数据绑定和事件处理等功能。

如图2.46所示为Menu控件及其常用任务列表。

图2.46 Menu控件及其常用任务列表

2．实施过程

本节实施过程中创建的两个应用实例都是Menu控件最为常用的数据绑定应用，即利用数据源控件的支持，通过Menu控件绑定XML文件。绑定的XML文件主要为Web.sitemap文件和普通的XML文件。

方案实施一 Menu控件绑定SiteMap文件

实例位置：光盘/mr/02/2.4/2.4.3/01

本实例将演示Menu控件绑定到SiteMap文件的实现方法，即将Menu控件与SiteMapDataSource数据源控件集成，使之成为一个MRBBS网站的站点导航菜单。

实例运行效果如图2.47所示。

图2.47 使用Menu控件制作的导航条

具体实施过程：

（1）新建一个网站，命名为10，将其主页命名为index.aspx。

（3）在该网站的解决方案下，右键单击网站名称，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项…”对话框，选择“XML文件”图标，创建一个名为Web.sitemap的XML文件，用来描述网站的结构。其源代码如下：

<?xml version="1.0" encoding="utf-8" ?>

</siteMapNode>

</siteMapNode>

</siteMap>

根据前面TreeView控件和SiteMapPath控件与Web.sitemap文件的绑定应用，可知此Web.sitemap文件中有且仅有的一个根节点“MRBBS导航条”应该显示在菜单项中，运行效果如图2.48所示。

图2.48 将Menu控件绑定到Web.sitemap文件

注意：这里应用到了一个处理有关隐藏SiteMap文件或普通XML文件根节点的方法。在本实例中通过设置SiteMapDataSource数据源控件的ShowStartingNode属性值为”False”，使得Menu控件隐藏根节点。

方案实施二 Menu控件与XMLDataSource数据源控件集成

实例位置：光盘/mr/02/2.4/2.4.3/02

本实例将演示Menu控件绑定普通XML文件的实现方法。即将Menu控件与XMLDataSource数据源控件集成，使之成为站点导航菜单。实例运行效果如图2.49所示。

图2.49 Menu控件制作的导航条

具体实施过程：

（1）新建一个网站，命名为11，将其主页命名为DataBindWithXML.aspx。

（2）在该网站的解决方案下，右键单击网站名称，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项…”对话框，选择“XML文件”图标，创建一个名为Data.xml的XML文件，用来描述网站的结构。其源代码如下：

<?xml version="1.0" encoding="utf-8"?>

</Item>

</Option>

</Item>

</System>

说明：在以上这个XML文件中，有且仅有一个根节点System，另外还有其他节点和属性定义。其中Label属性值表示菜单项名称；Href属性值表示为节点超级链接地址。

（3）在该网站的解决方案下，右键单击网站名称，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项…”对话框，新建一个Web窗体，并将其命名为DataBindWithXML.aspx。向这个Web窗体分别拖放一个Menu控件和一个XMLDataSource数据源控件。

首先配置XMLDataSource数据源控件。其配置过程可参见第2.4.21节树型导航条设计方案中关于此数据源控件的配置。与之不同的是本实例除了配置XML文件路径外，还要配置XPath表达式。此处表达式为“/*/*”，表示查询范围是根节点下所有子节点，但不包括根节点。完成以上配置，单击【确定】按钮即可完成Menu控件与XMLDataSource控件的绑定。

接下来要完成Menu控件数据绑定的配置工作。单击Menu控件常用任务列表中的“编辑MenuItemDataBindings…”项，将会弹出如图2.50所示的对话框。图中左列上部显示的是Menu控件的根节点“Item”及其包含的一些子节点。左列下部为选中数据绑定选项，并在图右列显示的属性列表中配置其相关属性。本实例中需要为节点配置显示文字绑定和超级链接地址绑定，这主要涉及NavigateUrlFiled和TextFiled属性。

图2.50 配置Menu控件的数据绑定

单击【确定】按钮完成以上配置工作后，可为Menu控件配置具体的属性。如本实例中主要通过把Orientation属性值设置为Horizontal来使Menu控件显示为水平菜单。

3．补充说明

Menu控件具有两种显示模式：静态模式和动态模式。

静态模式是指菜单选项始终静态显示。默认情况下，位于Menu控件根部的根菜单就是一种典型的静态菜单，通过设置属性，可以控制静态菜单的显示级数；动态模式是指当用户鼠标位于父菜单项上方时，在水平或垂直方向将会自动显示子菜单。子菜单项在显示短暂时间后，将自动消失。通过设置属性值可以调整子菜单的延迟时间