Creating web applications with consistent layout and user interface is very important for your users. In several ASP.NET projects I’ve completed lately, I’ve been using a lot jQuery and jQuery
Ajax to achieve rich user experience and seamless interaction between the client and the server. In almost all of them, I took advantage of the nice jQuery global
ajax handlers and jQuery
ajax functions. Let’s say you build web application which mainly interacts using
Ajax post and get to accomplish various operations. As you may already know, you can easily perform
Ajax operations using jQuery
Ajax low-level method or jQuery $.get, $.post, etc. Simple get example: $.get("/Home/GetData", function (d) {
alert(d);
});
As you can see, this is the simplest possible way to make
Ajax call. What it does in behind is constructing low-level
Ajax call by specifying all necessary information for the request, filling with default information set for the required properties such as data type, content type, etc...
If you want to have some more control over what is happening with your
Ajax Request, you can easily take advantage of the global
ajax handlers. In order to register global
ajax handlers, jQuery API provides you set of global
Ajax methods. You can find all the methods in the following link http://api.jquery.com/category/ajax/global-ajax-event-handlers/, and these are:
ajaxComplete
ajaxError
ajaxSend
ajaxStart
ajaxStop
ajaxSuccess
And the low-level
ajax interfaces http://api.jquery.com/category/ajax/low-level-interface/:
ajax
ajaxPrefilter
ajaxSetup
For global settings, I usually use ajaxSetup combining it with the
ajax event handlers.
$.ajaxSetup is very good to help you set default values that you will use in all of your future
Ajax Requests, so that you won’t need to repeat the same properties all the time unless you want to override the default settings.
Mainly, I am using global ajaxSetup function similarly to the following way:
$.ajaxSetup({
cache: false,
error: function (x, e)
{
if (x.status == 550)
alert("550 Error Message");
else if (x.status == "403")
alert("403. Not Authorized");
else if (x.status == "500")
alert("500. Internal Server Error");
else
alert("Error...");
},
success: function (x)
{
//do something global on success...
}
});
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Now, you can make
ajax call using low-level $.
ajax interface and you don’t need to worry about specifying any of the properties we’ve set in the $.ajaxSetup function.
So, you can create your own ways to handle various situations when your
Ajax requests are occurring.
Sometimes, some of your
Ajax Requests may take much longer than expected… So, in order to make user friendly UI that will show some progress bar or animated image that something is happening in behind, you can combine ajaxStart and ajaxStop methods to do the same.
First of all, add one <div id=”loading” style=”display:none;”> <img src="@Url.Content("~/Content/images/ajax-loader.gif")" alt="Ajax Loader" /></div> anywhere on your Master Layout / Master page (you can download nice
ajax loading images from http://ajaxload.info/).
Then, add the following two handlers:
$(document).ajaxStart(function () {
$("#loading").attr("style", "position:absolute; z-index: 1000; top: 0px; "+
"left:0px; text-align: center; display:none; background-color: #ddd; "+
"height: 100%; width: 100%; /* These three lines are for transparency "+
"in all browsers. */-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)\";"+
" filter: alpha(opacity=50); opacity:.5;");
$("#loading img").attr("style", "position:relative; top:40%; z-index:5;");
$("#loading").show();
});
$(document).ajaxStop(function () {
$("#loading").removeAttr("style");
$("#loading img").removeAttr("style");
$("#loading").hide();
});
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Note: While you can reorganize the style in a more reusable way, since these are global
Ajax Start/Stop, it is very possible that you won’t use the same style in other places.
With this way, you will see that now for any
ajax request in your web site or application, you will have the loading image appearing providing better user experience.
What I’ve shown is several useful examples on how to simplify your
Ajax code by using Global
Ajax Handlers and the low-level AjaxSetup function. Of course, you can do a lot more with the other methods as well.
Hope this was helpful.
Regards,
Hajan
