MVC3 - Ajax de l'icône de chargement

Je voudrais montrer un AJAX de l'icône de chargement lors d'un ActionResult demande qui peut prendre quelques secondes.

Quelle est la meilleure approche pour accomplir cette?

Je ne veux afficher l'icône après le construit la validation de passe (je suis à l'aide de MVC3, EF le Premier Code, de sorte que la validation est automatiquement mis sur la page).

Il peut y avoir davantage de validation/exceptions au cours de la ActionResult, dans ce cas, un message est affiché à l'utilisateur, et j'avais souhaitez ensuite l'icône de chargement de disparaître à nouveau.

InformationsquelleAutor mp3duck | 2011-06-24
  1. 12

    Définir votre lien Ajax lien d'action et de spécifier l'ID de spinning GIF quelque part sur votre page.

    <div id="result"></div>
<img id="spinner" src="../content/ajaxspinner.gif" style="display: none;">
@Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null)

    ou si c'est une forme:

    @using(Ajax.BeginForm("Action", "Controller", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null))
{
   @Html.TextBox("Data")<br/>
   <input type="submit" value="Submit" />
}
    • merci pour votre réponse. Il n'a pas assez de travail pour moi. 1. Je n'ai pas l'spinner icône quand j'ai appuyé sur le bouton soumettre 2. Quand je serais de retour utilisateur à la page de ActionResult, il ajoute "?Longueur=10" à la fin de mon URL? J'ai utilisé votre deuxième exemple
    • edit: j'ai ajouté "null" dans la route de valeurs de propriété, et il a cessé de l' "?Longueur=10 bits. Donc, c'est juste le fait que ce n'est pas l'affichage de l'icône?
    • Il ne fonctionne pas pour moi. N'importe qui peut aider ou donner des alternatives?
    InformationsquelleAutor Chris
  2. 3

    Mettre l'image dans une balise div comme ceci:

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

    et ensuite créer votre lien comme ceci:

    @Ajax.ActionLink("Link Text", "ActionName", "ControllerName", null, new AjaxOptions { LoadingElementDuration = 1000, LoadingElementId = "busyDiv", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }, null)

    ou dans un formulaire ce faire:

    @using (Ajax.BeginForm("TestAjax", new AjaxOptions { LoadingElementDuration=1000, LoadingElementId="dave", HttpMethod = "Post", UpdateTargetId = "targetDiv", OnFailure = "PostFailure", OnSuccess = "PostSuccess", OnComplete = "PostOnComplete" }))

    Évidemment omettre ceux AjaxOptions que vous n'avez pas besoin, conformément à la documentation ici: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx

    InformationsquelleAutor Tom Chantler
  3. 0

    Juste mes deux cents:

    La solution posté par Chris est valide et fonctionne MAIS vous devez ajouter une référence aux deux bibliothèques javascript ci-dessous. Veuillez noter que l'ordre des questions:

    <script src="~/scripts/jquery-1.8.0.js"></script>
<script src="~/scripts/jquery.unobtrusive-ajax.js"></script>

    Lorsque vous créez une application MVC pré-chargé avec le regroupement et tous ces nu-obtenir des paquets ce ne sera probablement pas un problème pour vous, mais si vous êtes comme moi et a créé un vide ASP.NET application MVC, vous pourriez rencontrer des problèmes.

    InformationsquelleAutor Denys Wessels