Dynamically populate menu and sub menu using jQuery AJAX in ASP.Net

Hinauna,

Refer below code.

HTML

<form id="form1" runat="server">
    <div>
        <ul id="menu"></ul>
    </div>
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" />
<script type="text/javascript">
    $(function () {
        $('ul').menu();
        $.ajax({
            url: 'Default.aspx/GetParentMenu',
            method: 'GET',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                $.each(data.d, function () {
                    var li = $('<li value="' + this.Id + '">' + this.MenuText + '</li>');
                    if (!this.Active) {
                        li.addClass('ui-state-disabled');
                    }
                    li.appendTo($('#menu'));
                });
            }
        });

        $('body').on('mouseenter', 'ul li', function () {
            var menu = $(this);
            $.ajax({
                url: 'Default.aspx/GetChildMenu',
                method: 'GET',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data: { parent: $(this).attr('value') },
                success: function (data) {
                    var ul = $('<ul></ul>').empty();
                    $.each(data.d, function () {
                        var li = $('<li value="' + this.Id + '">' + this.MenuText + '</li>');
                        if (!this.Active) {
                            li.addClass('ui-state-disabled');
                        }
                        li.appendTo($(ul));
                    });
                    $(ul).appendTo($(menu));
                }
            });
        });

        $('body').on('mouseleave', 'ul li', function () {
            $(this).find('ul').remove();
        });
    });
</script>

Namespaces

C#

using System.Collections.Generic;
using System.Data;
using System.Web.Script.Services;
using System.Web.Services;

VB.Net

Imports System.Collections.Generic
Imports System.Data
Imports System.Web.Script.Services
Imports System.Web.Services

Code

C#

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public static List<Menu> GetParentMenu()
{
    List<Menu> menus = GetMenus(0);
    return menus;
}

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public static List<Menu> GetChildMenu(int parent)
{
    List<Menu> menus = GetMenus(parent);
    foreach (Menu menu in menus)
    {
        menu.List = GetMenus(menu.Id);
    }

    return menus;
}

public static List<Menu> GetMenus(int parent)
{
    List<Menu> menus = new List<Menu>();
    DataRow[] drs = GetData().Select("ParentId=" + parent);
    foreach (DataRow dr in drs)
    {
        Menu menu = new Menu();
        menu.Id = Convert.ToInt32(dr["Id"]);
        menu.MenuText = dr["MenuText"].ToString();
        menu.ParentId = Convert.ToInt32(dr["ParentId"]);
        menu.Active = Convert.ToBoolean(dr["Active"]);
        menus.Add(menu);
    }

    return menus;
}

public static DataTable GetData()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[4] {
            new DataColumn("Id",typeof(int)),
        new DataColumn("MenuText",typeof(string)),
        new DataColumn("ParentId",typeof(int)),
        new DataColumn("Active",typeof(bool)) });
    dt.Rows.Add(1, "USA", 0, 1);
    dt.Rows.Add(2, "India", 0, 1);
    dt.Rows.Add(3, "Australia", 0, 1);
    dt.Rows.Add(5, "Virginia", 1, 1);
    dt.Rows.Add(6, "Maryland", 1, 1);
    dt.Rows.Add(7, "AP", 2, 1);
    dt.Rows.Add(8, "MP", 2, 1);
    dt.Rows.Add(9, "Karnataka", 2, 1);
    dt.Rows.Add(10, "Bangalore", 9, 1);
    dt.Rows.Add(11, "Mangalore", 9, 1);
    dt.Rows.Add(12, "Mysore", 9, 0);

    return dt;
}

public class Menu
{
    public int Id { get; set; }
    public string MenuText { get; set; }
    public int ParentId { get; set; }
    public bool Active { get; set; }
    public List<Menu> List { get; set; }
}

VB.Net

<WebMethod>
<ScriptMethod(UseHttpGet:=True, ResponseFormat:=ResponseFormat.Json)>
Public Shared Function GetParentMenu() As List(Of Menu)
    Dim menus As List(Of Menu) = GetMenus(0)
    Return menus
End Function

<WebMethod>
<ScriptMethod(UseHttpGet:=True, ResponseFormat:=ResponseFormat.Json)>
Public Shared Function GetChildMenu(ByVal parent As Integer) As List(Of Menu)
    Dim menus As List(Of Menu) = GetMenus(parent)

    For Each menu As Menu In menus
        menu.List = GetMenus(menu.Id)
    Next

    Return menus
End Function

Public Shared Function GetMenus(ByVal parent As Integer) As List(Of Menu)
    Dim menus As List(Of Menu) = New List(Of Menu)()
    Dim drs As DataRow() = GetData().[Select]("ParentId=" & parent)

    For Each dr As DataRow In drs
        Dim menu As Menu = New Menu()
        menu.Id = Convert.ToInt32(dr("Id"))
        menu.MenuText = dr("MenuText").ToString()
        menu.ParentId = Convert.ToInt32(dr("ParentId"))
        menu.Active = Convert.ToBoolean(dr("Active"))
        menus.Add(menu)
    Next

    Return menus
End Function

Public Shared Function GetData() As DataTable
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn(3) {
                        New DataColumn("Id", GetType(Integer)),
                        New DataColumn("MenuText", GetType(String)),
                        New DataColumn("ParentId", GetType(Integer)),
                        New DataColumn("Active", GetType(Boolean))})
    dt.Rows.Add(1, "USA", 0, 1)
    dt.Rows.Add(2, "India", 0, 1)
    dt.Rows.Add(3, "Australia", 0, 1)
    dt.Rows.Add(5, "Virginia", 1, 1)
    dt.Rows.Add(6, "Maryland", 1, 1)
    dt.Rows.Add(7, "AP", 2, 1)
    dt.Rows.Add(8, "MP", 2, 1)
    dt.Rows.Add(9, "Karnataka", 2, 1)
    dt.Rows.Add(10, "Bangalore", 9, 1)
    dt.Rows.Add(11, "Mangalore", 9, 1)
    dt.Rows.Add(12, "Mysore", 9, 0)
    Return dt
End Function

Public Class Menu
    Public Property Id As Integer
    Public Property MenuText As String
    Public Property ParentId As Integer
    Public Property Active As Boolean
    Public Property List As List(Of Menu)
End Class