Weitgehend automatisierter Load Screen (project inkl.)

Wenn ein Formular abgeschickt wird oder Seiten einfach länger zum laden brauchen, so ist ein schöner Loadscreen oft von Vorteil. Leichter gesagt als getan, außer man will freiwillig an jedes <a> Element und <form> submit event einen javascript Funktionsaufruf machen.
Ich habe mir daher die Mühe gemacht eine weitgehend automatisierte Möglichkeit mit einfacher Implementierung für ein MVC Projekt zu coden.

Hier der wichtige Codeteil:

Ich bezeichne das ganze nicht als vollständig automatisiert, weil AJAX Aufrufe weiterhin manuell mit einem Loadscreen versehen werden müssen (Lösungsideen lese ich gerne in den Kommentaren). Also ein Link der eine Ajax Action aufruft auch den Loadscreen zuweisen.

$("a#myAjaxLink").click(function(){ showLoadScreen(); });

Und im Ajax error Bereich den Loadscreen immer ausblenden.

Ein Minimalbeispiel für den error Bereich in AJAX:

$.ajax({
	url: "/Demo/Controller1",
	data: { a: "b" },
	dataType: "json",
	type: "POST",
	success: function (data) {
		//do stuff
	},
	
	//THE IMPORTANT PART
	error: function (data) {
		hideLoadScreen(); //hide the load screen because something failed
	}
});

LoadScreenDemo

1 Datei(en) 0.00 KB

Download

Credits für das einhängen in jQuery validation von hier: Overriding MVC unobtrusive client validation error placement