MVC3 - Ajax-loading-icon

Möchte ich Ihnen zeigen, ein ajax-loading-icon während der ein ActionResult Anfrage, dass kann ein paar Sekunden dauern, um zu verarbeiten.

Was ist der beste Ansatz, um dies erreicht?

Möchte ich nur ein display das Symbol nach der integrierten it-Validierung geht (ich bin mit MVC3, EF Code First, so dass die Validierung wird automatisch auf die Seite).

Können weitere validation/exceptions während des ActionResult, in welchem Fall eine Meldung wird dem Benutzer angezeigt, und ich würde dann wollen, das laden-Symbol, um wieder zu verschwinden.

Dank!

es ist ein nettes kleines plug-in hier github.com/bstaley/ajax-auto-loading/blob/master/... es wird automatisch ein-und ausblenden Ihrer be-Bild für jeden ajax-Aufruf.

InformationsquelleAutor mp3duck | 2011-06-24

  1. 12

    Definieren Sie Ihren link als Ajax-link, und geben Sie die ID ein sich drehendes GIF irgendwo auf Ihrer Seite.

    <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)

    oder wenn es eine form:

    @using(Ajax.BeginForm("Action", "Controller", null, new AjaxOptions{UpdateTargetId = "result", LoadingElementId = "spinner"}, null))
{
   @Html.TextBox("Data")<br/>
   <input type="submit" value="Submit" />
}
    vielen Dank für Ihre Antwort. Es funktioniert nicht ganz bei mir. 1. Ich habe nicht den spinner-Symbol, wenn ich drücken Sie auf senden 2. Wenn ich den Benutzer wieder auf die Seite von ActionResult, es fügt "?Länge=10" an das Ende meiner URL? Ich habe Ihre zweite Beispiel
    edit: ich fügte hinzu, "null" in der route-Werten der Eigenschaft, und es hat aufgehört "?Länge=10" bit. So, es ist einfach die Tatsache, dass es nicht der Anzeige das Symbol jetzt?
    Es ist nicht für mich arbeiten. Kann jemand helfen oder alternativen geben?

    InformationsquelleAutor Chris

  2. 3

    Setzen Sie das Bild in ein div-tag wie diesem:

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

    dann erstellen Sie Ihren link wie folgt:

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

    oder in eine form, dies zu tun:

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

    Offensichtlich lässt diejenigen AjaxOptions, dass Sie nicht brauchen, laut der Dokumentation hier: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx

    InformationsquelleAutor Tom Chantler

  3. 0

    Nur meine zwei Cent:

    Die Lösung geschrieben von Chris gültig ist und funktioniert ABER müssen Sie fügen Sie einen Verweis auf die beiden javascript-Bibliotheken unter. Bitte beachten Sie, dass die Reihenfolge ist wichtig:

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

    Beim erstellen einer MVC-Anwendung vorinstalliert, mit der Bündelung und all diese nu-get Pakete, das wird wahrscheinlich nicht ein problem für Sie, aber wenn Sie sind wie ich und erstellt einen leeren ASP.NET MVC-Anwendung, die Sie möglicherweise in Probleme.

    InformationsquelleAutor Denys Wessels

Schreibe einen Kommentar