How to call an WebService (OR WCF Service) using Jquery

After seeing much response to my previous article “How to calls server side code using JavaScript”, I am very much impressed to write this. I would like keep this much simple.

Step 1: Create a new Ajax enabled Website

Step 2: Add a Web Service (common.asmx or .svc file) to it.

Step 3: on Webservice code behind file make sure that add 


Attribute to your class as show in below. This will enable to call your webservice from JavaScript.

 Your Webservice code behind file should look like below. Here we are adding a Web method “SayHello”, which is taking Name as input parameter and returns string as output parameter.


<System.Web.Script.Services.ScriptService()> _

Public Class Common

    Inherits System.Web.Services.WebService 

                <WebMethod(True)> _

    Public Function SayHello(ByVal Name As string) AS string

        Return “Hello” + Name

    End Function

End Class

Step 4:  Now on your Default.aspx Add a Textbox and Button (Button1) control

Step 5: Now add a new folder called scripts in your project add new JavaScript file  Common.js

 Step 6: Download Jqery library from  add it to your script folder. 

Step 7: Now open your common.js and add the following reference as shown in below

Step 8: add following Jquery function on your common.js file

$(document).ready(function() {

 $(‘[id$=Button1]’).click(function() { 

var serviceurl =  “http://yourservname/common.asmx/SayHello”;

var varName = $(‘[id$=TextBox1]’).text;

var ajaxdata = “{‘Name’:'” + varName + “‘}”;


            type: “POST”,

            url: serviceurl,

            data: ajaxdata,

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

            dataType: “json”,

            success: onSucess(response),

            error: onError


        return false;



function onSucess(response) {


function onError() {

    alert(“Error while calling webservice”);


Step 9: Now add your common.js  file and Jquery.js file to your default.aspx page and run your application

 Step 10: Enter a name in your text box and click on button.  You will see your javascript calling web service.