2008-11-13 7 views
13

J'ai un contrôleur MVC qui exécute un processus, définit des données de vue, puis renvoie les résultats de ces données à l'utilisateur dans une vue. Le temps de traitement dépend de la quantité de données en cours de traitement. J'ai besoin d'un bon moyen d'afficher un .gif animé dans la vue pendant que le processus est en cours, en laissant l'utilisateur savoir que quelque chose se passe.ASP.Net MVC Chargement en cours Indicateur

J'ai regardé différentes méthodes AJAX et vues partielles mais je n'arrive toujours pas à trouver un bon moyen d'y parvenir. Ce que j'ai vraiment souhaité pouvoir faire était avoir un ActionFilter qui retournerait une vue ou une vue partielle au cours de l'événement OnActionExecuting qui affiche ce .gif animé, puis une fois que le contrôleur a terminé le traitement et retourné ViewData, la vue ou vue partielle avec la vue réelle Les données pourraient être affichées.

Il semble également que jQuery serait capable de fournir une manière asynchrone sympa d'appeler l'action du contrôleur en arrière-plan, puis de rendre la vue. Toute aide serait appréciée.

Répondre

24

Dans votre contrôleur:

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

Dans la vue (javascript, en utilisant 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() 
    }); 
}); 

Notez que cela suppose une route où 'id' vient après l'action. Le paramètre 'x' de l'action est de vaincre la mise en cache agressive dans IE.

Dans la vue (balisage):

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

Get loader gifs here.

Notez également que vous ne devez pas faire cela avec Json. Vous pouvez récupérer d'autres choses comme HTML ou XML à partir de l'action du contrôleur si vous préférez.

+0

J'ai dû ajouter un # au 'chargement' pour qu'il soit récupéré alors $ ('# loading'). Show() et $ ('# loading'). Hide() pour les deux pièces JS. .. globalement, merci pour le JS ... c'était parfait .. –