Monday 14 November 2011

Calling WCF Services using jQuery

Hi friends,

In this article you will learn how to call WCF Service using Jquery
But before this article you must know following
  1. How to Create WCF Service
  2. How to Host WCF Service
  3. Jquery Basics

Step 1:
         Use of
    = AspNetCompatibilityRequirementsMode.Allowed)]

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

eg :

    = AspNetCompatibilityRequirementsMode.Allowed)]
public class MyService : IMyService
    public string[] GetSupplier(string Id)
        return new User().GetSupplier (Convert.ToInt32(Id));
public class User
    Dictionary<int, string> Supplier = null;
    public User()
        Supplier= new Dictionary<int, string>();
        Supplier.Add(1, "Sujeet");
        Supplier.Add(2, "Ajay");
        Supplier.Add(3, "Sanjay");
        Supplier.Add(4, "Amit");
    public string[] GetUser(int Id)
        var Supplier = from s in Supplier
                   where s.Key == Id
                   select s.Value;
        return Supplier.ToArray<string>();

In the above example I have shown you how to create myService which return names of suppliers.

Step 2:-  
                        Operation contract setting

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

In the above code ResponseFormat = WebMessageFormat.Json indicates that data is returned in JSON format.

Step 3:-    App.config Setting

You have to use weHttp for endpoints

    <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"/>

Step 4 : Ajax call with Jquery


        type: "POST",

        contentType: "application/json; charset=utf-8",

        url: ‘Service.svc/GetSupplier’,

        data: parameters,

        dataType: "json",

        async: true,

        success: function (data) {

resultObject = data.GetSupplierResult;


        for (i = 0; i < resultObject.length; i++) {




In this way you can learn Calling WCF Services using jquery

If you have any query mail me to     

Sujeet Bhujbal


  1. Hi Sujit,

    Thanks for this post, but I would like to have some more help on this. can you call the service below?

    The method I want to consume using JQuery is

    Please reply.


  2. i am grateful for your Blog.but this is not working.
    i am using "Service Project" and " Project " in a single page we call service ny jquery but this not working .we got 45 error method not access.can u describe all thing in a demo application.and finally upload google drive and send the link to me MAil Id is "". thanks.