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 {
-
- 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-collapse -->
- </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>
Step 10
Run the Application.
Click Electronics tab and you will see the screenshot.