Introduction
In this article we will see how we can make use of jQuery library to make AJAX calls in ASP .NET with the help of HTTPHANDLERS. Also, the use of JSON (Javascript Object Notation) which is a format describing name/vale pairs in a structured manner.
Asynchronous Javascript and XML (AJAX) is a method in which we can exchange data with server without reloading the complete page.
jQuery is a Javascript library which makes it easier to manipulate, navigate DOM elements in a web page. It also helps in implementing AJAX in rapid web application development. Currently we have Intellisense support for jQuery in Visual Studio 2008/2010.
HTTP Handler is a process which returns data when its URL is called. The returned data can be anything from simple string to data formats like JSON or XML.
Perquisite
Download the latest version of jquery from jquery site (http://jquery.com/). In visual studio 2010 it is added by default when any new web application is created.
Flow Diagram
Example: Making a simple Ajax call
In this example we will be making a simple Ajax call with the help of jQuery.ajax API to the httphandler. The response from the httphandler will be the JSON response which is then updated in the web page. Javascript Object notation (JSON) is a format of key/value pairs to store data. It’s easy to consume in javascript and compact then XML. So let’s start with creating a handler page.
public void ProcessRequest (HttpContext context) {
string method = context.Request.QueryString[“MethodName”].ToString();
context.Response.ContentType = “text/json”;
switch (method)
{
case “GetData” :
context.Response.Write(GetData());
break;
}
}
protected string GetData()
{
return (@”{“”FirstName””:””Ravi””, “”LastName””:””Baghel””, “”Blog””:””ravibaghel.wordpress.com””}”);
}
As you can see we are simply putting a response of json type with sample data. In order to demonstrate passing parameter to handler I have used the querystring methodname which will simply switch to the method you want to execute.
Now, we need to make a call to the handler.
<head runat=”server”>
<title>jQuery</title>
<script src=”Scripts/jquery-1.5.min.js” type=”text/javascript”></script>
<script type=”text/javascript” >
jQuery(function() {
$(‘#btnClick’).click(function(){
jQuery.ajax({
type : “GET”,
url : “Data.ashx”,
data : “MethodName=GetData”,
success : function(data){
$(‘#display’).html(“<h1> Hi, ” + data.FirstName + ” ” + data.LastName + ” your Blog Address is http://” + data.Blog + “</h1>”);
}
});
});
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<input id=”btnClick” type=”button” value=”Ajax Call” />
<div id=”display”>
</div>
</form>
</body>
We first need to add a reference to the jQuery library which we downloaded as
<script src=”Scripts/jquery-1.5.min.js” type=”text/javascript”></script>
If you look at the jQuery.ajax syntax you can see different parameters as
Type describes whether the reuest if get or post
URL of the httphandler
Data specifies querystring
Success defines a function which manipulates the response from handler.
Download the complete project here.
