Post
Ask Question

Creating Dynamic Menu From Database By Using MVC AngularJS

Step 1

Create a database and a table, as shown below.

  1. create table MainMenu(ID int primary key identity(1,1), Name varchar(50),Url varchar(50))  
  2. 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

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

Electronics 

  1. 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)  
  2. 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)  
  3. 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 

  1. insert into SubMenu values('Sport Shoes', '/SportShoes', 3), ('Casual Shoes', '/CasualShoes', 3), ('Formal Shoes', '/FormalShoes', 3), ('Sandels & Floaters', '/Sandels', 3)  
  2. 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. 
  1. var app = angular.module('MyApp', []);  
  2. app.controller('menuController', ['$scope', '$http', function($scope, $http) {  
  3.     $scope.SiteMenu = [];  
  4.     $http.get('/Home/GetMainMenu').then(function(data) {  
  5.         $scope.SiteMenu = data.data;  
  6.     }, function(error) {  
  7.         alert('Error');  
  8.     })  
  9. }])   

Step 7

Create a Controller called HomeContoller in Controllers folder.

Add the code given below.

  1. using System.Web.Mvc;  
  2. using DynamicMenu.Models;  
  3. namespace DynamicMenu.Controllers {  
  4.     public class HomeController: Controller {  
  5.         // GET: Home  
  6.         public ActionResult Index() {  
  7.             return View();  
  8.         }  
  9.         public JsonResult GetMainMenu() {  
  10.             DynamicMainMenuEntities dc = new DynamicMainMenuEntities(); {  
  11.                 var menu = dc.MainMenus.Select(c => new {  
  12.                     c.Name,  
  13.                         c.Url,  
  14.                         SubMenu = c.SubMenus.Select(s => new {  
  15.                             s.SubName,  
  16.                                 s.SubUrl  
  17.                         })  
  18.                 });  
  19.                 return new JsonResult {  
  20.                     Data = menu, JsonRequestBehavior = JsonRequestBehavior.AllowGet  
  21.                 };  
  22.             }  
  23.         }  
  24.     }  
  25. }  

Step 8

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

navMenu.css

  1. body {  
  2.     font - family: 'Open Sans', 'sans-serif';  
  3. }#custom - bootstrap - menu.navbar -  
  4.     default.navbar - brand {  
  5.         color: rgba(255, 255, 255, 1);  
  6.     }#custom - bootstrap - menu.navbar -  
  7.     default {  
  8.         font - size: 14 px;  
  9.         background - color: rgba(240, 17, 132, 1);  
  10.         border - width: 1 px;  
  11.         border - radius: 4 px;  
  12.     }#custom - bootstrap - menu.navbar -  
  13.     default.navbar - nav > li > a {  
  14.         color: rgba(255, 255, 255, 1);  
  15.         background - color: rgba(248, 248, 248, 0);  
  16.     }#custom - bootstrap - menu.navbar -  
  17.     default.navbar - nav > li > a: hover, #custom - bootstrap - menu.navbar -  
  18.     default.navbar - nav > li > a: focus {  
  19.         color: rgba(51, 51, 51, 1);  
  20.         background - color: rgba(248, 248, 248, 0);  
  21.     }#custom - bootstrap - menu.navbar -  
  22.     default.navbar - nav > .active > a, #custom - bootstrap - menu.navbar -  
  23.     default.navbar - nav > .active > a: hover, #custom - bootstrap - menu.navbar -  
  24.     default.navbar - nav > .active > a: focus {  
  25.         color: rgba(85, 85, 85, 1);  
  26.         background - color: rgba(231, 231, 231, 1);  
  27.     }#custom - bootstrap - menu.navbar -  
  28.     default.navbar - toggle {  
  29.         border - color: #ddd;  
  30.     }#custom - bootstrap - menu.navbar -  
  31.     default.navbar - toggle: hover, #custom - bootstrap - menu.navbar -  
  32.     default.navbar - toggle: focus {  
  33.         background - color: #ddd;  
  34.     }#custom - bootstrap - menu.navbar -  
  35.     default.navbar - toggle.icon - bar {  
  36.         background - color: #888;  
  37.   
  38. }  
  39.  
  40. # custom - bootstrap - menu.navbar -  
  41.             default.navbar - toggle: hover.icon - bar, #custom - bootstrap - menu.navbar -  
  42.             default.navbar - toggle: focus.icon - bar {  
  43.                 background - color: #f01184;  
  44.             }.mega - dropdown {  
  45.                 position: static!important;  
  46.             }.mega - dropdown - menu {  
  47.                 padding: 20 px 0 px;  
  48.                 width: 100 % ;  
  49.                 box - shadow: none; - webkit - box - shadow: none;  
  50.             }.mega - dropdown - menu > li > ul {  
  51.                 padding: 0;  
  52.                 margin: 0;  
  53.             }.mega - dropdown - menu > li > ul > li {  
  54.                 list - style: none;  
  55.             }.mega - dropdown - menu > li > ul > li > a {  
  56.                 display: block;  
  57.                 color: #222;  
  58.   
  59. padding: 3px 5px;  
  60.   
  61. }  
  62.   
  63. .mega-dropdown-menu > li ul > li > a:hover,  
  64.   
  65. .mega-dropdown-menu > li ul > li > a:focus {  
  66.   
  67. text-decoration: none;  
  68.   
  69. }  
  70.   
  71. .mega-dropdown-menu .dropdown-header {  
  72.   
  73. font-size: 18px;  
  74.   
  75. color: # ff3546;  
  76.                 padding: 5 px 60 px 5 px 5 px;  
  77.                 line - height: 30 px;  
  78.             }  

Step 9

Create a View like Index.cshtml. 

  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5.     <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  
  6.     <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  7.     <script src="~/Scripts/bootstrap.min.js"></script>  
  8.     <script src="~/Scripts/navMenu.js"></script>  
  9.     <link href="~/Content/navMenu.css" rel="stylesheet" /> </head>  
  10.   
  11. <body>  
  12.     <div class="container">  
  13.         <nav id="custom-bootstrap-menu" class="navbar navbar-default">  
  14.             <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">  
  15.   
  16. <span class="sr-only">Toggle navigation</span>  
  17.   
  18. <span class="icon-bar"></span>  
  19.   
  20. <span class="icon-bar"></span>  
  21.   
  22. <span class="icon-bar"></span>  
  23.   
  24. </button> <a class="navbar-brand" href="#">My Store</a> </div>  
  25.             <div class="collapse navbar-collapse js-navbar-collapse" ng-app="MyApp" ng-controller="menuController">  
  26.                 <ul class="nav navbar-nav">  
  27.                     <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>  
  28.                         <ul class="dropdown-menu mega-dropdown-menu">  
  29.                             <li class="dropdown-header">{{menu.Name}}</li>  
  30.                             <li class="col-sm-3" ng-repeat="item in menu.SubMenu track by $index">  
  31.                                 <ul>  
  32.                                     <li><a href="{{item.SubUrl}}">{{item.SubName}}</a></li>  
  33.                                 </ul>  
  34.                             </li>  
  35.                         </ul>  
  36.                     </li>  
  37.                 </ul>  
  38.                 <ul class="nav navbar-nav navbar-right">  
  39.                     <li><a href="#">My cart (0) items</a></li>  
  40.                 </ul>  
  41.             </div>  
  42.             <!-- /.nav-collapse -->  
  43.         </nav>  
  44.     </div>  
  45.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>  
  46.     <script src="~/Scripts/MyApp.js"></script>  
  47. </body>  
  48.   
  49. </html>  

Step 10

Run the Application.

Click Electronics tab and you will see the screenshot.
Next Recommended Reading Validations using AngularJS in MVC