Hey baits,
Please refer below sample.
HTML
<div>
<div>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ASPSnippets</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List"
IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">
</asp:Menu>
</div>
</div>
</div>
<hr />
</div>
</div>
<link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<style type="text/css">
.dropdown-submenu
{
position: relative;
}
.dropdown-submenu > .dropdown-menu
{
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after
{
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after
{
border-left-color: #555;
}
.dropdown-submenu.pull-left
{
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu
{
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
</style>
<script type="text/javascript">
$(function () {
$(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
$(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
$(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
$(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
$(".dropdown-toggle").find("a[href='javascript:;']:not(.level1)").closest('li').addClass('dropdown-submenu');
$("a.selected").closest("li").addClass("active");
$("a.selected").closest(".dropdown-toggle").addClass("active");
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
</script>
Namespaces
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;
VB.Net
Imports System.Data
Imports System.IO
Imports System.Data.SqlClient
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = this.GetData();
PopulateMenu(dt);
}
}
private DataTable GetData()
{
string query = "SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url] FROM [TestMenus]";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
DataTable dt = new DataTable();
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;
}
}
private void PopulateMenu(DataTable dt)
{
string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
DataView view = new DataView(dt);
view.RowFilter = "ParentMenuId=0";
foreach (DataRowView row in view)
{
MenuItem menuItem = new MenuItem
{
Value = row["MenuId"].ToString(),
Text = row["Title"].ToString(),
NavigateUrl = row["Url"].ToString(),
Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
};
Menu1.Items.Add(menuItem);
AddChildItems(dt, menuItem);
}
}
private void AddChildItems(DataTable table, MenuItem menuItem)
{
DataView viewItem = new DataView(table);
viewItem.RowFilter = "ParentMenuId=" + menuItem.Value;
foreach (DataRowView childView in viewItem)
{
MenuItem childmenuItem = new MenuItem
{
Value = childView["MenuId"].ToString(),
Text = childView["Title"].ToString(),
NavigateUrl = childView["Url"].ToString(),
};
menuItem.ChildItems.Add(childmenuItem);
AddChildItems(table, childmenuItem);
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As DataTable = Me.GetData()
PopulateMenu(dt)
End If
End Sub
Private Function GetData() As DataTable
Dim query As String = "SELECT [MenuId], [ParentMenuId], [Title], [Description], [Url] FROM [TestMenus]"
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Dim dt As DataTable = New DataTable()
Using cmd As SqlCommand = New SqlCommand(query)
Using sda As SqlDataAdapter = 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
Private Sub PopulateMenu(ByVal dt As DataTable)
Dim currentPage As String = Path.GetFileName(Request.Url.AbsolutePath)
Dim view As DataView = New DataView(dt)
view.RowFilter = "ParentMenuId=0"
For Each row As DataRowView In view
Dim menuItem As MenuItem = New MenuItem With {
.Value = row("MenuId").ToString(),
.Text = row("Title").ToString(),
.NavigateUrl = row("Url").ToString(),
.Selected = row("Url").ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
}
Menu1.Items.Add(menuItem)
AddChildItems(dt, menuItem)
Next
End Sub
Private Sub AddChildItems(ByVal table As DataTable, ByVal menuItem As MenuItem)
Dim viewItem As DataView = New DataView(table)
viewItem.RowFilter = "ParentMenuId=" & menuItem.Value
For Each childView As DataRowView In viewItem
Dim childmenuItem As MenuItem = New MenuItem With {
.Value = childView("MenuId").ToString(),
.Text = childView("Title").ToString(),
.NavigateUrl = childView("Url").ToString()
}
menuItem.ChildItems.Add(childmenuItem)
AddChildItems(table, childmenuItem)
Next
End Sub
Screenshot
