Nascondere l'immagine utilizzando Javascript dopo che l'azione del controller è stata completata MVC3

Question

La mia applicazione è stata implementata utilizzando MVC 3, .net. Sto provando a generare un file excel con un clic di un pulsante. La chiamata all'azione del controller viene eseguita utilizzando Ajax. Il mio problema principale è: durante la generazione del file sto provando a visualizzare un'immagine sullo schermo per far sapere all'utente l'operazione in entrata. Posso visualizzare molto bene l'immagine ma non posso nasconderla dopo che l'operazione è stata completata. I codei sto usando è: codice

Javascript: codice

$("input.DownloadExcelReport").click(function (e) { 
    e.preventDefault(); 
    var parameter = -- code to fetch parameter value; 
    var outputViewUrl = (the url is created here); 
    showLoading(); -- This function displays the image 
    window.location.href = outputViewUrl; 
}); 

Azione Controller:

public ActionResult DownExcelReportForAssortment(Guid parameter) 
{ 

     try 
     { 

      //the contents for the file generation are fetched here.. 
      // Write contents to excel file 
      if (memoryStream != null) 
      { 
       var documentName = "Report.xls"; 
       byte[] byteArrary = memoryStream.ToArray(); 
       return File(byteArrary, "application/vnd.ms-excel", documentName); 
      } 
     } 
     catch (Exception ex) 
     { 
      LogManager.LogException(ex); 
     } 
} 

non restituire un risultato JSON per la chiamata javascript metodo in cui posso scrivere il codice per nascondi l'immagine Sto restituendo un file che può essere salvato dall'utente e l'azione è completata.

Può qualcuno suggerire/aiutarmi come nascondere l'immagine una volta completata l'operazione di generazione del file?

apprezzato l'aiuto ...

Answer 1

Si può checkout la following article e mettere questo in azione. Quindi cominciamo con la definizione di un controller:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public ActionResult DownExcelReportForAssortment(Guid parameter, string tokenId) 
    { 
     // Simulate some heavy work to fetch the report 
     Thread.Sleep(5000); 

     // we fake it 
     byte[] byteArray = System.IO.File.ReadAllBytes(@"c:\test.xls"); 

     var cookie = new HttpCookie("fileDownloadToken", tokenId); 
     Response.AppendCookie(cookie); 

     return File(byteArray, "application/vnd.ms-excel", "report.xls"); 
    } 
} 

e nella vista:

@Html.ActionLink(
    "download report", 
    "DownExcelReportForAssortment", 
    "Home", 
    new { parameter = Guid.NewGuid(), tokenId = "__token__" }, 
    new { @class = "download" } 
) 

Ora l'ultimo passo è quello di includere il jquery.cookie plugin:

<script type="text/javascript" src="@Url.Content("~/scripts/jquery.cookie.js")"></script> 

e scrivere uno script per iscriversi all'evento click dell'ancora e monitorare l'avanzamento del download:

$(function() { 
    var fileDownloadCheckTimer; 

    $('.download').click(function() { 
     var token = new Date().getTime(); 
     $(this).attr('href', function() { 
      return this.href.replace('__token__', token); 
     }); 

     // Show the download spinner 
     $('body').append('<span id="progress">Downloading ...</span>'); 

     // Start polling for the cookie 
     fileDownloadCheckTimer = window.setInterval(function() { 
      var cookieValue = $.cookie('fileDownloadToken'); 
      if (cookieValue == token) { 
       window.clearInterval(fileDownloadCheckTimer); 
       $.cookie('fileDownloadToken', null); 

       // Hide the download spinner 
       $('#progress').remove(); 
      } 
     }, 1000); 
    }); 
});