Click here to Skip to main content
13,901,218 members
Click here to Skip to main content
Add your own
alternative version


142 bookmarked
Posted 1 Dec 2010
Licenced CPOL

Calling WCF Services using jQuery

, 2 Dec 2010
Rate this:
Please Sign up or sign in to vote.
A guide on how to call Windows Communication Foundation services using jQuery


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

    = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service : IService
    // Your code comes here


    = 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:

[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.


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

    [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.

    <behavior name="ServiceBehavior">
     <serviceMetadata httpGetEnabled="true"/>
     <serviceDebug includeExceptionDetailInFaults="true"/>
    <behavior name="EndpBehavior">
   <service behaviorConfiguration="ServiceBehavior" name="Service">
    <endpoint address="" binding="webHttpBinding" 

        contract="IService" behaviorConfiguration="EndpBehavior"/>

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.

<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.

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

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

// Function to call WCF  Service       
function CallService() {
        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
        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.

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

function ServiceFailed(xhr) {

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

    function() {


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.


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


About the Author

Pranay Rana
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 -
My CV :-


You may also be interested in...


Comments and Discussions

GeneralRe: My vote of 5 Pin
Pranay Rana1-Dec-10 18:32
professionalPranay Rana1-Dec-10 18:32 
GeneralMy vote of 5 Pin
Krunal Mevada1-Dec-10 18:15
memberKrunal Mevada1-Dec-10 18:15 
GeneralRe: My vote of 5 Pin
Pranay Rana1-Dec-10 18:16
professionalPranay Rana1-Dec-10 18:16 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05 | 2.8.190306.1 | Last Updated 2 Dec 2010
Article Copyright 2010 by Pranay Rana
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid