基于JavaScript的ASP.NET 动态 XML Web菜单控件

分享于 

5分钟阅读

Web开发

  繁體

介绍

这是一个基于web的菜单( 启用了 JavaScript ) 控件。 没有许多可用的网页菜单控件支持动态菜单创建和绑定。 这里 WebMenu 控件支持动态菜单创建。XML菜单绑定以及 DataSet 绑定。 这里控件在内部使用 triga ( 免费脚本) JavaScript菜单。 任何复杂的菜单结构都可以用简单的XML Schema 表示。 菜单位置和样式可以轻松地应用和更改,而不会影响web应用程序。

设置WebMenu的步骤

  • 创建一个新的ASP.NET 网络项目,右键单击工具箱;选择'添加/删除项目'并添加 SuperControls.WebMenu.dll 引用( 编译 SuperControls.WebMenu.cproj 以获取 DLL )。
  • 将JS文件 menu_tpl.js 和 menu.js 复制到站点的root 目录。
  • 将菜单样式表 menu.css 文件复制到子目录 css。
  • 将 menudata.xml 复制到 root 目录。
  • 创建一个ASPX文件并将 WebMenu 控件拖放到 to,并使用它的中一个方法( 给定 below ) 绑定 xml/动态数据到菜单控件。

ASPX代码

<cc1:WebMenuid="WebMenu1"MenuXMLPath="ServerNameradmenudata.xml"PadWidth="24"runat="server"></cc1:WebMenu><!--Other samples
//**********************************************************************
<cc1:WebMenu id="WebMenu2" MenuXMLPath="ServerNameradmenudata.xml" 
 ImageArrow="<img src=imagesarrow.gif border=0" 
 PadWidth="22" runat="server">
</cc1:WebMenu>
<cc1:WebMenu id="WebMenu3" MenuXMLPath="ServerNameradmenudata.xml" 
 ImageArrow="" PadWidth="26" runat="server">
</cc1:WebMenu>-->

动态绑定菜单项的方法。

方法 1

使用服务器中的XML菜单文件的路径设置 MenuXMLPath 属性。

方法 2

使用XML文件创建新的DataSet 并绑定到web菜单控件。

例如:

DataSet dsMenu = new DataSet();
dsMenu.ReadXml(@"ServerNameradmenudata.xml");
WebMenu1.DataSource = dsMenu;
方法 3

从数据库获取菜单数据并使用以下结构填充 DataSet:

  • 列 1: menuid ( 菜单项的唯一 ID )。
  • 列 2: name ( 菜单项的名称)。
  • 列 3: root ( 菜单项的父级)。 如果是起始/root 项,那么 root 值将是"",否则它将是父 menuid的值。
  • 列 4: url ( 菜单项的URL )。

例如:

WebMenu1.DataSource = dsMenu;// (Sample DataSet is given below.)

XML菜单文件( 示例)

<?xmlversion="1.0"encoding="utf-8"?><menu> 'Level 0 nodes
 <menuitemroot=""name="Search Sites"menuid="1"/><menuitemroot=""name="Webmail Sites"menuid="2"/><menuitemroot=""name="DotNet Sites"menuid="3"/> 'Level 1 Items
 <menuitemroot="1"name="Google"url="http://www.google.com"menuid="11"/><menuitemroot="1"name="Altavista"url="http://www.Altavista.com"menuid="12"/> 'Level 1 Items
 <menuitemroot="2"name="Hot-mail"url=""menuid="21"/> 'Level 2 Items
 <menuitemroot="21"name="Hotmail"url="http://www.hotmail.com"menuid="211"/><menuitemroot="21"name="MSN"url="http://www.MSN.com"menuid="212"/><menuitemroot="2"name="Yahoo"url="http://www.yahoo.com"menuid="22"/><menuitemroot="2"name="Rediff"url="http://www.rediff.com"menuid="23"/> 'Level 1 Items
 <menuitemroot="3"name="Microsoft"url="http://www.Microsoft.com"menuid="31"/><menuitemroot="3"name="GotDotNet"url="http://www.GotDotNet.com"menuid="32"/><menuitemroot="3"name="CodeProject"url="http://www.CodeProject.com"menuid="33"/><menuitemroot="3"name="ASpdotnet"url="http://www.ASpdotnet.com"menuid="34"/></menu>

在 上面 示例中,root 属性表示菜单项的父项。 对于父/级菜单项,root 属性将为空。

示例动态菜单数据集( 带有一个 DataTable )

rootnamemenuidurl
搜索站点1
邮件网站2
DotNet站点3
1谷歌11http://www.google.com
1Altavista12http://www.Altavista.com
2热门邮件21
21Hotmail211http://www.hotmail.com
21MSN212http://www.MSN.com
2Yahoo22http://www.yahoo.com
2Rediff23http://www.rediff.com
3微软31http://www.Microsoft.com
3GotDotNet32http://www.GotDotNet.com
3CodeProject33http://www.CodeProject.com
3ASpdotnet34http://www.ASpdotnet.com

WEB  JAVA  Javascript  BASE  控制  asp  
相关文章