connectseekers.com

Thursday, 18 September 2014

Dynamic Css Menu Creation Up to Three Level in Asp.Net Using C#.Net

9/18/2014 - By Pranav Singh 0

This article will show  you how you can create a three level dynamic css menu using c#.net in asp.net. In this article I have used c#.net, Css3, html, and asp.net.


So for this article first we will create a new asp.net application and crate three table in our sql DB.

Parent Table:

Child Table:


Child Child Table:



After creating tables add below code into you aspx page.

<%@ 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 Up to Three Level in Asp.Net Using C#.Net</title>
    <style type="text/css">
        #divmenu ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #divmenu ul li
        {
            margin: 0;
            padding: 2px 20px;
            position: relative;
            height: 20px;
            line-height: 20px;
            border: 1px solid #000;
            background-color: Green;
        }
        #divmenu ul li a
        {
            color: White;
            text-decoration:none;
        }
        #divmenu > ul > li
        {
            float: left;
            height: 30px;
            line-height: 30px;
            background-color: Green;
        }
        #divmenu li > ul
        {
            visibility: hidden;
            width: 200px;
            position: absolute;
            top: 0px;
            left: 200px;
            border-left: 1px solid #000;
        }
        #divmenu > ul > li > ul
        {
            top: 35px;
            left: 0;
        }
        #divmenu li:hover
        {
            background-color: #999;
        }
        #divmenu li:hover > ul
        {
            visibility: visible;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div runat="server" id="divmenu">
    </div>
    </form>
</body>
</html>

Now we will add the below code into our .cs 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.OleDb;
using System.Text;

namespace ProjectDemo_Asp.et
{
    public partial class RoleBasedMenu : System.Web.UI.Page
    {
        public string connectionstring = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\\bookstore.mdb;Persist Security Info=False;";
        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>();
            List<MenuChildChild> objccmenu = new List<MenuChildChild>();
            objpmenu = GetParantMenu();
            objcmenu = GetChildMenu();
            objccmenu = GetChildChildMenu();
            objstr.Append("< ul >");
            /*Lavel 1*/
            foreach (MenuParant _pitem in objpmenu)
            {
                objstr.Append("< li class=\"site-name\" >" + _pitem.MenuName + "
");
                var childitem = objcmenu.Where(m => m.PairantId == _pitem.Id).ToList();
                if (childitem.Count > 0)
                {
                    objstr.Append("< ul >");
                    /*Lavel 2*/
                    foreach (MenuChild _citem in childitem)
                    {

                        objstr.Append("< li >" + _citem.ChildName + "
");                      
                        var childchilditem = objccmenu.Where(m => m.PairantChildId == _citem.Id).ToList();
                        if (childchilditem.Count > 0)
                        {
                            objstr.Append("< ul >");
                            /*Lave 3*/
                            foreach (MenuChildChild _ccitem in childchilditem)
                            {
                                objstr.Append("< li >" + _ccitem.ChildName + "
</ li >");
                            }
                            objstr.Append("</ ul >");
                        }
                        objstr.Append("</ 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;";
            OleDbConnection _objcon = new OleDbConnection(connectionstring);
            OleDbDataAdapter _objda = new OleDbDataAdapter(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;";
            OleDbConnection _objcon = new OleDbConnection(connectionstring);
            OleDbDataAdapter _objda = new OleDbDataAdapter(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 { Id = (int)_objdt.Rows[i]["Id"], PairantId = (int)_objdt.Rows[i]["ParentId"], ChildName = _objdt.Rows[i]["ChildMenu"].ToString(), ChildUrl = _objdt.Rows[i]["ChildUrl"].ToString() });
                }
            }
            return objmenu;
        }
        ///

        /// Get data from Child Child table
        ///

        ///
        public List<MenuChildChild> GetChildChildMenu()
        {
            List<MenuChildChild> objmenu = new List<MenuChildChild>();
            DataTable _objdt = new DataTable();
            string querystring = "select * from ChildChildMenu;";
            OleDbConnection _objcon = new OleDbConnection(connectionstring);
            OleDbDataAdapter _objda = new OleDbDataAdapter(querystring, _objcon);
            _objcon.Open();
            _objda.Fill(_objdt);
            if (_objdt.Rows.Count > 0)
            {
                for (int i = 0; i < _objdt.Rows.Count; i++)
                {
                    objmenu.Add(new MenuChildChild { PairantChildId = (int)_objdt.Rows[i]["ChlidParentId"], ChildName = _objdt.Rows[i]["ChildChildName"].ToString(), ChildUrl = _objdt.Rows[i]["ChildChildURL"].ToString() });
                }
            }
            return objmenu;
        }
    }

    /*Menu Class*/
    public class MenuParant
    {
        public int Id { getset; }
        public string MenuName { getset; }
        public string Url { getset; }
    }
    public class MenuChild
    {
        public int Id { getset; }
        public int PairantId { getset; }
        public string ChildName { getset; }
        public string ChildUrl { getset; }
    }
    public class MenuChildChild
    {
        public int PairantChildId { getset; }
        public string ChildName { getset; }
        public string ChildUrl { getset; }
    }
}


        
In above code I have first prepared three class for parent, child and child’s child.  After that I have accessed data from databse and bind it to as per the value provided to UL and LI tag of the menu.

Now we have done run the page and check the output.


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

0 comments:

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
Email Id : contact@aspdotnet-pools.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


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top