Membuat Menu Dinamik Banyak Level Di Asp.Net Sql Server

Pertama Kita Buat Database dan tabelnya Di SQL Server Create Database Menu

USE [Menu]
GO

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[SubMenu](
      [Id] [int] IDENTITY(1,1) NOT NULL,
      [SubMenuName] [nvarchar](50) NULL,
      [SubMenuUrl] [nvarchar](50) NULL,
      [ParentId] [int] NULL
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[SubMenu] ON
INSERT [dbo].[SubMenu] ([Id], [SubMenuName], [SubMenuUrl], [ParentId]) VALUES (1, N'Web Development', N'Web.aspx', 3)
INSERT [dbo].[SubMenu] ([Id], [SubMenuName], [SubMenuUrl], [ParentId]) VALUES (2, N'SEO Services', N'Seo.aspx', 3)
INSERT [dbo].[SubMenu] ([Id], [SubMenuName], [SubMenuUrl], [ParentId]) VALUES (3, N'Mobile Apps', N'Mob.aspx', 3)
SET IDENTITY_INSERT [dbo].[SubMenu] OFF
/****** Object:  Table [dbo].[Menu]    Script Date: 05/25/2015 17:46:16 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Menu](
      [Id] [int] IDENTITY(1,1) NOT NULL,
      [MenuName] [nvarchar](50) NULL,
      [MenuUrl] [nvarchar](50) NULL
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[Menu] ON
INSERT [dbo].[Menu] ([Id], [MenuName], [MenuUrl]) VALUES (1, N'Home', N'Home.aspx')
INSERT [dbo].[Menu] ([Id], [MenuName], [MenuUrl]) VALUES (2, N'About Us', N'About.aspx')
INSERT [dbo].[Menu] ([Id], [MenuName], [MenuUrl]) VALUES (3, N'Services', N'Services.aspx')
INSERT [dbo].[Menu] ([Id], [MenuName], [MenuUrl]) VALUES (4, N'Testimonial', N'Testimonial.aspx')
INSERT [dbo].[Menu] ([Id], [MenuName], [MenuUrl]) VALUES (5, N'Contact Us', N'Contact.aspx')
SET IDENTITY_INSERT [dbo].[Menu] OFF
/****** Object:  Table [dbo].[ChildSubMenu]    Script Date: 05/25/2015 17:46:16 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[ChildSubMenu](
      [Id] [int] IDENTITY(1,1) NOT NULL,
      [ChildSubMenuName] [nvarchar](50) NULL,
      [ChildSubMenuUrl] [nvarchar](50) NULL,
      [SubParentId] [int] NULL
) ON [PRIMARY]
GO
SET IDENTITY_INSERT [dbo].[ChildSubMenu] ON
INSERT [dbo].[ChildSubMenu] ([Id], [ChildSubMenuName], [ChildSubMenuUrl], [SubParentId]) VALUES (1, N'Web Designing', N'Web.aspx', 3)
INSERT [dbo].[ChildSubMenu] ([Id], [ChildSubMenuName], [ChildSubMenuUrl], [SubParentId]) VALUES (2, N'Web Redisigning', N'Des.aspx', 3)
INSERT [dbo].[ChildSubMenu] ([Id], [ChildSubMenuName], [ChildSubMenuUrl], [SubParentId]) VALUES (3, N'Ecomments', N'Ecom.aspx', 3)
SET IDENTITY_INSERT [dbo].[ChildSubMenu] OFF

Terus Kita Buat Style CSS nya :
<style>
        /* Base Styles */#cssmenu > ul, #cssmenu > ul li, #cssmenu > ul ul
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #cssmenu > ul
        {
            position: relative;
            z-index: 597;
        }
        #cssmenu > ul li
        {
            float: left;
            min-height: 1px;
            line-height: 1.3em;
            vertical-align: middle;
        }
        #cssmenu > ul li.hover, #cssmenu > ul li:hover
        {
            position: relative;
            z-index: 599;
            cursor: default;
        }
        #cssmenu > ul ul
        {
            visibility: hidden;
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 598;
            width: 100%;
        }
        #cssmenu > ul ul li
        {
            float: none;
        }
        #cssmenu > ul ul ul
        {
            top: 1px;
            left: 99%;
        }
        #cssmenu > ul li:hover > ul
        {
            visibility: visible;
        }
        /* Align last drop down RTL */#cssmenu > ul > li.last ul ul
        {
            left: auto !important;
            right: 99%;
        }
        #cssmenu > ul > li.last ul
        {
            left: auto;
            right: 0;
        }
        #cssmenu > ul > li.last
        {
            text-align: right;
        }
        /* Theme Styles */#cssmenu > ul
        {
            border-top: 4px solid #3fa338;
            font-family: Calibri, Tahoma, Arial, sans-serif;
            font-size: 14px;
            background: #1e1e1e;
            background: -moz-linear-gradient(top, #1e1e1e 0%, #040404 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(100%, #040404));
            background: -webkit-linear-gradient(top, #1e1e1e 0%, #040404 100%);
            background: linear-gradient(top, #1e1e1e 0%, #040404 100%);
            width: auto;
            zoom: 1;
        }
        #cssmenu > ul:before
        {
            content: '';
            display: block;
        }
        #cssmenu > ul:after
        {
            content: '';
            display: table;
            clear: both;
        }
        #cssmenu > ul li a
        {
            display: inline-block;
            padding: 10px 22px;
        }
        #cssmenu > ul > li.active, #cssmenu > ul > li.active:hover
        {
            background-color: #3fa338;
        }
        #cssmenu > ul > li > a:link, #cssmenu > ul > li > a:active, #cssmenu > ul > li > a:visited
        {
            color: #ffffff;
        }
        #cssmenu > ul > li > a:hover
        {
            color: #ffffff;
        }
        #cssmenu > ul ul ul
        {
            top: 0;
        }
        #cssmenu > ul li li
        {
            background-color: #ffffff;
            border-bottom: 1px solid #ebebeb;
            font-size: 12px;
        }
        #cssmenu > ul li.hover, #cssmenu > ul li:hover
        {
            background-color: #F5F5F5;
        }
        #cssmenu > ul > li.hover, #cssmenu > ul > li:hover
        {
            background-color: #3fa338;
            -webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
            -moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
            box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
        }
        #cssmenu > ul a:link, #cssmenu > ul a:visited
        {
            color: #9a9a9a;
            text-decoration: none;
        }
        #cssmenu > ul a:hover
        {
            color: #9a9a9a;
        }
        #cssmenu > ul a:active
        {
            color: #9a9a9a;
        }
        #cssmenu > ul ul
        {
            border: 1px solid #CCC \9;
            -webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
            -moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);
            width: 150px;
        }
    </style>

Kita Buat Javascriptnya :
 <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Terus Kita Buat File HTML nya,Simpan di dalam Form Runat=”Server” ya:
<div id="cssmenu" runat="server">
</div>

Terus Kita Buat Kode Vb.Net Nya :
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Partial Class demo
    Inherits System.Web.UI.Page
    Private Sub demo_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            GetMenuData()
        End If
    End Sub
    Dim connectionstring As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    
    Public Sub GetMenuData()
        Dim objstr As New StringBuilder()
        Dim objpmenu As New List(Of Menu)()
        Dim objsmenu As New List(Of SubMenu)()
        Dim objcmenu As New List(Of ChildSubMenu)()
        objpmenu = GetMenu()
        objsmenu = GetSubMenu()
        objcmenu = GetChildSubMenu()

        objstr.Append("<ul>")

        For Each _pitem As Menu In objpmenu
            objstr.Append((Convert.ToString((Convert.ToString("<li><a href='") & _pitem.MenuUrl) + "'><span>") & _pitem.MenuName) + "</span></a>")

            Dim subitem = objsmenu.Where(Function(m) m.ParentId = _pitem.Id).ToList()
            If subitem.Count > 0 Then
                objstr.Append("<ul>")
                For Each _sitem As SubMenu In subitem
                    objstr.Append("<li class='has-sub'><a href='" + _sitem.SubMenuUrl + "'><span>" + _sitem.SubMenuName + "</span></a>")

                    Dim childsubitem = objcmenu.Where(Function(s) s.SubParentId = _sitem.Id).ToList()
                    If childsubitem.Count > 0 Then
                        objstr.Append("<ul>")
                        For Each _citem As ChildSubMenu In childsubitem
                            objstr.Append("<li class='has-sub'><a href='" + _citem.ChildSubMenuUrl + "'><span>" + _citem.ChildSubMenuName + "</span></a></li>")
                        Next
                        objstr.Append("</ul>")
                    End If

                    objstr.Append("</li>")
                Next
                objstr.Append("</ul>")
            End If

            objstr.Append("</li>")
        Next

        objstr.Append("</ul>")

        cssmenu.InnerHtml = objstr.ToString()
    End Sub

    Public Function GetMenu() As List(Of Menu)
        Dim objmenu As New List(Of Menu)()
        Dim _objdt As New DataTable()
        Dim querystring As String = "select * from Menu;"
        Dim _objcon As New SqlConnection(connectionstring)
        Dim _objda As New SqlDataAdapter(querystring, _objcon)
        _objcon.Open()
        _objda.Fill(_objdt)
        If _objdt.Rows.Count > 0 Then
            For i As Integer = 0 To _objdt.Rows.Count - 1
                objmenu.Add(New Menu() With {
                    .Id = CInt(_objdt.Rows(i)("Id")),
                    .MenuName = _objdt.Rows(i)("MenuName").ToString(),
                    .MenuUrl = _objdt.Rows(i)("MenuUrl").ToString()
                })
            Next
        End If
        Return objmenu
    End Function

    Public Function GetSubMenu() As List(Of SubMenu)
        Dim objmenu As New List(Of SubMenu)()
        Dim _objdt As New DataTable()
        Dim querystring As String = "select * from SubMenu;"
        Dim _objcon As New SqlConnection(connectionstring)
        Dim _objda As New SqlDataAdapter(querystring, _objcon)
        _objcon.Open()
        _objda.Fill(_objdt)
        If _objdt.Rows.Count > 0 Then
            For i As Integer = 0 To _objdt.Rows.Count - 1
                objmenu.Add(New SubMenu() With {
                    .Id = CInt(_objdt.Rows(i)("Id")),
                    .ParentId = CInt(_objdt.Rows(i)("ParentId")),
                    .SubMenuName = _objdt.Rows(i)("SubMenuName").ToString(),
                    .SubMenuUrl = _objdt.Rows(i)("SubMenuUrl").ToString()
                })
            Next
        End If
        Return objmenu
    End Function

    Public Function GetChildSubMenu() As List(Of ChildSubMenu)
        Dim objmenu As New List(Of ChildSubMenu)()
        Dim _objdt As New DataTable()
        Dim querystring As String = "select * from ChildSubMenu;"
        Dim _objcon As New SqlConnection(connectionstring)
        Dim _objda As New SqlDataAdapter(querystring, _objcon)
        _objcon.Open()
        _objda.Fill(_objdt)
        If _objdt.Rows.Count > 0 Then
            For i As Integer = 0 To _objdt.Rows.Count - 1
                objmenu.Add(New ChildSubMenu() With {
                    .SubParentId = CInt(_objdt.Rows(i)("SubParentId")),
                    .ChildSubMenuName = _objdt.Rows(i)("ChildSubMenuName").ToString(),
                    .ChildSubMenuUrl = _objdt.Rows(i)("ChildSubMenuUrl").ToString()
                })
            Next
        End If
        Return objmenu
    End Function


    'Menu Class

    Public Class Menu
        Public Property Id() As Integer
            Get
                Return m_Id
            End Get
            Set
                m_Id = Value
            End Set
        End Property
        Private m_Id As Integer
        Public Property MenuName() As String
            Get
                Return m_MenuName
            End Get
            Set
                m_MenuName = Value
            End Set
        End Property
        Private m_MenuName As String
        Public Property MenuUrl() As String
            Get
                Return m_MenuUrl
            End Get
            Set
                m_MenuUrl = Value
            End Set
        End Property
        Private m_MenuUrl As String
    End Class
    Public Class SubMenu
        Public Property Id() As Integer
            Get
                Return m_Id
            End Get
            Set
                m_Id = Value
            End Set
        End Property
        Private m_Id As Integer
        Public Property ParentId() As Integer
            Get
                Return m_ParentId
            End Get
            Set
                m_ParentId = Value
            End Set
        End Property
        Private m_ParentId As Integer
        Public Property SubMenuName() As String
            Get
                Return m_SubMenuName
            End Get
            Set
                m_SubMenuName = Value
            End Set
        End Property
        Private m_SubMenuName As String
        Public Property SubMenuUrl() As String
            Get
                Return m_SubMenuUrl
            End Get
            Set
                m_SubMenuUrl = Value
            End Set
        End Property
        Private m_SubMenuUrl As String
    End Class
    Public Class ChildSubMenu
        Public Property SubParentId() As Integer
            Get
                Return m_SubParentId
            End Get
            Set
                m_SubParentId = Value
            End Set
        End Property
        Private m_SubParentId As Integer
        Public Property ChildSubMenuName() As String
            Get
                Return m_ChildSubMenuName
            End Get
            Set
                m_ChildSubMenuName = Value
            End Set
        End Property
        Private m_ChildSubMenuName As String
        Public Property ChildSubMenuUrl() As String
            Get
                Return m_ChildSubMenuUrl
            End Get
            Set
                m_ChildSubMenuUrl = Value
            End Set
        End Property
        Private m_ChildSubMenuUrl As String
    End Class

End Class

Untuk Koneksi Stringnya :
<connectionStrings>
    <remove name="LocalSqlServer"/>
    <add name="constr" connectionString="server=.\SQLEXPRESS;Initial Catalog=Menu;Integrated Security=True;MultipleActiveResultSets=True;" providerName="System.Data.SqlClient"/>
  </connectionStrings>

Simpan Di web.Config ,
Sekarang Silakan jalankan Aplikasinya.

Selamat Berkreasi Sendiri.
Semoga Berhasil.