2008-11-13 17 views
13

Ich habe einen MVC-Controller, der einen Prozess durchläuft, einige Daten anzeigt und dann die Ergebnisse dieser Daten an den Benutzer in einer Ansicht zurückgibt. Die Verarbeitungszeit hängt von der Menge der Daten ab, die verarbeitet werden. Ich brauche eine gute Möglichkeit, während der Ausführung des Prozesses eine animierte GIF-Datei in der Ansicht anzuzeigen, damit der Benutzer weiß, dass etwas passiert.ASP.Net MVC Laden wird ausgeführt Indikator

Ich habe verschiedene AJAX-Methoden und Teilansichten angeschaut, finde aber immer noch keinen guten Weg, dies zu erreichen. Was ich wirklich wollte, war ein ActionFilter, der während des OnActionExecuting-Ereignisses, das dieses animierte .gif anzeigt, einen View oder eine Teilansicht zurückgab, sobald der Controller die Verarbeitung abgeschlossen und ViewData, die Ansicht oder Teilansicht mit der aktuellen Ansicht zurückgegeben hatte Daten könnten angezeigt werden.

Es scheint auch, als wäre jQuery in der Lage, eine nette asynchrone Möglichkeit zu bieten, die Controller-Aktion im Hintergrund aufzurufen und dann die Ansicht zu rendern. Jede Hilfe wäre willkommen.

Antwort

24

In Ihrem Controller:

public JsonResult GetSomething(int id) 
{ 
    return Json(service.GetSomething(id)); 
} 

In der Ansicht (Javascript, mit 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() 
    }); 
}); 

Beachten Sie, dass dies eine Route geht davon aus, wo 'id' nach Aktion kommt. Der 'x' Parameter der Aktion ist das aggressive Caching in IE zu besiegen.

In der Ansicht (Markup):

<img id="loading" src="images/ajax-loader.gif" alt=""/> 
<!-- use a css stlye to make display:none --> 

Get loader Gifs here.

Beachten Sie auch, dass Sie dies mit Json nicht tun müssen. Sie können andere Dinge wie HTML oder XML aus der Controller-Aktion holen, wenn Sie bevorzugen.

+0

Ich musste ein # zum 'loading' hinzufügen, damit es aufgenommen wird $ ('# loading'). Show() und $ ('# loading'). Hide() für die beiden JS-Stücke. .. insgesamt, danke für die JS ... das war perfekt .. –

Verwandte Themen