CODEDIGEST
Home » Articles
Search
 

Technologies
 

Sponsored links
 

CodeDigest Navigation
 

Technology News
No News Feeds available at this time.
 

Community News
No News Feeds available at this time.
 
Doing AJAX with jQuery in ASP.Net

By Satheesh babu
Posted On Feb 16,2010
Article Rating:
Be first to rate
this article.
No of Comments: 0
Category: jQuery/ASP.Net
Print this article.

Doing AJAX with jQuery in ASP.Net


jQuery is a light weight javascript library which provides fast and easy way of HTML DOM traversing and manipulation, event handling, client side animations, etc. One of the greatest features of jQuery is, it supports an efficient way to implement AJAX applications because of its light weight nature.
jQuery bundles a lot of methods that helps us to build AJAX functionalities in our web application. Refer here to know more. In this article, we will try to understand the usages of all the available methods in jQuery that helps Ajax communication.

Integrating jQuery in ASP.Net

CodeDigest.Com has some useful FAQ’s to integrate jQuery in asp.net projects.

Download the latest jQuery library from jQuery.com and integrate into your project. Read the following FAQ's to integrate jQuery library to your project.

What is jQuery? How to use it in ASP.Net Pages?

How to enable jQuery intellisense in Visual Studio 2008?

How to use jQuery intellisense in an external javascript file?

 

Doing Ajax

$.get() and $.Post() method

Read my article that discusses a very simple usage of these methods.

Using jQuery in ASP.Net AJAX Applications – Part 1

 

$.Ajax() Method

In this section, we will use ajax() method to make ajax call to server. To make it simple, we will call a simple webservice that returns the current server date and time. I will just include the code for this here.

To know more read the article, Calling a WebService using jQuery in ASP.Net.

<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

<script language="javascript">

$("#btGetDate").click(function() {

            $.ajax({

                type: "POST",

                url: "/WebserviceDemo/GetDate.asmx/GetDateTime",

                data: "{}",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function(msg) {

                    $("#dvDate").html(msg.d);

                }

            });

        });

 

</script>

</head>

<body>

    <form id="form1" runat="server">

<div id="dvDate"></div><input id="btGetDate" type="button" value="Get Date" />

 </form>

</body>

</html>


The above code will call a webservice method GetDateTime() and post the returned value to DIV tag(dvDate).

Another good example of using $.Ajax() method to call Page Method can be found here.

 

$.getJSON() method

This method can be used to make ajax request and get back JSON data from server. CodeDigest.Com has number of articles explaining the usage this method.

Lazy Loading jQuery Collapsible Panel in ASP.Net Using JSON

GridView Style Edit Update in Repeater Control Using jQuery and Ajax

Populating RadioButtonList Using jQuery, JSON in ASP.Net

Creating a Simple AJAX Master-Details View Using jQuery, JSON and jTemplates in ASP.Net

Building Cascading DropDownList in ASP.Net Using jQuery and JSON

 

 

Global Ajax Events

Apart from the above ajax methods, jQuery library is packed with some useful global events that get raised before and after the ajax requests.
1. .ajaxStart() and .ajaxStop()
2. .ajaxSend() and .ajaxComplete()
3. .ajaxSuccess() OR .ajaxError()

Moving forward, we will see when these events will be raised during an ajax request cycle.


1. .ajaxStart()

If there are no ajax requests already alive in the form then jQuery raises this event before sending the ajax request to server. This means, it will get raised for the first request and will not get raised for the second if the first is still progressing.
For example, if you want to show a progress image during the ajax processing then you can enable the progress image in this event.


Syntax

.ajaxStart(function() {
});


Example

$("#loadimg").ajaxStart(function() {
$(this).show();
});


As you might have guessed, you can hide the image in ajaxStop() event.


.ajaxStop()

This event is raised when the ajax request is done provided if there are no existing ajax request is still progressing.
Now, we can use this event to hide the progress image.

$("#loadimg").ajaxStop(function() {
$(this).hide();
});

 


2. .ajaxSend()

This event gets raised before sending any ajax request on the form.

Syntax

.ajaxSend(function(event, XMLHttpRequest, ajaxOptions){} )

Example

$("#loadimg").ajaxSend(function(evt, request, settings) {
alert(settings.url);
});


Note

If you want to know all the properties and values of the arguments,

for (var propertyName in evt) {
alert("evt " + propertyName + ": " + evt[propertyName]);
}
for (var propertyName in request) {
alert("request " + propertyName + ": " + request[propertyName]);
}
for (var propertyName in settings) {
alert("settings " + propertyName + ": " + settings[propertyName]);
}


.ajaxComplete()

This event will be raised after every ajax request completion on the form.

Syntax

.ajaxComplete( function(event, XMLHttpRequest, ajaxOptions) {})

Example

$("#loadimg").ajaxComplete(function(evt, request, settings) {

alert(settings.url);

});

3. .ajaxSuccess() OR .ajaxError()

Any one of the above event will get raised based on the result of the ajax request.

Syntax

.ajaxSuccess( function(event, XMLHttpRequest, ajaxOptions){} )
.ajaxError( function(event, XMLHttpRequest, ajaxOptions, thrownError) {})

Example

$("#loadimg").ajaxError(function(event, request, settings, error) {
alert("Error requesting page " + settings.url + " Error:" + error);
});

Conclusion

Thus, we have seen how to make ajax call to server using various methods in jQuery library. The ajax methods packed with jQuery library have good performance when compared to ASP.Net Ajax framework. Go Ahead! Download the new jQuery library and start playing with it!

 

Happy Coding!!

Similar Articles
You can contribute to CodeDiget.Com:
Donate to CodeDigest.com
Article Feedback
Comments