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

本文详细介绍了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时必须做到格式良好且有效,不要只有定义了

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值