ASP.NET Dynamic XML Web Menu Control based on JavaScript

• Download source files - 81.1 Kb

Introduction

This is a free web based menu (JavaScript enabled) control. There are not many web menu controls available that support dynamic menu creation and binding. This WebMenu control supports dynamic menu creation, XML menu binding and also DataSet binding. This control uses triga (free script) JavaScript menu internally. Any complex menu structure can be represented using a simple XML schema. Menu position and style can be easily applied and changed dynamically without affecting the web application.

Steps to setup WebMenu

1. Create a new ASP.NET web project, right click on ToolBox; choose 'Add/Remove items' and add the SuperControls.WebMenu.dll reference (compile SuperControls.WebMenu.cproj to get the DLL).
2. Copy the JS files menu_tpl.js and menu.js to the root directory of the site.
3. Copy menu stylesheet menu.css file to the subdirectory css.
4. Copy menudata.xml to the root directory.
5. Create an ASPX file and drag and drop the WebMenu control to the WebForm and use one of the methods (given below) to bind the XML/dynamic data to the menu control.

ASPX Code

<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>
-->

Ways of binding menu items dynamically...

Method 1

Set MenuXMLPath property with the path of the XML menu file in the server.

Method 2

Create new DataSet with the XML file and bind to the web menu control.

For example:

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

Method 3

Get the menu data from database and populate the DataSet with the following structure:

• Column 1 : menuid (unique ID of menu item).
• Column 2 : name (name of the menu item).
• Column 3 : root (parent of the menu item. If it is the starting/root item then the root value will be "" else it will be the value of the parent menuid).
• Column 4 : url (URL for the menu item).

For example:

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

XML menu file (sample)

<?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="http://www.CodeProject.com" 
                                                           menuid="33"/>
    <menuitem root="3" name="ASpdotnet" url="http://www.ASpdotnet.com" 
                                                           menuid="34"/>
    
</menu>

In the above sample, the root attribute represents the parent of the menu item. The root attribute will be empty for parent/level zero menu items.

Sample dynamic menu DataSet (with one DataTable)