Consuming ASP.NET Web Services using JQuery
In this tutorial we will be using JQuery to consume Asp.Net web services.
If you do not know how to create webservices that output JSON results please see my previous blog post on JSON in Classical Web Services ASMX.
If you have reached this point, I assume you know how to create webservices in JSON.
Inorder to do this, we will be using JQuery’s. $.ajax. As asp.net explicitly makes all ScriptMethods POST, we cannot use JQuery’s get method.
contentType needs to be changed to application/json and dataType as json.
data:’{}’ is the parameter being passed.
success:function(msg){} this method is executed when the POST successfully happens, and stores the result in msg.
error:function(){} this method is executed when an error occurs.
$.ajax({
type: 'POST',
url: '<%= ResolveClientUrl("~/JsonWebService.asmx/ReturnStudent") %>',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: '{}',
success: function (msg) {
var jsonObject = JSON.parse(getMain(msg));
alert('FirstName:' + jsonObject.FirstName);
},
error: function () {
alert('error occured');
}
});
ReturnStudent is a WebService Method which is shown as below.
[WebMethod]
[ScriptMethod]
public string ReturnStudent()
{
return JsonHelper.ToJson(JsonHelper.CreateSampleStudent());
}
The above method create an Object and then serializes to JSON string and returns the JSON string as the output. (You can read more on this at http://blog.prabir.me/post/JSON-in-Classical-Web-Services-ASMX.aspx – The same example is used. I’m using Newtonsoft’s JSON library to convert the object to JSON string).
When we execute the above JQuery code, msg contains the JSON string not a JSON object. (Our WebMethod returns a string.) So we need to parse the JSON string to a JSON object. To do this we will be using a 3rd party library called json2.js. You can read more about parsing at http://blog.prabir.me/post/Parsing-JSON-in-JavaScript.aspx. To achieve this we use JSON.parse(msg). But we need to be a bit careful out here. .NET 2.0 and .NET 3.5 will give different output. .NET 3.5 adds the d property which we have to be careful. The result would be as follows.
var net20ResultFromWebService = "{\"FirstName\":\"Prabir\",\"LastName\":\"Shrestha\"}";
var net35ResultFromWebService = { "d": "{\"FirstName\":\"Prabir\",\"LastName\":\"Shrestha\"}" };
Notice the “d”. It was added for security reasons.
So, instead of just using JSON.parse(msg) we use our own custom helper function called getMain(). It basically strips off the “d” property if it contains else returns the object it self. This is important especially if you are consuming others webservices and all of the sudden when they upgrade the .NET version, all you site cracks down. Taking this extra precaution might be a bonus to you.
Here’s the function that solves the .NET version compatibility problem.
function getMain(dObj) {
if (dObj.hasOwnProperty('d'))
return dObj.d;
else
return dObj;
}
What if you have a function which contains parameters like below.
[WebMethod]
[ScriptMethod]
public string Print(string name, int times)
{
// code omitted for brevity
}
Remember the data:’{}’ parameter in $.ajax I told before. We need to make use of it.
data: "{name:'Prabir',times:2}"
It would be represented as above in JSON string format. That is it.
In the upcoming posts I will be guiding through on how increase the user experience by showing animating features (loading…please wait…). Stay tuned.