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.
Some of my previous articles are as follows:
Dynamic
Css Menu Creation in Asp.Net Using C#.Net, Login
Form With LightbBox Effect in Asp.Net, Highlight
GridView Row on Mouseover Using CSS in Asp.Net C#.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 { get; set; }
public string MenuName { get; set; }
public string Url { get; set; }
}
public class MenuChild
{
public int Id { get; set; }
public int PairantId { get; set; }
public string ChildName { get; set; }
public string ChildUrl { get; set; }
}
public class MenuChildChild
{
public int PairantChildId { get; set; }
public string ChildName { get; set; }
public string ChildUrl { get; set; }
}
}
|
Now we have done run the page and check the output.
About the Author
0 comments:
Please let me know your view