Web Application Development Company - Multi Level Dropdown Menu

Home » Blog Details
Multi Level Dropdown Menu

Multi Level Dropdown Menu

Multi Level Menu with ASP.NET, C#, jQuery and SQL Server

solution that I would like to share with others puzzled with the same as was one of my website development guys was having a tough time creating a multi level dropdown menu from database,
So I gave him this :
1. Database
We will be using 2 tables to achieve the same :
a. Category Table ( tbl_cat ):
Category_ID : Unique ID
Category_Name : Text
b. Table to hold category relations ( tbl_cat_rel )
Rel_ID : Unique ID
Category_ID : foreign key
Parent_ID : Parent Category ID
Sort_ID : In case you want to sort category display.

2. Stored Procedure

This part is bit tricky as we will be calculating number of childs a particular category holds
					

CREATE PROCEDURE sp_getCategory					

AS					

BEGIN					

Select a.Category_ID, a.Parent_ID, c.Category_Name, b.totalSubCats 					

from tbl_cat_rel as a LEFT OUTER JOIN 					

(SELECT Parent_ID, count(*) as totalSubCats 					

FROM tbl_cat_rel GROUP BY Parent_ID) as b 					

ON a.Category_ID = b.Parent_ID					

LEFT OUTER JOIN tbl_cat as c 					

on a.Category_ID = c.Category_ID					

ORDER BY a.Category_ID					

END					



3. jQuery

Although you can use any jQuery menu you find suitable, for this example I am using
DDSmooth menu available at : http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm


4. Codes
I am assuming that you have selected a suitable menu Literal or similar to print its navigation values. In this example I will be using literal as follows :
					

<div id="smoothmenu1" class="ddsmoothmenu"> 					

<asp:Literal runat="server" ID="lt_navMenu"></asp:Literal>					

<br style="clear: left" />					

</div>					


And here are the CS codes :
					

// I am sure you know how to get data from tables :)					

this.createMenu(DSdataSet.Tables["tbl_categories"], 0); 					

					

private void createMenu(DataTable dt, int pID)					

{					

lt_navMenu.Text = lt_navMenu.Text + "&lt;ul&gt;";					

for (int i = 0; i < dt.Rows.Count; i++) //Loop until rows are still there.					

{					

if (Convert.ToInt32(dt.Rows[i]["ParentID"]) == pID) 					

{					

lt_navMenu.Text = lt_navMenu.Text + "<li><a href=\"/" +					

dt.Rows[i]["Category_Name"].ToString() + ".aspx \">" + 					

dt.Rows[i]["Category_Name"].ToString() + "</a>";					

					

//Till the time item has childs					

if (dt.Rows[i]["totalSubCats"] != DBNull.Value) 					

this.createMenu(dt, Convert.ToInt32(dt.Rows[i]["catID"]));					

lt_navMenu.Text = lt_navMenu.Text + "</li>";					

}					

}					

lt_navMenu.Text = lt_navMenu.Text + "</ul>";					

}					



The above was used in - http://www.svengg.co/


Till Next...
Jaswant.

Must Read

Benefits of CRM in Service Industry
CRM or Customer Relationship Management Software has a simple yet elaborate motive of helping...
Benefits of CRM For Retail Business or Online Ecommerce Stores.
Even though the concept, pattern and prefrences for shopping has changed over the years as per...
Types of Ecommerce Revenue Models
We had been talking about the three most common participants in e-commerce - businesses,...
10 Ways To Make Your Programming Better
The proprietor of Megasoftwares, top web development company in India, who himself has been and is...
Why is A Custom Build Ecommerce Website Better ThanA Marketplace.
Shopping has always been the best stress buster. Other than visiting physical stores, online...
Contact Us
Let's Talk .
We do what we love and so we love what we do and we do exactly what you need !

DROP US A LINE

Copyright © 2003-2019 MegaSoftwares - Web Design, Website Development and Web Marketing Agency in India
Go Top