ASP.NET ul Menu Server Control

At work I mostly use ASP.NET 3.5 for developing web apps. I am big fan of web standards and I get frustrated when some of ASP.NET Server Controls generate non standard bloated kind of Html. I am specially talking about Menu Control. I know this problem is solved in .NET 4.0 but as I wrote above majority of our apps were written using .NET 3.5. Another problem I have face is that I have to mostly repeat the dynamic Menu generation (from Database) logic in projects. So I decided to create a Custom Server Control which I would like to share with you.

Source Files

What this Control Do?

  1. This control generates ul li based menu with which majority of js framework plugins can be used.
  2. It generates the menu from database table which must contain following fields.
    • menu_item_id: Primary key field
    • menu_item_name: Name of menu item which will be displayed to user.
    • menu_item_link: Link of menu item which will be actually set to href.
    • menu_item_target: (Optional) Target field can contain _blank, _self, _parent, _top.
    • parent_menu_id: ID (Primary Key) of parent menu item.

Remember that you are not restricted to use the exact names as given above.

Using the UlMenu Control

Step 1

Download UlMenu and extract the project from zip file.

Step 2

Open your project in Visual Studio or Visual Web Developer and right-click on empty area of Toolbox and click Choose Items…

Visual Studio Choose Items

Now click Browse… button and select the iFadey.dll file from UL_Menu/bin/Debug folder. Then click OK button and you will see a UlMenu control added in Toolbox as shown below.

Ul Menu Control

Step 3

Create a table with the columns shown above and also write code to query this table and get a result set containing all of these columns. For quick test, drag the SqlDataSource control and configure it to get the required result. My SqlDataSource looks like this:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
        SelectCommand="SELECT [menu_item_id], [menu_item_name], [menu_item_link], [menu_item_target], [parent_item_id] FROM [tbl_menu]">
</asp:SqlDataSource>

Also add some dummy data in the table.

Ul Menu Table Data

Step 4

Now click and drag the UlMenu control on the aspx page and set the following properties from Properties window.

  • DataSourceID: SqlDataSource1
  • DataTextField: menu_item_name
  • DataValueField: menu_item_id
  • DataMenuItemTarget: menu_item_target
  • DataMenuItemURL: menu_item_link
  • DataParentItemID: parent_item_id

Now your UlMenu must look like following.

<cc1:UlMenu ID="UlMenu1" runat="server" DataTextField="menu_item_name" 
        DataValueField="menu_item_id" DataParentItemId="parent_item_id" 
        DataMenuItemURL="menu_item_link" DataSourceID="SqlDataSource1" DataMenuItemTarget="menu_item_target"></cc1:UlMenu>

You can change the tag prefix “cc1″ from the Register directive on the top of the page. I changed cc1 to iF in the following line.

<%@ Register Assembly="iFadey" Namespace="iFadey" TagPrefix="iF" %>

Now you can write UlMenu as iF:UlMenu instead of cc1:UlMenu. Finally Test the project by running it and you will see the output as ul based html. Also note that the top most ul has a class of level_0 and the level number increase with the nested ul as shown below:

ASP.NET Ul Menu Output

You can use any javascript menu plugin with this code and also decorate it using CSS.


comments powered by Disqus