Calling ASP.NET AJAX web-services from JQuery

by Theo11. October 2009 20:51

I recently looked into calling ASP.NET Ajax web-services from JQuery, and it’s actually not that hard.

The ASP.NET Ajax web-service

To create a client script enabled web-service, add the [ScriptService] to the web service class. This makes sure that the methods can be called from client script and also makes the returntype a JSON.

[WebService(Namespace = "")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AjaxWebservice : System.Web.Services.WebService
public string HelloWorld()
return "Hello World - " + DateTime.Now.ToShortTimeString();
public object HelloObject(int id)
return new { Id = id, Success = true, Text="<b>It went well!</b>" };

Note that the returned object in the last webservice method, is converted to a JSON object, which we will see shortly can be used very easily in the client.

The client-side JQuery ajax call

Now we have the ajax web service done, in .net manner, we would like to use JQuery’s easy and simple interface to consume it.

The default way to create an asynchronous client side call using JQuery is via an $.ajax() call
( see for more details on this)

The client-side script able to consume the HelloObject webmethod, looks like this:

type: "POST",
contentType: "application/json; charset=utf-8",
data: "{}",
dataFilter: function(data) {
var msg;
if (typeof (JSON) !== 'undefined' &&
typeof (JSON.parse) === 'function')
msg = JSON.parse(data);
msg = eval('(' + data + ')');
if (msg.hasOwnProperty('d'))
return msg.d;
return msg;
url: "AjaxWebservice.asmx/HelloObject",
data: "{id:3}",
success: function(msg) {
if (msg.Success) {
alert("yes: " + msg.Text + "(" + msg.Id + ")");
else {
alert("nop: " + msg.Text + "(" + msg.Id + ")");

The first $.ajaxSetup() part, sets the default values for all subsequent ajax calls, and the last $.ajax() call makes the asynchronous request to the server. The dataFilter function is supposed to even out some of the variations, different version of net handle JSON, but i haven’t gone that much in detail with it. ( go here to read more about it :

This example calls the the webserver with an id having the value two, which then responds with a JSON object. When the client side successfully completes the request, it creates an alertbox from the data in the returned JSON object.


JQuery - Smarter client scripting

by Theo28. August 2009 22:10

Web developers should already be familiar with JQuery. It's an opensouce JavaScript library that makes writing simpler and more effective JavaScript possible. And it's made to abstract away differences between browsers.

Actually it requires nothing more than a JavaScript library that you download and reference.

Normally i would show some JQuery code here, but as i'm myself just starting learning and using JQuery, I will just tell you that there's a good tutorial and info about JQuery on its site:

Theo Andersen

Hi, you've reached my blog on software development.

I use this blog mostly for my own purpose of remembering stuff, so i only put things here once in a while when i get the time.

My current focus is on TDD, unit testing, object oriented code and IOS development.