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>


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

Popular posts from this blog

How to write Pure java script Program?