Binding Dynamic Menu Depending On User Role In ASP MVC

Ramesh Palanivel

9y228.2k33100Article

ASP.NET MVCDynamic Menu Bind DependsUser Role In ASP.NET

33 Comments

Join the conversation! Your thoughts help the community grow.

Rajesh Thampi5y ago
Excellent Ramesh. I truly appreciate the efforts to attach the database along with your sample solution. Above all, the explanations are quite structured, giving a clear idea how to proceed at all levels of development. Thank you.
Priya Darshini5y ago
Thank you soo much
Nabeel Ur Rehaman Shah6y ago
How we can do this with web forms
Sheikh Fareeth6y ago
Dear sir database not found
sundar N6y ago
How to configure tblMainMenu and tbsubMenu tables? i not able to see your images to the website
duy duy7y ago
If you click on the index and move to another page, how can you do it? Can you help me?
Nguyen Long7y ago
Very useful. How can I use [Authorize] on Action?
Sheikh Fareeth7y ago
Very useful code but i have one doubt so, how to redirect the another page if clicking submenu item
Francisco Lopez7y ago
Muchas gracias por el post , aclaro muchas dudas.
Mohamed Ali8y ago
Meaning full project, i thank you for you supporting those who need supporting
Sanjay Krishna8y ago
I want to bind the Same Menu in Side Nav Bar with Links . I means when click AboutUs Link then should open the AboutUs View . Any Adiea ho to achieve it?
ejaz mirza8y ago
Its good for sample comes to practical the menu will added into master page that type two view model become conflict error
Renard Kabza8y ago
It is a very nice project - I will learn a lot from it.Thank you, A few things need to be told. 1. I am using VS 2013. 2. I recovered your DB from *.bak - your backup does not include the FK key between SubMenu and Roles tables. So manually I created it again. 3. I removed existing model from the folder of DataModel 4. web.config a) I left the connection string of DefaultConnection b) I removed the connection string of SampleMenuMasterDBEntities 5. I created my own model (DB first) again using the same name (SampleMenuMasterDBEntities) for the connection string. Since then everything has been working. Regards Renard
Zakir Patwary8y ago
This is really helpful
Sokh Kheang8y ago
Hello Teacher! i have error GroupBy// var groupByMenu = MenuMaster.GroupBy(x => x.MainMenuName).ToList();
- Sokh Kheang8y ago
  Yes, teacher, i want to create Binding Dynamic Menu Depending On User Role, i follow this step by step, but have error.
- Sokh Kheang8y ago
  Teacher! Could you help me? Remote on my PC using (TeamViewer) (ID: 432 793 915 Password: sokhaa, or f211pk)
- Ramesh Palanivel8y ago
  Hi Sokh, What error you are getting? Kindly mention the error ...
Md Farid9y ago
Very Nice code. Helps a lot. Good job Ramesh
Ivin Raj S9y ago
Please sir help me can you share full code please?
Ivin Raj S9y ago
This is my mailId [email protected]
Ivin Raj S9y ago
Sir am in new in this technology can you share your code please ?
Ramesh Palanivel9y ago
You can create CRUD operation for Menu table using entity framework
Ivin Raj S9y ago
How to create role and menu using code?
Ivin Raj S9y ago
Thanks sir it's working fine
Ramesh Palanivel9y ago
IVIN Raj. Kindly check whether your database has connected properly in entity framework
Ivin Raj S9y ago
The underlying provider failed on open. entity framework please help me sir
Ramesh Palanivel9y ago
thank you so much Manav
Manav Pandya9y ago
Nice one .................
Ramesh Palanivel9y ago
thanks Satyaprakash Bro..
Satyaprakash Samantaray9y ago
Nice.......................................

In this article, we are going to learn how to bind a menu depending on the User Role using ASP MVC.

In our projects, sometimes we need to restrict some modules depending on the user level. Here, we will take a real-time example of a simple inventory management using ASP MVC. Let's see types of roles and module details in our application.

Types of Roles

Admin
Manager
User

Modules

Home

Index
About Us

Sales

New Invoice
Update Invoice
Delete Invoice

Report

Daily Report
Date wise Report

Description of Roles

Admin - Admin can see all the modules
Manager - Manager also can see all modules
User - User can only see Home (Index, About Us) and Sales (New Invoice). A user cannot have permission to see the report details and he/she doesn't have permission to update or delete the created invoice.

Now, let's see how to implement this in our project, step by step.

Step 1 - Create Database and create the required Tables

First, we will create a database and create the required tables. Here, I have created my database and named it as "SampleMenuMasterDB".

Now, let's create tables. First, we will create a table "tblRoles" and insert some values. Please find the below images for your reference.

Next, we will create a table "tblLogin" and insert some values. Please find the below images for your reference.

Note
Here, we have mapped foreign key with the table "tblRoles" for column RoleId.

Next, we will create table Menu Configuration tables. Here, I am going to create a table "tblMainMenu" and "tblSubMenu".

Note
Here, I have mapped the foreign key with tables "tblMainMenu" and "tblRoles" for columns MainMenuId and RoleId.

Step 2

Let's create a simple ASP MVC project and bind the menu according to the user roles. Here, I have created my project and named it as "DynamicMenyBind".

Note - Here, I have selected internet application while creating the project.

Step 3

Let us add a folder "DataModel" to add "ADO.Net Entity Data Model". If you want to know how to add Entity model in our project, please refer here.

Step 4

Next, we will create a "LoginModels" class in our Models folder. Please find the below code for your reference.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace DynamicMenyBind.Models
{
public class LoginModels
{
public int UserId { get; set; }
[Required(ErrorMessage="Please enter the User Name")]
public string UserName { get; set; }
[Required(ErrorMessage = "Please enter the Password")]
[DataType(DataType.Password)]
public string Password { get; set; }
public int? UserRoleId { get; set; }
public string RoleName { get; set; }
}
}

Now, let us create a Controller and name it as "Login".

In the Login Controller, let's create a simple "Login" method.

public ActionResult Login()
{
return View();
}

To add a View, right click on the method and select "Add View" option. A new dialog window will appear. In that, select strongly-typed View and select your LoginModels class. In scaffold template, select "Create".

Now, the View will be created.

Note - Here, I have removed some fields like user role id and user role name etc. Because in login page, we need only username and password. That's enough for this page.

Step 5

Let's make some changes in _layout page and web.config.

To modify your layout page , go to View->Shared->_layout.cshtml. Please find the below changes.

<!DOCTYPE html>
<html lang="en">
<head>
@*This CDN links I got from w3 school for Bootstrap Menu*@
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div id="body">
@RenderSection("featured", required: false)
<div class="container">
@RenderBody();
</div>
</div>
@RenderSection("scripts", required: false)
</body>
</html>

Note - I have removed some HTML code from my custom designing. You can do the changes as per your custom design.

Next, let's change the Form authentication mode and redirect the URL page for our login page if the user is not authenticated.

Please make the below changes in your web.config file.

<authentication mode="Forms">
<forms loginUrl="~/Login/Login" timeout="2880" />
</authentication>

Let's run the project. You must get the similar output as given below.

Step 6

Let's create one more model class in Models folder for Menu Master. Here, I have created a class and named it as "MenuModels". Please refer the below code for your reference.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DynamicMenyBind.Models
{
public class MenuModels
{
public string MainMenuName { get; set; }
public int MainMenuId { get; set; }
public string SubMenuName { get; set; }
public int SubMenuId { get; set; }
public string ControllerName { get; set; }
public string ActionName { get; set; }
public int? RoleId { get; set; }
public string RoleName { get; set; }
}
}

Next, let's create a simple Partial View in the shared folder for menu binding.

Let's add this Menu partial in the layout page. Please add the HTML code in the layout page.

<nav>
@Html.Partial("_MenuPartial")
</nav>

Let's run and check wether the menu is loaded in top navigation.

Step 7

Now, create another action result method in Login Controller to receive the user input. Then, validate the user input and create the session to maintain the user details.

[HttpPost]
public ActionResult Login(LoginModels _login)
{
if (ModelState.IsValid) //validating the user inputs
{
bool isExist = false;
using (SampleMenuMasterDBEntities _entity = new SampleMenuMasterDBEntities()) // out Entity name is "SampleMenuMasterDBEntites"
{
isExist = _entity.tblLogins.Where(x => x.UserName.Trim().ToLower() == _login.UserName.Trim().ToLower()).Any(); //validating the user name in tblLogin table whether the user name is exist or not
if (isExist)
{
LoginModels _loginCredentials= _entity.tblLogins.Where(x => x.UserName.Trim().ToLower() == _login.UserName.Trim().ToLower()).Select(x => new LoginModels
{
UserName=x.UserName,
RoleName=x.tblRole.Roles,
UserRoleId=x.RoleId,
UserId=x.Id
}).FirstOrDefault(); // Get the login user details and bind it to LoginModels class
List<MenuModels> _menus = _entity.tblSubMenus.Where(x => x.RoleId == _loginCredentials.UserRoleId).Select(x => new MenuModels
{
MainMenuId=x.tblMainMenu.Id,
MainMenuName=x.tblMainMenu.MainMenu,
SubMenuId=x.Id,
SubMenuName=x.SubMenu,
ControllerName=x.Controller,
ActionName=x.Action,
RoleId=x.RoleId,
RoleName=x.tblRole.Roles
}).ToList(); //Get the Menu details from entity and bind it in MenuModels list.
FormsAuthentication.SetAuthCookie(_loginCredentials.UserName, false); // set the formauthentication cookie
Session["LoginCredentials"] = _loginCredentials; // Bind the _logincredentials details to "LoginCredentials" session
Session["MenuMaster"] = _menus; //Bind the _menus list to MenuMaster session
Session["UserName"] = _loginCredentials.UserName;
return RedirectToAction("Index", "Home");
}
else
{
ViewBag.ErrorMsg = "Please enter the valid credentials!...";
return View();
}
}
}
return View();
}

Run the project and test whether the user can see the list of menus or not.

Step 8

Let's add the logout option to clear the session.Add some HTML code in _menupartial page.

<ul class="nav navbar-nav navbar-right">
@if (Session["LoginCredentials"] != null)
{
<li>@Html.ActionLink("Logout", "LogOff", "Login")</li>
}
else
{
<li>@Html.ActionLink("Login", "Login", "Login")</li>
}
</ul>

Note
Here, I have validated - if the LoginCredentials session has a null value, the label will be shown like Login. If it is not, it will be shown like "logoff".

For logout, we have to add logout action result in the Login Controller. Please refer to the below code.

public ActionResult LogOff()
{
FormsAuthentication.SignOut();
Session.Abandon();
Session.Clear();
Session.RemoveAll();
return RedirectToAction("Login", "Login");
}

Let's run the project. See the demo output here.

Here, I have attached my project with Database backup. To know how to restore the database backup, please read my previous article here.

Thanks for reading my article. If you have any comments or queryies, please mention it in the comment box.