Dauert eine Anfrage länger möchte man dem Besucher eine Meldung anzeigen daß der Besucher noch etwas warten soll. Hier und da wird sogar ein Fortschrittsbalken gewünscht. Diese vermeintlich einfachen Dinge die man in fast jedem Programm zu sehen bekommt, sind in HTML nicht so einfach zu bewerktstelligen.

Ein wesentliches Problem dabei ist daß der die Verzögerung auf dem Server stattfindet, die Meldung jedoch auf dem Client angezeigt werden soll. ASP ist nun mal Serverseitig, HTML rein Clientseitig. ASP kann daher nicht wie bei einem Windows-Programm einfach ein Fenster anzeigen um es dann nach Beenden der Seite wieder zu schliessen.

Hier und da werden Lösungen in Javascript, Java, ActiveX oder Flash aufgezeigt. Problem dabei ist daß der Browser auch diese Techniken überhaupt versteht bzw. diese Techniken auch aktiviert sein müssen. Ist überhaupt eine Lösung ohne Javascript, Java, ActiveX oder Flash möglich?

Die Antwort lautet ja, als Technik kommt dabei CSS zum Einsatz. Die Grundidee ist dabei schnell erklärt: Die Warte-Meldung wird in ein Div-Element gestellt, dieses Element wird nur solange angezeigt, bis die Seite fertig abgearbeitet wurde. Um zu demonstrieren, daß das Anzeigen der Meldung auch wie gewünscht funktioniert wird ein Quellcode benötigt, für den der IIS mehrere Sekunden benötigt. Das Skript ist relativ einfach, damit der IIS auch mehrere Sekunden benötigt wird Response.Buffer auf false gesetzt. Das Skript:

1
2
3
4
5
6
7

<%
Response.Buffer = false
dim index
for index = 0 to 2000
Response.Write(index)
next
%>

Damit hat der Server für einige Sekunden Arbeit. Ruft man das Skript auf, werden alle Zahlen an den Client gesandt. Bei den Zahlen kann der Besucher erkennen, daß der Webserver Daten an den Client sendet, oftmals geschieht jedoch scheinbar gar nichts. Daher sollte eine Meldung angezeigt werden. Das oben aufgeführte Skript wird nun geändert:

1
2
3
4
5
6
7
8
9
10
11
12
13

<%
Response.Buffer = false
%>
<div id="TestDiv" style="color:red;font-weight:bold;">
Bitte einen Moment Geduld
</div>
<%
dim index
for index = 0 to 2000
Response.Write(index)
next
%>
<style>div#TestDiv{display:none;}</style>

In Zeile 4 bis 6 ist die Wartemeldung, die in Zeile 15 durch die CSS-Anweisung display:none ausgeblendet wird. Damit steht eine einfache Möglichkeit bereit, dem Besucher eine Meldung anzuzeigen. Natürlich können Sie eine Grafik einblenden. Aber das ganze bietet sogar noch mehr Möglichkeiten, ein Fortschrittsbalken. Das allerdings ist schon etwas schwieriger und umfangreicher. Auch hierbei wird auf Javascript & Co. verzichtet, das ganze wird nur mit HTML und CSS realisiert.

Zuerst aber muss ich Sie etwas enttäuschen, der Fortschrittsbalken funktioniert nur in gröberen Schritten (hier mit jeweils 25%), wobei Sie das ändern können. Zu Demonstration und besserem Verständnis zunächst mal das Skript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

Das ist nun aber etwas mehr Quellcode! Aber das ist auch nötig. In diesem Fall werden 4 Div-Elemente verwendet. Zunächst werden in Zeile 1 bis 6 bis auf das erste mit 0% nicht eingeblendet. Die Meldungen (also Div-Elemente) sind von der Zeile 7 bis 22. Aber die jeweilige Meldung muss auch noch eingeblendet werden. Das erfolgt in der Schleife, dort durch if-Abfragen in Zeile 27 bis 42. Zuletzt wird die letzte Meldung mit 75% deaktiviert.

Aber das ganze kann man auch etwas anders gestalten, eben mit einem Fortschrittsbalken, was das nachfolgende Skript demonstriert:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

In diesem Beispiel werden einfach 2 Balken (span-tags) in der Breite verändert, so daß der Eindruck eines Fortschrittbalkens entsteht.

<< Zum vorherigen Tipp 90:
Doppelte Elemente aus einem Array entfernen

Zum nächsten Tipp 92 >>
Excel-Datei per ADO auslesen

top