Article

How to create multilevel drop down menu in asp.net using c# dynamically.

25 May 2015 Kamal Pratap
2 Comments 7583 Views



Here we specify the steps to create multi drop down menu dynamically in asp.net from SQL Server. Use the following steps to create menu.

How to create multilevel drop down menu in asp.net using c# dynamically.

Database Script :

USE [Menu]
GO
/****** Object:  Table [dbo].[SubMenu]    Script Date: 05/25/2015 17:46:16 ******/
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

CSS :

<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>

Javascript :

 <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Aspx Page :

<body>
    <form id="form1" runat="server">
        <div id='cssmenu' runat="server">
        </div>
    </form>
</body>

C# Page :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.Configuration;

public partial class menu : System.Web.UI.Page
{
    public string connectionstring = ConfigurationManager.AppSettings["tute"].ToString();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GetMenuData();
        }
    }
    /// 
    /// This method will return data for menu creation
    /// 
    /// 
    public void GetMenuData()
    {
        StringBuilder objstr = new StringBuilder();
        List<Menu> objpmenu = new List<Menu>();
        List<SubMenu> objsmenu = new List<SubMenu>();
        List<ChildSubMenu> objcmenu = new List<ChildSubMenu>();
        objpmenu = GetMenu();
        objsmenu = GetSubMenu();
        objcmenu = GetChildSubMenu();

        objstr.Append("<ul>");

        foreach (Menu _pitem in objpmenu)
        {
            objstr.Append("<li><a href='" + _pitem.MenuUrl + "'><span>" + _pitem.MenuName + "</span></a>");           
            
            var subitem = objsmenu.Where(m => m.ParentId == _pitem.Id).ToList();
            if (subitem.Count > 0)
            {
                objstr.Append("<ul>");
                foreach (var _sitem in subitem)
                {
                    objstr.Append("<li class='has-sub'><a href='" + _sitem.SubMenuUrl + "'><span>" + _sitem.SubMenuName + "</span></a>");

                    var childsubitem = objcmenu.Where(s => s.SubParentId == _sitem.Id).ToList();
                    if (childsubitem.Count > 0)
                    {
                        objstr.Append("<ul>");
                        foreach (var _citem in childsubitem)
                        {
                            objstr.Append("<li class='has-sub'><a href='" + _citem.ChildSubMenuUrl + "'><span>" + _citem.ChildSubMenuName + "</span></a></li>");
                        }
                        objstr.Append("</ul>");
                    } 

                    objstr.Append("</li>");
                }
                objstr.Append("</ul>");
            }        
            
            objstr.Append("</li>");
        }

        objstr.Append("</ul>");

        cssmenu.InnerHtml = objstr.ToString();
    }
    /// 
    /// Get Data from Menu table
    /// 

    /// 
    public List<Menu> GetMenu()
    {
        List<Menu> objmenu = new List<Menu>();
        DataTable _objdt = new DataTable();
        string querystring = "select * from Menu;";
        SqlConnection _objcon = new SqlConnection(connectionstring);
        SqlDataAdapter _objda = new SqlDataAdapter(querystring, _objcon);
        _objcon.Open();
        _objda.Fill(_objdt);
        if (_objdt.Rows.Count > 0)
        {
            for (int i = 0; i < _objdt.Rows.Count; i++)
            {
                objmenu.Add(new Menu { Id = (int)_objdt.Rows[i]["Id"], MenuName = _objdt.Rows[i]["MenuName"].ToString(), MenuUrl = _objdt.Rows[i]["MenuUrl"].ToString() });
            }
        }
        return objmenu;
    }
    /// 
    /// Get data from SubMenu table
    /// 

    /// 
    public List<SubMenu> GetSubMenu()
    {
        List<SubMenu> objmenu = new List<SubMenu>();
        DataTable _objdt = new DataTable();
        string querystring = "select * from SubMenu;";
        SqlConnection _objcon = new SqlConnection(connectionstring);
        SqlDataAdapter _objda = new SqlDataAdapter(querystring, _objcon);
        _objcon.Open();
        _objda.Fill(_objdt);
        if (_objdt.Rows.Count > 0)
        {
            for (int i = 0; i < _objdt.Rows.Count; i++)
            {
                objmenu.Add(new SubMenu { Id = (int)_objdt.Rows[i]["Id"], ParentId = (int)_objdt.Rows[i]["ParentId"], SubMenuName = _objdt.Rows[i]["SubMenuName"].ToString(), SubMenuUrl = _objdt.Rows[i]["SubMenuUrl"].ToString() });
            }
        }
        return objmenu;
    }
    /// 
    /// Get data from childSubmenu table
    /// 

    /// 
    public List<ChildSubMenu> GetChildSubMenu()
    {
        List<ChildSubMenu> objmenu = new List<ChildSubMenu>();
        DataTable _objdt = new DataTable();
        string querystring = "select * from ChildSubMenu;";
        SqlConnection _objcon = new SqlConnection(connectionstring);
        SqlDataAdapter _objda = new SqlDataAdapter(querystring, _objcon);
        _objcon.Open();
        _objda.Fill(_objdt);
        if (_objdt.Rows.Count > 0)
        {
            for (int i = 0; i < _objdt.Rows.Count; i++)
            {
                objmenu.Add(new ChildSubMenu { SubParentId = (int)_objdt.Rows[i]["SubParentId"], ChildSubMenuName = _objdt.Rows[i]["ChildSubMenuName"].ToString(), ChildSubMenuUrl = _objdt.Rows[i]["ChildSubMenuUrl"].ToString() });
            }
        }
        return objmenu;
    }


    /*Menu Class*/
    public class Menu
    {
        public int Id { get; set; }
        public string MenuName { get; set; }
        public string MenuUrl { get; set; }
    }
    public class SubMenu
    {
        public int Id { get; set; }
        public int ParentId { get; set; }
        public string SubMenuName { get; set; }
        public string SubMenuUrl { get; set; }
    }
    public class ChildSubMenu
    {
        public int SubParentId { get; set; }
        public string ChildSubMenuName { get; set; }
        public string ChildSubMenuUrl { get; set; }
    }


}

 

Kamal Pratap

I have 6+ years experience in .Net technologies like Asp.Net, C#, WCF, Web Services, SQL Server, Ajax, LinQ. Currently I am working in Netcarrots Loyalty Services as a Software Developer.

Comments

No coments found to display!

Leave a Comment