Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Dynamic Menu MVC WCF REST AngularJS

Article:
Viewed:  2267 
Posted On:  01/09/2015 21:28:35 
How we can create Dynamic Menu MVC WCF REST AngularJS ? 

In this article I am going to show how we can create Dynamic menu in MVC application with AngularJS.

Dynamic Menu mean reading Menu and their sub Menu from Data Base table. I have below SQL Server data table where I am having my Menu Information:

MENU table in Design Mode:

1.png

Image 1.

Script of this Table:

CREATE TABLE [dbo].[Menu](
          [Menu_ID] [int] IDENTITY(1,1) NOT NULL,
          [Menu_Parent_ID] [int] NULL,
          [Menu_Name] [varchar](100) NULL,
          [ActionMethodName] [varchar](100) NULL,
          [ControllerName] [varchar](100) NULL,
 CONSTRAINT [PK_Menu] PRIMARY KEY CLUSTERED
(
          [Menu_ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF,
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
 
GO  
 

Now understand this table by Data:

2.png

Image 2.

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

See below Queries:

3.png

Image 3.

4.png

Image 4.

Now see:

5.png

Image 5.

Hoe above queries will help you to understand Menu Structure in Data base Table.

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

So Open Visual Studio -> New-> Project -> Add a WCF Project like Below:

6.png

Image 6.

Remove Service.svc and IService.cs. Right Click on Project Solution Explorer -> Add WCF Service:

7.png

Image 7.

Now again Right Click on Project Solution Explorer (DynamicMenu_MVC_AngularJS_WCFService) -> Add New Item

8.png

Image 8.

9.png

Image 9.

10.png

Image 10.

11.png

Image 11.

12.png

Image 12.

13.png

Image 13.

Now add a new class MenuItem.cs to define DataContract

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Runtime.Serialization;
using System.ServiceModel;
 
namespace DynamicMenu_MVC_AngularJS_WCFService
{
    public class MenuItem
    {
        [DataContract]
        public class MenuDetailDataContract
        {
            [DataMember]
            public string Menu_ID { get; set; }
 
            [DataMember]
            public string Menu_Parent_ID { get; set; }
 
            [DataMember]
            public string Menu_Name { get; set; }
 
            [DataMember]
            public string ActionMethodName { get; set; }
 
            [DataMember]
            public string ControllerName { get; set; }

       
}
    }
}


14.png

Image 14.

Now open IMenuService.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
 
namespace DynamicMenu_MVC_AngularJS_WCFService
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IMenuService" in both code and config file together.
    [ServiceContract]
    public interface IMenuService
    {
        [OperationContract]
        [WebInvoke(Method = "GET",
          RequestFormat = WebMessageFormat.Json,
          ResponseFormat = WebMessageFormat.Json,
          UriTemplate = "/GetMenuDetails/")]
        List<MenuItem.MenuDetailDataContract> GetMenuDetails();
    }
}
 

15.png

Image 15.

Now open MenuService.svc:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

namespace
DynamicMenu_MVC_AngularJS_WCFService
{

    // NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "MenuService" in code, svc and config file together.

    // NOTE: In order to launch WCF Test Client for testing this service, please select MenuService.svc or MenuService.svc.cs at the Solution Explorer and start debugging.

    public class MenuService : IMenuService
    {
        DynamicMenu_MVC_AngularJS_WCFService.TestDBEntities1 OME;
 
        public MenuService()
        {
            OME = new DynamicMenu_MVC_AngularJS_WCFService.TestDBEntities1();
        }
 
        public List<MenuItem.MenuDetailDataContract> GetMenuDetails()
        {
            var query = (from A in OME.Menu
                         select new
                         {
                             A.Menu_ID,
                             A.Menu_Parent_ID,
                             A.Menu_Name,
                             A.ActionMethodName,
                             A.ControllerName
                         }).ToList();
 
            List<MenuItem.MenuDetailDataContract> MenuList = new List<MenuItem.MenuDetailDataContract>();
 
            query.ToList().ForEach(rec =>
            {
                MenuList.Add(new MenuItem.MenuDetailDataContract
                {
                    Menu_ID = Convert.ToString(rec.Menu_ID),
                    Menu_Parent_ID = rec.Menu_Parent_ID.ToString(),
                    Menu_Name = rec.Menu_Name.ToString(),
                    ActionMethodName = rec.ActionMethodName,
                    ControllerName = rec.ControllerName
                });
            });
            return MenuList;
        }
    }
}

16.png

Image 16.

Make sure youe WCF Service web.config file should have <ServiceModel> like below:

<system.serviceModel>
    <behaviors>
      <serviceBehaviors>
        <behavior>
          <!-- To avoid disclosing metadata information, set the values below to false before deployment -->
          <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
          <!-- To receive exception details in faults for debugging purposes,
          set the value below to true.  Set to false before deployment
          to avoid disclosing exception information -->
          <serviceDebug includeExceptionDetailInFaults="false" />
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior>
          <webHttp helpEnabled="True" />
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <protocolMapping>
      <add binding="webHttpBinding" scheme="http" />
    </protocolMapping>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
  </system.serviceModel>

17.png

Image 17.

Now build your WCF Service.

Now time to add a new MVC project. So Rights click on your project solution explorer -> Add -> New Project.

18.png

Image 18.

19.png

Image 19.

2.png

Image 20.

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

  • Run your WCF Service.
  • Copy WCF Service URL
  • Right Click on MVC projrct's  -> Add ServiceReference.

21.png

Image 21.

22.png

Image 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 -> ManageNuGet -> Search Angular:

23.png

Image 23.

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

So Create a New Folder iside : MVC Project-> Scripts-> MyScripts

Here add these 3 js File like below:

1.    Module.js 

/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />  
 
var app;
(function () {
    app = angular.module("RESTClientModule", []);
})();

24.png

Image 24.

2.    Service.js

/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" /> 
/// <reference path="Modules.js" />  
 
app.service("AngularJs_WCFService", function ($http) {
    //Get Order Master Records 
    this.geMenuDetails = function () {
        return $http.get("http://localhost:22131/MenuService.svc/GetMenuDetails");
    };
});
 

25.png

 

Image 25.

 

3.    Controller.js

/// <reference path="../angular.js" /> 
/// <reference path="../angular.min.js" />  
/// <reference path="Modules.js" />  
/// <reference path="Services.js" />  
 
app.controller("MVCDynamicMenuWCF_Controller", function ($scope, $window, AngularJs_WCFService) {
    $scope.date = new Date();
    $scope.showDetails = false;
 
    getAllMenuDetails();
 
    function getAllMenuDetails() {
        var promiseGet = AngularJs_WCFService.geMenuDetails();
        promiseGet.then(function (pl) {
            $scope.MenuDetailsDisp = pl.data
        },
             function (errorPl) {
             });
    }
 
    $scope.showMenu = function (showMenus) {
        if (showMenus == 1) {
            $scope.showDetails = true;
        }
        else {
            $scope.showDetails = false;
        }
    }
 
    $scope.showsubMenu = function (showMenus, ids) {
        if (showMenus == 1) {
            $scope.subChildIDS = ids;
            $scope.showSubDetails = true;
        }
        else if (showMenus == 0) {
            $scope.showSubDetails = false;
        }
        else {
            $scope.showSubDetails = true;
        }
    }
});
 

26.png

 

Image 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 -> Index.cshtml

 

So My Index.cshtml is:

  

<style>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu {
        background: blue;
        height: 5px;
        color: #FFFFFF;
    }
        .menu > li {
            display: inline-block;
            padding: 2px 6px 22px 2px;
            display: inline-block;
            text-align: center;
            height: 10px;
            width: 176px;
            color: #0094ff;
            background: #0094ff;
        }
            .menu > li a {
                display: inline-block;
                padding: 2px 6px 22px 2px;

               
display: inline-block;
                text-align: center;
                height: 10px;
                width: 176px;
                color: #FFFFFF;
                background: green;
            }
                .menu > li a:hover {
                    display: inline-block;
                    padding: 2px 6px 22px 2px;
                    display: inline-block;
                    text-align: center;
                    height: 10px;
                    width: 176px;
                    color: #000000;
                    background: yellow;
                }
 
    .sub-menu {
        position: absolute;
        display: none;
        background-color: transparent;
        padding: 5px;
    }
 
        .sub-menu > li {
            display: block;
            cursor: pointer;
        }
            .sub-menu > li a:hover {
                display: block;
                cursor: pointer;
                background: yellow;
            }
 
 
    li:hover .sub-menu {
        display: block;
    }
</style>
<html data-ng-app="RESTClientModule">
@{
    ViewBag.Title = "MVC- Dynamic Menu using WCF REST & AngularJS";   
}
<body data-ng-controller="MVCDynamicMenuWCF_Controller">
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-collapse collapse">
                <div style="overflow: visible;">
                    <ul class="menu">
                        <li data-ng-repeat="menus in MenuDetailsDisp | filter:{Menu_Parent_ID:'0'}">
                            @{
                                var url = Url.Action("{{menus.ActionMethodName}}", "{{menus.ControllerName}}", new { id = "{{id=menus.ActionMethodName}}" });
                                url = HttpUtility.UrlDecode(url);
                            }
                            <a data-ng-href="@url">{{menus.Menu_Name}}</a>
 
                            <ul class="sub-menu">
                                <li data-ng-repeat="submenus in MenuDetailsDisp | filter:{Menu_Parent_ID:menus.Menu_ID}:true"
ng-mouseover="showsubMenu(1,submenus.Menu_ID);"
ng-mouseout="showsubMenu(0,submenus.Menu_ID);">

                                    @{
                                        var url1 = Url.Action("{{submenus.ActionMethodName}}", "{{submenus.ControllerName}}",
  
new { id = "{{id=submenus.ActionMethodName}}" });
                                        url1 = HttpUtility.UrlDecode(url1);
                                    }

                                   
<a data-ng-href="@url1">{{submenus.Menu_Name}}</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div style="height: 200px;"></div>
</body>
</html>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/MyScripts/Modules.js"></script>
<script src="~/Scripts/MyScripts/Services.js"></script>
<script src="~/Scripts/MyScripts/controller.js"></script>

Now Run your application:

27.png

Image 27.

28.png

Image 28.

29.png

Image 29.

30.png

Image 30.

31.png

Image 31.

32.png

Image 32.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us