MVC - Dynamic Menu With WCF REST and AngularJS

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