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" />

ASP.NET MVC: Disable Unobtrusive Validation on POST

Eines nützlichsten Dinge im MVC ist „Unobtrusive Validation“ über JavaScript. Ein guter Artikel zur Unobtrusive Validation kann unter folgenden Link gefunden werden: https://www.exceptionnotfound.net/asp-net-mvc-demystified-unobtrusive-validation/ Er beschrieb die Funktionsweise recht gut.

Leider wieder diese unauffällige Validierung mit zunehmender Datenmenge nicht mehr so unauffällig. Ein POST einer List e von Objekten kann dann schnell den Eindruck erwecken das der Browser sich aufgehängt hat.

Um die Validierung für die Seite zu deaktivieren reicht es über den HtmlHelper die Methode EnableUnobtrusiveJavaScript(false) aufzurufen. (https://msdn.microsoft.com/en-us/library/system.web.mvc.htmlhelper.enableunobtrusivejavascript(v=vs.118).aspx )

So können auch größer Liste übertragen werden.

CSS Attribut zur Laufzeit ändert

Die JQuery.css() Methode ermöglicht es recht einfach  CSS Attribute einer Klasse anzupassen oder zu Setzen.

Im folgenden Beispiel soll das Hintergrund Attribut der bootstrap „logo-bar“ dynamisch gesetzt werden, ohne die gesamte Klasse gegen eine neue auszutauschen, nur um ein Attribut zu ändern. 

CSS

.logo-bar{

           z-index:1030;

           width:100%;

           position:fixed;

           left:0px;

           top:0px;

           background:url(../../logo-hg.png) repeat-x top left;

    } 

Javaccript

<script type="text/javascript">

        $(document).ready(function () {

       if ( @model.JVId == 00001003) {

            $('.logo-bar').css({ "background": "url(../../logo-hg_Red.png) repeat-x top left" });

       }

       else

       {

             $('.logo-bar').css({ "background": "url(../../logo-hg.png) repeat-x top left" });

       }

        });

</script> 

Hier wird für im falle das die JVId 00001003 ist die das CSS Attribut der „logo-bar“ Klasse neu gesetzt. 

Siehe auch http://api.jquery.com/css/ 

Bis zum nächsten mal