Monday, 28 July 2014

Browse: Home CSS Dynamic Css Menu Creation in Asp.Net Using C#.Net

Dynamic Css Menu Creation in Asp.Net Using C#.Net

7/28/2014 - By Pranav Singh 18

Dynamic menu creation is one of the most important parts if a website development. So today I will show you how you can create dynamic css menu using in asp.net using CSS/CSS3.  This will cover label 2 menu.

Some of my previous articles are as follows: Login Form With LightbBox Effect in Asp.Net, Highlight GridView Row on Mouseover Using CSS in Asp.Net C#.Net.

First we will search for the menu which we want to implement dynamically. Now download the menu and incorporate the static menu in your application. Now follow the below tutorial to create the dynamic menu.

After this we will create table in which we will add the menu item detail. In this article I have used two table one for parent and other for child table. In this child table contains the reference of parent table.
Parent Table:


Child Table:


So for this article first we will create a new asp.net application and add the menu detail like css .

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RoleBasedMenu.aspx.cs"
    Inherits="ProjectDemo_Asp.et.RoleBasedMenu" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Dynamic Css Menu Creation in Asp.Net Using C#.Net</title>
    <style type="text/css">
        ul
        {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        ul li
        {
            display: block;
            position: relative;
            float: left;
            border: 1px solid #000;
        }
        li ul
        {
            display: none;
        }
        ul li a
        {
            display: block;
            background: green;
            padding: 5px 10px 5px 10px;
            text-decoration: none;
            white-space: nowrap;
            color: #fff;
        }
        ul li a:hover
        {
            background: black;
        }
        li:hover ul
        {
            display: block;
            position: absolute;
        }
        li:hover li
        {
            float: none;
        }
        li:hover a
        {
            background: green;
        }
        li:hover li a:hover
        {
            background: #000;
        }
        #drop-nav li ul li
        {
            border-top: 0px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div runat="server" id="divmenu">
       
    </div>
    </form>
</body>
</html>

Now just check the div control I have added runat="server". This I have to bind the record which I will generate from code end.

Now check the code used for making the dynamic menu. 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Data;
using System.Text;
using System.Data.SqlClient;

namespace ProjectDemo_Asp.et
{
    public partial class RoleBasedMenu : System.Web.UI.Page
    {
        public string connectionstring = "<----your connection="" string----="">";
        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<MenuParant> objpmenu = new List<MenuParant>();
            List<MenuChild> objcmenu = new List<MenuChild>();
            objpmenu = GetParantMenu();
            objcmenu = GetChildMenu();
            objstr.Append("< ul id=\"drop-nav\">");
            foreach (MenuParant _pitem in objpmenu)
            {
                objstr.Append("< li>< a href='" + _pitem.Url + "'>" + _pitem.MenuName + "< /a>");
                var childitem = objcmenu.Where(m => m.PairantId == _pitem.Id).ToList();
                if (childitem.Count > 0)
                {
                    objstr.Append("< ul>");
                    foreach (var _citem in childitem)
                    {
                        objstr.Append("< li>< a href='" + _citem.ChildUrl + "'>" + _citem.ChildName + "< /a></ li>");
                    }
                    objstr.Append("< /ul>");
                }
                objstr.Append("< /li>");
            }
            objstr.Append("< /ul>");
            divmenu.InnerHtml = objstr.ToString();
        }
        /// 
        /// Get Data from parant table
        /// 

        /// 
        public List<MenuParant> GetParantMenu()
        {
            List<MenuParant> objmenu = new List<MenuParant>();
            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 MenuParant { Id = (int)_objdt.Rows[i]["Id"], MenuName = _objdt.Rows[i]["ParentMenu"].ToString(), Url = _objdt.Rows[i]["ParentUrl"].ToString() });
                }
            }
            return objmenu;
        }
        /// 
        /// Get data from child dable
        /// 

        /// 
        public List<MenuChild> GetChildMenu()
        {
            List<MenuChild> objmenu = new List<MenuChild>();
            DataTable _objdt = new DataTable();
            string querystring = "select * from ChildMenu;";
            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 MenuChild { PairantId = (int)_objdt.Rows[i]["ParentId"], ChildName = _objdt.Rows[i]["ChildMenu"].ToString(), ChildUrl = _objdt.Rows[i]["ChildUrl"].ToString() });
                }
            }
            return objmenu;
        }
    }

    /*Menu Class*/
    public class MenuParant
    {
        public int Id { get; set; }
        public string MenuName { get; set; }
        public string Url { get; set; }
    }
    public class MenuChild
    {
        public int PairantId { get; set; }
        public string ChildName { get; set; }
        public string ChildUrl { get; set; }
    }


}

       
Now check the above code I have used two function to retrieve the data from the tables. After fetching data from data base I have created a common function where I am using both the record collection.

Now just check the GetMenuData() function in this I have prepared the string of menu and bind the detail to the div control as html string.

Now we have done just call this function on page load and run the page to check the output.


DOWNLOAD

Tags: , ,
About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

18 comments:

  1. Anonymous6 September 2014 at 14:04

    Working great! Thanks!

    ReplyDelete
  2. Anonymous18 September 2014 at 07:17

    can u show how to do with 3 level menu.. please help...

    ReplyDelete
  3. Anonymous18 September 2014 at 12:08

    can u show how to do with 3 level menu.. please help

    ReplyDelete
  4. Anonymous18 September 2014 at 12:10

    it doesn't work for me. no colour or menu appear..why?

    ReplyDelete
    Replies
    1. Pranav Singh18 September 2014 at 20:41

      Hi please check your style sheet.

      Delete
    2. Anonymous9 January 2015 at 14:09

      hi remove all space exist in html tag like <ul li mention in cs code

      Delete
    3. Ravi Reddy12 July 2016 at 16:18

      This comment has been removed by the author.

      Delete
    4. Unknown12 July 2016 at 16:22

      Thank u Sir :)

      Delete
  5. Anonymous18 September 2014 at 12:17

    it preview as below...no menu, no colour..please help

    < ul id="drop-nav">< li>< a href=''>Publication Activities< /a>< ul>< li>< a href='/Publication/ListViewArticleJournal.aspx'>Article in Journal< /a>< li>< a href='/Publication/ListViewArticleProceeding.aspx'>Article In Proceeding< /a>< li>< a href='/Publication/ListViewBook.aspx'>Book

    ReplyDelete
    Replies
    1. Pranav Singh18 September 2014 at 20:42

      Hi please download the code and then try it.
      please check there is gap between < ul id="drop-nav"> for displaying the code. without this gap it will display dot.

      Delete
  6. Anonymous9 January 2015 at 14:10

    thanx sir publish for valuable code

    ReplyDelete
  7. Unknown7 February 2015 at 14:14

    thanks so much sir, its really helpful for me

    subhash shrivastava

    ReplyDelete
  8. Anonymous11 June 2015 at 18:44

    SUPRB.........

    ReplyDelete
  9. Anonymous11 June 2015 at 18:45

    Machane kidu

    ReplyDelete
  10. Unknown18 June 2015 at 10:01

    Thank u..............

    ReplyDelete
  11. Sidharth Mahapatra19 August 2015 at 17:15

    This comment has been removed by the author.

    ReplyDelete
  12. Anonymous26 August 2015 at 17:32

    how i can show vertical menu ,Plz help

    ReplyDelete

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Global Classified : Connectseekers.com
© 2014 aspdotnet-pools.com Designed by Bloggertheme9.
back to top