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

Article

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>