Bulletproof Ajax with ASP.NET MVC (this time with jQuery)

As a follow up a recent post about using unobtrusive javascript and Ajax in your ASP.NET MVC applications, I ported the Bulletproof Ajax bookstore application to use jQuery instead of Hijax. This led to more terse code – lines of javascript were reduced from 178 to 41. If you’ve spent at least few hours jQuery then you should find that the new code is also more readable. No server side code changes were necessary.

jQuery is also really easy to extend – I wrote a couple of extensions that would be usable throughout an application. Here’s the extension I wrote to produce the ubiquitous yellow fade effect:

(function($) {
   $.fn.yellowFade = function() {
    return this.css({backgroundColor: "#ffffcc"})
    .animate({backgroundColor: "#ffffff"}, 1500, "linear");
   }
 })(jQuery);

Calling this method flows with the rest of jQuery style chaining of methods:

function(data) { $("div#basket").html(data).yellowFade(); });

This one liner is a callback from our http post to the /Cart/AddProduct. The data parameter contains the response from the server. $("div#basket") is getting the container div from our shopping cart. Then we replace the html within the shopping cart div with the response from the server and follow it up with a yellow fade to provide user feedback.

Code is downloadable here. The demo.