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
Go to File > New > Project > ASP.NET Web Application (under Web) > Entry Application Name > Click OK > select Empty template > Checked MVC > OK.
Step 4
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
- 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
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
- };
- }
- }
- }
- }
Karthik KPosted Sep 19, 2023, 8:10 AM
Great article!!
Chetan PangamPosted Jul 13, 2017, 2:14 PM
Hi Gururaj, This works fine but it is showing Menu on only Home/Index. If I go for other action it will not show. As it is menu bar it should be common across application. I tried to put in _layout.cshtml but it did not work. Kindly suggest approach.