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

• 下载源文件 - 81.1 Kb

引言

这是一个免费的基于 Web 的菜单（启用 JavaScript）控件。支持动态菜单创建和绑定的 Web 菜单控件不多。这个 WebMenu 控件支持动态菜单创建、XML 菜单绑定和 DataSet 绑定。此控件在内部使用 triga (免费脚本) JavaScript 菜单。可以使用简单的 XML 架构来表示任何复杂的菜单结构。菜单位置和样式可以轻松应用和动态更改，而不会影响 Web 应用程序。

设置 WebMenu 的步骤

1. 创建一个新的 ASP.NET Web 项目，右键单击工具箱；选择“添加/删除项”，然后添加 SuperControls.WebMenu.dll 引用（编译 SuperControls.WebMenu.cproj 以获取 DLL）。
2. 将 JS 文件 menu_tpl.js 和 menu.js 复制到站点的根目录。
3. 将菜单样式表 menu.css 文件复制到子目录 css。
4. 将 menudata.xml 复制到根目录。
5. 创建一个 ASPX 文件，并将 WebMenu 控件拖放到 WebForm，然后使用以下方法之一将 XML/动态数据绑定到菜单控件。

ASPX 代码

<cc1:WebMenu id="WebMenu1" MenuXMLPath="\\ServerName\rad\menudata.xml" 
                                        PadWidth="24" runat="server">
</cc1:WebMenu>
<!--
Other samples
//**********************************************************************
<cc1:WebMenu id="WebMenu2" MenuXMLPath="ServerName\rad\menudata.xml" 
                      ImageArrow="<img src=images\\arrow.gif border=0" 
                      PadWidth="22" runat="server">
</cc1:WebMenu>
<cc1:WebMenu id="WebMenu3" MenuXMLPath="\\ServerName\rad\menudata.xml" 
                           ImageArrow="" PadWidth="26" runat="server">
</cc1:WebMenu>
-->

动态绑定菜单项的方法...

方法 1

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

方法 2

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

例如

       DataSet dsMenu = new DataSet();
       dsMenu.ReadXml(@"\\ServerName\rad\menudata.xml");
       WebMenu1.DataSource = dsMenu;

方法 3

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

• 第 1 列：menuid（菜单项的唯一 ID）。
• 第 2 列：name（菜单项的名称）。
• 第 3 列：root（菜单项的父项。如果它是起始/根项，则根值将为 ""，否则将为父项 menuid 的值）。
• 第 4 列：url（菜单项的 URL）。

例如

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

XML 菜单文件（示例）

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

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

示例动态菜单 DataSet（带一个 DataTable）

根	名称	menuid	url
	搜索站点	1
	Webmail 站点	2
	DotNet 站点	3
1	Google	11	http://www.google.com
1	Altavista	12	http://www.Altavista.com
2	Hot-mail	21
21	Hotmail	211	http://www.hotmail.com
21	MSN	212	http://www.MSN.com
2	Yahoo	22	http://www.yahoo.com
2	Rediff	23	http://www.rediff.com
3	Microsoft	31	http://www.Microsoft.com
3	GotDotNet	32	http://www.GotDotNet.com
3	CodeProject	33	https://codeproject.org.cn
3	ASpdotnet	34	http://www.ASpdotnet.com