Hi sabujlove,
I think you are missing something. I have converted the code to vb. Refer the below sample code.
Database
CREATE TABLE Menus
(
[MenuId] [int] IDENTITY(1,1) PRIMARY KEY NOT NULL,
[ParentMenuId] [int] NOT NULL,
[Title] [varchar](100) NULL,
[Description] [varchar](100) NULL,
[Url] [nvarchar](100) NOT NULL,
[CssFont] [varchar](100) NULL
)
GO
INSERT Menus ([MenuId], [ParentMenuId], [Title], [Description], [Url], [CssFont]) VALUES (1, 0, N'Home', NULL, N'~/Home.aspx', N'fa fa-dashboard fa-lg')
INSERT Menus ([MenuId], [ParentMenuId], [Title], [Description], [Url], [CssFont]) VALUES (2, 0, N'Services', N'Services Page', N'javascript:;', N'fa fa-car fa-lg')
INSERT Menus ([MenuId], [ParentMenuId], [Title], [Description], [Url], [CssFont]) VALUES (3, 0, N'About', N'About Us Page', N'~/About.aspx', N'fa fa-user fa-lg')
INSERT Menus ([MenuId], [ParentMenuId], [Title], [Description], [Url], [CssFont]) VALUES (4, 0, N'Contact', N'Contact Us Page', N'javascript:;', N'fa fa-users fa-lg')
INSERT Menus ([MenuId], [ParentMenuId], [Title], [Description], [Url], [CssFont]) VALUES (5, 2, N'Consulting', N'Consulting Page', N'~/Consulting.aspx', NULL)
INSERT Menus ([MenuId], [ParentMenuId], [Title], [Description], [Url], [CssFont]) VALUES (6, 2, N'Outsourcing', N'Outsourcing Page', N'~/Outsourcing.aspx', NULL)
INSERT Menus ([MenuId], [ParentMenuId], [Title], [Description], [Url], [CssFont]) VALUES (9, 4, N'Phone', N'Phone Page', N'javascript:;', NULL)
INSERT Menus ([MenuId], [ParentMenuId], [Title], [Description], [Url], [CssFont]) VALUES (10, 9, N'HomePhone', N'Home Phone Page', N'~/HomePhone.aspx', NULL)
INSERT Menus ([MenuId], [ParentMenuId], [Title], [Description], [Url], [CssFont]) VALUES (12, 9, N'MobilePhone', N'Mobile Phone Page', N'javascript:;', NULL)
INSERT Menus ([MenuId], [ParentMenuId], [Title], [Description], [Url], [CssFont]) VALUES (13, 12, N'Personal', N'Personal Mobile', N'~/PersonalMob.aspx', NULL)
INSERT Menus ([MenuId], [ParentMenuId], [Title], [Description], [Url], [CssFont]) VALUES (14, 12, N'AddedNew', N'Added New Page', N'javascript:;', NULL)
HTML
<head runat="server">
<title></title>
<style type="text/css">
.nav-side-menu
{
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand
{
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn
{
display: none;
}
.nav-side-menu ul, .nav-side-menu li
{
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
}
.nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before
{
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active, .nav-side-menu li .active
{
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active
{
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a, .nav-side-menu li .sub-menu li.active a
{
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li
{
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover
{
background-color: Orange;
}
.nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before
{
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li
{
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a
{
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i
{
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover
{
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px)
{
.nav-side-menu
{
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn
{
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand
{
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px)
{
.nav-side-menu .menu-list .menu-content
{
display: block;
}
}
body
{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<script type="text/javascript">
$(function () {
$('li[data-toggle="collapse"]').each(function () {
if ($(this).next('ul').length == 0) {
$(this).removeAttr('data-toggle').removeAttr('data-target').removeClass('collapsed');
$(this).find('span.arrow').remove();
}
});
$('ul#menu-content > ul').on('show.bs.collapse', function (e, obj) {
$("ul#menu-content > ul").not(this).removeClass("in");
var currentHead = $(this).prev("li");
$("ul#menu-content > li").not(currentHead).removeClass("active");
$(currentHead).addClass("active");
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="nav-side-menu">
<div class="brand">
AspSnippets</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content">
</i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<asp:Repeater ID="rptCategories" runat="server" OnItemDataBound="rptMenu_OnItemBound">
<ItemTemplate>
<li data-toggle="collapse" data-target='#<%#Eval("Title") %>' class="collapsed"><a
href='<%#Eval("Url") %>'><i class='<%#Eval("CssFont") %>'></i>
<%#Eval("Title") %><span class="arrow"></span></a> </li>
<asp:Literal ID="ltrlSubMenu" runat="server"></asp:Literal>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
</div>
</div>
</form>
</body>
C#
DataTable Menus = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindMenu();
}
}
protected void rptMenu_OnItemBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
if (Menus != null)
{
DataRowView drv = e.Item.DataItem as DataRowView;
string ID = drv["MenuId"].ToString();
string Title = drv["Title"].ToString();
DataRow[] rows = Menus.Select("ParentMenuId=" + ID);
if (rows.Length > 0)
{
StringBuilder sb = new StringBuilder();
sb.Append("<ul id='" + Title + "' class='sub-menu collapse'>");
foreach (var item in rows)
{
string parentId = item["MenuId"].ToString();
string parentTitle = item["Title"].ToString();
DataRow[] parentRow = Menus.Select("ParentMenuId=" + parentId);
if (parentRow.Count() > 0)
{
sb.Append("<li data-toggle='collapse' data-target='#" + parentTitle + "' class='collapsed'><a href='" + item["Url"] + "'>" + item["Title"] + "<span class='arrow'></span></a>");
sb.Append("</li>");
}
else
{
sb.Append("<li><a href='" + item["Url"] + "'>" + item["Title"] + "</a>");
sb.Append("</li>");
}
sb = CreateChild(sb, parentId, parentTitle, parentRow);
}
sb.Append("</ul>");
(e.Item.FindControl("ltrlSubMenu") as Literal).Text = sb.ToString();
}
}
}
}
}
private StringBuilder CreateChild(StringBuilder sb, string parentId, string parentTitle, DataRow[] parentRows)
{
if (parentRows.Length > 0)
{
sb.Append("<ul id='" + parentTitle + "' class='sub-menu collapse'>");
foreach (var item in parentRows)
{
string childId = item["MenuId"].ToString();
string childTitle = item["Title"].ToString();
DataRow[] childRow = Menus.Select("ParentMenuId=" + childId);
if (childRow.Count() > 0)
{
sb.Append("<li data-toggle='collapse' data-target='#" + childTitle + "' class='collapsed'><a href='" + item["Url"] + "'>" + item["Title"] + "<span class='arrow'></span></a>");
sb.Append("</li>");
}
else
{
sb.Append("<li><a href='" + item["Url"] + "'>" + item["Title"] + "</a>");
sb.Append("</li>");
}
CreateChild(sb, childId, childTitle, childRow);
}
sb.Append("</ul>");
}
return sb;
}
private void BindMenu()
{
Menus = GetData("SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url],[CssFont] FROM [Menus]");
DataView view = new DataView(Menus);
view.RowFilter = "ParentMenuId=0";
this.rptCategories.DataSource = view;
this.rptCategories.DataBind();
}
private DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
return dt;
}
}
VB.Net
Dim Menus As New DataTable()
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindMenu()
End If
End Sub
Protected Sub rptMenu_OnItemBound(sender As Object, e As RepeaterItemEventArgs)
If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
If Menus IsNot Nothing Then
Dim drv As DataRowView = TryCast(e.Item.DataItem, DataRowView)
Dim ID As String = drv("MenuId").ToString()
Dim Title As String = drv("Title").ToString()
Dim rows As DataRow() = Menus.[Select](Convert.ToString("ParentMenuId=") & ID)
If rows.Length > 0 Then
Dim sb As New StringBuilder()
sb.Append((Convert.ToString("<ul id='") & Title) + "' class='sub-menu collapse'>")
For Each item In rows
Dim parentId As String = item("MenuId").ToString()
Dim parentTitle As String = item("Title").ToString()
Dim parentRow As DataRow() = Menus.[Select](Convert.ToString("ParentMenuId=") & parentId)
If parentRow.Count() > 0 Then
sb.Append((Convert.ToString("<li data-toggle='collapse' data-target='#") & parentTitle) + "' class='collapsed'><a href='" + item("Url") + "'>" + item("Title") + "<span class='arrow'></span></a>")
sb.Append("</li>")
Else
sb.Append("<li><a href='" + item("Url") + "'>" + item("Title") + "</a>")
sb.Append("</li>")
End If
sb = CreateChild(sb, parentId, parentTitle, parentRow)
Next
sb.Append("</ul>")
TryCast(e.Item.FindControl("ltrlSubMenu"), Literal).Text = sb.ToString()
End If
End If
End If
End If
End Sub
Private Function CreateChild(sb As StringBuilder, parentId As String, parentTitle As String, parentRows As DataRow()) As StringBuilder
If parentRows.Length > 0 Then
sb.Append((Convert.ToString("<ul id='") & parentTitle) + "' class='sub-menu collapse'>")
For Each item In parentRows
Dim childId As String = item("MenuId").ToString()
Dim childTitle As String = item("Title").ToString()
Dim childRow As DataRow() = Menus.[Select](Convert.ToString("ParentMenuId=") & childId)
If childRow.Count() > 0 Then
sb.Append((Convert.ToString("<li data-toggle='collapse' data-target='#") & childTitle) + "' class='collapsed'><a href='" + item("Url") + "'>" + item("Title") + "<span class='arrow'></span></a>")
sb.Append("</li>")
Else
sb.Append("<li><a href='" + item("Url") + "'>" + item("Title") + "</a>")
sb.Append("</li>")
End If
CreateChild(sb, childId, childTitle, childRow)
Next
sb.Append("</ul>")
End If
Return sb
End Function
Private Sub BindMenu()
Menus = GetData("SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url],[CssFont] FROM [Menus]")
Dim view As New DataView(Menus)
view.RowFilter = "ParentMenuId=0"
Me.rptCategories.DataSource = view
Me.rptCategories.DataBind()
End Sub
Private Function GetData(query As String) As DataTable
Dim dt As New DataTable()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand(query)
Using sda As New SqlDataAdapter()
cmd.CommandType = CommandType.Text
cmd.Connection = con
sda.SelectCommand = cmd
sda.Fill(dt)
End Using
End Using
Return dt
End Using
End Function
Screenshot
