Comment afficher un 'gif' jusqu'à ce que la méthode du contrôleur soit terminée en cours d'exécution + ASP.Net MVC

Question

J'ai une fonction qui prend quelques secondes à compléter. après avoir terminé la tâche dans un fil séparé, je veux charger la vue Result au navigateur. Jusqu'à ce que je veux montrer un gif de chargement dans le navigateur.

Voici comment ma méthode de commande

public ActionResult evaluateBulk(string year, string exam, string centre, string course, string batch) 
    { 
     string path = Directory.GetCurrentDirectory() + @"\" + year + @"\" + exam + @"\" + centre + @"\" + course + @"\" + batch + @"\"; 
     string[] listOfImages = getAllFiles(path); 

     var th = new Thread(processImages); 
     th.Start(listOfImages); 
     th.Join(); 

     return View("Result"); 
    } 

Voici comment la méthode du contrôleur ci-dessus est appelé à partir de la vue

 function evaluateBulk() { 

     var year = $("#year option:selected").val(); 
     var exam = $("#exam option:selected").val(); 
     var centre = $("#centre option:selected").val(); 
     var course = $("#course option:selected").val(); 
     var batch = $("#batch option:selected").val(); 

     $.ajax({ 
      async: true, 
      url: "evaluateBulk", 
      data: { year: year, exam: exam, centre: centre, course: course, batch: batch }, 
      cache: false, 
      dataType: "json", 
      success: function (data) { 
       alert("Done"); 
      }, 
      error: function (xhr, textStatus, errorThrown) { 
       alert(errorThrown); 
      } 
     }); 
    } 

Comment intégrer une charge gif dans ce point de vue pour afficher jusqu'à ce que le Result vue est chargé avec les résultats de la méthode ..

Merci

Answer 1

Ajouter une image chargeur à votre code

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

Modifier votre code ajax

$('#loadingImg').show(); 
    $.ajax({ 
     async: true, 
     url: "evaluateBulk", 
     data: { year: year, exam: exam, centre: centre, course: course, batch: batch }, 
     cache: false, 
     dataType: "json", 
     success: function (data) { 
      alert("Done"); 
     }, 
     complete: function(){ 
     $('#loadingImg').hide(); 
     }, 
     error: function (xhr, textStatus, errorThrown) { 
      alert(errorThrown); 
     } 
    });