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

Click Here>>

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

SET IDENTITY_INSERT [dbo].[SiteMenu] ON
INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (2, N'Home', NULL, 0)
INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (5, N'Articles', NULL, 0)
INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (6, N'Blogs', NULL, 0)
INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (7, N'Awards', NULL, 0)
INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (8, N'My Profile', N'http://www.c-sharpcorner.com/members/satyaprakash-samantaray', 2)
INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (9, N'Angularjs', N'http://www.c-sharpcorner.com/article/calendar-events-using-
entityframework-in-angularjs/', 5)
INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (10, N'Mvc', N'http://www.c-sharpcorner.com/article/download-files-in-zip-format-
using-asp-net-mvc-razor-and-sweetalert-library/', 5)
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-
mvc-and-bootbox-part13', 6)
INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (12, N'Sql Server', N'http://www.c-sharpcorner.com/blogs/userdefined-table-type-and-
table-valued-parameters-in-stored-procedure-to-reduce-the-code-size-in-code-behind-file', 6)
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-
april-2017-winners-announced', 7)
INSERT INTO [dbo].[SiteMenu] ([ID], [Name], [Url], [ParentID]) VALUES (15, N'My 2017 First Half of the Year MVP Award', N'http://www.c-
sharpcorner.com/news/2017-first-half-of-the-year-mvps-announced', 7)
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

var app = angular.module('MyApp', []);
app.controller('menuController', ['$scope', '$http', function ($scope, $http) {
$scope.SiteMenu = [];
$http.get('/home/GetSiteMenu').then(function (data) {
$scope.SiteMenu = data.data;
}, function (error) {
alert('Error');
})
}])

Code Description

Here I defined how to load site menu using controller action result method.

$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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SatyaprakashMVCAngularJSDynamicMenu.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetSiteMenu()
{
using (MenuEntities dc = new MenuEntities())
{
var menu = dc.SiteMenus.ToList();
return new JsonResult { Data = menu, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}
}

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.

public JsonResult GetSiteMenu()
{
using (MenuEntities dc = new MenuEntities())
{
var menu = dc.SiteMenus.ToList();
return new JsonResult { Data = menu, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}

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

@{
ViewBag.Title = "Satyaprakash Samantaray";
}
@*<h2>Dynamic menu from database in AngularJS</h2>*@
@* Html code for show nav menu here, for mak the application simple
I will add ngapp and ngcontroller here *@
<br />
<br />
<div ng-app="MyApp">
<div ng-controller="menuController">
@* Here first of all we will create a ng-template *@
<script type="text/ng-template" id="treeMenu" class="main-navigation">
<a href="{{menu.Url}}">{{menu.Name}}</a>
@* We will create submenu only when available *@
<ul ng-if="(SiteMenu | filter:{ParentID : menu.ID}).length > 0">
<li ng-repeat="menu in SiteMenu | filter:{ParentID : menu.ID}" ng-include="'treeMenu'"></li>
</ul>
</script>
<ul class="main-navigation">
@* Here we will load only top level menu *@
<li class="main-navigation" ng-repeat="menu in SiteMenu | filter:{ParentID : 0}" ng-include="'treeMenu'"></li>
</ul>
</div>
</div>
@* Add css here for nav menu *@
<link href="~/css/navMenu.css" rel="stylesheet" />
@* add js here for angular app *@
@section Scripts{
<script src="~/Scripts/MyApp.js"></script>
}

Code Description

Every Line of code is described using comment line.

Step-7

Modify _Layout.cshtml page for load AngularJS library.

Code Ref

<!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>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<h2 style="color:white; text-align: center; font-style: oblique">Satyaprakash MVC AngularJS Dynamic Menu</h2>
@*<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("Application name", "Index", "Home", null, 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("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>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>

Code Description

Here I added navbar header that will show in orange with some white text and here I added angular.js library.

<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

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

7 Comments

Join the conversation! Your thoughts help the community grow.

Josephs8y ago
Hi satya how to implemented login page with authentication in angular
hassan bht9y ago
Thanks and good article i problem with <li ng-repeat="menu in SiteMenu | filter:{ParentID : menu.ID}" ng-include="'treeMenu'"></li> because show submenu to two parentid when parentid;19 , show submenu in parentid:1 and 9
- hassan bht9y ago
  Check parentid in table is ok but service22 to service27 show in service15 and service6 //////// data of table ID Name Url ParentID 2 service1 NULL 0 5 service2 NULL 06 service3 NULL 0 7 service4 NULL 0 8 service5 0 9 service6 0 16 service12 NULL 0 19 service15 NULL 2 20 service16 NULL 2 21 service17 NULL 2 22 service18 NULL 2 23 service19 NULL 2 24 service20 NULL 2 25 service21 NULL 2 26 service22 NULL 19 27 service23 NULL 19 28 service24 NULL 19 29 service25 NULL 19 30 service26 NULL 19 31 service27 NULL 19 32 service28 NULL 30 33 service29 NULL 30 34 service30 NULL 30
- Satyaprakash Samantaray9y ago
  Check your parentid in table....
Raj Ghosh9y ago
Hi Satyaprakash, how to implement the same menu structure in angular 4?
Syed Shanu9y ago
Nice and good article
- Satyaprakash Samantaray9y ago
  Thanks Mr. Syed....................