Mittwoch, 18. Januar 2017

ASP.Net MVC Loading with Progress Indicator


Stellenweise sind Operationen innerhalb des Controllers abhängig von den zu verarbeiteten Daten. Für den Nutzer kann der Eindruck entstehen das die Webseite nicht mehr Reagiert. Mit Hilfe eines einfachen Progress Indicator, kann den Nutzer verständlich angezeigt werden das die Verarbeitung noch andauert.

Im meinem Fall verwendet ich eine einfaches gif welches ich über JavaScript zur Anzeige bringe. So eine Gif kann problemlos mit dem Ajaxload Generator (http://www.ajaxload.info/) erstellt werden.

Im der View verwende ich folgenden Code:


@section Scripts{
    <script type="text/javascript">
        function ProcessingReset() {
            $('#loadingReset').show();
        };
    </script>
}
Im meinem Fall verwendet ich eine einfaches gif welches ich über JavaScript zur Anzeige bringe. So eine Gif kann problemlos mit dem  Ajaxload Generator (http://www.ajaxload.info/) erstellt werden.
@Html.ActionLink("Buchung zurücksetzten", "ResetViewMarksBooking", new { SearchYear = ViewBag.CurrentYear, years = 1 }, new { @class = "btn btn-warning", onclick = "ProcessingReset();" })

Das Image „loadingReset” ist im Normalfall verborgen, erst durch die JavaScript Methode ProcessingReset zur Anzeigte gebracht.
<img id="loadingReset" src="~/images/ajax-loader-small.gif" alt="" hidden="hidden" />
Alternativ könnte auch ein Input verwendet werden und die onClick direkt Überschrieben werden.

<input type="submit" value="Buchung zurücksetzten" class="btn btn-warning" onclick="ProcessingReset();" />

<img id="loadingReset" src="~/images/ajax-loader-small.gif" alt="" hidden="hidden" />


Keine Kommentare:

Kommentar veröffentlichen