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

最新推荐文章于 2021-03-10 20:55:38 发布

原创

最新推荐文章于 2021-03-10 20:55:38 发布 · 5.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #menu #xml #url #任务 #encoding

本文详细介绍了ASP.NET中三种类型的导航条设计方案：树型、水平和下拉菜单。通过TreeView、SiteMapPath和Menu控件，结合XML和Web.sitemap文件，实现动态导航条。文章探讨了每种方案的分析、实施过程和补充说明，提供了一种高效组织网站内容的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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时必须做到格式良好且有效，不要只有定义了