Access WCF REST Services in an ASP.NET MVC app using AngularJS

Posted by: Mahesh Sabnis , on 11/3/2014, in Category Windows Communication Foundation (WCF)
Views: 74662
Abstract: This article will guide you through the steps of accessing WCF REST Service using Angular.js in an ASP.NET MVC app

Although ASP.NET Web API replaces Windows Communication Foundation (WCF) Services, the later still remains one of the most widely used frameworks for building service-oriented applications. In most enterprise apps, WCF Services are used as an interface for distributing business logic across various client applications. During the beginning, the communication support provided by WCF was restricted to HTTP, TCP, and MSMQ protocols. With increasing popularity and adoption of REpresential State Transfer (REST), WCF 3.5 enabled REST via the WebGet and WebInvoke attributes and the WebHttpBinding. This allowed you to expose a ServiceContract as a REST service which can be invoked using either JSON or plain XML.

 

JavaScript Object Notation (JSON) is now a popular format for data communication across variety of clients ranging from browser client to device clients. In this article, we will consume WCF REST Service in ASP.NET MVC client using the popular JavaScript MVC framework called Angular.js.

Note: The following steps will guide you through the procedure of accessing WCF REST Service using Angular.js. These steps can be extended as per your project requirements.

Step 1: Open Visual Studio 2013 (the current application is developed using VS2013 Ultimate with Update 3), create a new blank solution, and name it as ‘A7_Consuming_WCF_REST_In_Angular’.

Step 2: In this solution, add a new WCF Service Application and call it ‘WCF_DataService’. In this project, add a new App_Data folder.Now add a new Sql Server Database called ‘Application.mdf’. In this database, add a new table ‘Employee’ with the following definition:

CREATE TABLE [dbo].[Employee] (    
    [EmpNo]       INT           IDENTITY (1, 1) NOT NULL,
    [EmpName]     VARCHAR (100) NOT NULL,
    [Salary]      INT           NOT NULL,
    [DeptName]    VARCHAR (50)  NOT NULL,
    [Designation] VARCHAR (50)  NOT NULL,
    PRIMARY KEY CLUSTERED ([EmpNo] ASC)
);

Step 3: In the project, add a new folder with the name ‘Models’. In this project, add a new ADO.NET Entity Data Model and call it ‘ApplicationEDMX’. Select the Database First approach of EntityFramework. Complete the Wizard by selecting Application.mdf as database and Employee as table. After completing the Wizard the table mapping will be as follows:

ef-table-mapping

Step 4: In the project, rename the IService1.cs to IService.cs and Service1.svc to Service.Svc. Open IService.cs and replace the default code:

using System.ServiceModel;
using System.ServiceModel.Web;
using WCF_DataService.Models;

namespace WCF_DataService
{
    [ServiceContract]
    public interface IService
    {
        [OperationContract]
        [WebGet(UriTemplate="Employees",ResponseFormat=WebMessageFormat.Json)]
        Employee[] GetEmployees();
    }
}

The above ServiceContract has an OperationContract of the name GetEmployees(). This is applied with the attribute WebGet which represents the behavior of the OperationContract for logically retrieving the data in WCF REST Service. This attribute is set with the UriTemplate property, using which the template for the OperationContract can be set while accessing it. The ResponseFormat property specifies the format of the data retrieved from the method. The current value is JSON.

Step 5: Right-click on the Service.svc and select ‘View Markup’. This will open the Service hosting markup and add the new ‘Factory’ attribute for the WCF REST as shown here:

<%@ ServiceHost Language="C#" Debug="true" Service="WCF_DataService.Service" CodeBehind="Service.svc.cs" 
     Factory="System.ServiceModel.Activation.WebServiceHostFactory"%>

Step 6: Open Service.svc.cs and replace the default code using the following code:

using System.Linq;
using WCF_DataService.Models;

namespace WCF_DataService
{
    public class Service : IService
    {
        ApplicationEntities ctx;
        public Service()
        {
            ctx = new ApplicationEntities(); 
        }
        /// <summary>
        /// Method retrieves Employees using
        /// ADO.NET EF
        /// </summary>
        /// <returns></returns>
        public  Employee[] GetEmployees()
        {
            return ctx.Employees.ToArray();
        }
    }
}

The above code shows the implementation of the ServiceContract IService and its GetEmployees() OperationContract. This retrieves Employees using EntityFramework.

Step 7: Open Web.Config file and change the protocolMapping to webHttpBinding instead of basicHttpsBinding. This will enable the WCF service for REST. Also add the endpointBehaviors under behavior for help page so that when the Service is accessed through the browser, it will show the URL to access the OperationContract.

<system.serviceModel>
    <behaviors>
      <serviceBehaviors>
        <behavior>
           
          <serviceMetadata httpGetEnabled="true" httpsGetEnabled="true" />
           
          <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>

Step 8: View the Service in the Browser by right clicking on Service.svc. The browser will show the result as below:

wcf-service-endpoint

Click on the service help page , which will show the url description to access the OperationContract as shown here:

service-help

The URL can be tested as shown here (for the sake of simplicity, I have tested it in the chrome)

wcf-rest-json

The above screenshot shows the Data retrieved from the WCF REST Service in JSON format. Host the Service in IIS for easy access. The process of hosting WCF Service in IIS is explained in this article.

Defining our ASP.NET MVC application

Step 9: In the same solution, add a new empty ASP.NET MVC application and name it as Angular Client. In this project, add references for Angular.js using Manage NuGet Package.

Step 10: In the scripts folder, add a new folder of the name MyScripts and put the following JavaScript files:

Modules.js

/// <reference path="../angular.min.js" />
var app;

(function () {
    app = angular.module("RESTClientModule", []);
})();

The above JavaScript defines Angular Module with the name RESTClientModule. This is the Bootstrapper for the application.

Services.js

/// <reference path="../angular.min.js" />
/// <reference path="Modules.js" />

app.service("RESTClientService", function ($http) {
    
    this.get = function () {
            return $http.get("http://localhost:8020/WCFApp/Service.svc/Employees");
    };
});

The above JavaScript code define the Angular Service of name RESTClientService in the Angular module. This makes use of $http to make call to the WCF REST service.

Controllers.js

/// <reference path="../angular.min.js" />
/// <reference path="Modules.js" />
/// <reference path="Services.js" />

app.controller("RESTClientController", function ($scope, RESTClientService) {
    // debugger;
    var promiseGet = RESTClientService.get();

    promiseGet.then(function (pl) {
        $scope.Employees = pl.data
    },
              function (errorPl) {
                  $log.error('failure loading Employee', errorPl);
              });
});

The above JavaScript code defines Angular Controller on the Module which defines $scope to be bound with the UI. The controller has the dependency on the RESTClientService so that the controller can make call methods from the service. The controller makes use of the Promise object to manage an Asynchronous calls to the method ‘GET’ method from the service. Once the call is complete, the retrieved data will be stored in the $scope.Employees which will be used for DataBinding in the UI.

Step 11: In MVC project, add a new empty MVC controller with the name MVCWCFClientController. This will contain the Index action method. Add a new Empty View in the MVC using scaffolding (right-click on the Index methods and select Add View). In the Index.cshtml add the <table> with DataBinding as here:

<html ng-app="RESTClientModule">
<style type="text/css">
    table, td {
        border: double;
    }
    thead {
      background-color:darkgray;
      font-size:20px;
      font-family:Courier New, Courier, monospace;
      font-weight:900;
    }
</style>

<h2>Consuming WCF REST Service in Angular JS</h2>
<body>
    <table ng-controller="RESTClientController">
        <tr>
          
            <td>
                <table>
                    <thead>
                        <tr>
                            <td>EmpNo</td>
                            <td>EmpName</td>
                            <td>Salary</td>
                            <td>DeptName</td>
                            <td>Designation</td>
                        </tr>
                    </thead>
                    <tbody ng-repeat="Emp in Employees">
                        <tr>
                            <td> <span>{{Emp.EmpNo}}</span></td>
                            <td> <span>{{Emp.EmpName}}</span></td>
                            <td> <span>{{Emp.Salary}}</span></td>
                            <td> <span>{{Emp.DeptName}}</span></td>
                            <td> <span>{{Emp.Designation}}</span></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
</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/Controllers.js"></script>

In the above HTML code, the Angular binding is done using the following directives:

  • ng-app – bound with Module for the bootstrapping
  • ng-controller – bound with the Controller, so that the $scope declared in the controller can be bound with the UI.
  • ng-repeat - This is an iteration for $scope.Employees so that the data from it can be shown in Table.

Run the application, the result will be as below:

wcf-angular-demo

Conclusion

WCF REST has provides benefits of retrieving data in an Open format like JSON, using which it can be consumed by the various categories of client applications. AngularJS provides a simplified approach of accessing WCF REST service for managing Business Logic and Data Access in enterprise applications.

Download the entire source code of this article (Github)

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
Author
Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Darshan Amin on Friday, January 2, 2015 5:50 PM
I tried to follow the hosting of wcf service/Application on IIS article that you wrote, but I am having trouble understanding. Is it possible that you can make a quick article that directly follows this one please ?
Comment posted by Darshan Amin on Friday, January 2, 2015 5:56 PM
I tried to follow the hosting of wcf service/Application on IIS article that you wrote, but I am having trouble understanding. Is it possible that you can make a quick article that directly follows this one please ?
Comment posted by Darshan Amin on Friday, January 2, 2015 6:34 PM
I tried to follow the hosting of wcf service/Application on IIS article that you wrote, but I am having trouble understanding. Is it possible that you can make a quick article that directly follows this one please ?
Comment posted by Meenatchi on Monday, January 19, 2015 7:16 AM
Hi...it works great. Please provide use the sample with parameters from phonegap to rest if possible
Comment posted by Alind on Thursday, January 22, 2015 4:16 AM
Thanks for this, but we are stuck at a point where we want to pull data based on parameters, I think that would be calling WCF service through AngularJS using JSONP, could you please give us some pointers in this direction?

Thanks and best regards,
Alind
Comment posted by Charles Raj on Monday, January 26, 2015 9:28 AM
I tried to implement the sample with different wcf service. When i run the web application. I'm not getting the desired result. Instead i got this error in 'F12' developer tool

"XMLHttpRequest cannot load http://localhost:XXXX/Service.svc/GetAllAccounts. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:56246' is therefore not allowed access."

kindly help me

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

FREE .NET MAGAZINES

Free DNC .NET Magazine

Tags

JQUERY COOKBOOK

jQuery CookBook