5. Verwaltung der Benutzeroberfläche
5.1. Einführung
In der Client-Server-Beziehung im Web sendet der Client Informationen in Form einer Parameterzeichenfolge [param1=val1¶m2=val2&...] an den Server. In unseren vorherigen Beispielen haben wir diese Zeichenfolge meist manuell erstellt, indem wir URLs der Form [http://localhost/appli? param1=val1¶m2=val2&...] angefordert haben. In der Realität stammen die Informationen, die der Client an den Server sendet, aus Formularen, die der Benutzer ausgefüllt hat. In diesem Kapitel untersuchen wir, wie man diese Formulare erstellt. Außerdem stellen wir das WebMatrix-Tool vor, mit dem wir Benutzeroberflächen entwerfen können. Die Installation dieses Tools wird in den Anhängen beschrieben.
5.2. Die Sprache HTML
5.2.1. Ein Beispiel
Betrachten Sie das folgende, mit [Web Matrix] erstellte Beispiel, das Folgendes anzeigt:
- eine Tabelle
- ein Bild
- einen Link
Starten Sie [WebMatrix] und wählen Sie die Option [Datei/Neue Datei]:
Wir entscheiden uns dafür, eine HTML-Seite zu erstellen. Die oben genannten Angaben führen zur Erstellung der Datei [d:\data\devel\aspnet\chap4\example1\example1.htm]. [Web Matrix] bietet zwei Möglichkeiten, diese Datei zu bearbeiten: den [Design]-Modus und den [HTML]-Modus:
Im [Design]-Modus können Sie die von [WebMatrix] bereitgestellte HTML-Komponentenpalette verwenden:
Um ein Element aus dieser Palette einzufügen, doppelklicken Sie einfach darauf und positionieren Sie es dann im [Design]-Fenster. Im [HTML]-Modus können Sie das HTML-Dokument mit einem Texteditor erstellen. Dies erfordert Kenntnisse der HTML-Syntax. Auf der Registerkarte [HTML] wurde ein Dokumentgerüst generiert:
Das [HTML]-Fenster ist besonders für diejenigen nützlich, die noch nicht mit HTML vertraut sind. Sie erstellen Ihr Dokument im [Design]-Fenster und überprüfen den generierten HTML-Code im [HTML]-Fenster. Auf diese Weise lernen Sie HTML nach und nach und können bald ausschließlich mit dem Texteditor arbeiten, ohne auf den [Design]-Modus angewiesen zu sein. Wir zeigen Ihnen nun, wie Sie das zu Beginn dieses Abschnitts vorgestellte HTML-Dokument erstellen. Wir arbeiten im [Design]-Fenster. Zunächst geben wir die erste Textzeile direkt ein:
- Wir fügen die Komponente [Horizontale Linie] aus der Komponentenpalette hinzu:
- Wir fügen die Komponente [Tabelle] hinzu:
- Wir setzen den Cursor in die dritte Zeile der Tabelle, um sie mit der Option [HTML/Tabelle bearbeiten/Tabellenzeile löschen] zu löschen. Dann geben wir den gewünschten Text in jede Zelle ein:
- Wir setzen den Cursor in eine der Tabellenzellen und untersuchen deren Eigenschaften. Das Eigenschaftenfenster wird unten rechts im Arbeitsbereich angezeigt:
- Die Zelle wird durch den HTML-Tag <TD> dargestellt. Daher werden uns die Eigenschaften des Tags <TD> angezeigt. Wir konzentrieren uns auf die Tabelle, die ein Objekt ist, das die Zelle enthält. Wir klicken auf die Dropdown-Liste (Klicken, um übergeordnete HTML-Elemente anzuzeigen) oben, um das Objekt <TABLE> auszuwählen:
- Das <TABLE>-Objekt verfügt über eine [border]-Eigenschaft, die die Breite des Rahmens um die Tabellenzellen festlegt. Hier setzen wir border=1.
- Wir bearbeiten nun die Attribute des <TD>-Objekts in Zelle (1,2), um align=Center und width=200 (Pixel) festzulegen. Der Text wird in der Zelle zentriert (align=center) und die Zelle wird 200 Pixel breit sein. Um die Änderung zu sehen, müssen Sie möglicherweise die Registerkarte [HTML] auswählen und dann wieder zur Registerkarte [Design] wechseln:
- Nun fügen wir den Text ein, der dem Bild vorangestellt wird:
- dann das Bild, indem wir auf die Komponente [image] in der Palette doppelklicken:
- Wir wählen das Bild aus, um seine Eigenschaften zu bearbeiten:
- Im Attribut [src] geben wir den Namen der Datei ein, die das Bild enthält, hier [univ01.gif]:
- Wir fügen den Text ein, der dem Link vorangestellt wird:
- Wir verwandeln den Text [hier] in einen Link zur URL [http://istia.univ-angers.fr]. Dazu markieren wir ihn und wählen dann die Option [HTML/Hyperlink einfügen]:
- Wir erhalten folgendes Ergebnis:
- Wir sind fast fertig. Werfen wir einen Blick auf den generierten HTML-Code auf der Registerkarte [HTML]:
<html>
<head>
</head>
<body>
<p>
Le langage HTML - 1
</p>
<hr />
<table border="1">
<tbody>
<tr>
<td>
cellule(1,1)</td>
<td align="middle" width="200">
cellule(1,2)</td>
<td>
cellule(1,3)</td>
</tr>
<tr>
<td>
cellule(2,1)</td>
<td>
cellule(2,2)</td>
<td>
cellule(2,3)</td>
</tr>
</tbody>
</table>
<p>
Une image <img src="univ01.gif" />
</p>
<p>
Le site de l'istia <a href="http://istia.univ-angers.fr">ici</a>
</p>
</body>
</html>
Wir müssen noch ein paar Details klären. Zunächst möchten wir unserem Dokument einen Titel geben. [WebMatrix] lässt dies im [Design]-Modus nicht zu. Auf der Registerkarte [HTML] ersetzen wir den Abschnitt <head>..</head> durch Folgendes:
Außerdem möchten wir, dass der Text [HTML - 1] in einer größeren Schriftart angezeigt wird. Mit dem Tag <Hi>text</Hi> können Sie die Textgröße festlegen, wobei „i“ für Werte von 1 bis 6 steht, von der größten bis zur kleinsten Schriftgröße. Hier verwenden wir H2. Das Tag
wird zu:
Das [Design]-Fenster spiegelt unsere Änderungen wider:
Jetzt müssen wir es nur noch mit der Option [Ansicht/Start] oder [F5] testen. [WebMatrix] fragt einige Informationen ab, um den [Cassini]-Webserver zu starten:
Wir können die Standardwerte übernehmen. Der [Cassini]-Server wird gestartet und unsere Seite wird in einem Browser angezeigt:
Aus Neugier können wir überprüfen, welche Parameter zum Starten von [Cassini] verwendet wurden:
Wir haben die Grundlagen der Erstellung einer HTML-Seite mit [WebMatrix] behandelt. Die Leser werden dazu ermutigt, weitere HTML-Seiten zu erstellen und dabei jedes Mal den generierten HTML-Code zu überprüfen. Nach und nach werden sie in der Lage sein, eine Seite ohne den [Design]-Modus zu erstellen. Ein HTML-Dokument weist im Allgemeinen folgende Struktur auf:
Das gesamte Dokument ist von den Tags <html>...</html> umschlossen. Es besteht aus zwei Teilen:
<head>...</head>: Dies ist der nicht sichtbare Teil des Dokuments. Er liefert Informationen an den Browser, der das Dokument anzeigt. Er enthält oft die Tags <title>...</title>, die den Text festlegen, der in der Titelleiste des Browsers erscheint. Er kann auch andere Tags enthalten, darunter solche, die die Schlüsselwörter des Dokuments definieren, die dann von Suchmaschinen verwendet werden. Dieser Abschnitt kann auch Skripte enthalten, die in der Regel in JavaScript oder VBScript geschrieben sind und vom Browser ausgeführt werden.
<body attributes>...</body>: Dies ist der Abschnitt, der vom Browser angezeigt wird. Die in diesem Abschnitt enthaltenen HTML-Tags teilen dem Browser das „gewünschte“ visuelle Layout des Dokuments mit. Jeder Browser interpretiert diese Tags auf seine eigene Weise. Daher kann es vorkommen, dass zwei Browser dasselbe Webdokument unterschiedlich darstellen. Dies ist im Allgemeinen eine der Herausforderungen, denen sich Webdesigner stellen müssen.
Der HTML-Code für das vorherige Dokument lautete wie folgt:
<html>
<head>
<title>HTML1</title>
</head>
<body>
<h2>Le langage HTML - 1
</h2>
<hr />
<table border="1">
<tbody>
<tr>
<td>
cellule(1,1)</td>
<td align="middle" width="200">
cellule(1,2)</td>
<td>
cellule(1,3)</td>
</tr>
<tr>
<td>
cellule(2,1)</td>
<td>
cellule(2,2)</td>
<td>
cellule(2,3)</td>
</tr>
</tbody>
</table>
<p>
Une image <img src="univ01.gif" />
</p>
<p>
Le site de l'istia <a href="http://istia.univ-angers.fr">ici</a>
</p>
</body>
</html>
HTML | HTML-Tags und Beispiele |
<title>HTML1</title> HTML1 wird in der Titelleiste des Browsers angezeigt, wenn das Dokument angezeigt wird | |
<horizontal> : zeigt eine horizontale Linie an | |
<table attributes>....</table> : zum Definieren der Tabelle <tr attributes>... : zum Definieren einer Zeile <td attributes>... : zum Definieren einer Zelle Beispiele: <table border="1">...: Das Attribut „border“ definiert die Dicke des Tabellenrandes <td align="center" width="200">Zelle(1,2) : definiert eine Zelle, deren Inhalt Zelle(1,2) ist. Dieser Inhalt wird horizontal zentriert (align="center"). Die Zelle hat eine Breite von 200 Pixeln (width="200") | |
<img src="univ01.gif" />: Definiert ein Bild, dessen Quelldatei „univ01.gif“ auf dem Webserver ist (src="univ01.gif"). Dieser Link befindet sich in einem Webdokument, das über die URL http://localhost/exemple1.htm erreichbar ist. Daher fordert der Browser die URL http://localhost/univ01.gif an, um das hier referenzierte Bild abzurufen. | |
<a href="http://istia.univ-angers.fr">here: bewirkt, dass der Text „here“ als Link zur URL http://istia.univ-angers.fr dient. |
In diesem einfachen Beispiel sehen wir, dass der Browser zum Aufbau des gesamten Dokuments zwei Anfragen an den Server stellen muss:
http://localhost/exemple1.htm, um den HTML-Quellcode des Dokuments abzurufen
http://localhost/univ01.gif, um das Bild univ01.gif abzurufen
5.2.2. Erstellen eines Formulars
Der Zweck eines HTML-Formulars besteht darin, dem Benutzer eine Seite zur Eingabe von Informationen zu präsentieren, ähnlich den Eingabeformularen in Windows. Das Eingabeformular wird als HTML-Dokument an den Browser gesendet. Der Browser zeigt das Formular dem Benutzer an, der es ausfüllt und über eine Schaltfläche mit dieser Funktion absendet. Der Browser übermittelt dann die eingegebenen Werte zur Verarbeitung an den Server. Wir werden sehen, dass nicht das gesamte Formular an den Server zurückgesendet wird, sondern nur die eingegebenen Werte. Das folgende Beispiel zeigt ein Webformular, das ebenfalls mit WebMatrix erstellt wurde:
Der von [WebMatrix] generierte HTML-Code lautet wie folgt:
<html>
<head>
<title>Formulaire</title>
<script language="javascript">
function effacer(){
alert("Vous avez cliqué sur le bouton [Effacer]");
}
</script>
</head>
<body>
<p>
Gestion d'un formulaire
</p>
<hr />
<form name="formulaire" method="post">
<table border="1">
<tr>
<td>
Etes-vous marié(e)</td>
<td>
<p align="center">
<input type="radio" value="oui" name="rdMarie" />Oui
<input type="radio" checked value="non" name="rdMarie" />Non
</p>
</td>
</tr>
<tr>
<td>
Cases à cocher
</td>
<td>
<p align="center">
<input type="checkbox" value="un" name="C1" />1
<input type="checkbox" checked value="deux" name="C2" />2
<input type="checkbox" value="trois" name="C3" />3
</p>
</td>
</tr>
<tr>
<td>
Champ de saisie</td>
<td>
<p align="center">
<input type="text" maxlength="30" value="qqs mots" name="txtSaisie" />
</p>
</td>
</tr>
<tr>
<td>
Mot de passe</td>
<td>
<p align="center">
<input type="password" maxlength="12" size="12" value="unMotDePasse" name="txtMdp" />
</p>
</td>
</tr>
<tr>
<td>
Boîte de saisie</td>
<td>
<p align="center">
</p>
<textarea name="areaSaisie">ligne1
ligne2</textarea>
</td>
</tr>
<tr>
<td>
ComboBox</td>
<td>
<p align="center">
</p>
<select name="cmbValeurs">
<option value="1">choix1</option>
<option value="2" selected>choix2</option>
<option value="3">choix3</option>
</select>
</td>
</tr>
<tr>
<td>
Liste à choix simple</td>
<td>
<p align="center">
</p>
<select size="3" name="lstSimple">
<option value="1" selected>liste1</option>
<option value="2">liste2</option>
<option value="3">liste3</option>
<option value="4">liste4</option>
<option value="5">liste5</option>
</select>
</td>
</tr>
<tr>
<td>
Liste à choix multiple</td>
<td>
<p align="center">
</p>
<select multiple size="3" name="lstMultiple">
<option value="1" selected>multiple1</option>
<option value="2">multiple2</option>
<option value="3" selected>multiple3</option>
<option value="4">multiple4</option>
<option value="5">multiple5</option>
</select>
</td>
</tr>
<tr>
<td>
Bouton simple</td>
<td>
<p align="center">
<input onclick="effacer()" type="button" value="Effacer" name="btnEffacer" />
</p>
</td>
</tr>
<tr>
<td>
Bouton submit</td>
<td>
<p align="center">
<input type="submit" value="Envoyer" name="btnEnvoyer" />
</p>
</td>
</tr>
<tr>
<td>
Bouton reset</td>
<td>
<p align="center">
<input type="reset" value="Rétablir" name="btnRetablir" runat="server" />
</p>
</td>
</tr>
</table>
<input type="hidden" name="secret" value="uneValeur" />
</form>
</body>
</html>
Die Zuordnung von visuellen Elementen zu HTML-Tags lautet wie folgt:
Visuelles Steuerelement | HTML-Tag |
<form name="form" method="post"> | |
<input type="text" maxlength="30" value="ein paar Worte" name="txtInput" /> | |
<input type="password" maxlength="12" size="12" value="aPassword" name="txtMdp" /> | |
<textarea name="inputArea">Zeile1 Zeile2</textarea> | |
<input type="radio" value="yes" name="rdMarie" />Ja <input type="radio" checked value="no" name="rdMarie" />Nein | |
<input type="checkbox" value="one" name="C1" />1 <input type="checkbox" checked value="zwei" name="C2" />2 <input type="checkbox" value="drei" name="C3" />3 | |
<select name="cmbValeurs"> <option value="1">Option 1</option> <option value="2" selected>Option 2</option> <option value="3">Option 3</option> </select> | |
<select size="3" name="lstSimple"> <option value="1" selected>Liste1</option> <option value="2">Liste2</option> <option value="3">Liste 3</option> <option value="4">Liste 4</option> <option value="5">Liste 5</option> </select> | |
<select multiple size="3" name="lstMultiple"> <option value="1" selected>multiple1</option> <option value="2">multiple2</option> <option value="3" selected>multiple3</option> <option value="4">multiple4</option> <option value="5">multiple5</option> </select> | |
<input type="hidden" name="secret" value="aValue" /> | |
<input type="submit" value="Absenden" name="submitButton" /> | |
<input type="reset" value="Zurücksetzen" name="btnReset" runat="server" /> | |
<input onclick="clear()" type="button" value="Löschen" name="btnClear" /> |
Sehen wir uns diese verschiedenen Steuerelemente einmal an.
5.2.2.1. Die
<form name="form" method="post"> |
<form name="..." method="..." action="...">...</form> | |
name="formexample": Formularname method="..." : Methode, die der Browser verwendet, um die im Formular gesammelten Werte an den Webserver zu senden action="..." : URL, an die die im Formular gesammelten Werte gesendet werden. Ein Webformular wird durch die Tags <form>...</form> umschlossen. Das Formular kann einen Namen haben (name="xx"). Dies gilt für alle Steuerelemente innerhalb eines Formulars. Dieser Name ist nützlich, wenn das Webdokument Skripte enthält, die auf Elemente des Formulars verweisen müssen. Der Zweck eines Formulars besteht darin, vom Benutzer über die Tastatur oder die Maus eingegebene Informationen zu sammeln und an eine Webserver-URL zu senden. An welche? An diejenige, auf die im Attribut action="URL" verwiesen wird. Fehlt dieses Attribut, werden die Informationen an die URL des Dokuments gesendet, in dem sich das Formular befindet. Wie sendet ein Webclient Informationen (die im Formular enthaltenen Daten) an einen Webserver? Wir haben dies bereits ausführlich behandelt. Es stehen zwei verschiedene Methoden zur Verfügung: POST und GET. Das Attribut method="method" des Tags <form>, bei dem method auf GET oder POST gesetzt ist, teilt dem Browser mit, welche Methode er verwenden soll, um die im Formular gesammelten Informationen an die durch das Attribut action="URL" angegebene URL zu senden. Wenn das Attribut method nicht angegeben ist, wird standardmäßig die GET-Methode verwendet. |
5.2.2.2. Eingabefeld
<input type="text" maxlength="30" value="some words" name="txtInput" /> <input type="password" maxlength="12" size="12" value="aPassword" name="txtMdp" /> |
<input type="..." name="..." size=".." value=".."> Das input-Tag existiert für verschiedene Steuerelemente. Es ist das type-Attribut, das diese verschiedenen Steuerelemente voneinander unterscheidet. | |
type="text": gibt an, dass es sich um ein Texteingabefeld handelt type="password": Die Zeichen im Eingabefeld werden durch Sternchen (*) ersetzt. Dies ist der einzige Unterschied zu einem normalen Eingabefeld. Diese Art von Steuerelement eignet sich für die Eingabe von Passwörtern. size="12": Anzahl der im Feld sichtbaren Zeichen – verhindert nicht die Eingabe weiterer Zeichen maxlength="30": legt die maximale Zeichenanzahl auf 30 fest – der Browser ist für die Durchsetzung dieses Attributs verantwortlich name="txtInput": Name des Steuerelements value="some words": Text, der im Eingabefeld angezeigt wird. |
5.2.2.3. Mehrzeiliges Eingabefeld
<textarea name="inputArea">Zeile1 Zeile2</textarea> |
<textarea ...>text</textarea> zeigt ein mehrzeiliges Eingabefeld mit Starttext an | |
rows="2": Anzahl der Zeilen cols="'20": Anzahl der Spalten name="areaSaisie": Name des Steuerelements |
5.2.2.4. Optionsfelder
<input type="radio" value="yes" name="rdMarie" />Ja <input type="radio" checked value="no" name="rdMarie" />Nein |
<input type="radio" attribute2="value2" ..../>text zeigt ein Optionsfeld mit Text daneben an. | |
name="rdMarie": Name des Steuerelements. Optionsfelder mit demselben Namen bilden eine Gruppe sich gegenseitig ausschließender Schaltflächen: Es kann nur eines davon ausgewählt werden. value="value": dem Radiobutton zugewiesener Wert. Verwechsle diesen Wert nicht mit dem Text, der neben dem Radiobutton angezeigt wird. Der Text dient nur zu Anzeigezwecken. checked: Wenn dieses Schlüsselwort vorhanden ist, ist das Optionsfeld aktiviert; andernfalls ist es nicht aktiviert. |
5.2.2.5. Kontrollkästchen
<input type="checkbox" value="one" name="C1" />1 <input type="checkbox" checked value="two" name="C2" />2 <input type="checkbox" value="three" name="C3" />3 |
<input type="checkbox" attribute2="value2" ..../>text zeigt ein Kontrollkästchen mit Text daneben an. | |
name="C1": Name des Steuerelements. Kontrollkästchen können denselben Namen haben oder auch nicht. Kontrollkästchen mit demselben Namen bilden eine Gruppe zugehöriger Kontrollkästchen. value="value": dem Kontrollkästchen zugewiesener Wert. Verwechsle diesen Wert nicht mit dem Text, der neben dem Kontrollkästchen angezeigt wird. Der Text dient nur zu Anzeigezwecken. checked: Wenn dieses Schlüsselwort vorhanden ist, ist das Optionsfeld aktiviert; andernfalls ist es nicht aktiviert. |
5.2.2.6. Dropdown-Liste (Combo)
<select name="cmbValues"> <option value="1">Auswahl 1</option> <option value="2" selected>Option 2</option> <option value="3">Option 3</option> </select> |
<select size=".." name=".."> <option [selected="selected"] [value="value"]>Text</option> ... </select> zeigt den Text zwischen den Tags <option>...</option> in einer Liste an | |
name="cmbValues": Name des Steuerelements. size="1": Anzahl der sichtbaren Listenelemente. size="1" macht die Liste zu einem Kombinationsfeld. Dies ist der Standardwert, wenn das [size]-Attribut fehlt. selected="selected": Wenn dieses Attribut für ein Listenelement vorhanden ist, wird dieses Element in der Liste als ausgewählt angezeigt. In unserem obigen Beispiel erscheint das Listenelement „choice2“ bei der ersten Anzeige als ausgewähltes Element in der Kombinationsfeld. value="value": Legt den Wert fest, der an den Server gesendet wird, wenn das Element ausgewählt wird. Fehlt dieses Attribut, wird der mit der Option verknüpfte Text an den Server gesendet. |
5.2.2.7. Einfachauswahlliste
<select size="3" name="lstSimple"> <option value="1" selected>list1</option> <option value="2">Liste2</option> <option value="3">Liste3</option> <option value="4">Liste 4</option> <option value="5">Liste 5</option> </select> |
<select size=".." name=".."> <option [selected] [value="value"]>...</option> ... </select> zeigt den Text zwischen den Tags <option>...</option> in einer Liste an | |
wie bei der Dropdown-Liste, die nur einen Eintrag anzeigt. Dieses Steuerelement unterscheidet sich von der vorherigen Dropdown-Liste lediglich durch das Attribut size>1. |
5.2.2.8. Mehrfachauswahlliste
<select multiple size="3" name="lstMultiple"> <option value="1" selected>multiple1</option> <option value="2">multiple2</option> <option value="3" selected>multiple3</option> <option value="4">multiple4</option> <option value="5">multiple5</option> </select> |
<select size=".." name=".." multiple> <option [selected] ] [value="value"]>...</option> ... </select> zeigt den Text zwischen den Tags <option>...</option> in einer Liste an | |
multiple: ermöglicht die Auswahl mehrerer Elemente in der Liste. Im obigen Beispiel sind die Elemente list1 und list3 beide ausgewählt. |
5.2.2.9. Schaltfläche
<input onclick="clear()" type="button" value="Löschen" name="btnClear" /> |
<input type="button" value="..." name="..." onclick="clear()" ....> | |
type="button": definiert ein Schaltflächen-Steuerelement. Es gibt zwei weitere Arten von Schaltflächen: submit und reset. value="Löschen": Der auf der Schaltfläche angezeigte Text onclick="function()": ermöglicht es Ihnen, eine Funktion zu definieren, die ausgeführt wird, wenn der Benutzer auf die Schaltfläche klickt. Diese Funktion ist Teil der Skripte, die im angezeigten Webdokument definiert sind. Die obige Syntax ist JavaScript-Syntax. Wenn die Skripte in VBScript geschrieben sind, würden Sie onclick="function" ohne die Klammern schreiben. Die Syntax bleibt gleich, wenn Parameter an die Funktion übergeben werden müssen: onclick="function(val1, val2,...)" In unserem Beispiel ruft ein Klick auf die Schaltfläche „Löschen“ die folgende JavaScript-Funktion auf: Die Funktion „clear“ zeigt eine Meldung an:  |
5.2.2.10. Senden-Schaltfläche
<input type="submit" value="Absenden" name="btnSubmit" /> |
<input type="submit" value="Senden" name="btnSend"> | |
type="submit": Definiert die Schaltfläche als Schaltfläche zum Senden von Formulardaten an den Webserver. Wenn der Benutzer auf diese Schaltfläche klickt, sendet der Browser die Formulardaten an die im Attribut „action“ des Tags <form> definierte URL unter Verwendung der im Attribut „method“ desselben Tags definierten Methode. value="Submit": Der auf der Schaltfläche angezeigte Text |
5.2.2.11. Zurücksetzen-Schaltfläche
<input type="reset" value="Zurücksetzen" name="btnReset" runat="server" /> |
<input type="reset" value="Zurücksetzen" name="btnReset"> | |
type="reset": Definiert die Schaltfläche als Formular-Reset-Schaltfläche. Wenn der Benutzer auf diese Schaltfläche klickt, stellt der Browser das Formular in den Zustand zurück, in dem es empfangen wurde. value="Zurücksetzen": Der auf der Schaltfläche angezeigte Text |
5.2.2.12. Verstecktes Feld
<input type="hidden" name="secret" value="aValue" /> |
<input type="hidden" name="..." value="..."> | |
type="hidden": Gibt an, dass es sich um ein verstecktes Feld handelt. Ein verstecktes Feld ist Teil des Formulars, wird dem Benutzer jedoch nicht angezeigt. Würde der Benutzer jedoch seinen Browser anweisen, den Quellcode anzuzeigen, würde er das Vorhandensein des Tags <input type="hidden" value="..."> und somit den Wert des versteckten Feldes sehen. value="aValue": Wert des versteckten Feldes. Was ist der Zweck des versteckten Feldes? Es ermöglicht dem Webserver, Informationen über die Anfragen eines Clients hinweg zu speichern. Betrachten wir eine Web-Shopping-Anwendung. Der Client kauft auf der ersten Seite eines Katalogs einen ersten Artikel art1 in der Menge q1 und wechselt dann zu einer neuen Seite im Katalog. Um sich zu merken, dass der Client q1 Artikel von art1 gekauft hat, kann der Server diese beiden Informationen in ein verstecktes Feld im Webformular der neuen Seite einfügen. Auf dieser neuen Seite kauft der Client q2 Einheiten des Artikels art2. Wenn die Daten aus diesem zweiten Formular an den Server übermittelt werden, erhält der Server nicht nur die Information (q2,art2), sondern auch (q1,art1), die ebenfalls als verstecktes Feld Teil des Formulars ist und vom Benutzer nicht geändert werden kann. Der Webserver fügt dann die Informationen (q1,art1) und (q2,art2) in ein neues verstecktes Feld ein und sendet eine neue Katalogseite. Und so weiter. |
5.3. Senden von Formularwerten über einen Browser an einen Webserver
Aus dem vorherigen Kapitel wissen wir bereits, wie ein Client Informationen an den Server übermittelt. Dies geschieht entweder durch:
- einer HTTP-GET-Anfrage: url?param1=va1¶m2=val2&....
- einer HTTP-POST-Anfrage, gefolgt von einem Dokument, das die Parameterzeichenfolge param1=va1¶m2=val2&.... enthält.
Der Browser verwendet eine dieser beiden Methoden, je nachdem, ob das [method]-Attribut des [form]-Tags auf GET oder POST gesetzt ist. Das werden wir nun demonstrieren. Die Seite, die wir uns zuvor angesehen haben, ist eine statische Seite. Um auf die HTTP-Header zuzugreifen, die vom Browser gesendet werden, der dieses Dokument anfordert, wandeln wir sie in eine dynamische Seite für einen .NET-Webserver (IIS oder Cassini) um. Der vorherige statische Code wird in eine Datei namens [form_get.aspx] eingefügt, deren Inhalt wie folgt lautet:
<%@ Page src="formulaire_get.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="formulaire_get" %>
<html>
<head>
<title>Formulaire</title>
<script language="javascript">
function effacer(){
alert("Vous avez cliqué sur le bouton [Effacer]");
}
</script>
</head>
<body>
.....
</body>
</html>
Die obige Präsentationsseite ist mit dem Controller [form_get.aspx.vb] verknüpft:
Public Class formulaire_get
Inherits System.Web.UI.Page
Private Sub Page_Init(ByVal Sender As Object, ByVal e As System.EventArgs) Handles MyBase.Init
' saves the current query in request.txt of the page folder
Dim requestFileName As String = Me.MapPath(Me.TemplateSourceDirectory) + "\request.txt"
Me.Request.SaveAs(requestFileName, True)
End Sub
End Class
Jedes Mal, wenn das Dokument [form_get.aspx] aufgerufen wird, wird die Client-Anfrage durch die Prozedur Page_Init in einer Datei [request.txt] gespeichert. Da wir diese Funktionsweise bereits kennengelernt haben, werden wir nicht weiter auf den Controller eingehen.
5.3.1. GET-Methode
Führen wir einen ersten Test durch, bei dem im HTML-Code des Dokuments das FORM-Tag wie folgt definiert ist:
<form name="formulaire" method="get">
Wir legen die Dateien [formulaire_get.aspx] und [formulaire_get.aspx.vb] in einem Ordner <application-path> ab und starten den Cassini-Server mit den Parametern (<application-path>,/form2). Wir rufen die URL http://localhost/form2/formulaire_get.aspx auf:
Der Browser hat soeben eine Anfrage gestellt, und wir wissen, dass diese in der Datei [request.txt] protokolliert wurde. Sehen wir uns deren Inhalt an:
GET /form2/formulaire_get.aspx HTTP/1.1
Cache-Control: max-age=0
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040316
Der Browser hat eine HTTP-GET-Anfrage verwendet, um die URL [http://localhost/form2/formulaire_get.aspx] abzufragen. Dies ist immer der Fall, wenn die URL vom Benutzer angegeben wird. Wir füllen das Formular wie folgt aus:
Wir verwenden die Schaltfläche [Absenden] oben. Der HTML-Code lautet wie folgt:
Wenn auf die Schaltfläche [Absenden] geklickt wird, sendet der Browser die Formularparameter (das <form>-Tag) an die im [action]-Attribut des <form action="URL">-Tags angegebene URL, sofern diese vorhanden ist. Ist dieses Attribut nicht vorhanden, werden die Formularparameter an die URL gesendet, von der das Formular bereitgestellt wurde. Dies ist hier der Fall. Die Schaltfläche [Submit] sollte daher eine Anfrage des Browsers an die URL [http://localhost/form2/formulaire_get.aspx] auslösen, wobei die Formularparameter enthalten sind. Da die Seite [formulaire_get.aspx] die empfangene Anfrage speichert, sollten wir sehen können, wie der Client diese Parameter gesendet hat. Probieren wir es aus. Wir klicken auf die Schaltfläche [Submit]. Wir erhalten die folgende Antwort vom Browser:
Dies ist die Startseite, aber Sie können sehen, dass sich die URL im [Adressfeld] des Browsers geändert hat. Sie lautet nun wie folgt:
http://localhost/form2/formulaire_get.aspx?rdMarie=oui&C1=un&C2=deux&txtSaisie=programmation+asp.net&txtMdp=unMotDePasse&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lstSimple=1&lstMultiple=2&lstMultiple=4&btnEnvoyer=Envoyer&secret=uneValeur
Wir sehen, dass sich die im Formular getroffenen Auswahlen in der URL widerspiegeln. Schauen wir uns den Inhalt der Datei [request.txt] an, in der die Anfrage des Clients gespeichert wurde:
GET /form2/formulaire_get.aspx?rdMarie=oui&C1=un&C2=deux&txtSaisie=programmation+asp.net&txtMdp=ceciestsecre&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lstSimple=1&lstMultiple=2&lstMultiple=4&btnEnvoyer=Envoyer&secret=uneValeur HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/form2/formulaire_get.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040316
Dies ist eine HTTP-Anfrage, die derjenigen sehr ähnlich ist, die ursprünglich vom Browser gesendet wurde, als er das Dokument ohne Übergabe von Parametern anforderte. Es gibt zwei Unterschiede:
Die Formularparameter wurden in der Form ?param1=val1¶m2=val2&... an die Dokument-URL angehängt | |
Der Client verwendet diesen HTTP-Header, um die URL des Dokuments anzugeben, das er zum Zeitpunkt der Anfrage angezeigt hat |
Schauen wir uns einmal genauer an, wie die Parameter in der GET-Anfrage URL?param1=value1¶m2=value2&... HTTP/1.1 übergeben wurden, wobei die Parameter die Namen der Webformular-Steuerelemente und die Werte die ihnen zugeordneten Werte sind. Nachfolgend finden Sie eine dreispaltige Tabelle:
- Spalte 1: zeigt die Definition eines HTML-Steuerelements aus dem Beispiel
- Spalte 2: zeigt, wie dieses Steuerelement in einem Browser angezeigt wird
- Spalte 3: zeigt den Wert, den der Browser für das Steuerelement in Spalte 1 an den Server sendet, und zwar in der Form, wie er in der GET-Anfrage aus dem Beispiel vorliegt
HTML-Steuerelement | Anzeige vor der Validierung | Zurückgegebene Werte |
<input type="radio" value="yes" name="rdMarie" />Ja <input type="radio" checked value="no" name="rdMarie" />Nein |  | – der Wert des value-Attributs der Schaltfläche , das vom Benutzer ausgewählt wurde. |
<input type="checkbox" value="one" name="C1" />1 <input type="checkbox" checked value="two" name="C2" />2 <input type="checkbox" value="drei" name="C3" />3 |  | C1=eins C2=zwei - Werte der value-Attribute der Kontrollkästchen , die vom Benutzer |
<input type="text" maxlength="30" value="einige Worte" name="txtInput" /> |  | txtSaisie=Programmierung+ASP.NET - vom Benutzer in das . Leerzeichen wurden durch das +-Zeichen |
<input type="password" maxlength="12" size="12" value="aPassword" name="txtMdp" /> |  | txtMdp="thisIsSecret" - vom Benutzer in das . Der tatsächlich eingegebene Text lautete „thisIsSecret“. Das letzte Zeichen ging verloren gegangen, da die maxlength="12" die Anzahl der Zeichen auf 12 beschränkte. |
<textarea name="areaSaisie"> Zeile1 Zeile2</textarea> |  | areaSaisie=die+Grundlagen+von+ der%0D%0A Webprogrammierung – vom Benutzer in das . %OD%OA ist der . Leerzeichen wurden durch das +-Zeichen ersetzt |
<select name="cmbValeurs"> <option value="1">Auswahl 1 </option> <option value="2" selected>Option2 </option> <option value="3">Option 3 </option> </select> |  | cmbValues=3 - vom Benutzer aus der Einzelauswahlliste |
<select size="3" name="lstSimple"> <option value="1" selected>list1</option> <option value="2">Liste2 </option> <option value="3">Liste3 </option> <option value="4">Liste 4 </option> <option value="5">Liste 5 </option> </select> |  | lstSimple=3 - vom Benutzer aus der Einzelauswahlliste |
<select multiple size="3" name="lstMultiple"> <option value="1" selected>multiple1 </option> <option value="2">multiple2 </option> <option value="3" selected>multiple3 </option> <option value="4">multiple4 </option> <option value="5">multiple5 </option> </select> |  | lstMultiple=2 lstMultiple=4 - vom Benutzer in der Mehrfachauswahlliste |
<input type="submit" value="Absenden" name="btnSubmit" /> |  | btnEnvoyer=Absenden - Name- und Value-Attribut der Schaltfläche, die wurden verwendet, um die Formulardaten an den Server |
<input type="hidden" name="secret" value="aValue" /> | secret=aValue – value-Attribut des versteckten Feldes |
Sie fragen sich vielleicht, was der Server mit den an ihn übergebenen Parametern gemacht hat. Eigentlich gar nichts. Nach Erhalt der Anfrage
GET /form2/formulaire_get.aspx?rdMarie=oui&C1=un&C2=deux&txtSaisie=programmation+asp.net&txtMdp=ceciestsecre&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lstSimple=1&lstMultiple=2&lstMultiple=4&btnEnvoyer=Envoyer&secret=uneValeur HTTP/1.1
Der Webserver hat die Parameter an die URL im Dokument [http://localhost/form2/formulaire_get.aspx] übergeben, d. h. an das Dokument, das wir ursprünglich erstellt haben. Wir haben keinen Code geschrieben, um die vom Client gesendeten Parameter abzurufen und zu verarbeiten. Es läuft also alles so ab, als ob die Anfrage des Clients einfach lauten würde:
Deshalb haben wir als Reaktion auf unseren [Submit]-Button dieselbe Seite erhalten, die ursprünglich durch die Anfrage der URL [http://localhost/form2/formulaire_get.aspx] ohne Parameter abgerufen wurde.
5.3.2. POST-Methode
Das HTML-Dokument ist nun so konfiguriert, dass der Browser die POST-Methode verwendet, um die Formularwerte an den Webserver zu senden. Dazu kopieren wir die Datei [form_get.aspx] nach [form_post.aspx] und ändern nur das <form>-Tag in [form_post.aspx]:
<%@ Page src="formulaire_get.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="formulaire_get" %>
<html>
<head>
...
</head>
<body>
<p>
Gestion d'un formulaire
</p>
<hr />
<form name="formulaire" method="post">
<table border="1">
Es besteht keine Notwendigkeit, den Controller [form_get.aspx.vb] zu ändern, daher lassen wir ihn unverändert. Wir rufen das neue Dokument über die URL [http://localhost/form2/formulaire_post.aspx] auf, füllen das Formular wie bei der GET-Methode aus und senden die Parameter über die Schaltfläche [Submit] an den Server. Wir erhalten die folgende Antwortseite vom Server:
Wir erhalten somit das gleiche Ergebnis wie bei der GET-Methode, d. h. die Startseite. Beachten Sie einen Unterschied: Im [Adressfeld] des Browsers werden die übermittelten Parameter nicht angezeigt. Sehen wir uns nun die vom Client gesendete und in der Datei [request.txt] gespeicherte Anfrage an:
POST /form2/formulaire_post.aspx HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Content-Length: 222
Content-Type: application/x-www-form-urlencoded
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/form2/formulaire_post.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040316
rdMarie=oui&C1=un&C2=deux&txtSaisie=programmation+asp.net&txtMdp=ceciestsecre&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lstSimple=3&lstMultiple=2&lstMultiple=4&btnEnvoyer=Envoyer&secret=uneValeur
In der HTTP-Anfrage des Clients erscheinen neue Elemente:
Die GET-Anfrage wurde durch eine POST-Anfrage ersetzt. Die Parameter stehen nicht mehr in der ersten Zeile der Anfrage. Wir sehen, dass sie nun nach einer Leerzeile hinter der HTTP-Anfrage stehen. Ihre Kodierung ist identisch mit der in der GET-Anfrage. | |
Anzahl der „gesendeten“ Zeichen, d. h. die Anzahl der Zeichen, die der Webserver nach dem Empfang der HTTP-Header lesen muss, um das vom Client gesendete Dokument abzurufen. Bei dem hier betreffenden Dokument handelt es sich um die Liste der Formularwerte. | |
Gibt den Typ des Dokuments an, das der Client nach den HTTP-Headern sendet. Der Typ [application/x-www-form-urlencoded] zeigt an, dass es sich um ein Dokument handelt, das Formularwerte enthält. |
Es gibt zwei Methoden zur Datenübertragung an einen Webserver: GET und POST. Ist eine Methode besser als die andere? Wir haben gesehen, dass, wenn die Werte eines Formulars vom Browser mit der GET-Methode gesendet würden, der Browser die angeforderte URL in seinem Adressfeld in der Form URL?param1=val1¶m2=val2&.... anzeigen würde. Dies kann entweder als Vorteil oder als Nachteil angesehen werden:
- ein Vorteil, wenn Sie dem Benutzer erlauben möchten, diese parametrisierte URL in seinen Lesezeichen zu speichern
- ein Nachteil, wenn Sie nicht möchten, dass der Benutzer Zugriff auf bestimmte Formularinformationen hat, wie z. B. versteckte Felder
Von nun an werden wir in unseren Formularen fast ausschließlich die POST-Methode verwenden.
5.4. Serverseitige Verarbeitung von Formularwerten
5.4.1. Übersicht über das Beispiel
Nachdem wir nun den Zusammenhang zwischen dem HTML-Tag <form method="GET/POST" ...> und der Art und Weise, wie der Browser Formularwerte übermittelt, hergestellt haben, wissen wir, wie wir diese auf der Serverseite abrufen können. Das vorherige Kapitel lieferte die Antwort:
- Wenn die Methode des <form>-Tags GET ist, werden die Parameterwerte aus der [Request.QueryString]-Sammlung abgerufen
- Wenn die Methode des <form>-Tags POST ist, werden die Werte der „gesendeten“ Parameter aus der [Request.Form]-Sammlung abgerufen. Hier ist eine Klarstellung erforderlich. Das <form>-Tag kann die Ziel-URL für die GET- oder POST-Anfrage mithilfe des [action]-Attributs angeben. Diese URL kann unabhängig davon, ob es sich um eine GET- oder POST-Anfrage handelt, in der Form action="url?param1=val1¶m2=val2&.." konfiguriert werden. Diese Parameter werden dann zu denen hinzugefügt, die zwischen den Tags <form> und </form> enthalten sind, und über eine GET- oder POST-Anfrage an den Server gesendet. Da sie Teil der Ziel-URL sind, werden sie aus der [Request.QueryString]-Sammlung abgerufen, unabhängig davon, ob es sich um eine GET- oder eine POST-Anfrage handelt.
Wir werden nun eine MVC-Anwendung mit zwei Ansichten schreiben:
- Die erste Ansicht ist das zuvor beschriebene Formular. Wir nennen sie [form_view].
- Die zweite Ansicht ist eine Informationsseite, auf der die auf der ersten Seite eingegebenen Werte aufgelistet sind. Über einen Link kann der Benutzer zum Formular zurückkehren. Wir nennen diese Ansicht [view_confirmation].
Die [form_view] wird an den Benutzer gesendet, der sie ausfüllt und absendet. Kurz vor dem Absenden könnte sie etwa so aussehen:
Der Benutzer klickt auf die Schaltfläche [Absenden], um seine Eingaben zu übermitteln. Im Gegenzug erhält er die folgende [validation_view]:
5.4.2. Der Anwendungscontroller
Im vorigen Kapitel haben wir gesehen, dass wir die Rolle des Controllers für eine MVC-Anwendung der Datei [global.asax] zuweisen können, durch die alle Client-Anfragen laufen. Wir haben bereits eine auf diese Weise erstellte MVC-Anwendung vorgestellt, und hier werden wir dem damals vorgestellten Entwicklungsmodell folgen. Die Datei [global.asax] sieht wie folgt aus:
Sie besteht aus einer einzigen Zeile, die auf den Controller in der Datei [global.asax.vb] verweist:
Imports System
Imports System.Web
Imports System.Web.SessionState
Public Class Global
Inherits System.Web.HttpApplication
Sub Application_BeginRequest(ByVal sender As Object, ByVal e As EventArgs)
' retrieve the action to be performed
Dim action As String
If Request.QueryString("action") Is Nothing Then
action = "init"
Else
action = Request.QueryString("action").ToString.ToLower
End If
' execute the action
Select Case action
Case "init"
Server.Transfer("formulaire.aspx", False)
Case "validation"
Server.Transfer("validation.aspx", True)
Case Else
Server.Transfer("formulaire.aspx", True)
End Select
End Sub
End Class
Der Controller funktioniert wie folgt:
- Er sucht in der Ziel-URL nach einer Parameterzeichenfolge, die den Parameter [action] enthält. Fehlt dieser, verhält er sich so, als wäre [action=init] in der Parameterzeichenfolge vorhanden.
- Es werden nur zwei Aktionen erkannt:
- init: Das vorausgefüllte Formular wird an den Client gesendet
- validation: Die Seite zur Bestätigung der Benutzereingaben wird an den Client gesendet
- Wenn die Aktion nicht zu den oben genannten gehört, verhält sich das System so, als ob [action=init] vorhanden wäre. Es könnte auch eine Fehlerseite zurückgegeben werden.
5.4.3. Verarbeitung der Aktion „init“
Wenn der Controller die Aktion „init“ verarbeitet, muss er ein vorausgefülltes Formular generieren. Diese Aufgabe übernimmt die Seite [formulaire.aspx]. Ihr Code lautet wie folgt:
<HTML>
<HEAD>
<title>Formulaire</title>
<script language="javascript">
function effacer(){
alert("Vous avez cliqué sur le bouton [Effacer]");
}
function raz(liste){
liste.selectedIndex=-1
}
</script>
</HEAD>
<body>
<p>
Gestion d'un formulaire
</p>
<hr>
<form name="formulaire" method="post" action="?action=validation">
<table border="1">
<tr>
<td>
Etes-vous marié(e)</td>
<td>
<p align="center">
<input type="radio" value="oui" name="rdMarie">Oui <input type="radio" checked value="non" name="rdMarie">Non
</p>
</td>
</tr>
....
<td>
<select size="3" name="lstSimple">
<option value="1" selected>liste1</option>
<option value="2">liste2</option>
<option value="3">liste3</option>
<option value="4">liste4</option>
<option value="5">liste5</option>
</select>
<INPUT type="button" value="Raz" name="btnRazSimple" onclick="raz(lstSimple)">
</td>
....
<td>
<select multiple size="3" name="lstMultiple">
<option value="1" selected>multiple1</option>
<option value="2">multiple2</option>
<option value="3" selected>multiple3</option>
<option value="4">multiple4</option>
<option value="5">multiple5</option>
</select>
<INPUT type="button" value="Raz" name="btnRazMultiple" onclick="raz(lstMultiple)">
</td>
...
</table>
<input type="hidden" name="secret" value="uneValeur">
</form>
</body>
</HTML>
Wir sehen den HTML-Code für das Formular, das wir uns zuvor angesehen haben, mit einigen Unterschieden. Der Code für das <form>-Tag wurde geändert:
<form name="formulaire" method="post" action="?action=validation">
- post: Die vom Benutzer eingegebenen Werte, die beim Klicken auf die Schaltfläche [submit] an den Server gesendet werden, werden mit der HTTP-POST-Methode übermittelt
- action: Die Syntax action="url" wird verwendet, um die URL anzugeben, an die die Formularwerte gesendet werden sollen. Diese URL kann eine Reihe von Parametern in der Form param1=val1¶m2=val2&... enthalten. Genau das geschieht hier, wo wir den Parameter [action=validation] übergeben, um dem Controller mitzuteilen, welche Aktion er ausführen muss. Beachten Sie, dass dieser Parameter-String nicht von einer Webadresse eingeleitet wird. Der Browser sendet die Formularparameter daher an die Adresse, von der dieses Formular bereitgestellt wurde. In unserem obigen Beispiel lautet diese Adresse [http://localhost/mvcform1]. Der Browser sendet somit eine [POST /mvcform1?action=validation]-Anfrage an den Rechner [localhost].
Es wurden Schaltflächen hinzugefügt, mit denen der Benutzer Elemente aus den Listen [lstSimple] und [lstMultiple] abwählen kann:
Dies entspricht dem folgenden HTML-Code:
<td>
<select size="3" name="lstSimple">
<option value="1" selected>liste1</option>
<option value="2">liste2</option>
<option value="3">liste3</option>
<option value="4">liste4</option>
<option value="5">liste5</option>
</select>
<INPUT type="button" value="Raz" name="btnRazSimple" onclick="raz(lstSimple)">
</td>
....
<td>
<select multiple size="3" name="lstMultiple">
<option value="1" selected>multiple1</option>
<option value="2">multiple2</option>
<option value="3" selected>multiple3</option>
<option value="4">multiple4</option>
<option value="5">multiple5</option>
</select>
<INPUT type="button" value="Raz" name="btnRazMultiple" onclick="raz(lstMultiple)">
</td>
Durch Klicken auf die Schaltfläche [Löschen] wird die Auswahl aller Elemente in der zugehörigen Liste aufgehoben. Nehmen wir das Beispiel der Liste [lstMultiple]. Ein Klick auf die entsprechende Schaltfläche [Löschen] löst die Ausführung der JavaScript-Funktion [raz(lstMultiple)] aus. Beachten Sie, dass der JavaScript-Code in einem HTML-Dokument, das von einem Browser angezeigt wird, von diesem Browser selbst und nicht vom Server ausgeführt wird. JavaScript ist eine sehr vielseitige Sprache, mit der Sie Seiten ohne Server-Eingriff um dynamische Funktionen erweitern können. Die Funktion [raz] lautet wie folgt:
Diese Funktion nimmt einen Parameter entgegen, bei dem es sich um ein JavaScript-Objekt handelt, das eine HTML-Liste darstellt. Dieses Objekt verfügt über Eigenschaften und Methoden. Eine seiner Eigenschaften ist [selectedIndex], deren Wert die Nummer der ersten ausgewählten Option in der HTML-Liste ist. Wenn keine Option ausgewählt ist, ist diese Eigenschaft -1. Umgekehrt wählt das Setzen eines Werts für diese Eigenschaft ein neues Element in der HTML-Liste aus, und das Setzen auf -1 bedeutet, dass kein Element ausgewählt ist. Genau das geschieht hier.
Beachten Sie abschließend, dass der Präsentationscode [form.aspx] nicht von einem Controller [form.aspx.vb] begleitet wird. Tatsächlich gibt es im HTML-Dokument keinen vom Server generierten dynamischen Inhalt, sodass kein Controller erforderlich ist.
5.4.4. Behandlung der Validierungsaktion
Wenn der Controller die „validation“-Aktion verarbeitet, muss er eine Seite generieren, auf der die vom Benutzer eingegebenen Werte aufgelistet sind. Die Aufgabe dieser Seite übernimmt die Seite [validation.aspx]. Optisch sieht die Seite wie folgt aus:
Ihr HTML-Code lautet wie folgt:
<%@ Page src="validation.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="validation" %>
<HTML>
<HEAD>
<title>validation</title>
</HEAD>
<body>
<P>Valeurs saisies</P>
<HR width="100%" SIZE="1">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">
<TR>
<TD width="84">rdMarie</TD>
<TD><% =rdMarie%></TD>
</TR>
<TR>
<TD width="84">C1</TD>
<TD><%=C1%></TD>
</TR>
<TR>
<TD width="84">C2</TD>
<TD><%=C2%></TD>
</TR>
<TR>
<TD width="84">C3</TD>
<TD><%=C3%></TD>
</TR>
<TR>
<TD width="84">txtSaisie</TD>
<TD><%=txtSaisie%></TD>
</TR>
<TR>
<TD width="84">txtMdp</TD>
<TD><%=txtMdp%></TD>
</TR>
<TR>
<TD width="84">areaSaisie</TD>
<TD><%=areaSaisie%></TD>
</TR>
<TR>
<TD width="84">cmbValeurs</TD>
<TD><%=cmbValeurs%></TD>
</TR>
<TR>
<TD width="84">lstSimple</TD>
<TD><%=lstSimple%></TD>
</TR>
<TR>
<TD width="84">lstMultiple</TD>
<TD><%=lstMultiple%></TD>
</TR>
<TR>
<TD width="84">secret</TD>
<TD><%=secret%></TD>
</TR>
</TABLE>
</body>
</HTML>
Die dynamischen Teile <%=variable%> des Dokuments werden vom zugehörigen Controller [validation.aspx.vb] berechnet:
Imports System.Text.RegularExpressions
Public Class validation
Inherits System.Web.UI.Page
Protected rdMarie As String
Protected C1 As String
Protected C2 As String
Protected C3 As String
Protected txtSaisie As String
Protected txtMdp As String
Protected areaSaisie As String
Protected cmbValeurs As String
Protected lstSimple As String
Protected lstMultiple As String
Protected secret As String
Protected delimiteur As New Regex("\r\n")
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'retrieve posted parameters
rdMarie = getValue("rdMarie")
C1 = getValue("C1")
C2 = getValue("C2")
C3 = getValue("C3")
txtSaisie = getValue("txtSaisie")
txtMdp = getValue("txtMdp")
areaSaisie = String.Join(",", delimiteur.Split(getValue("areaSaisie")))
cmbValeurs = getValue("cmbValeurs")
lstSimple = getValue("lstSimple")
lstMultiple = getValue("lstMultiple")
secret = getValue("secret")
End Sub
Private Function getValue(ByVal champ As String) As String
' retrieves the value of field [field] from the posted request
' anything?
If Request.Form(champ) Is Nothing Then Return ""
' retrieve the value(s) of the
Dim valeurs() As String = Request.Form.GetValues(champ)
Dim valeur As String = ""
Dim i As Integer
For i = 0 To valeurs.Length - 1
valeur += "[" + valeurs(i) + "]"
Next
Return valeur
End Function
End Class
Die Berechnung der anzuzeigenden Werte erfolgt in der Prozedur [Form_Load]. Der Wert eines „geposteten“ Feldes wird mit der Funktion getValue(C) abgerufen, wobei C der Feldname ist. Die wichtigsten Punkte dieser Funktion sind wie folgt:
- Wenn C nicht in der übermittelten Parameterzeichenfolge enthalten ist, wird die leere Zeichenfolge als Wert von C zurückgegeben
- Andernfalls wird das Array der Werte für das Feld C über [Request.Form.GetValues(C)] abgerufen. Diese werden zu einer Zeichenkette in der Form [val1][val2]...[valn] verkettet, wobei [vali] der i-te Wert des Feldes C ist
Das Feld [areaSaisie] wird auf besondere Weise behandelt. Sein Wert wird vom Browser in der Form areaSaisie=Zeile1\r\nZeile2\r\n... gesendet, wobei \r der ASCII-Code 13 (Wagenrücklauf) und \n der ASCII-Code 10 (Zeilenvorschub) ist. Die Funktion getValue(areaSaisie) ist daher die Zeichenkette „line1\r\nline2\r\n...“. Diese Zeichenkette wird mit der Methode [Regex.Split] in Zeilen aufgeteilt. Dies ergibt ein Array von Zeichenketten {line1,line2,...}. Dieses Array wird mithilfe der Methode [String.Join] in die Zeichenkette „line1,line2,...“ umgewandelt. Diese endgültige Zeichenkette wird als Wert des Feldes [areaSaisie] angezeigt. Das Ziel war es hier, zu zeigen, wie man die einzelnen Zeilen aus einem HTML-Feld [TextArea] extrahiert.
5.4.5. Tests
Wir legen alle Dateien (global.asax, global.asax.vb, formulaire.aspx, validation.aspx, validation.aspx.vb) in einem Ordner namens <application-path> ab. Wir starten den Cassini-Server mit den Parametern (<application-path>,/mvcform1). Wir erstellen eine leere [default.aspx]-Datei im Ordner <application-path> und rufen dann die URL [http://localhost/mvcform1] auf. Da [/mvcform1] der virtuelle Pfad zu einem Ordner und nicht zu einem Dokument ist, zeigt der Webserver das Dokument [default.aspx] an, sofern es existiert. Deshalb haben wir es erstellt. Vor der Anzeige wird das Skript [global.asax] ausgeführt und schließlich die Seite [form.aspx] angezeigt. Deshalb kann die Datei [default.aspx] leer sein.
Angenommen, das validierte Formular sieht wie folgt aus:
Ein Klick auf die Schaltfläche [Submit] führt zur folgenden Seite:
Beachten Sie zunächst die Antwort-URL: [http://localhost/mvcform1/?action=validation]. Dies ist die URL des Attributs [action] des Tags <form> im Formular [formulaire.aspx]:
<form name="formulaire" method="post" action="?action=validation">
Betrachten wir nun nacheinander die Werte, die für die verschiedenen Formularfelder ermittelt wurden:
Feld | Wert | HTML | Kommentare |
rdMarie | ja | <input type="radio" value="yes" name="rdMarie">Ja <input type="radio" checked value="no" name="rdMarie">Nein | Der erhaltene Wert ist das [value]-Attribut des Kontrollkästchens |
C1 | a | <input type="checkbox" value="one" name="C1">1 | gleich |
C2 | zwei | <input type="checkbox" checked value="zwei" name="C2">2 | gleich |
C3 | <input type="checkbox" value="three" name="C3">3 | Diese Schaltfläche wurde vom Benutzer nicht aktiviert. Ihr Wert wurde daher vom Browser nicht gesendet. Im Code war die Bedingung [Request.Form("C3") is Nothing] daher wahr. | |
txtInput | Programmierung ASP.NET | <input type="text" ... name="txtSaisie"> | Der zurückgegebene Wert ist der Text im Eingabefeld zum Zeitpunkt der Validierung |
txtMdp | Passwort | <input type="password" ...name="txtMdp"> | same |
Eingabefeld | Grundlagen der Webprogrammierung | <textarea name="areaSaisie"> ...</textarea> | gleich |
cmbValues | 3 | <select name="cmbValues"> ... <option value="3">Auswahl 3</option> </select> | Der erhaltene Wert ist das [value]-Attribut der ausgewählten Option |
lstSimple | 3 | <select size="3" name="lstSimple"> .... <option value="3">list3</option> ... </select> | gleich |
lstMultiple | 2 4 | <select multiple size="3" name="lstMultiple"> ... <option value="2">multiple2 </option> ... <option value="4">multiple4 </option> ... </select> | Die erhaltenen Werte sind die Werte der [value]-Attribute der ausgewählten Optionen |
secret | aValue | <input type="hidden" name="secret" value="aValue"> | Der erhaltene Wert ist das Attribut [value] des versteckten Feldes |
Betrachten wir nun Listen. Angenommen, zum Zeitpunkt der Validierung ist der Zustand des Formulars wie folgt:
- In der Kombinationsfeld ist die Option [choice1] ausgewählt
- in den beiden anderen Listen ist keine Option ausgewählt. Dies haben wir mithilfe der [Clear]-Schaltflächen erreicht.
Hier ist die nach der Validierung zurückgegebene Seite:
Wenn in einer Liste kein Wert ausgewählt ist, sendet der Browser keinen Parameter dafür. Im Code von [validation.aspx.vb] sind die Ausdrücke [Request.Form("lstSimple")] und [Request.Form("lstMultiple")] daher gleich der Konstante [Nothing], woraus sich das oben gezeigte Ergebnis ergibt.
5.5. Den Status einer Seite beibehalten
5.5.1. Beibehaltung des Seitenstatus mit einer Sitzung
Wir kopieren die gesamte vorherige Anwendung in einen neuen Ordner. Wir fügen einen Link zur Seite [validation.aspx] hinzu, über den der Benutzer zum Formular zurückkehren kann:
Die Änderung, die auf der Seite [validation.aspx] vorgenommen werden muss, ist das Hinzufügen des Links:
.....
<TR>
<TD width="84">secret</TD>
<TD><%=secret%></TD>
</TR>
</TABLE>
<P>
<a href="?action=formulaire">Retour au formulaire</a>
</P>
</body>
</HTML>
Das [href]-Attribut des Links hat den Wert einer URL mit einem einzigen Parameter [action=form], wodurch der Server weiß, dass er das Formular so anzeigen muss, wie es zum Zeitpunkt der Übermittlung war. Dies unterscheidet sich von der [init]-Aktion, die ein vordefiniertes Formular anzeigt. Die URL mit dem Parameter [?action=form] hat eigentlich keine URL. Sie ist daher dieselbe wie diejenige, die die Absendeseite angezeigt hat. Wie wir im vorherigen Beispiel gesehen haben, ist dies die URL des Anwendungsordners. Die Anfrage wird daher über den Controller geleitet. Der Controller muss nun die Aktion [form] verarbeiten. Der Code in [global.asax.vb] wird wie folgt geändert:
Sub Application_BeginRequest(ByVal sender As Object, ByVal e As EventArgs)
' retrieve the action to be performed
Dim action As String
If Request.QueryString("action") Is Nothing Then
action = "init"
Else
action = Request.QueryString("action").ToString.ToLower
End If
' execute the action
Select Case action
Case "init"
Server.Transfer("formulaire.aspx", False)
Case "validation"
Server.Transfer("validation.aspx", True)
Case "formulaire"
Server.Transfer("formulaire.aspx", True)
Case Else
Server.Transfer("formulaire.aspx", True)
End Select
End Sub
Wenn die Aktion „form“ lautet, leiten wir die Anfrage einfach an die Seite [form.aspx] weiter. Wir wissen, dass diese Seite ein vordefiniertes Formular ohne variable Teile anzeigt. Daher kann diese Seite das Formular nicht mit den Werten anzeigen, die es zum Zeitpunkt der Übermittlung hatte. Wir möchten diesen Punkt hier hervorheben. Wenn alle Anwendungsdateien unter <application-path> abgelegt wurden, starten wir Cassini mit den Parametern (<application-path>,/mvcform2) und rufen dann die URL [http://localhost/mvcform2] auf. Wir erhalten die folgende Seite (Teilansicht):
Wir füllen das Formular wie folgt aus und senden es dann ab:
Wir erhalten die folgende Bestätigungsseite:
Wir verwenden den Link [Zurück zum Formular], der auf der obigen Seite vorhanden ist (aber nicht angezeigt wird). Wir erhalten die folgende Antwort vom Server:
Wir stellen fest, dass:
- die angeforderte URL tatsächlich den Parameter action=form enthält, wie gewünscht
- das angezeigte Formular die eingegebenen Werte verloren hat.
Wir wissen, warum wir die eingegebenen Werte nicht abrufen können. Wenn wir uns den Code des Dokuments [form.aspx] ansehen, stellen wir fest, dass alles statisch ist, sodass jedes Mal zwangsläufig dieselbe Seite angezeigt wird. Es ist klar, dass wir diesen Code dynamisch gestalten müssen. Er muss die vom Benutzer validierten Werte anzeigen. Aber wo sollen wir sie speichern?
Erinnern wir uns an das eiserne Gesetz des zustandslosen HTTP-Protokolls:
- Die URL [http://localhost/mvcform2] wird angefordert – eine Antwort wird empfangen. Zu Beginn der Anfrage wurde eine TCP/IP-Verbindung zwischen dem Client und dem Server geöffnet und am Ende der Antwort geschlossen.
- Der Benutzer gibt Daten ein und übermittelt sie. Die URL [http://localhost/mvcform2/?action=validation] wird angefordert – eine Antwort wird empfangen. Eine neue TCP/IP-Verbindung wurde zwischen den beiden Parteien geöffnet und anschließend geschlossen.
- Der Benutzer klickt auf den Link [Zurück zum Formular]. Die URL [http://localhost/mvcform2/?action=formulaire] wird angefordert – eine Antwort wird empfangen. Zwischen den beiden Parteien wurde eine neue TCP/IP-Verbindung geöffnet und anschließend geschlossen.
Die Anfrage-Antwort-Zyklen sind voneinander unabhängig, da jeder eine neue TCP-IP-Verbindung verwendet. Wenn eine Client-Server-Anwendung eine einzige TCP-IP-Verbindung für eine Reihe von Datenaustauschen nutzt, kann der Server einen Client über seine Verbindung identifizieren. Er kann daher Informationen speichern, die er mit einer bestimmten Verbindung verknüpft, und so die Datenaustausche nachverfolgen. Wenn Datenaustausche über verschiedene Verbindungen stattfinden, kann der Server einen Client nicht anhand einer Verbindung identifizieren. Es ist eine andere Methode erforderlich. Eine solche Methode haben wir im vorigen Kapitel vorgestellt: den Sitzungsmechanismus. Er ermöglicht es, im Rahmen von Anfrage-Antwort-Zyklen Informationen in einem [Session]-Objekt zu speichern, auf das alle nachfolgenden Zyklen zugreifen können.
Da wir nun über eine MVC-Anwendung mit Sitzungen verfügen, können wir die Datei [global.asax] nicht mehr als Controller verwenden, wie im vorherigen Kapitel gezeigt. Die Rolle des Anwendungscontrollers muss von einer speziellen, für diesen Zweck vorgesehenen Seite übernommen werden. In diesem Fall ist das die Seite [main.aspx]. Wir gehen wie folgt vor:
- Wenn der Benutzer seine Daten übermittelt (action=validation), speichert der Controller [main.aspx.vb] diese in der aktuellen Sitzung, bevor die Validierungsseite angezeigt wird.
- Wenn das Formular mit den eingegebenen Werten angezeigt werden soll (action=form), ruft der Controller [main.aspx.vb] diese aus der Sitzung ab und fügt sie in den Kontext ein, bevor das Formular angezeigt wird.
5.5.2. Der neue Anwendungscontroller
Der Anwendungscontroller besteht aus zwei Dateien [main.aspx, main.aspx.vb]:
[main.aspx]
[main.aspx.vb]
Imports System.Collections.Specialized
Imports Microsoft.VisualBasic
Public Class main
Inherits System.Web.UI.Page
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
' retrieve the action to be performed
Dim action As String
If Request.QueryString("action") Is Nothing Then
action = "init"
Else
action = Request.QueryString("action").ToString.ToLower
End If
' execute the action
Select Case action
Case "init"
' the pre-filled form is displayed
Context.Items("formulaire") = initForm()
Server.Transfer("formulaire.aspx", True)
Case "validation"
' the confirmation page is displayed after saving the values posted in the session
Session.Item("formulaire") = Request.Form
Server.Transfer("validation.aspx", True)
Case "formulaire"
' displays the form with values taken from the session
Context.Items("formulaire") = Session.Item("formulaire")
Server.Transfer("formulaire.aspx", True)
Case Else
' the pre-filled form is displayed
Context.Items("formulaire") = initForm()
Server.Transfer("formulaire.aspx", True)
End Select
End Sub
Private Function initForm() As NameValueCollection
' initialize the form
Dim form As New NameValueCollection
form.Set("rdMarie", "non")
form.Set("C2", "deux")
form.Set("txtSaisie", "qqs mots")
form.Set("txtMdp", "ceciestsecret")
form.Set("areasaisie", "ligne1" + ControlChars.CrLf + "ligne2" + ControlChars.CrLf)
form.Set("cmbValeurs", "2")
form.Set("lstSimple", "1")
form.Set("lstMultiple", "1")
form.Add("lstMultiple", "3")
Return form
End Function
End Class
Wir sehen hier die Essenz der zuvor besprochenen Struktur des Anwendungscontrollers, mit folgenden Unterschieden:
- Die Arbeit des Controllers wird in der Prozedur [Form_Load] ausgeführt
- Im Falle der Aktion [validation] werden die in [Request.Form] vorhandenen Formularwerte in der Sitzung unter dem Schlüssel „form“ gespeichert. Die Ausführung wird dann an die Seite [validation.aspx] übergeben, die diese Werte anzeigt.
- Bei anderen Aktionen wird die Ausführung in allen Fällen an die Seite [formulaire.aspx] übergeben. Diese Seite erwartet in ihrem Kontext einen Schlüssel „formulaire“, der mit einem Objekt vom Typ [Request.Form], d. h. vom Typ [NameValueCollection], verknüpft ist. Dieses Objekt muss die Sammlung der Werte für die Formularfelder enthalten.
- Wenn es sich bei der Aktion um [init] oder eine nicht erkannte Aktion handelt, wird die Sammlung von Werten willkürlich durch die Funktion [initForm] erstellt.
- Wenn die Aktion [form] ist, handelt es sich bei dieser Sammlung um die [Request.Form]-Sammlung, die durch die Aktion [validation] in die Sitzung gestellt wurde
5.5.3. Das neue Formular
Da die Anwendung nicht mehr denselben Inhalt im Formular anzeigt, muss dieses dynamisch generiert werden. Die neue Seite [form.aspx] sieht nun wie folgt aus:
<%@ Page src="formulaire.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="formulaire" %>
<HTML>
<HEAD>
<title>Formulaire</title>
<script language="javascript">
function effacer(){
alert("Vous avez cliqué sur le bouton [Effacer]");
}
function raz(liste){
liste.selectedIndex=-1
}
</script>
</HEAD>
<body>
<p>
Gestion d'un formulaire
</p>
<hr>
<form name="formulaire" method="post" action="main.aspx?action=validation">
<table border="1">
<tr>
<td>
Etes-vous marié(e)</td>
<td>
<p align="center">
<INPUT type="radio" value="oui" name="rdMarie" <%=rdouichecked%>>Oui
<INPUT type="radio" value="non" name="rdMarie" <%=rdnonchecked%>>Non
</p>
</td>
</tr>
<TR>
<TD>Cases à cocher
</TD>
<TD>
<P align="center">
<INPUT type="checkbox" value="un" name="C1" <%=c1checked%>>1
<INPUT type="checkbox" value="deux" name="C2" <%=c2checked%>>2
<INPUT type="checkbox" value="trois" name="C3" <%=c3checked%>>3
</P>
</TD>
</TR>
<TR>
<TD>Champ de saisie</TD>
<TD>
<P align="center">
<INPUT type="text" maxLength="30" value="<%=txtSaisie%>" name="txtSaisie">
</P>
</TD>
</TR>
<tr>
<td>
Mot de passe</td>
<td>
<p align="center">
<input type="password" maxlength="12" size="12" value="<%=txtMdp%>" name="txtMdp">
</p>
</td>
</tr>
<tr>
<td>
Boîte de saisie</td>
<td>
<textarea name="areaSaisie"><%=areaSaisie%></textarea>
</td>
</tr>
<tr>
<td>
ComboBox</td>
<td>
<select name="cmbValeurs">
<%=cmbValeursOptions%>
</select>
</td>
</tr>
<tr>
<td>
Liste à choix simple</td>
<td>
<select size="3" name="lstSimple">
<%=lstSimpleOptions%>
</select>
<INPUT type="button" value="Raz" name="btnRazSimple" onclick="raz(lstSimple)">
</td>
</tr>
<tr>
<td>
Liste à choix multiple</td>
<td>
<select multiple size="3" name="lstMultiple">
<%=lstMultipleOptions%>
</select>
<INPUT type="button" value="Raz" name="btnRazMultiple" onclick="raz(lstMultiple)">
</td>
</tr>
<tr>
<td>
Bouton simple</td>
<td>
<p align="center">
<input onclick="effacer()" type="button" value="Effacer" name="btnEffacer">
</p>
</td>
</tr>
<tr>
<td>
Bouton submit</td>
<td>
<p align="center">
<input type="submit" value="Envoyer" name="btnEnvoyer">
</p>
</td>
</tr>
<tr>
<td>
Bouton reset</td>
<td>
<p align="center">
<input type="reset" value="Rétablir" name="btnRetablir" runat="server">
</p>
</td>
</tr>
</table>
<input type="hidden" name="secret" value="uneValeur">
</form>
</body>
</HTML>
Lassen Sie uns die dynamischen Variablen kommentieren, die im HTML-Code vorkommen:
Variable | Rolle |
hat den Wert „checked“, wenn das Optionsfeld [yes] ausgewählt werden soll, andernfalls den Wert „“ | |
das Gleiche gilt für das Optionsfeld [nein] | |
gilt dasselbe für das Kontrollkästchen [C1] | |
das Gleiche gilt für das Kontrollkästchen [C2] | |
das Gleiche gilt für das Kontrollkästchen [C3] | |
Der Text, der in das Feld [txtInput] eingefügt werden soll | |
der Text, der in das Feld [txtPassword] eingefügt werden soll | |
der Text, der in das Feld [areaInput] eingefügt werden soll | |
der HTML-Text für die Optionen in der Dropdown-Liste [cmbValeurs] | |
der HTML-Text der Optionen in der Dropdown-Liste [lstSimple] | |
der HTML-Text der Optionen in der Dropdown-Liste [lstMultiple] | |
Die Werte dieser Variablen werden vom Seiten-Controller [formulaire.aspx.vb] berechnet:
Imports Microsoft.VisualBasic
Imports System.Collections.Specialized
Public Class formulaire
Inherits System.Web.UI.Page
' constant form fields
Private libellésCmbValeurs() As String = {"choix1", "choix2", "choix3"}
Private valeursCmbValeurs() As String = {"1", "2", "3"}
Private libellésLstSimple() As String = {"liste1", "liste2", "liste3"}
Private valeursLstSimple() As String = {"1", "2", "3"}
Private libellésLstMultiple() As String = {"multiple1", "multiple2", "multiple3", "multiple4", "multiple5"}
Private valeursLstMultiple() As String = {"1", "2", "3", "4", "5"}
' dynamic form fields
Protected rdouichecked As String
Protected rdnonchecked As String
Protected c1checked As String
Protected c2checked As String
Protected c3checked As String
Protected txtSaisie As String
Protected txtMdp As String
Protected areaSaisie As String
Protected cmbValeursOptions As String
Protected lstSimpleOptions As String
Protected lstMultipleOptions As String
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
' retrieve the previous request from the session
Dim form As NameValueCollection
If Not Context.Items("formulaire") Is Nothing Then
form = Context.Items("formulaire")
Else
form = New NameValueCollection
End If
' prepare the page to be displayed
' radio buttons
rdouichecked = ""
rdnonchecked = "checked"
If isEqual(form("rdMarie"), "oui") Then
rdouichecked = "checked"
rdnonchecked = ""
End If
' checkboxes
c1checked = ""
If isEqual(form("C1"), "un") Then c1checked = "checked"
c2checked = ""
If isEqual(form("C2"), "deux") Then c2checked = "checked"
c3checked = ""
If isEqual(form("C3"), "trois") Then c3checked = "checked"
' input fields
txtSaisie = ""
If Not form("txtSaisie") Is Nothing Then txtSaisie = form("txtSaisie").ToString
txtMdp = ""
If Not form("txtMdp") Is Nothing Then txtMdp = form("txtMdp").ToString
areaSaisie = ""
If Not form("areaSaisie") Is Nothing Then areaSaisie = form("areaSaisie").ToString
' lists
Dim sélections() As String = {}
If Not form("cmbValeurs") Is Nothing Then sélections = form.GetValues("cmbValeurs")
cmbValeursOptions = getOptions(valeursCmbValeurs, libellésCmbValeurs, sélections)
sélections = New String() {}
If Not form("lstSimple") Is Nothing Then sélections = form.GetValues("lstSimple")
lstSimpleOptions = getOptions(valeursLstSimple, libellésLstSimple, sélections)
sélections = New String() {}
If Not form("lstMultiple") Is Nothing Then sélections = form.GetValues("lstMultiple")
lstMultipleOptions = getOptions(valeursLstMultiple, libellésLstMultiple, sélections)
End Sub
Private Function getOptions(ByRef valeurs() As String, ByRef libelles() As String, ByRef sélections() As String) As String
' renders HTML code for <select> tag options
' values: table of tag option values
' labels: table of tag option labels
' selections: options to select
Dim iValeur As Integer
Dim iSelection As Integer
Dim selected As String
Dim toString As String = ""
' browse the list of option values
For iValeur = 0 To valeurs.Length - 1
' check whether the current value should be selected
selected = "" : iSelection = 0
Do While iSelection < sélections.Length And selected = ""
If valeurs(iValeur) = sélections(iSelection) Then selected = "selected"
iSelection += 1
Loop
' we integrate the HTML code from the
toString += "<option " + selected + " value='" + valeurs(iValeur) + "'> " _
+ libelles(iValeur) + "</option>" + ControlChars.CrLf
Next
' we return the result
Return toString
End Function
Private Function isEqual(Byval champ As Object, ByVal valeur As String) As Boolean
' returns true if field is equal to value
If champ Is Nothing OrElse champ.ToString <> valeur Then
Return false
Else
Return true
End If
end function
End Class
Wenn die Seite [form.aspx] ausgeführt wird, findet sie in ihrem Kontext einen „form“-Schlüssel, der mit der Sammlung der Feldwerte verknüpft ist, die sie anzeigen muss.
' retrieve the previous request from the session
Dim form As NameValueCollection
If Not Context.Items("formulaire") Is Nothing Then
form = Context.Items("formulaire")
Else
form = New NameValueCollection
End If
Man könnte sich fragen, warum wir prüfen, ob [Context.Items("form")] existiert. Tatsächlich weist der Controller diesem Objekt in allen Fällen einen Wert zu. Nichts hindert den Client jedoch daran, die Seite [form.aspx] direkt anzufordern, ohne den Controller zu durchlaufen. In diesem Fall würde der vorstehende Code mit einer leeren Sammlung von Werten arbeiten, es käme jedoch zu keinem „Absturz“.
Der Code durchläuft die empfangene Wertesammlung, um alle dynamischen Variablen der zugehörigen HTML-Seite zu berechnen. Obwohl er lang ist, ist dieser Code nicht besonders kompliziert, und wir überlassen es dem Leser, ihn zu erkunden, um diese Erklärung nicht zu überfrachten. Wir werden uns jedoch darauf konzentrieren, wie der HTML-Code für die drei [select]-Listen generiert wird. Dieser Code wird durch die folgende Funktion generiert:
Private Function getOptions(ByRef valeurs() As String, ByRef libelles() As String, ByRef sélections() As String) As String
' renders HTML code for <select> tag options
' values: table of tag option values
' labels: table of tag option labels
' selections: options to select
Dim iValeur As Integer
Dim iSelection As Integer
Dim selected As String
Dim toString As String = ""
' browse the list of option values
For iValeur = 0 To valeurs.Length - 1
' check whether the current value should be selected
selected = "" : iSelection = 0
Do While iSelection < sélections.Length And selected = ""
If valeurs(iValeur) = sélections(iSelection) Then selected = "selected"
iSelection += 1
Loop
' we integrate the HTML code of the
toString += "<option " + selected + " value='" + valeurs(iValeur) + "'> " _
+ libelles(iValeur) + "</option>" + ControlChars.CrLf
Next
' we return the result
Return toString
End Function
Beachten Sie, dass die Optionen eines <select>-Tags dem folgenden HTML-Code entsprechen:
Für jede Option müssen daher drei Informationen generiert werden:
- der Wert der Option im Attribut [value]
- der Optionstext zwischen den Tags <option> und </option>
- das Schlüsselwort [selected], wenn die Option in der Liste ausgewählt sein soll
Um diese drei Informationen für jede Option zu generieren, erhält die Funktion [getOptions] drei Werte:
- das Array der Optionswerte in [values]
- das Array der Optionstexte in [labels]
- das Array der auszuwählenden Werte in [selections]
5.5.4. Die Validierungsseite
Die Validierungsseite bleibt unverändert:
[validation.aspx]
<%@ Page src="validation.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="validation" %>
<HTML>
<HEAD>
<title>validation</title>
</HEAD>
<body>
<P>Valeurs saisies</P>
<HR width="100%" SIZE="1">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">
<TR>
<TD width="84">rdMarie</TD>
<TD><% =rdMarie%></TD>
</TR>
<TR>
<TD width="84">C1</TD>
<TD><%=C1%></TD>
</TR>
<TR>
<TD width="84">C2</TD>
<TD><%=C2%></TD>
</TR>
<TR>
<TD width="84">C3</TD>
<TD><%=C3%></TD>
</TR>
<TR>
<TD width="84">txtSaisie</TD>
<TD><%=txtSaisie%></TD>
</TR>
<TR>
<TD width="84">txtMdp</TD>
<TD><%=txtMdp%></TD>
</TR>
<TR>
<TD width="84">areaSaisie</TD>
<TD><%=areaSaisie%></TD>
</TR>
<TR>
<TD width="84">cmbValeurs</TD>
<TD><%=cmbValeurs%></TD>
</TR>
<TR>
<TD width="84">lstSimple</TD>
<TD><%=lstSimple%></TD>
</TR>
<TR>
<TD width="84">lstMultiple</TD>
<TD><%=lstMultiple%></TD>
</TR>
<TR>
<TD width="84">secret</TD>
<TD><%=secret%></TD>
</TR>
</TABLE>
<P>
<a href="main.aspx?action=formulaire">Retour au formulaire</a>
</P>
</body>
</HTML>
[validation.aspx.vb]
Imports Microsoft.VisualBasic
Imports System.Text.RegularExpressions
Public Class validation
Inherits System.Web.UI.Page
Protected rdMarie As String
Protected C1 As String
Protected C2 As String
Protected C3 As String
Protected txtSaisie As String
Protected txtMdp As String
Protected areaSaisie As String
Protected cmbValeurs As String
Protected lstSimple As String
Protected lstMultiple As String
Protected secret As String
Protected delimiteur As New Regex("\r\n")
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'retrieve posted parameters
rdMarie = getValue("rdMarie")
C1 = getValue("C1")
C2 = getValue("C2")
C3 = getValue("C3")
txtSaisie = getValue("txtSaisie")
txtMdp = getValue("txtMdp")
areaSaisie = String.Join(",", delimiteur.Split(getValue("areaSaisie")))
cmbValeurs = getValue("cmbValeurs")
lstSimple = getValue("lstSimple")
lstMultiple = getValue("lstMultiple")
secret = getValue("secret")
' save them in the session
'Session("formulaire") = Request.Form
End Sub
Private Function getValue(ByVal champ As String) As String
' retrieves the value of field [field] from the posted request
' anything?
If Request.Form(champ) Is Nothing Then Return ""
' retrieve the value(s) of the
Dim valeurs() As String = Request.Form.GetValues(champ)
Dim valeur As String = ""
Dim i As Integer
For i = 0 To valeurs.Length - 1
valeur += "[" + valeurs(i) + "]"
Next
Return valeur
End Function
End Class
5.5.5. Tests
Die Dateien [main.aspx, main.aspx.vb, form.aspx, form.aspx.vb, validation.aspx, validation.aspx.vb] werden im Verzeichnis <application-path> abgelegt und Casini wird mit den Parametern (<application-path>,/mvcform3) gestartet. Anschließend rufen wir die URL [http://localhost/mvcform3/main.aspx] auf. Wir erhalten das vorinitialisierte Formular:
Wir füllen das Formular wie folgt aus:
Wir klicken oben auf die Schaltfläche [Submit]. Wir erhalten die folgende Antwort vom Server:
Wir verwenden den Link [Zurück zum Formular] oben, um zum Formular zurückzukehren. Wir erhalten die folgende neue Antwort:
Wir sehen das Formular genau so, wie wir es übermittelt haben.
5.5.6. Fazit
Das vorangegangene Beispiel hat uns gezeigt, dass es möglich ist, den Status einer Seite über die gesamten Anfrage-Antwort-Zyklen zwischen Client und Server hinweg beizubehalten. Dies ist jedoch keine triviale Aufgabe. In einem späteren Kapitel werden wir sehen, dass es mit ASP.NET möglich ist, den Status einer Seite vom Server selbst wiederherstellen zu lassen.