Creating Dynamic Menu From Database By Using MVC AngularJS

Gururaj Jewargi
7y
24.7k
0
1

Blog

DynamicMenu.zip

Step 1

Create a database and a table, as shown below.

create table MainMenu(ID int primary key identity(1,1), Name varchar(50),Url varchar(50))
create table SubMenu(Mid int primary key identity(1,1), SubName varchar(50),SubUrl varchar(50),ID int references MainMenu(ID))

Step 2

Add a few records into the tables.

MainMenu Table

insert into MainMenu values('Electronics','/Electronics'),('Men','/Men'),('Women','/Women'),('Baby & Kids','/BabyKids')

Electronics

insert into SubMenu values('Moto G4 Mobiles', '/MotoG4Mobiles', 1), ('Moto G5 Plus Mobiles', '/MotoG5PlusMobiles ', 1), ('Lenevo Mobiles', '/LenevoMobiles', 1), ('Samsung Mobiles', '/SamsungMobiles', 1), ('Apple Mobiles', '/AppleMobiles', 1)
insert into SubMenu values('Lenevo Laptop', '/LenevoLaptop', 1), ('LG Laptop', '/LGLaptop', 1), ('HP Laptop', '/HPLaptop', 1), ('Dell Laptop', '/Dell Laptop', 1), ('Micromax Laptop', '/MicromaxLaptop', 1), ('Sony Laptop', '/SonyLaptop', 1)
insert into SubMenu values('Mobile Cases', '/MobileCases', 1), ('Head Phones', '/HeadPhones', 1), ('Power Banks', '/Power Banks', 1), ('Screenguards', '/Screenguards', 1), ('Micromax Laptop', '/MicromaxLaptop', 1), ('Memory Cards', '/MemoryCards', 1), ('Chargers', '/Chargers', 1)

Mens

insert into SubMenu values('Sport Shoes', '/SportShoes', 3), ('Casual Shoes', '/CasualShoes', 3), ('Formal Shoes', '/FormalShoes', 3), ('Sandels & Floaters', '/Sandels', 3)
insert into SubMenu values('Fasttrack Watch', '/FasttrackWatch', 3), ('Sony Watch', '/SonyWatch', 3), ('Timex Watch', '/TimexWatch', 3), ('Sonata Watch', '/SonataWatch', 3)

Step 3

Create New Project

Go to File > New > Project > ASP.NET Web Application (under Web) > Entry Application Name > Click OK > select Empty template > Checked MVC > OK.

Step 4

Add Entity Data Model

Right click on Model Folder > Add > New item > Select ADO.NET Entity Data Model under Data > Enter model name > Add.

A popup Window will come (Entity Data Model Wizard) > select Generate from database > Next.

Choose your data connection > select your database > Next > select tables > Finish.

Note

Include foreign keys column in the model. This option should be checked before you click Finish button. See the snapshot given below.

Step 5

Model entity will appear, as shown below.

Step 6

Create MyApp.js File in Script Folder

Add the script given below.

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

Step 7

Create a Controller called HomeContoller in Controllers folder.

Add the code given below.

using System.Web.Mvc;
using DynamicMenu.Models;
namespace DynamicMenu.Controllers {
public class HomeController: Controller {
// GET: Home
public ActionResult Index() {
return View();
}
public JsonResult GetMainMenu() {
DynamicMainMenuEntities dc = new DynamicMainMenuEntities(); {
var menu = dc.MainMenus.Select(c => new {
c.Name,
c.Url,
SubMenu = c.SubMenus.Select(s => new {
s.SubName,
s.SubUrl
})
});
return new JsonResult {
Data = menu, JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
}
}
}

Step 8

Add Bootstrap CSS and create navMenu.css for Customized styles.

navMenu.css

body {
font - family: 'Open Sans', 'sans-serif';
}#custom - bootstrap - menu.navbar -
default.navbar - brand {
color: rgba(255, 255, 255, 1);
}#custom - bootstrap - menu.navbar -
default {
font - size: 14 px;
background - color: rgba(240, 17, 132, 1);
border - width: 1 px;
border - radius: 4 px;
}#custom - bootstrap - menu.navbar -
default.navbar - nav > li > a {
color: rgba(255, 255, 255, 1);
background - color: rgba(248, 248, 248, 0);
}#custom - bootstrap - menu.navbar -
default.navbar - nav > li > a: hover, #custom - bootstrap - menu.navbar -
default.navbar - nav > li > a: focus {
color: rgba(51, 51, 51, 1);
background - color: rgba(248, 248, 248, 0);
}#custom - bootstrap - menu.navbar -
default.navbar - nav > .active > a, #custom - bootstrap - menu.navbar -
default.navbar - nav > .active > a: hover, #custom - bootstrap - menu.navbar -
default.navbar - nav > .active > a: focus {
color: rgba(85, 85, 85, 1);
background - color: rgba(231, 231, 231, 1);
}#custom - bootstrap - menu.navbar -
default.navbar - toggle {
border - color: #ddd;
}#custom - bootstrap - menu.navbar -
default.navbar - toggle: hover, #custom - bootstrap - menu.navbar -
default.navbar - toggle: focus {
background - color: #ddd;
}#custom - bootstrap - menu.navbar -
default.navbar - toggle.icon - bar {
background - color: #888;
}
# custom - bootstrap - menu.navbar -
default.navbar - toggle: hover.icon - bar, #custom - bootstrap - menu.navbar -
default.navbar - toggle: focus.icon - bar {
background - color: #f01184;
}.mega - dropdown {
position: static!important;
}.mega - dropdown - menu {
padding: 20 px 0 px;
width: 100 % ;
box - shadow: none; - webkit - box - shadow: none;
}.mega - dropdown - menu > li > ul {
padding: 0;
margin: 0;
}.mega - dropdown - menu > li > ul > li {
list - style: none;
}.mega - dropdown - menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: # ff3546;
padding: 5 px 60 px 5 px 5 px;
line - height: 30 px;
}

Step 9

Create a View like Index.cshtml.

<html>
<head>
<title></title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/navMenu.js"></script>
<link href="~/Content/navMenu.css" rel="stylesheet" /> </head>
<body>
<div class="container">
<nav id="custom-bootstrap-menu" class="navbar navbar-default">
<div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">My Store</a> </div>
<div class="collapse navbar-collapse js-navbar-collapse" ng-app="MyApp" ng-controller="menuController">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown" ng-repeat="menu in SiteMenu track by $index"> <a href="{{menu.ID}}" class="dropdown-toggle" data-toggle="dropdown">{{menu.Name}} <span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="dropdown-header">{{menu.Name}}</li>
<li class="col-sm-3" ng-repeat="item in menu.SubMenu track by $index">
<ul>
<li><a href="{{item.SubUrl}}">{{item.SubName}}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">My cart (0) items</a></li>
</ul>
</div>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="~/Scripts/MyApp.js"></script>
</body>
</html>