JQUERY AJAX and HTTPHANDLER in ASP .NET

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.

References:  jQuery, MSDN

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://&#8221; + 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.

Advertisements

B.E in Electronics and Telecommunications from Raipur, Chhattisgarh. Currently working on Microsoft's .NET and SQL Server Technology

Tagged with: , ,
Posted in ASP .NET, jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: