Post
Ask Question

Dynamic Menu Using Entity Framework And AngularJS In ASP.NET MVC

Introduction

Here I implemented multi-level navigation menu with AngularJS In Mvc.

description

I created Some Main Menu and sub menu will appear for corresponding Main Menu and After click on it the page will redeirect.

Project Download Link
Steps To Be Followed

Step-1

First create one Table .Then add some dummy data. 

The logic behind this is all main menus should have parentid = 0 and the ID column value of Main menu should be mentioned in parentid column of sub menu. Then the sub menu will appear for corresponding Main Menu.

 
 
Dummy Data
 
 
 
 
Insert Dummy Data Script
  1. SET IDENTITY_INSERT [dbo].[SiteMenu] ON  
  2. INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (2, N'Home', NULL, 0)  
  3. INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (5, N'Articles', NULL, 0)  
  4. INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (6, N'Blogs', NULL, 0)  
  5. INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (7, N'Awards', NULL, 0)  
  6. INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (8, N'My Profile', N'http://www.c-sharpcorner.com/members/satyaprakash-samantaray', 2)  
  7. INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (9, N'Angularjs', N'http://www.c-sharpcorner.com/article/calendar-events-using-  
  8.   
  9. entityframework-in-angularjs/', 5)  
  10. INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (10, N'Mvc', N'http://www.c-sharpcorner.com/article/download-files-in-zip-format-  
  11.   
  12. using-asp-net-mvc-razor-and-sweetalert-library/', 5)  
  13. INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (11, N'Google Map', N'http://www.c-sharpcorner.com/blogs/google-map-gps-locator-using-  
  14.   
  15. mvc-and-bootbox-part13', 6)  
  16. INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (12, N'Sql Server', N'http://www.c-sharpcorner.com/blogs/userdefined-table-type-and-  
  17.   
  18. table-valued-parameters-in-stored-procedure-to-reduce-the-code-size-in-code-behind-file', 6)  
  19. INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (13, N'My April 2017 Winner Award', N'http://www.c-sharpcorner.com/news/the-month-of-  
  20.   
  21. april-2017-winners-announced', 7)  
  22. INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (15, N'My 2017 First Half of the Year MVP Award', N'http://www.c-  
  23.   
  24. sharpcorner.com/news/2017-first-half-of-the-year-mvps-announced', 7)  
  25. SET IDENTITY_INSERT [dbo].[SiteMenu] OFF 
 
Step2

Then create a Ado.net entity data model named "MyModel.edmx". There you can configure your entity name and table you have created as described above.

 
 
Step3

Here I have created a folder named "Scripts" first, and then I have added a javascript file for adding angular components (module, controller etc). Here we will fetch menu data from the database. Right Click on your solution file (from solution explorer) > Add > New Folder > Renamed your folder. and then Right click on your folder (just created) > Add >New Item > select "javascript" file >
Enter name (here "MyApp.js")> Ok. 
 
Code Ref
  1. var app = angular.module('MyApp', []);  
  2. app.controller('menuController', ['$scope', '$http', function ($scope, $http) {  
  3.     $scope.SiteMenu = [];  
  4.     $http.get('/home/GetSiteMenu').then(function (data) {  
  5.         $scope.SiteMenu = data.data;  
  6.     }, function (error) {  
  7.         alert('Error');  
  8.     })  
  9. }]) 
Code Description
 
Here I defined how to load site menu using controller action result method.
  1. $http.get('/home/GetSiteMenu').then(function (data) {  
Step-4

Now we will create a CSS file for styling the navigation menu. Here in this example, our menu will be a multi-level menu. In the same way, first I have added a folder named "css" and then added a CSS file. Right Click on your solution file (from solution explorer) > Add > New Folder > Rename your folder. And then Right click on your folder (just created) > Add >New Item > select "style sheet" file >
Enter name (here "navMenu.css") > Ok.

You can find out All In My Project File. 
 
Step-5

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add. Here I have created a controller named "HomeController"

Code Ref
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace SatyaprakashMVCAngularJSDynamicMenu.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             return View();  
  14.         }  
  15.   
  16.         public JsonResult GetSiteMenu()  
  17.         {  
  18.             using (MenuEntities dc = new MenuEntities())  
  19.             {  
  20.                 var menu = dc.SiteMenus.ToList();  
  21.                 return new JsonResult { Data = menu, JsonRequestBehavior = JsonRequestBehavior.AllowGet };  
  22.             }  
  23.         }  
  24.     }  
  25. } 
Code Description

It should be in the Layout page, but I have shown it here in the Index page for making the post simple to understand. Here I have added "Index" Action into  "Home" Controller. Add an another action GetSiteMenu into your controller for getting menu data from database. 
  1. public JsonResult GetSiteMenu()  
  2.         {  
  3.             using (MenuEntities dc = new MenuEntities())  
  4.             {  
  5.                 var menu = dc.SiteMenus.ToList();  
  6.                 return new JsonResult { Data = menu, JsonRequestBehavior = JsonRequestBehavior.AllowGet };  
  7.             }  
  8.         } 
Step-6

Right Click on Action Method (here right click on Index action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.

Code Ref
  1. @{  
  2.     ViewBag.Title = "Satyaprakash Samantaray";  
  3. }  
  4.   
  5.   
  6. @*<h2>Dynamic menu from database in AngularJS</h2>*@  
  7.   
  8. @* Html code for show nav menu here, for mak the application simple  
  9.     I will add ngapp and ngcontroller here *@  
  10. <br />  
  11. <br />  
  12. <div ng-app="MyApp">  
  13.     <div ng-controller="menuController">  
  14.         @* Here first of all we will create a ng-template *@  
  15.         <script type="text/ng-template" id="treeMenu" class="main-navigation">  
  16.             <a href="{{menu.Url}}">{{menu.Name}}</a>  
  17.             @* We will create submenu only when available *@  
  18.             <ul ng-if="(SiteMenu | filter:{ParentID : menu.ID}).length > 0">  
  19.                 <li ng-repeat="menu in SiteMenu | filter:{ParentID : menu.ID}" ng-include="'treeMenu'"></li>  
  20.             </ul>  
  21.         </script>  
  22.   
  23.         <ul class="main-navigation">  
  24.             @* Here we will load only top level menu *@  
  25.             <li class="main-navigation" ng-repeat="menu in SiteMenu | filter:{ParentID : 0}" ng-include="'treeMenu'"></li>  
  26.         </ul>  
  27.   
  28.     </div>  
  29. </div>  
  30.   
  31. @* Add css here for nav menu *@  
  32. <link href="~/css/navMenu.css" rel="stylesheet" />  
  33.   
  34. @* add js here for angular app *@  
  35. @section Scripts{  
  36.     <script src="~/Scripts/MyApp.js"></script>  
  37. } 
Code Description

Every Line of code is described using comment line. 
 
Step-7

Modify _Layout.cshtml page for load AngularJS library.

Code Ref
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>@ViewBag.Title - My ASP.NET Application</title>  
  7.     <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />  
  8.     <link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />  
  9.     <script src="~/Scripts/modernizr-2.6.2.js"></script>  
  10.   
  11. </head>  
  12. <body>  
  13.     <div class="navbar navbar-inverse navbar-fixed-top">  
  14.         <div class="container">  
  15.             <div class="navbar-header">  
  16.                 <h2 style="color:white; text-align: center; font-style: oblique">Satyaprakash MVC AngularJS Dynamic Menu</h2>   
  17.                 @*<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
  18.                     <span class="icon-bar"></span>  
  19.                     <span class="icon-bar"></span>  
  20.                     <span class="icon-bar"></span>  
  21.                 </button>*@  
  22.                 @*@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })*@  
  23.             </div>  
  24.             @*<div class="navbar-collapse collapse">  
  25.                 <ul class="nav navbar-nav">  
  26.                     <li>@Html.ActionLink("Home", "Index", "Home")</li>  
  27.                     <li>@Html.ActionLink("About", "About", "Home")</li>  
  28.                     <li>@Html.ActionLink("Contact", "Contact", "Home")</li>  
  29.                 </ul>  
  30.                 @Html.Partial("_LoginPartial")  
  31.             </div>*@  
  32.         </div>  
  33.     </div>  
  34.     <div class="container body-content">  
  35.         @RenderBody()  
  36.         <hr />  
  37.         @*<footer>  
  38.             <p>© @DateTime.Now.Year - My ASP.NET Application</p>  
  39.         </footer>*@  
  40.     </div>  
  41.   
  42.     <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  43.     <script src="~/Scripts/bootstrap.min.js"></script>  
  44.     <!--HERE we will add angular.js library-->  
  45.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>  
  46.     @RenderSection("scripts", required: false)  
  47. </body>  
  48. </html> 
Code Description

Here I added navbar header that will show in orange with some white text and here I added angular.js library. 
  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
Notes
 
This type of menu creation is very useful when admin user wants to set the access permissions or restrict users from accessing some pages at runtime.
 
OUTPUT


Menu showing sub menu,



Gif For Better Understanding.



Summary
  1. Load Dynamic menu using Entity Framework and angularjs.
  2. More faster than normal menu binding.
  3. Concept implemented in MVC.
  4. Download Project from Above GitHub Link.


Similar Articles