JQuery UI Dynamic Menu

Ankit Bansal
Dec 28, 2015
17k
0
2
Article

Here are the steps,

Step 1: Open SQL Server Management Studio and create a database named DemoDB and use the following script to create the table, insert sample data and also to create Stored procedure which will be used in Visual Studio to retrieve data.

CREATE TABLE [dbo].[jquerymenu] (
[ID] INT IDENTITY (1, 1) NOT NULL,
[Text] NVARCHAR (50) NULL,
[parentId] INT NULL,
[isActive] BIT NULL
);
SET IDENTITY_INSERT [dbo].[jquerymenu] ON
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (1, N'USA', NULL, 1)
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (2, N'India', NULL, 1)
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (3, N'UK', NULL, 1)
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (4, N'Australia', NULL, 1)
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (5, N'Virginia', 1, 1)
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (6, N'Maryland', 1, 1)
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (7, N'AP', 2, 1)
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (8, N'MP', 2, 1)
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (9, N'Karnataka', 2, 1)
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (10, N'Bangalore', 9, 1)
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (11, N'Mangalore', 9, 1)
INSERT INTO [dbo].[jquerymenu] ([ID], [Text], [parentId], [isActive]) VALUES (12, N'Mysore', 9, 0)
SET IDENTITY_INSERT [dbo].[jquerymenu] OFF
Create Proc spGetMenuData
as
Begin
Select * from jquerymenu
End

Step 2: Open Visual Studio and create an empty ASP.NET Web application. Then folow the below mentioned steps.

Add Class file

Add Webform

Add Handler

Step 3: Add a Connection String for connection to database in Web.Config file.

<connectionStrings>
<add name="DBCS" connectionString="server=.;database=DemoDB;integrated security=SSPI" providerName="System.Data.SqlClient"/>
</connectionStrings>

Step 4: Create Auto-populated properties in the class file created in Step 2.

using System.Collections.Generic;
namespace jQueryUIMenu
{
public class Menu
{
public int ID { get; set; }
public string Text { get; set; }
public int? parentId { get; set; }
public bool isActive { get; set; }
public List<Menu> List { get; set; }
}
}

Step 5: Add the following code to the Generic Handler which will retrieve data from the database.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Configuration;
namespace jQueryUIMenu
{
public class MenuHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
var cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
var list = new List<Menu>();
using (var con = new SqlConnection(cs))
{
var cmd = new SqlCommand("spGetMenuData", con) { CommandType = CommandType.StoredProcedure };
con.Open();
var dr = cmd.ExecuteReader();
while (dr.Read())
{
var menu = new Menu
{
ID = Convert.ToInt32(dr["ID"]),
Text = dr["Text"].ToString(),
parentId = dr["parentId"] != DBNull.Value ? Convert.ToInt32(dr["parentId"]) : (int?)null,
isActive = Convert.ToBoolean(dr["isActive"])
};
list.Add(menu);
}
}
var mainList = GetMenuTree(list, null);
var js = new JavaScriptSerializer();
context.Response.Write(js.Serialize(mainList));
}
private List<Menu> GetMenuTree(List<Menu> list, int? parent)
{
return list.Where(x => x.parentId == parent).Select(x => new Menu
{
ID = x.ID,
Text = x.Text,
parentId = x.parentId,
isActive = x.isActive,
List = GetMenuTree(list, x.ID)
}).ToList();
}
public bool IsReusable => false;
}
}