MVC - Dynamic Menu With WCF REST and AngularJS

Dynamic Menu means reading menu and their sub-menus from the database table. I have the following SQL Server data table where you can see the Menu Information:

MENU table in Design Mode:


Figure 1

Script of this Table:

Now understand this table by data:


Figure 2

Here in this table I have record with Menu_ID & Menu_Parent_ID relation. From here we can identify which menu has submenu.

Queries


Figure 3


Figure 4



Figure 5

Above queries will help you to understand Menu Structure in the database table.

Now time to create a Visual Studio Application. Here I will use WCF REST and AngularJS.

Open Visual Studio, then New and go to Project. Add a WCF Service Application project like the following:


Figure 6

Remove Service.svc and IService.cs. Right click on Project Solution Explorer, then add WCF Service:


Figure 7

Now again right click on Project Solution Explore.

(DynamicMenu_MVC_AngularJS_WCFService) - Add New Item


Figure 8


Figure 9


Figure 10


Figure 11


Figure 12


Figure 13

Now add a new class MenuItem.cs to define DataContract.

Figure 14

Now open IMenuService.cs:

Figure 15

Now open MenuService.svc:

Figure 16

Make sure your WCF Service web.config file should have <ServiceModel> like the following:

Figure 17

Now build your WCF Service.

Now time to add a new MVC project. Right click on your project solution explorer, click Add, then New Project.


Figure 18


Figure 19


Figure 20

Now Add your WCF Service reference in your MVC project: Steps To Add WCF Service Reference.

Run your WCF Service.Copy WCF Service URL, Right click on MVC project, then Add Service Reference


Figure 21


Figure 22

As I told you that I am going to show dynamic menu using AngularJS, so we need to add AngularJS reference.

Right click on your MVC Project’s Solution Explorer, then ManageNuGet and click Search Angular:


Figure 23

Now time to add AngularJS Module.js, Controller.js and Service.js.

Create a new folder under: MVC Project, Scripts, then MyScripts.

Add the following three js files:

1. Module.js
   
   1. /// <reference path="../angular.js" />
   2. /// <reference path="../angular.min.js" />
   4. var app;
   6. (function () {
   7. app = angular.module("RESTClientModule", []);
   8. })();
   
   Figure 24
   
   
2. Service.js
   
   1. /// <reference path="../angular.js" />
   2. /// <reference path="../angular.min.js" />
   3. /// <reference path="Modules.js" />
   5. app.service("AngularJs_WCFService", function ($http) {
   6. //Get Order Master Records
   7. this.geMenuDetails = function () {
   8. return $http.get("http://localhost:22131/MenuService.svc/GetMenuDetails");
   9. };
   10. });
   
   Figure 25
   
   
3. Controller.js
   
   1. /// <reference path="../angular.js" />
   2. /// <reference path="../angular.min.js" />
   3. /// <reference path="Modules.js" />
   4. /// <reference path="Services.js" />
   6. app.controller("MVCDynamicMenuWCF_Controller", function ($scope, $window, AngularJs_WCFService) {
   7. $scope.date = new Date();
   8. $scope.showDetails = false;
   10. getAllMenuDetails();
   12. function getAllMenuDetails() {
   13. var promiseGet = AngularJs_WCFService.geMenuDetails();
   14. promiseGet.then(function (pl) {
   15. $scope.MenuDetailsDisp = pl.data
   16. },
   17. function (errorPl) {
   18. });
   19. }
   21. $scope.showMenu = function (showMenus) {
   22. if (showMenus == 1) {
   23. $scope.showDetails = true;
   24. }
   25. else {
   26. $scope.showDetails = false;
   27. }
   28. }
   30. $scope.showsubMenu = function (showMenus, ids) {
   31. if (showMenus == 1) {
   32. $scope.subChildIDS = ids;
   33. $scope.showSubDetails = true;
   34. }
   35. else if (showMenus == 0) {
   36. $scope.showSubDetails = false;
   37. }
   38. else {
   39. $scope.showSubDetails = true;
   40. }
   41. }
   42. });
   
   Figure 26
   
   Now Add a new controller & View in which you want to show your Dynamic menus. In my case I am showing these in Home, then Index.cshtml

My Index.cshtml is the following:

Now Run your application


Figure 27


Figure 28


Figure 29


Figure 30


Figure 31


Figure 32


Figure 33