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

Posted by andy gaskell on Aug 10th, 2008

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.

Microsoft’s Ajax Support for ASP.NET MVC Fails (for now)

Posted by andy gaskell on Aug 4th, 2008

But it’s not an epic fail (for now). It’s important that my sites function without javascript or Ajax support. Ajax should be used enhance usability and is not a requirement to access my content.

I was checking out Hanselman’s Ajax example (the truly lazy can download the code here) and I was pretty bummed when I disabled javascript and saw this:

failure on the ajax front

Oops. That’s probably not what the user expected. Maybe there’s some way to get the AjaxHelper to save us but none of the 10 overloads for the ActionLink or Form methods stood out to me. Until I get around to really learning jQuery, I’ll stick with writing Ajax by hand. This allows me to request different urls based on whether or not javascript is enabled. And writing your own javascript really isn’t that hard - go grab a good book.

Bulletproof Ajax with ASP.NET MVC

Posted by andy gaskell on Aug 2nd, 2008

After reading the excellent Bulletproof Ajax by Jeremy Keith, I thought porting the Bulletproof Books sample application to ASP.NET MVC would be a great first attempt at building an ASP.NET MVC application. One of the main points of Bulletproof Ajax is that Ajax should be used to enhance usability and not to make Ajax a requirement to access your content. My version of the Bulletproof Books Shop also makes Javascript and XMLHttpRequest support optional.

Keeping the site accessible to most web browsers took some extra work and consideration when building the Controllers. I decided that any HomeController actions would render html for the entire page.

   13         public ActionResult Index()

   14         {

   15             ViewData.Model = Product.Products;

   16             return View(“Index”);

   17         }

   18 

   19         public ActionResult AddProductToCart(string productID, int quantity)

   20         {

   21             CartController cartController = new CartController();

   22             cartController.AddProduct(productID, quantity);

   23             return Index();

   24         }

   25 

   26         public ActionResult RateProduct(string productID, string rating)

   27         {

   28             RatingController ratingController = new RatingController();

   29             ratingController.RateProduct(productID, rating);

   30             return Index();

   31         }

Controllers that refresh partial chunks of html will know how to respond to actions (add product to cart, rate a product) and render views mapped to MVC user controls. The client will make http requests to different urls based on javascript support in the browser. For example to add a product to a cart with javascript enabled, the javascript will make a post to /Cart.mvc/AddProduct and the server will response with a chunk of html. To add a product with javascript disabled the client will post to /Home.mvc/AddProductToCart and the server will respond with an entire page. The HomeController ends up forwarding the call to the appropriate controller so we’re able to avoid duplicating logic.

   28         public ActionResult DisplayCart()

   29         {

   30             Cart cart = GetCart();

   31             return View(“Cart”, cart);

   32         }

   33 

   34         public ActionResult AddProduct(string productID, int quantity)

   35         {

   36             Cart cart = GetCart();

   37             Product product = Product.Products.Find(s => s.ID == productID);

   38             cart.AddProduct(product, quantity);

   39             SetCart(cart);

   40             return View(“Cart”, cart);

   41         }

One thing I’m not sure about is state management in ASP.NET MVC, so I’m currently storing the cart and ratings in session.

   22         private Rating GetRatings()

   23         {

   24             Rating rating = System.Web.HttpContext.Current.Session["Rating"] as Rating;

   25             if (rating == null)

   26             {

   27                 rating = new Rating();

   28             }

   29             return rating;

   30         }

   31 

   32         private void SetRating(Rating rating)

   33         {

   34             System.Web.HttpContext.Current.Session["Rating"] = rating;

   35         }

You can download the source here.

Next »