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


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


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


Comments and Discussions

Praiseworked for me Pin
Nael Al Zuhairi30-Jul-19 11:07
MemberNael Al Zuhairi30-Jul-19 11:07 
QuestionCode error? Pin
Member 1094831121-Dec-17 6:24
MemberMember 1094831121-Dec-17 6:24 
Questionwcf on mono throw exception Pin
Rombersoft15-Mar-17 12:13
MemberRombersoft15-Mar-17 12:13 
Questionwcf on mono throw exception Pin
Rombersoft15-Mar-17 12:11
MemberRombersoft15-Mar-17 12:11 
GeneralMy vote of 5 Pin
Mahsa Hassankashi12-Jul-16 1:44
MemberMahsa Hassankashi12-Jul-16 1:44 
GeneralWork 100% Pin
cristhoper davalos17-Jul-15 8:01
Membercristhoper davalos17-Jul-15 8:01 
Questiondoesn't work Pin
Member 775659116-Jul-15 3:06
MemberMember 775659116-Jul-15 3:06 
GeneralVery nice Pin
i_am_luc1-Jul-15 22:53
Memberi_am_luc1-Jul-15 22:53 
QuestionThe blog post code is perfect. Thank you!! However... Pin
Member 116728207-May-15 8:23
MemberMember 116728207-May-15 8:23 
QuestionCalling 3 services in single javascript ajax get function Pin
waleed ahmed wadkar6-Jul-14 22:16
Memberwaleed ahmed wadkar6-Jul-14 22:16 
QuestionCode not working Pin
OsiKosi6-May-14 5:56
professionalOsiKosi6-May-14 5:56 
Questionconsuming WCF from MVC web app through jQuery Pin
sharma-anurag3-Mar-14 6:34
Membersharma-anurag3-Mar-14 6:34 
AnswerRe: consuming WCF from MVC web app through jQuery Pin
Pranay Rana6-Mar-14 0:38
professionalPranay Rana6-Mar-14 0:38 
QuestionHello, Pin
santosh panchal15-Jan-14 1:23
Membersantosh panchal15-Jan-14 1:23 
Questionalling WCF Services using jQuery Pin
Braj Kishor24-Dec-13 0:39
MemberBraj Kishor24-Dec-13 0:39 
SuggestionAsynchronous call to WebService / WCF using JQuery Pin
hemantrhtk10-Nov-13 19:48
Memberhemantrhtk10-Nov-13 19:48 
GeneralThanks. but how to call GetData() Pin
Member 78161014-May-13 22:13
MemberMember 78161014-May-13 22:13 
GeneralRe: Thanks. but how to call GetData() Pin
Sunasara Imdadhusen19-May-13 18:52
professionalSunasara Imdadhusen19-May-13 18:52 
GeneralRe: Thanks. but how to call GetData() Pin
Member 78161026-Sep-13 20:01
MemberMember 78161026-Sep-13 20:01 
GeneralEasiest way to create and consume WCF Services in Pin
Lalit24rocks14-May-13 21:38
MemberLalit24rocks14-May-13 21:38 
QuestionExcellent Pin
Jean Paul Abdilla6-May-13 11:01
MemberJean Paul Abdilla6-May-13 11:01 
GeneralMy vote of 1 Pin
DotNetExpertsIL6-Mar-13 13:30
MemberDotNetExpertsIL6-Mar-13 13:30 
Questionmaybe I'm not Politically correct ... Pin
DotNetExpertsIL4-Mar-13 14:30
MemberDotNetExpertsIL4-Mar-13 14:30 
QuestionCode Incomplete Pin
nishantcop1-Mar-13 16:40
Membernishantcop1-Mar-13 16:40 
QuestionWhat you are trying to exaplin here boss??? Pin
Kanaparthi Prasad27-Oct-12 20:40
MemberKanaparthi Prasad27-Oct-12 20:40 

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.