How to use/handle a loader in an MVC app?

Question

in a ASP.NET MVC application that I am currently working there are multiple places in a single page that the user can click. So there is a main menu that's in _layout and for each inidividual page there can be links associated with that page. I am trying to use a loader which will be shown on every click, mainly where the response takes time but for now it's for every click. For example in the home page, from the main menu the user can click Students and the loader should come up and hide when the page loads completely. On the students page there can be an ajax call that gets data and binds it to the grid. So from the time the user clicks on a menu link and the page loads the loader is active/shown. It's hidden once the page loads completely. The grid can have editing functionality and when the user clicks on any of the CRUD links the loader should show and hide.

I am looking at suggestions on implementing this requirement. If I can hookup any of the MVC events, that would be cool as I want less of Javascript/jQuery stuff but if Javascript/jQuery is the way then that's fine too.

Currently I don't have anything so anypointers are appreciated.

Answer 1

Assuming AJAX is being used

I don't see a way to keep this server-side without a middle page with a redirect being used (which would just be unnecessary bloat). And, since you're not opposed, you can implement this fairly easily using jQuery and something like blockUI.

I'll let you play with refining the binding to only links you care about, but for now we'll assume all links. Also, MVC should be using jQuery for things like Ajax.Actionlink so we can hijack events like $.ajaxStart and $.ajaxStop:

function showLoadingScreen(enabled){
  return enabled ? $.blockUI() : $.unblockUI();
}
$(document).ajaxStart(function(){
  showLoadingScreen(true);
}).ajaxStop(function(){
  showLoadingScreen(false);
});

Later on you can maybe apply classes to the links you care about and just bind to them (instead of $.ajaxStart) but I'll leave that up to you.