MVC3 - Ajax Download Icon

Question

I would like to show the AJAX download icon during an ActionResult request, which may take a few seconds to process.

What is the best approach to achieve this?

I want to display the icon only after the built-in check was successful (I use MVC3, EF Code First, so the check is automatically placed on the page).

During ActionResult there may be further checks / exceptions, in which case a message will be shown to the user, and then I would like the download icon to disappear again.

Answer 1

Define your link as an Ajax action link and provide the id of the rotating GIF somewhere on your page.

<div id="result"></div> <img id="spinner" src="../content/ajaxspinner.gif" style="display: none;"> @Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null) 

or if it is a form:

 @using(Ajax.BeginForm("Action", "Controller", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null)) { @Html.TextBox("Data")<br/> <input type="submit" value="Submit" /> } 

Answer 2

Put the image in the div tag as follows:

 <div id="busydiv" style="display:none;"><img src="busything.gif" /></div> 

and then create your link like this:

 @Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions { LoadingElementDuration = 1000, LoadingElementId = "busyDiv", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }, null) 

or in the form do the following:

 @using (Ajax.BeginForm("TestAjax", new AjaxOptions { LoadingElementDuration=1000, LoadingElementId="dave", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" })) 

Obviously, you should not use those AjaxOptions that you do not need, according to the documentation here: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx

Answer 3

Only my two cents:

The solution posted by Chris is valid and will work BUT , you should add a link to the two javascript libraries below. Note that order matters:

 <script src="~/scripts/jquery-1.8.0.js"></script> <script src="~/scripts/jquery.unobtrusive-ajax.js"></script> 

When you create an MVC application pre-loaded by the package and all these nu-get packages, this probably will not be a problem for you, but if you were like me and created an empty ASP.NET MVC application, you might come across problems.

Answer 4

I tried to implement this solution, but AjaxOptions (UpdateTargetId = "result" .LoadingElementId = "") gives me errors that do not exist in the current context ??

What am I missing here ??

respectfully

Meir