How
to Create Dynamic Multi Level Menu with Authorization in MVC
How To create Menu from Database in MVC
In this Tutorial of MVC we are going to create Menu and
Sub menu by using CSS style sheet function in MVC so let’s Start .
Pre requisite
MVC Part 2,3,4,5(A),
5(B) tutorial
First we will start
creating table in our bookstore DB
So here is Query.
CREATE TABLE [dbo].[MainMenu](
[MenuID] [int] IDENTITY(1,1) NOT NULL,
[MenuName] [varchar](50) NULL,
[ActionName] [varchar](50) NULL,
[Controller] [varchar](50) NULL,
CONSTRAINT
[PK_MainMenu] PRIMARY KEY
CLUSTERED
(
[MenuID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE
= OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
CREATE TABLE [dbo].[SubMenu](
[SubMenuID] [int] IDENTITY(1,1) NOT NULL,
[MenuId] [int] NULL,
[SubMenuName] [varchar](50) NULL,
[ActionName] [varchar](50) NULL,
[Controller] [varchar](50) NULL,
CONSTRAINT
[PK_SubMenu] PRIMARY KEY
CLUSTERED
(
[SubMenuID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE
= OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO
ALTER TABLE [dbo].[SubMenu] WITH CHECK ADD CONSTRAINT [FK_SubMenu_MainMenu]
FOREIGN KEY([MenuId])
REFERENCES
[dbo].[MainMenu] ([MenuID])
GO
ALTER TABLE [dbo].[SubMenu]
CHECK CONSTRAINT
[FK_SubMenu_MainMenu]
GO
CREATE TABLE [dbo].[SubSubMenu](
[SubSubMenuID] [int] IDENTITY(1,1) NOT NULL,
[SubmenuID] [int] NULL,
[SubSubMenuName] [varchar](50) NULL,
[ActionName] [varchar](50) NULL,
[Controller] [varchar](50) NULL,
CONSTRAINT
[PK_SubSubMenu] PRIMARY KEY CLUSTERED
(
[SubSubMenuID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE
= OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
Now move to our
Visual Studio.
Open our Project
StoreManagementSystem.
First refresh our
data entity framework so that new table definition will be implemented and
added to our code.
Now go to our ModelsàDataBaseà right click on StoreDBContext
Diagram and click on Update Model from Database.... and follow the Instruction.
Now add properties to
our model
Add class for menu
table in viewproperties.cs file
public class mainMenu
{
public int MenuId {
get; set; }
public string MenuName
{ get; set; }
public string
ActionName { get; set; }
public string
ControllerName { get; set; }
}
public class subMenu
{
public int
SubMenuID { get; set; }
public int MenuId {
get; set; }
public string
SubMenuName { get; set; }
public string
ActionName { get; set; }
public string
ControllerName { get; set; }
}
public class subSubMenu
{
public int
SubSubMenuId { get; set; }
public int
SubmenuID { get; set; }
public string
subsubmenuname { get; set; }
public string
ActionName { get; set; }
public string
ControllerName { get; set; }
}
Now add method to
MethodManager class
public List<mainMenu> GetMainMenu()
{
using (StoreDBContext db = new StoreDBContext())
{
var menu = db.MainMenus.Select(m =>
new mainMenu
{
MenuId = m.MenuID ,
MenuName = m.MenuName,
ActionName =m.ActionName,
ControllerName=m.ControllerName ,
}).ToList();
return menu;
}
}
public List<subMenu>
Getsubmenu(int menuid)
{
using (StoreDBContext db = new StoreDBContext())
{
var su = db.SubMenus.Select(m =>
new subMenu
{
MenuId=m.MenuId ,
SubMenuID = m.SubMenuID ,
SubMenuName =m.SubMenuName ,
ActionName = m.ActionName,
ControllerName =
m.ControllerName,
}).ToList();
return su;
}
}
public List<subSubMenu> GetSubsubmenu(int Smenuid)
{
using (StoreDBContext db = new StoreDBContext())
{
var sSu = db.SubSubMenus.Select(m =>
new subSubMenu
{
SubmenuID =
m.SubmenuID ,
SubSubMenuId = m.SubSubMenuID ,
subsubmenuname = m.SubSubMenuName ,
ActionName = m.ActionName,
ControllerName = m.ControllerName,
}).ToList();
return sSu;
}
}
Now add controller action to HOME controller
/ GET:
Home
[Authorization("Admin")]
public ActionResult Index()
{
MethodManager methodManager = new MethodManager ();
ViewBag.UserID =
methodManager.GetUserID(User.Identity.Name);
ViewBag.MainMenu =
methodManager.GetMainMenu();
return View();
}
Now add some CSS for Menu so that it can be Multilevel
Drop Down
Add CSS file <MenuStyle.css>to content folder
Add code to CSS file
.main {
width: 100%;
background: #eee;
}
/*General
Menu Styling*/
.mainnav {
margin: 0 auto
}
li {
list-style: none;
}
li a {
text-decoration: none;
}
.dropdown {
position: absolute;
width: 150px;
top: 41px;
opacity: 0;
visibility: hidden;
transition: ease-out .35s;
-moz-transition: ease-out .35s;
-webkit-transition: ease-out .35s;
}
.mainnav li {
float: left;
padding: 5px;
background: cadetblue;
border-left: 1px dotted #fff;
}
.mainnav li:first-child {
border: none;
}
.mainnav li a {
display: block;
padding: 2px 20px;
color: #fff;
font-family: arial;
}
.mainnav li:hover {
background: darkgray;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
}
.mainnav li:hover a {
color: maroon;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
}
/*First
Level*/
.subs {
left: -45px;
position: relative;
top: 0px;
width: 175px;
border-left: none !important;
border-bottom: 1px dotted #fff !important;
}
.subs:last-child {
border: none !important;
}
.hassubs:hover .dropdown, .hassubs .hassubs:hover .dropdown {
opacity: 1;
visibility: visible;
transition: ease-in .35s;
-moz-transition: ease-in .35s;
-webkit-transition: ease-in .35s;
}
.mainnav li:hover ul a, .mainnav li:hover ul li ul li a {
color: brown;
}
.mainnav li ul li:hover, .mainnav li ul li ul li:hover {
background: darkgray;
transition: ease-in-out .35s;
-moz-transition: ease-in-out .35s;
-webkit-transition: ease-in-out .35s;
}
.mainnav li ul li:hover a, .mainnav li ul li ul li:hover a {
color: blueviolet;
transition: ease-in-out .35s;
-moz-transition: ease-in-out .35s;
-webkit-transition: ease-in-out .35s;
}
/*Second
Level*/
.hassubs .hassubs .dropdown .subs {
left: 25px;
position: relative;
width: 165px;
top: 0px;
}
.hassubs .hassubs .dropdown {
position: absolute;
width: 150px;
left: 120px;
top: 0px;
opacity: 0;
visibility: hidden;
transition: ease-out .35s;
-moz-transition: ease-out .35s;
-webkit-transition: ease-out .35s;
}
Add modify <Index.cshtml> code
Index.cshtml look like
@{
ViewBag.Title = "Index";
Layout = null;
}
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="~/Content/MenuStyle.css">
</head>
<body>
<header>
<div class="main">
<ul class="mainnav">
@{
foreach
(StoreManagementSystem.Models.PropertiesForView.mainMenu dr in ViewBag.MainMenu)
{
<li class="hassubs">
<a href='#'> @Html.ActionLink(dr.MenuName,
dr.ActionName, dr.ControllerName) </a>
@{
StoreManagementSystem.Models.MethodForView.MethodManager methodManager =
new
StoreManagementSystem.Models.MethodForView.MethodManager();
ViewBag.SubMenu
= methodManager.Getsubmenu(Convert.ToInt32(dr.MenuId));
}
<ul class="dropdown">
@{
foreach
(StoreManagementSystem.Models.PropertiesForView.subMenu subitem in ViewBag.SubMenu)
{
if (dr.MenuId == subitem.MenuId)
{
<li class="subs hassubs">
<a href='#'> @Html.ActionLink(subitem.SubMenuName,
subitem.ActionName, subitem.ControllerName) </a>
@{
ViewBag.subtosubmenu
= methodManager.GetSubsubmenu(Convert.ToInt32(subitem.SubMenuID));
}
<ul class="dropdown">
@{
foreach
(StoreManagementSystem.Models.PropertiesForView.subSubMenu subtosubitem in ViewBag.subtosubmenu)
{
if (subitem.SubMenuID ==
subtosubitem.SubmenuID)
{
<li class="subs"><a href='#'>@Html.ActionLink(subtosubitem.subsubmenuname,
subtosubitem.ActionName, subtosubitem.ControllerName) </a></li>
}
}
ViewBag.subtosubmenu = null;
}
</ul>
</li>
}
}
ViewBag.SubMenu = null;
}
</ul>
</li>
}
}
</ul>
</div>
</header>
</body>
<input type="hidden" id="hidUserID" value="@ViewBag.UserID" />
@Html.Action("NoticeBoard", "Home")
<div>
@Html.ActionLink("Register Now!", "RegisterUsr", "UserLog")
</div>
Run the web...
No comments:
Post a Comment