WCF RESTful services and consuming them in an HTML page

Sudheer Reddy K

Rate me:

4.76/5 (11 votes)

1 Jul 2013CPOL6 min read

99.2K

3.7K

The article explains how to create a WCF RESTful service and consume it in a normal HTML page using a jQuery AJAX call.

Download source - 94.8 KB

Introduction

In this article I've discussed about WCF REST services and how to consume them in a normal HTML page. We will see what is required from a service developer's perspective to create a REST enabled WCF service. We see how we can use and consume RESTful WCF services.

Background

Overview of REST

REST stands for Representational State Transfer. This is a protocol for exchanging data over a distributed environment. The main idea behind REST is that we should treat our distributed services as a resource and we should be able to use simple HTTP protocols to perform various operations on that resource.

Now the basic CRUD operations are mapped to the HTTP protocols in the following manner:

GET: This maps to the R(Retrieve) part of the CRUD operation. This will be used to retrieve the required data (representation of data) from the remote resource.
POST: This maps to the U(Update) part of the CRUD operation. This protocol will update the current representation of the data on the remote server.
PUT: This maps to the C(Create) part of the CRUD operation. This will create a new entry for the current data that is being sent to the server.
DELETE: This maps to the D(Delete) part of the CRUD operation. This will delete the specified data from the remote server.

Walk through application

When you create a WCF service application project in Visual Studio you will get the IService1.cs and Service1.svc files along with a few other project related stuff. First we will discuss a few definitions which will be used in the article.

Operation Contract: The Operation Contract attribute is used to specify that the method is a web service method. Until unless you declare the attribute it will be treated as a normal method which can't be exposed to the outside world to consume it.
Data Contract: The Data Contract attribute is used to specify the class which contains properties, fields through which we store our business data and transmit our business data using web services to the clients who consumes them.
Data Member: The Data Member attribute is used with the properties or fields of a DataContract class. If you want this field data to be sent to the client it should be attributed as DataMember.
End Point: All communication with a Windows Communication Foundation (WCF) service occurs through the endpoints of the service. Endpoints provide clients access to the functionality offered by a WCF service.

Each endpoint consists of four properties:

An address that indicates where the endpoint can be found.
A binding that specifies how a client can communicate with the endpoint.
A contract that identifies the operations available.
A set of behaviors that specify local implementation details of the endpoint.

Binding: Bindings specify how a Windows Communication Foundation (WCF) service endpoint communicates with other endpoints.
Service Contract: A service contract describes the operation that a service provides. A Service can have more than one service contract but it should have at least one service contract.

A Service Contract can be defined using the [ServiceContract] and [OperationContract] attribute. The [ServiceContract] attribute is similar to the [WebServcie] attribute in the WebService and [OpeartionContract] is similar to the [WebMethod] in a WebService.

Now we will see how to create two web service methods:

Method that returns the employee class instance as XML output.
Method that returns the employee class instance as JSON output.

In the code, I've created two entities:

EmployeeXML class

using System.Runtime.Serialization;

namespace WcfServiceXmlAndJsonDemo
{
    /// <summary>
    /// EmployeeXML class : This class is retrieved through servie
    /// as XML representation.
    /// </summary>
    [DataContract]
    public class EmployeeXML
    {
        #region Properties

        [DataMember]
        public string Name { get; set; }

        [DataMember]
        public int Id { get; set; }

        [DataMember]
        public double Salary { get; set; }

        #endregion
    }
}

EmployeeJSON class:

namespace WcfServiceXmlAndJsonDemo
{
    /// <summary>
    /// EmployeeJSON class : This class is retrieved through servie
    /// as JSON(JavaScript Object Notation) representation.
    /// </summary>
    [DataContract]
    public class EmployeeJSON
    {
        #region Properties

        [DataMember]
        public string Name { get; set; }

        [DataMember]
        public int Id { get; set; }

        [DataMember]
        public double Salary { get; set; }

        #endregion
    }
}

The first method's return type is an instance of the EmployeeXML class and the other for the second method. Now I will show you how to expose our service methods to the clients.

Declare the two methods in the IService1 interface as follows:

[ServiceContract]
public interface IService1
{
    #region OperationContracts

    [OperationContract]
    [WebInvoke(Method="GET",UriTemplate="GetXml", 
      ResponseFormat=WebMessageFormat.Xml,RequestFormat=WebMessageFormat.Xml,
      BodyStyle=WebMessageBodyStyle.Bare)]
    EmployeeXML GetEmployeeXML();

    [OperationContract]
    [WebInvoke(Method = "GET", UriTemplate = "GetJson", 
      ResponseFormat = WebMessageFormat.Json, 
      RequestFormat = WebMessageFormat.Json, 
      BodyStyle = WebMessageBodyStyle.Wrapped)]
    EmployeeJSON GetEmployeeJSON();

    #endregion
}

Method="GET" specifies that it is the HTTP GET verb which performs the retrieval operation.
UriTemplate="GetXml" is the path through which the method is accessed (http://localhost/Service1.svc/GetXml).
ResponseFormat specifies the response format of the method and RequestFormat is the way you should send data if any parameters are present for the method to request any data.

Now implement the methods in the Service1.svc file as follows:

public class Service1 : IService1
{
    #region ImplementedMethods

    public EmployeeXML GetEmployeeXML()
    {
        EmployeeXML xml = new EmployeeXML() {Name="Sudheer",Id=100,Salary=4000.00 };
        return xml; ;
    }

    public EmployeeJSON GetEmployeeJSON()
    {
        EmployeeJSON json = new EmployeeJSON() {Name="Sumanth",Id=101,Salary=5000.00 };
        return json;
    }

    #endregion
}

The next important thing is the Web.config file which is the key part of the service. In web.config you should specify the service metadata, that is, the details of binding and the endpoint through which the clients can access your service. The important things to consider in web.config file are:

Service behavior.
End point behavior.

XML

<system.servicemodel>
    <behaviors>
      <servicebehaviors>
        <behavior>
          <servicemetadata httpsgetenabled="true" httpgetenabled="true">
          <servicedebug includeexceptiondetailinfaults="false">
        </servicedebug> </servicemetadata></behavior>
      </servicebehaviors>
    <endpointbehaviors>
      <behavior name="web">
        <webhttp>
      </webhttp></behavior>
    </endpointbehaviors>
    </behaviors>
    <protocolmapping>
        <add scheme="https" binding="basicHttpsBinding">
    </add></protocolmapping>    
    <servicehostingenvironment multiplesitebindingsenabled="true" aspnetcompatibilityenabled="true">
  <services>
    <service name="WcfServiceXmlAndJsonDemo.Service1">
      <endpoint binding="webHttpBinding" 
        contract="WcfServiceXmlAndJsonDemo.IService1" behaviorconfiguration="web">
    </endpoint> </service>
  </services>
  </servicehostingenvironment>
</system.servicemodel>

Testing the Service

Now right click on the Service1.svc file and select the View in browser option as follows:

Now your browser looks something like this:

Now add the uritemplate of the method to see the output. Ex: localhost:1249/Service1.svc/GetXml gives you the following output:

The same way you can also see the JSON output by adding the uritemplate specific to the JSON method (GetJson). Following is the JSON output:

Client application to consume the WCF service

Now go ahead and create an empty web application and add an HTML page with the following code. Note: Don't forget to add the jQuery library to the application as we are going to consume the WCF service using a jQuery AJAX call. The HTML code for the page is as follows (part of the code, for full code please go through the code I've attached):

JavaScript

<script>
    $(document).ready(function () {    
    });
    var GetJson = function () {
        $.ajax({
            type: "GET",
            url: "http://localhost:4545/Service/Service1.svc/GetJson",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (data) {
                var result = data.GetEmployeeJSONResult;
                var id = result.Id;
                var name = result.Name;
                var salary = result.Salary;
                $('#jsonData').html('');
                $('#jsonData').append('<table border="1"><tbody><tr><th>" + 
                  "Employee Id</th><th>Name</th><th>Salary</th>" + 
                  "</tr><tr><td>' + id + '</td><td>' + name + 
                  '</td><td>' + salary + '</td></tr></tbody></table>');

            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });
    }
    var GetXml = function () {
        $.ajax({
            type: "GET",
            url: "http://localhost:4545/Service/Service1.svc/GetXml",
            dataType: "xml",
            success: function (xml) {
                $(xml).find('EmployeeXML').each(function () {
                    var id = $(this).find('Id').text();
                    var name = $(this).find('Name').text();
                    var salary = $(this).find('Salary').text();
                    $('#xmlData').html('');
                    $('#xmlData').append('<table border="1"><tbody><tr><th>Employee" + 
                      " Id</th><th>Name</th><th>Salary</th></tr><tr><td>' + 
                      id + '</td><td>' + name + '</td><td>' + salary + 
                      '</td></tr></tbody></table>');
                });
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        });
    }
</script>

The URL I've provided above is already published and hosted in IIS. It may vary from yours. So please look through the below steps for how to host the application under IIS.

Now we are ready with the code side. The next big part is hosting your service and client application in IIS in the same port. Why I've have specified the same port is because of the WCF service account's cross domain issues i.e., the client application should run under the same port that the service runs.