|
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();
});
|