Dynamic Menu bUilding using database in html menu c# code
Webform1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DynamicMenusinAsp.net.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#menu {
width: 72%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a {
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover /* IE6 */ {
color: #fafafa;
}
#menu li:hover > ul {
display: block;
}
/* Sub-menu */
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul ul {
top: 0;
left: 155px;
width: 164px;
}
#menu ul li {
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
height: 10px;
width: 164px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */ {
height: 10px;
}
*:first-child + html #menu ul a /* IE7 */ {
height: 10px;
}
#menu ul a:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after {
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #04acec;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu {
zoom: 1;
}
/* IE6 */
*:first-child + html #menu {
zoom: 1;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<asp:Label ID="lblUserName" runat="server" Enabled="false" CssClass="navbar-brand"></asp:Label>
</div>
<div class="navbar-collapse collapse">
<div id="divToShowMenu" runat="server">
</div>
<ul class="nav navbar-nav navbar-right">
<li title="Log out">
<asp:LinkButton ID="lnkLogout" runat="server" CssClass="glyphicon glyphicon-off" ></asp:LinkButton>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="DynamicMenusinAsp.net.WebForm2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#menu {
width: 72%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a {
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover /* IE6 */ {
color: #fafafa;
}
#menu li:hover > ul {
display: block;
}
/* Sub-menu */
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul ul {
top: 0;
left: 155px;
width: 164px;
}
#menu ul li {
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
height: 10px;
width: 164px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */ {
height: 10px;
}
*:first-child + html #menu ul a /* IE7 */ {
height: 10px;
}
#menu ul a:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after {
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #04acec;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu {
zoom: 1;
}
/* IE6 */
*:first-child + html #menu {
zoom: 1;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<asp:Label ID="lblUserName" runat="server" Enabled="false" CssClass="navbar-brand"></asp:Label>
</div>
<div class="navbar-collapse collapse">
<div id="divToShowMenu" runat="server">
</div>
<ul class="nav navbar-nav navbar-right">
<li title="Log out">
<asp:LinkButton ID="lnkLogout" runat="server" CssClass="glyphicon glyphicon-off" ></asp:LinkButton>
</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Webform1.aspx.cs
using System;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Reflection;
namespace DynamicMenusinAsp.net
{
public partial class WebForm2 : System.Web.UI.Page
{ //==== Recrusive method.
StringBuilder sbMenu = new StringBuilder();
int childCount = 0;
protected void Page_Load(object sender, EventArgs e)
{
GetSuperAdminMenus();
}
private DataTable GetData()
{
string query = "select SerailNo , MenuReference, MenuName, MenuDescription,MenuAddress from tbl_PopulateMenuItems";
string constr = "database=UniversalNew;data source=192.168.200.77;user id=sa;password=indi123";
SqlConnection con = new SqlConnection(constr);
SqlDataAdapter da = new SqlDataAdapter(query, con);
DataTable dt = new DataTable();
da.Fill(dt);
return dt;
}
private void GetSuperAdminMenus()
{
DataTable dtGetSuperAdminMenus = GetData();
StringBuilder sbMenu = new StringBuilder();
//==== Created first ul element of the unordered list to generate menu also assigned id="menu" as our
//entire css is based on this id.
sbMenu.Append("<ul id='menu' class='nav navbar-nav'>");
//==== Call recursive method to get all child elements according to parents.
//=== We we pass 0 as argument as 0 is id of default parent.
string childItems = BindSuperAdminMenus(0, dtGetSuperAdminMenus);
sbMenu.Append(childItems);
//==== Close dynamic menu unordered list.
sbMenu.Append(" </ul>");
//==== Show generated menu inside div.
divToShowMenu.InnerHtml = sbMenu.ToString();
}
public string BindSuperAdminMenus(int parentId, DataTable dtGetSuperAdminMenus)
{
List<Menu> objlstMenu = dtGetSuperAdminMenus.ToList<Menu>();
var objlstfilter = from r in objlstMenu
where r.MenuReference == parentId
select new { r.SerailNo, r.MenuReference, r.MenuName, r.MenuAddress };
// List<DashboardMenu> objlst = objlstfilter.ToList<DashboardMenu>();
foreach (var obj in objlstfilter)
{
childCount = objlstMenu.Count(r => r.MenuReference == obj.SerailNo);
if (childCount > 0)
{
sbMenu.Append("<li><a href='" + obj.MenuAddress + "'>" + obj.MenuName + "</a><ul>");
BindSuperAdminMenus(obj.SerailNo, dtGetSuperAdminMenus);
}
else
{
sbMenu.Append("<li><a href='" + obj.MenuAddress + "'>" + obj.MenuName + "</a></li>");
}
}
sbMenu.Append("</ul>");
return sbMenu.ToString();
}
}
public static class GenericMethod
{
public static List<TSource> ToList<TSource>(this DataTable dataTable) where TSource : new()
{
var dataList = new List<TSource>();
const BindingFlags flags = BindingFlags.Public | BindingFlags.Instance | BindingFlags.NonPublic;
var objFieldNames = (from PropertyInfo aProp in typeof(TSource).GetProperties(flags)
select new
{
Name = aProp.Name,
Type = Nullable.GetUnderlyingType(aProp.PropertyType) ??
aProp.PropertyType
}).ToList();
var dataTblFieldNames = (from DataColumn aHeader in dataTable.Columns
select new
{
Name = aHeader.ColumnName,
Type = aHeader.DataType
}).ToList();
var commonFields = objFieldNames.Intersect(dataTblFieldNames).ToList();
foreach (DataRow dataRow in dataTable.AsEnumerable().ToList())
{
var aTSource = new TSource();
foreach (var aField in commonFields)
{
PropertyInfo propertyInfos = aTSource.GetType().GetProperty(aField.Name);
var value = (dataRow[aField.Name] == DBNull.Value) ? null : dataRow[aField.Name]; //if database field is nullable
propertyInfos.SetValue(aTSource, value, null);
}
dataList.Add(aTSource);
}
return dataList;
}
}
}
Comments
Post a Comment