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 = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class AjaxWebservice : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
return "Hello World - " + DateTime.Now.ToShortTimeString();
}
[WebMethod]
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 http://docs.jquery.com/Ajax for more details on this)

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

$.ajaxSetup({
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);
else
msg = eval('(' + data + ')');
if (msg.hasOwnProperty('d'))
return msg.d;
else
return msg;
}
});
$.ajax({
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 : http://encosia.com/2009/07/21/simplify-calling-asp-net-ajax-services-from-jquery/)

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.

Sources:
http://encosia.com/2009/07/21/simplify-calling-asp-net-ajax-services-from-jquery/
http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/
http://docs.jquery.com/Ajax

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.