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 + "<ul>";
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.