Click here to Skip to main content
15,566,443 members
Articles / Web Development / ASP.NET
Article
Posted 1 Dec 2010

Stats

489.4K views
17.1K downloads
142 bookmarked

Calling WCF Services using jQuery

Rate me:
Please Sign up or sign in to vote.
4.76/5 (85 votes)
2 Dec 2010CPOL3 min read
A guide on how to call Windows Communication Foundation services using jQuery

Introduction

This article illustrates how to call Windows Communication Foundation (WCF) services from your jQuery client code, and points out where special care is needed. Before you start reading and following this article, first read this blog entry which describes how to create a WCF service: Create, Host and Consume a WCF Service.

Step 1

Once you are done with creating the WCF service, you need to specify the attributes on the server type class for ASP.NET compatibility mode, so that the WCF service works as a normal ASMX service and supports all existing ASP.NET features. By setting compatibility mode, the WCF service will have to be hosted on IIS and communicate with its client application using HTTP.

Read more about this in detail here: WCF Web HTTP Programming Object Model.

The following line of code sets ASP.NET compatibility mode

C#
[AspNetCompatibilityRequirements(RequirementsMode 
    = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service : IService
{
    // Your code comes here
}

Service.cs

C#
[AspNetCompatibilityRequirements(RequirementsMode 
    = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service : IService
{
    public string GetData(int value)
    {
        return string.Format("You entered: {0}", value);
    }


    public string[] GetUser(string Id)
    { 
        return new User().GetUser(Convert.ToInt32(Id));
    }
}

public class User
{

    Dictionary<int, string> users = null;
    public User()
    {
        users = new Dictionary<int, string>();
        users.Add(1, "pranay");
        users.Add(2, "Krunal");
        users.Add(3, "Aditya");
        users.Add(4, "Samir");
    }

    public string[] GetUser(int Id)
    {
        var user = from u in users
                   where u.Key == Id
                   select u.Value;

        return user.ToArray<string>();
    }

}

Step 2

Next you need to specify attributes at operation level in the service contract file for each method or operation. To do this, decorate the method with WebInvoke, which marks a service operation as one that responds to HTTP requests other than GET. Accordingly, your operational level code in the contract file will be as follows:

C#
[OperationContract]
[OperationContract]
[WebInvoke(Method = "POST", 
 BodyStyle = WebMessageBodyStyle.Wrapped,
 ResponseFormat = WebMessageFormat.Json)]
string[] GetUser(string Id);

As you can see in the code, sub-attributes having values to support calling via jQuery are marked with Method=post, so data gets posted to the service via a POST method.

ResponseFormat = WebMessageFormat.Json indicates that data is returned in JSON format.

IService.cs

C#
[ServiceContract]
public interface IService
{
    [OperationContract]
    [WebInvoke(Method = "GET",
     ResponseFormat = WebMessageFormat.Json)]
    string GetData(int value);

    [OperationContract]
    [WebInvoke(Method = "POST", 
     BodyStyle = WebMessageBodyStyle.Wrapped, 
     ResponseFormat = WebMessageFormat.Json)]
    string[] GetUser(string Id);
}

Step 3

You need to change the default configuration created by Visual Studio in Web.Config file for WCF services, so that it works with the HTTP protocol request send by jQuery client code.

XML
<system.serviceModel>
  <behaviors>
   <serviceBehaviors>
    <behavior name="ServiceBehavior">
     <serviceMetadata httpGetEnabled="true"/>
     <serviceDebug includeExceptionDetailInFaults="true"/>
    </behavior>
   </serviceBehaviors>
   <endpointBehaviors>
    <behavior name="EndpBehavior">
     <webHttp/>
    </behavior>
   </endpointBehaviors>
  </behaviors>
  <services>
   <service behaviorConfiguration="ServiceBehavior" name="Service">
    <endpoint address="" binding="webHttpBinding" 
        contract="IService" behaviorConfiguration="EndpBehavior"/>
   </service>
  </services>
</system.serviceModel>

As you can see in above config file, the EndPoint setting is changed, and EndPointBehaviors added to support WEBHTTP requests.

Note: Endpoint settings done in the config works in conjunction with the WebInvoke attribute of the operation and the compatibility attribute set in ServiceType to support HTTP requests sent by jQuery.

Step 4

To consume a web service using jQuery, that is to make a call to the WCF service, you either use jQuery.ajax() or jQuery.getJSON(). In this article I used the jQuery.ajax()method.

To set the request, first define a variable. This will be helpful when you are calling multiple methods and creating a different js file to call the WCF service.

JavaScript
<script type="text/javascript">

    var Type;
    var Url;
    var Data;
    var ContentType;
    var DataType;
    var ProcessData;

The following function initializes variables which are defined above to make a call to the service.

JavaScript
function WCFJSON() {
    var userid = "1";
    Type = "POST";
    Url = "Service.svc/GetUser";
    Data = '{"Id": "' + userid + '"}';
    ContentType = "application/json; charset=utf-8";
    DataType = "json"; varProcessData = true; 
    CallService();
}

The CallService function sends requests to the service by setting data in $.ajax.

JavaScript
// Function to call WCF  Service       
function CallService() {
    $.ajax({
        type: Type, //GET or POST or PUT or DELETE verb
        url: Url, // Location of the service
        data: Data, //Data sent to server
        contentType: ContentType, // content type sent to server
        dataType: DataType, //Expected data format from server
        processdata: ProcessData, //True or False
        success: function(msg) {//On Successfull service call
            ServiceSucceeded(msg);
        },
        error: ServiceFailed// When Service call fails
    });
}

function ServiceFailed(result) {
    alert('Service call failed: ' + result.status + '' + result.statusText);
    Type = null;
    varUrl = null;
    Data = null; 
    ContentType = null;
    DataType = null;
    ProcessData = null;
}

Note: The following code checks the result.GetUserResult statement, so your result object gets the property your service method name + Result. Otherwise, it will give an error like object not found in Javascript.

JavaScript
function ServiceSucceeded(result) {
    if (DataType == "json") {
        resultObject = result.GetUserResult;
        
        for (i = 0; i < resultObject.length; i++) {
            alert(resultObject[i]);
        }
            
    }
        
}

function ServiceFailed(xhr) {
    alert(xhr.responseText);

    if (xhr.responseText) {
        var err = xhr.responseText;
        if (err)
            error(err);
        else
            error({ Message: "Unknown server error." })
    }
    
    return;
}

$(document).ready(
    function() {
        WCFJSON();
    }
);
</script>

Summary

It is easy to call a WCF service from your client code you; just need to set your WCF service to serve requests through the HTTP protocol and set your client to consume it via the HTTP protocol.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India

Microsoft C# MVP (12-13)



Hey, I am Pranay Rana, working as a Team Leadin MNC. Web development in Asp.Net with C# and MS sql server are the experience tools that I have had for the past 5.5 years now.

For me def. of programming is : Programming is something that you do once and that get used by multiple for many years

You can visit my blog


StackOverFlow - http://stackoverflow.com/users/314488/pranay
My CV :- http://careers.stackoverflow.com/pranayamr

Awards:



Comments and Discussions

 
QuestionExcellent Pin
Jean Paul Abdilla6-May-13 12:01
Jean Paul Abdilla6-May-13 12:01 
GeneralMy vote of 1 Pin
DotNetExpertsIL6-Mar-13 14:30
DotNetExpertsIL6-Mar-13 14:30 
Questionmaybe I'm not Politically correct ... Pin
DotNetExpertsIL4-Mar-13 15:30
DotNetExpertsIL4-Mar-13 15:30 
QuestionCode Incomplete Pin
nishantcop1-Mar-13 17:40
nishantcop1-Mar-13 17:40 
QuestionWhat you are trying to exaplin here boss??? Pin
Kanaparthi Prasad27-Oct-12 21:40
Kanaparthi Prasad27-Oct-12 21:40 
AnswerRe: What you are trying to exaplin here boss??? Pin
Pranay Rana28-Oct-12 20:56
professionalPranay Rana28-Oct-12 20:56 
QuestionCalling a WCF Service using JQuery Pin
Ganesh KP16-Aug-12 20:12
professionalGanesh KP16-Aug-12 20:12 
GeneralMy vote of 3 Pin
Ganesh KP16-Aug-12 20:08
professionalGanesh KP16-Aug-12 20:08 
I have tried the same code you have provided. Still it won't work please specify correctly boss.
GeneralThanks Pin
LeeSmith2416-Jun-12 9:03
LeeSmith2416-Jun-12 9:03 
GeneralMy vote of 5 Pin
Vishal Varshney11-Jun-12 10:30
Vishal Varshney11-Jun-12 10:30 
QuestionWhy GET for GetData and POST for GetUser? Pin
gbelzile197912-Apr-12 9:11
gbelzile197912-Apr-12 9:11 
QuestionNo Transport Error Pin
parminderdeo29-Nov-11 3:54
parminderdeo29-Nov-11 3:54 
GeneralHi Pin
mskrishna4416-Jun-11 3:39
mskrishna4416-Jun-11 3:39 
GeneralMy vote of 5 Pin
Vladimir Kniazkov20-Feb-11 1:01
professionalVladimir Kniazkov20-Feb-11 1:01 
GeneralMy vote of 5 Pin
saanj19-Jan-11 18:28
saanj19-Jan-11 18:28 
GeneralRe: My vote of 5 Pin
Pranay Rana20-Jan-11 0:36
professionalPranay Rana20-Jan-11 0:36 
GeneralMy vote of 5 Pin
jayesh_lakhtariya16-Jan-11 23:27
jayesh_lakhtariya16-Jan-11 23:27 
GeneralRe: My vote of 5 Pin
Pranay Rana18-Jan-11 1:22
professionalPranay Rana18-Jan-11 1:22 
GeneralMy vote of 5 Pin
Abdul Quader Mamun8-Jan-11 3:33
Abdul Quader Mamun8-Jan-11 3:33 
GeneralRe: My vote of 5 Pin
Pranay Rana18-Jan-11 1:21
professionalPranay Rana18-Jan-11 1:21 
GeneralMy vote of 4 Pin
Jaleelali5-Jan-11 6:58
Jaleelali5-Jan-11 6:58 
GeneralRe: My vote of 4 Pin
Pranay Rana20-Jan-11 0:37
professionalPranay Rana20-Jan-11 0:37 
GeneralMy vote of 4 Pin
M Sheik Uduman Ali30-Dec-10 16:01
M Sheik Uduman Ali30-Dec-10 16:01 
GeneralRe: My vote of 4 Pin
Pranay Rana30-Dec-10 17:20
professionalPranay Rana30-Dec-10 17:20 
QuestionHasn't this been done before in 2008 ? Pin
Member 456543330-Dec-10 3:37
Member 456543330-Dec-10 3:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.