I have an MVC Controller that runs through a process, sets some View Data, and then returns the results of this data back to the user in a View. The process time is dependent o
In your controller:
public JsonResult GetSomething(int id)
{
return Json(service.GetSomething(id));
}
In the view (javascript, using JQuery):
$('#someLink').click(function()
{
var action = '<%=Html.ResolveUrl("~/MyController.mvc/GetSomething/")%>' + $('#someId').val() + '?x=' + new Date().getTime();
$('#loading').show()
$.getJSON(action, null, function(something)
{
do stuff with something
$('#loading').hide()
});
});
Note that this assumes a route where 'id' comes after action. The 'x' parameter on the action is to defeat aggressive caching in IE.
In the view (markup):
<img id="loading" src="images/ajax-loader.gif" alt=""/>
<!-- use a css stlye to make display:none -->
Get loader gifs here.
Also note that you do not have to do this with Json. You can fetch other things like HTML or XML from the controller action if you prefer.