Home » Articles


Sponsored links

CodeDigest Navigation

Technology News
No News Feeds available at this time.

Community News
No News Feeds available at this time.
Calling a WebService using jQuery in ASP.Net

By Bala Murugan
Posted On Jan 13,2010
Article Rating:
Be first to rate
this article.
No of Comments: 3
Category: jQuery
Print this article.

Calling a WebService using jQuery in ASP.Net


jQuery library has become one of the most widely used javascript library that heavily simplified the client side scripting. Apart from DOM parsing and other advantages, jQuery library excelled so much in AJAX communications. jQuery offers lots of advantages over the ASP.Net Ajax framework by making communication very lighter and simpler. To do this, jQuery library is packed with some handful of useful Ajax methods. Refer here[] to know more.

Moving forward, we will see how to use jQuery Ajax methods to call a WebService method in ASP.Net.


Integrating jQuery in ASP.Net

CodeDigest.Com has some useful FAQ’s to integrate jQuery in projects.

Download the latest jQuery library from and integrate into your project. Read the following FAQ's to integrate jQuery library to your project.

What is jQuery? How to use it in ASP.Net Pages?

How to enable jQuery intellisense in Visual Studio 2008?

How to use jQuery intellisense in an external javascript file?


Creating Webservice

Now, to make our understanding simple we will include a simple webservice method that returns date and time of the server. We will then try consuming this webservice method using jQuery library. Include a webservice in your project by right clicking the project in Solution Explorer and click “Add New Item..” dialog box. Select Webservice from the dialog and name it as GetDate.asmx.


Include a method called GetDateTime() that returns a date time string .

In order to call the webservice method from javascript, you have to uncomment the attribute System.Web.Script.Services.ScriptService of webservice class. Refer the below code[bolded]


[WebService(Namespace = "")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.


public class GetDate : System.Web.Services.WebService {


public GetDate () {


//Uncomment the following line if using designed components





public string HelloWorld() {

return "Hello World";




public string GetDateTime()


return DateTime.Now.ToString();




Now, before consuming webservice method using jQuery it is necessary to know some restrictions on calling webservice methods from javascript.

1. Only POST method can be used to call a webservice method.

2. The HTTP Content-Type header should be set to the value “application/json”.


There is a built in validation layer in ASP.Net that checks for the above 2 things. The request will be rejected if both the constraints are not met. This is done for preventing some security vulnerabilities like cross site request forgery attacks. Read the links in Reference section to know more.


Consuming Webservice using jQuery

The below jQuery code can be used to call the webservice method.


<script src="_script/jquery-1[1].3.2.js" type="text/javascript"></script>

<script language="javascript">

$(document).ready(function() {

$("#btGetDate").click(function() {


type: "POST",

url: "/AjaxSample/GetDate.asmx/GetDateTime",

data: "{}",

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

dataType: "json",

success: function(msg) {









<form id="form1" runat="server">


<div id="dvDate"></div><input id="btGetDate" type="button" value="Get Date" />





In the above code, I have included the project folder name “/AjaxSample/” in the url property of the $.ajax() method. Specify the folder name of your project here and update it accordingly when moving to production.



Webservice Security


With the introduction of jQuery library, the client side scripting was made simpler and it was actually taken to next level where developers now can do some complex operations and Ajax communication very easily. This article proved one of the advantages of jQuery where we can consume an webservice with very less effort.

Similar Articles
You can contribute to CodeDiget.Com:
Donate to
Article Feedback
Best article
Its really a best article which help begging to know how to call web service methods through Jquery
Nice article
nice article, it is really helpfull for me
Passing Parameters to WebService from JQuery
If youwanted to send parameters to Web Service from the invoking JQuery? All you need to do is to add below statement instead of data: "{}"

data: "{'Id1':'2','Id2':'4'}"