树样式动态导航菜单

分享于 

7分钟阅读

Web开发

  繁體

介绍

树式导航菜单是任何网站应用程序最常见的要求之一。 这里提供了一个 xml/xsl驱动的TreeMenu控件,它为 static ( 基于 static的网页) 和动态( 数据驱动) 应用程序提供导航菜单。

背景

ASP.NET 提供了许多服务器控件。 但是它缺少一个树形菜单控件。 在. NET 中为 Windows 应用程序提供树视图控件,但对于Web应用程序则不提供。 许多应用程序使用for提供的IE web controls,但它有它的局限性,并且不是很好的选择。 我创建了基于 xml/xsl的菜单控件,它为 static 和动态web应用程序提供了解决方案。

我已经用 2种典型的网络应用程序。

基于 static 内容的应用程序

static 应用程序包含更多的static html页面,它的内容不经常变化,但页面之间的页面和链接的数量却不太。 所有这些内容分为不同的类别,节和子部分。 典型的示例是MSDN站点或者任何有大量html文章的帮助应用程序。 你可以在MSDN的左框中看到一个树式菜单。

基于Dyanmic内容的应用程序

动态应用程序更多的是数据驱动的,而网页上呈现的内容本身就是动态的。 在这样的场景中,屏幕上呈现的菜单是基于数据用户查看的。

例如考虑一个显示公司所有部门列表的应用程序。 网页包含一个网格来列出公司的所有部门。

以树形方式在这里屏幕上菜单: 公司-> 部门

页面上的导航菜单没有显示管理员页面的链接,因为用户还没有选择一个部门。

在选择部门时,下一页显示该部门中所有经理的列表。

以树形方式在这里屏幕上菜单: 公司-> Departments-> 管理器

这里网页上的菜单无法显示员工页面的链接。

在选择经理时其他页面显示所有向选定经理报告的员工。

以树形方式在这里屏幕上菜单: 公司-> Departments-> 管理器-> 员工

使用代码

在应用程序中添加了一个自述文件,其中包含如何使用 TreeMenu 控件的示例代码。

TreeMenu 添加到网页就像微风一样。

以下是步骤:

应用程序的一次设置

  • 向 CustomControls.dll 添加引用
  • 将映像文件夹添加到应用程序的root。
  • 确保图像文件夹包含下列图像- collapse.gif, dot.gif 和 expand.gif. 可以更改图像,但是保持图像文件名和位置。
  • 向项目和网页中添加提供的css文件。 你可以更改样式以适应应用程序,但保持样式名相同。
  • 使用菜单中的菜单和屏幕数据添加XML文件。 提供了一个示例XML文件。 你可以更改提供的XML文件,为应用程序添加屏幕和菜单条目。 XML文件应该与示例XML文件( 查看以下详细信息) 具有相同的元素。
  • Web.Config appSettings - 将以下密钥添加到 Web.Config 文件的appSettings部分。 值应该是菜单XML文件的relative 位置( 从应用程序 root )。
<appSettings> 
 <addkey="TreeMenu.XML.PathFromRoot"value="/AppNavigation.xml"/></appSettings>

在网页中使用 TreeMenu

1.register 页中的以下标记-

<%@RegisterTagPrefix="cc1"Namespace="CustomControls"Assembly="CustomControls"%>

2.将树菜单控件添加到网页中-

<cc1:TreeMenuid="TreeMenu1"runat="server"ScreenId="10"MenuMode="Dynamic"></cc1:TreeMenu>
你可以选择以设计时间属性为菜单指定选定的屏幕 id,也可以在网页的代码 behind 中动态设置。 或者你可以将屏幕id作为 QueryString 参数传递给网页,参数 NAME 为"screenid"。

3。为菜单控件指定 MenuMode 属性。 根据页面的行为,menuMode ( static 或者动态) 是菜单的模式。

4.将css文件添加到网页。

菜单数据的XML文件

创建用于存储应用程序菜单的数据的XML文件。 菜单项的菜单和屏幕的细节存储在一个XML文件中。 在示例应用程序中,我提供了一个XML文件( appnavigation.xml )。 应用程序还包括 XML Schema 文件( appnavigationschema.xsd )。 你可以为你的应用程序创建一个类似的XML文件。

为应用程序中的每个屏幕添加一个 <AppScreen> 元素。

指定唯一的<AppScreenId>

在 <ScreenName> 中向屏幕提供 NAME

在 <NavigateUrl> 中指定应用程序 root 中的relative URL

对于具有动态内容的页面,在 <querystring>中添加所需的QueryString。 每个查询字符串参数( 如果它不恒定)的值都应该追加"@"和一个键。 对于该键,应该存在查询字符串参数以呈现正确的超链接。

<GroupId> 是将屏幕划分为不同的模块。 菜单中只显示属于同一组的屏幕。 例如在公司的内部网网站上,每个部门都有一些网页。 因此当用户访问网页时,只有属于同一部门的网页才会显示在菜单树中。 如果要显示所有网页,请为所有屏幕保留相同的<GroupId>。

<AppScreen><AppScreenId>1</AppScreenId><ScreenName>Book 1</ScreenName><NavigateUrl>WebForm1.aspx</NavigateUrl><QueryString>BookId=@BookId</QueryString><GroupId>1</GroupId></AppScreen>

为每个要使用菜单链接的屏幕添加 <AppMenu>。

指定唯一的<AppMenuId>

在 <menuname>中指定菜单链接的NAME。 这是出现在菜单上的文本

这里菜单链接到 <ScreenId>的ScreenId

<ParentMenuId> - 指定这里菜单所属的AppMenu的to。 对于顶级菜单,你可以将它的设置为 0. 这将呈现树结构。

在 <SortOrder> 中指定顺序

<AppMenu><AppMenuId>3</AppMenuId><MenuName>Section 2</MenuName><ScreenId>3</ScreenId><ParentMenuId>1</ParentMenuId><SortOrder>3</SortOrder></AppMenu>

历史记录

  • 版本:1.1 - 我将更新本文并进行改进。 欢迎任何建议。评论或者问题。

style  动态  菜单    
相关文章