Visualizzazione dell'animazione di caricamento al centro della pagina mentre si effettua una chiamata al metodo Action in ASP .NET MVC

Question

La mia applicazione effettua diverse chiamate a un metodo Action (ASP .NET MVC) che restituisce un oggetto Json. Quando l'applicazione è in attesa che questo metodo restituisca i suoi dati, voglio visualizzare un'animazione di caricamento al centro della pagina. Come potrei realizzare questo? So che dovrei usare JQuery ma è tutto ciò che so.

Answer 1

Ho definito due funzioni in Site.master:

<script type="text/javascript"> 
    var spinnerVisible = false; 
    function showProgress() { 
     if (!spinnerVisible) { 
      $("div#spinner").fadeIn("fast"); 
      spinnerVisible = true; 
     } 
    }; 
    function hideProgress() { 
     if (spinnerVisible) { 
      var spinner = $("div#spinner"); 
      spinner.stop(); 
      spinner.fadeOut("fast"); 
      spinnerVisible = false; 
     } 
    }; 
</script> 

E sezione speciale:

<div id="spinner"> 
     Loading... 
    </div> 

stile visivo è definito nei CSS:

div#spinner 
{ 
    display: none; 
    width:100px; 
    height: 100px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    background:url(spinner.gif) no-repeat center #fff; 
    text-align:center; 
    padding:10px; 
    font:normal 16px Tahoma, Geneva, sans-serif; 
    border:1px solid #666; 
    margin-left: -50px; 
    margin-top: -50px; 
    z-index:2; 
    overflow: auto; 
} 

Answer 2

Puoi farlo visualizzando un div (se vuoi farlo in modal potresti usare blockUI - o uno dei tanti altri plugin di dialogo modale là fuori) prima della richiesta, quindi aspetta solo la chiamata indietro riesce come un esempio veloce è possibile che si $ GetJSON come segue (si potrebbe desiderare di utilizzare .ajax se si desidera aggiungere una corretta gestione degli errori)

$("#ajaxLoader").show(); //Or whatever you want to do 
$.getJSON("/AJson/Call/ThatTakes/Ages", function(result) { 
    //Process your response 
    $("#ajaxLoader").hide(); 
}); 

Se lo fai più volte nella vostra app e vogliono centralizzare il comportamento per tutte le chiamate ajax è possibile utilizzare gli eventi AJAX globali: -

$("#ajaxLoader").ajaxStart(function() { $(this).show(); }) 
       .ajaxStop(function() { $(this).hide(); }); 

---

Utilizzando blockUI è simile, per esempio con il contrassegno in su come: -

<a href="/Path/ToYourJson/Action" id="jsonLink">Get JSON</a> 
<div id="resultContainer" style="display:none"> 
And the answer is:- 
    <p id="result"></p> 
</div> 

<div id="ajaxLoader" style="display:none"> 
    <h2>Please wait</h2> 
    <p>I'm getting my AJAX on!</p> 
</div> 

E utilizzando jQuery: -

$(function() { 
    $("#jsonLink").click(function(e) { 
     $.post(this.href, function(result) { 
      $("#resultContainer").fadeIn(); 
      $("#result").text(result.Answer); 
     }, "json"); 
     return false; 
    }); 
    $("#ajaxLoader").ajaxStart(function() { 
          $.blockUI({ message: $("#ajaxLoader") }); 
        }) 
        .ajaxStop(function() { 
          $.unblockUI(); 
        }); 
});