How do you use the jQuery blockui add-in with MVC Ajax?

Question

I have been reading the post here:

http://encosia.com/2008/10/04/using-jquery-to-enhance-aspnet-ajax-progress-indication/

But it wants to use the following object:

Sys.WebForms.PageRequestManager.getInstance()

Which doesn't exist when using the MVC AJAX code. Has anyone tried to hook when the postback ends from MVC AJAX to know when to unblock the UI?

Answer 1

There's not really a way to use blockUI as intended with a full round-trip to the server.

If you're using jQuery's $.ajax() or $.getJSON functions to work against the server asynchronously, you could block before the call and then unblock in the "success" handler.

Answer 2

Dave is right, there's no "MVC" way to do it, but you certainly have access to the ajax events in jQuery. The "setTimeout" call allows us to keep the blockUI hidden if the AJAX call returns in less than 250ms.

$().ajaxSend(function() {
  doLoad = setTimeout(function() { 
   $("#divtoblock").block({ message: "Loading..." }); }, 250);
});

$().ajaxComplete(function() {
  clearTimeout(doLoad);
  $("#divtoblock").unblock();
});