7.3 Wie das Display-Attribut funktioniert
Solange Sie nur wenige Eingabefelder haben, die untereinander angeordnet sind, werden Ihnen die Fehlermeldungen neben den Eingabefeldern kein Problem bereiten. Anders sieht es aus, wenn Sie ein komplexes Formular mit vielen Eingabefeldern entwerfen, dessen Steuerelemente durch die Ausgabe der Fehlermeldungen nicht wild durcheinander geworfen werden sollen. In diesem Zusammenhang ist es wichtig, zu verstehen, wie das Display-Attribut die Darstellung beeinflusst.
Display01.aspx enthält ein Formular, das zwei Eingabefelder nebeneinander anordnet. Abbildung 7.5 zeigt die Darstellung im Browser.
<!-- Display01.aspx -->
<% @Page debug="true" %>
<html><head>
<title>Display-Attribut</title></head><body>
<form runat="server">
Bitte füllen Sie alle Felder aus:<br><br>
Vorname:
<input type="text" runat="server" id="txtVorname">
Nachname:
<input type="text" runat="server" id="txtNachname">
<input type="submit" runat="server" value=" OK ">
</form></body></html>
Hier klicken, um das Bild zu Vergrößern
Abbildung 7.5 Dieses Formular enthält noch keine Validierungssteuerelemente.
In der Seite Display02.aspx fügen Sie für jedes Eingabefeld ein RequiredFieldValidator-Steuerelement hinzu.
<!-- Display02.aspx -->
<% @Page debug="true" %>
<html><head>
<title>Display-Attribut</title></head><body>
<form runat="server">
Bitte füllen Sie alle Felder aus:<br><br>
Vorname:
<input type="text" runat="server" id="txtVorname">
<asp:RequiredFieldValidator
ControlToValidate="txtVorname"
runat="server">
Bitte geben Sie den Vornamen an.
</asp:RequiredFieldValidator>
Nachname:
<input type="text" runat="server" id="txtNachname">
<asp:RequiredFieldValidator
ControlToValidate="txtNachname"
runat="server">
Bitte geben Sie den Nachnamen an.
</asp:RequiredFieldValidator>
<input type="submit" runat="server" value=" OK ">
</form></body></html>
Abbildung 7.6 zeigt die Darstellung im Browser, die aber etwas verrutscht wirkt.
Hier klicken, um das Bild zu Vergrößern
Abbildung 7.6 Die Validierungssteuerelemente lassen das Layout verrutschen.
Wenn Sie einen Blick in den generierten HTML-Code werfen, wird klar, wie diese Verwerfungen zustande kommen:
[... ]
Vorname:
<input name="txtVorname" id="txtVorname" type="text" />
<span id="_ctl1" controltovalidate="txtVorname"
evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
initialvalue="" style="color:Red;visibility:hidden;">
Bitte geben Sie den Vornamen an.
</span>
Nachname:
[...]
Die Fehlermeldungen sind bereits im HTML-Code enthalten, werden aber durch die CSS-Anweisung visibility:hidden unsichtbar gemacht. Platz benötigen die Fehlermeldungen dabei aber immer noch. So entstehen die großen »Löcher« zwischen den Formularelementen.
Wenn Sie nicht möchten, dass der Fehlertext als unsichtbarer Platzhalter eingefügt wird, könnten Sie auf die Idee kommen, im Validierungssteuerelement das Attribut Display="dynamic" zu verwenden statt dem voreingestellten Wert Display="static". Anschließend sieht das Formular zunächst so aus wie der ursprüngliche HTML-Entwurf. Sobald aber ein Fehler auftritt, wird die Meldung hinter das entsprechende Feld geschrieben, womit der Formularentwurf erneut durcheinander gebracht wird.
| Tipp Langer Rede kurzer Sinn: Wenn Sie
1. hinter den Eingabefeldern Fehlermeldungen anbringen möchten, aber
2. nicht möchten, dass dadurch das Formularlayout durcheinander kommt,
dann müssen Sie das Formular so entwerfen, dass Sie von Anfang an einen Platz für die Fehlermeldungen vorsehen. In diesem Fall ist auch die Standardeinstellung Display="static" die sinnvollere Option, weil dann garantiert nichts mehr durcheinander geworfen werden kann. Man muss ja nicht unbedingt hinter jede mangelhafte Eingabe gleich einen Roman schreiben. Eine kleine Markierung in Verbindung mit einem zentralen Hinweis wird oft ausreichen.
|
|
