Role-Based Menu in ASP.NET MVC with Example
In this article, we are going to learn how to create a
role-based menu in ASP.NET MVC. This menu system will show menu items based on
the role of the login user. For instance, Admin user will be able to create
more role, assign a user to a role and activities that only admin of the site can perform.
This will enable the system to control who see what of
the system. We are using our application from the previous article Role-BasedAuthorization in ASP.NET MVC
Open the project Csharpnaija_Security in Visual Studio
to continue from role-based authorization. Since we have learnt how to provide
role-based authorization to our user, role-based menu will be just a question
of changing or adding some razor code to our layout view (Page).
Expand the Views folder of our project in solution
explorer, then expand the Shared folder to see the layout view as shown below
Now double click on the Layout.cshtml to see the html
and razor of our layout which is the same as the master page is ASP.NET
Webforms, the code snippet is as shown below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>@ViewBag.Title -
My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Csharpnaija
Security", "Index", "Home", new { area
= "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Employee", "Index", "Employees")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year
- My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
From the code above, locate where the menu list items
start, that is where the links of the menu are generated as shown below
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Employee", "Index", "Employees")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
We can now check to see if a user is permitted to use
the system, that means is he authenticated? The code for the checking is as
shown below
Razor Code
@if(User.Identity.IsAuthenticated), this code will
determine if a user as signed in or not. If the user is signed in, then check
if he is in the specified role(s) to see the menu links
@User.IsInRole(“RoleName”) the code snippet is as
shown below
@if (User.Identity.IsAuthenticated)
{
if (User.IsInRole("Admin"))
{
<div class="navbar-collapse
collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Admin", "Index", "Admin")</li>
<li>@Html.ActionLink("Employee", "Index", "Employees")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
}
else{
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Employee", "Index", "Employees")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
}
}
If you launch the application without login, you will
only see the menu meant for anonymous users as shown below based on our
Cshapnaija_Security application.
If you login with an Admin role, you will see the menu
link for Admin from an Admin Controller as shown below
Hope you find this article useful.
Comments
Post a Comment