Galileo Computing < openbook >
Galileo Computing - Programming the Net
Galileo Computing - Programming the Net


Einstieg in ASP.NET von Matthias Lohrer
Einstieg in ASP.NET
gp Kapitel »Hallo, Welt!« – Ein ASP.NET-Crashkurs
  gp 4.1 Der Aufbau von ASP.NET-Seiten
    gp 4.1.1 Die @Page-Direktive
    gp 4.1.2 Der serverseitige Skript-Block
    gp 4.1.3 Der Block mit HTML-Code
  gp 4.2 Das erste ASP.NET-Skript: »Hallo, Welt!«
    gp 4.2.1 »Hallo Welt!« – fast wie ASP
    gp 4.2.2 »Hallo, Welt!« im ASP.NET-Stil
    gp 4.2.3 »Hallo, Welt!« mit serverseitigen Steuerelementen
  gp 4.3 Formulare mit ASP.NET auswerten: »Hallo, Anwender!«
    gp 4.3.1 ASP.NET begrüßt den Anwender
    gp 4.3.2 Ein Grundgerüst für ASP.NET-Formulare
    gp 4.3.3 Validierung von Anwendereingaben
  gp 4.4 Zusammenfassung und Ausblick


Galileo Computing

4.3 Formulare mit ASP.NET auswerten: »Hallo, Anwender!«  downtop

Die meisten Entwickler beginnen sich für die serverseitige Webprogrammierung zu interessieren, weil sie Webformulare auswerten wollen. Deswegen sollen Sie an dieser Stelle bereits eine ungefähre Vorstellung davon erhalten, wie ASP.NET mit Formularen umgeht.


Galileo Computing

4.3.1 ASP.NET begrüßt den Anwender  downtop

Zunächst ein einfaches Beispiel. In der Seite name01.aspx wird der Anwender nach seinem Namen gefragt. Wenn er ihn eingibt, begrüßt ASP.NET den Anwender mit seinem Namen.

<!-- name01.aspx -->
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub Page_Load (ByVal Sender As Object, _
               ByVal E As EventArgs)
   If IsPostBack Then
      meldung.Text = "Hallo, " & txtName.Value
   End If
End Sub
</script>
<html><head><title>Begrüßung</title></head>
<body><h1>Begrüßung</h1>
<form runat="server">
Wie heißen Sie? 
<br><br>
<input runat="server" id="txtName" type="text">
<br><br>
<input runat="server" type="submit" value=" OK " >
<br><br>
<asp:Label id="meldung" runat="server" />
</form></body></html>

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 4.5 Das erste ASP.NET-Formular

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 4.6 ASP.NET benutzt ein verstecktes VIEWSTATE-Feld, um den Formularstatus zu speichern.

Abbildung 4.5 zeigt die Darstellung beim ersten Aufruf des Formulars. Abbildung 4.6 zeigt den Browser, nachdem der Anwender seinen Namen eingegeben und OK angeklickt hat. Bei den Screenshots ist auch der jeweilige HTML-Code mit eingeblendet, den ASP.NET erzeugt hat.

Beim Blick auf den ASP.NET-Code einerseits und auf die erzeugten Seiten im Browser mit dem jeweiligen HTML-Code andererseits entstehen sicherlich viele Fragen. Sie können die Funktionsweise am ehesten nachvollziehen, wenn Sie mit der Code-Analyse dort anfangen, wo das Formular selbst definiert wird. In der aspx-Seite findet sich hier nur dieser Eintrag:

<form runat="server">

Wo aber ist das action-Attribut? Woher weiß das Skript eigentlich, welche Seite es aufrufen soll, wenn der Anwender den OK-Button anklickt? Ein Blick auf die Screenshots zeigt, dass ASP.NET automatisch diesen HTML-Code erzeugt hat:

<form name="_ctl0" method="post" action="name01.aspx" id="_ctl0">

ASP.NET verwendet für Formulare standardmäßig die Einstellung method="post" und ruft außerdem immer sich selbst auf.

Das dürfte nicht jedermanns Sache sein. Mancher Entwickler möchte beispielsweise lieber eine Seite frage.aspx entwickeln und die Antwort in antwort.aspx liefern.


Achtung   Unter ASP.NET ruft ein Formular grundsätzlich immer sich selbst auf, weil im Formular die Ereignisprozeduren definiert sind, die das Formular abarbeiten muss. Wer von einer Seite zur nächsten wechseln möchte, kann das höchstens innerhalb dieser Ereignisprozeduren über die Anweisung Response.Redirect oder mit Server.Transfer erreichen.

Selbst wenn Sie im Code ausdrücklich das action-Attribut angeben, wird es von ASP.NET ignoriert und gegen den Namen der aufrufenden Seite ersetzt.

Der übrige HTML-Code der aspx-Seite ist einigermaßen nachvollziehbar. Ein Eingabefeld, eine OK-Schaltfläche und ein Platzhalter für die spätere Ausgabe werden bereitgestellt.

Der Anwender gibt einen Namen ein und klickt auf OK. Das Formular ruft sich selbst auf und gibt die Begrüßung aus. Woher weiß das Formular, dass der Anwender Daten eingegeben hat und dass es die Daten verarbeiten soll?

Des Rätsels Lösung liegt hier in der Ereignisprozedur Page_Load. Wie der Name vermuten lässt, wird Page_Load bei jedem Laden der Seite ausgeführt. In dieser Prozedur prüft die Abfrage If IsPostBack, ob die Seite erstmalig aufgerufen wurde oder ob der Anwender Daten eingegeben und die Seite zur Verarbeitung zum Server zurückgeschickt hat. Hier spielt das versteckte Feld mit dem Namen _VIEWSTATE eine entscheidende Rolle. In diesem versteckten Feld speichert ASP.NET in codierter Form den Status einer Seite. Wenn der Status einer Seite erkennen lässt, dass der Anwender Daten eingegeben hat, dann trifft die Eigenschaft IsPostBack zu. Im Beispiel wird dann der Code innerhalb der If-Abfrage ausgeführt.

meldung.Text = "Hallo, " & txtName.Value

Diese Codezeile sorgt dafür, dass der Anwender mit seinem Namen begrüßt wird. En passant passieren noch ein paar weitere Kleinigkeiten. Auf der Begrüßungsseite bleibt der Name des Anwenders im Eingabefeld stehen. Auch das ist typisch für ASP.NET. Alle Eingaben des Anwenders bleiben in den entsprechenden Steuerelementen erhalten, ohne dass sich der Entwickler eigens darum kümmern müsste.

Außerdem erzeugt ASP.NET stets wohlgeformten XHTML-Code, was sich unter anderem daran zeigt, dass alle Tags auch wieder korrekt geschlossen werden. Die folgende Zeile ist kein korrektes XHTML, weil der abschließende Schrägstrich fehlt:

<input runat="server" type="submit" value=" OK " >

ASP.NET erzeugt daraus diesen Code:

<input name="_ctl1" type="submit" value=" OK " />

Neben dem abschließenden Schrägstrich ist erkennbar, dass ASP.NET offenkundig auch automatisch ein name-Attribut vergibt, wenn der Entwickler selbst kein name-Attribut definiert hat.


Achtung   Wenn Sie für ein Element sowohl ein name-Attribut als auch ein id-Attribut definieren, übernimmt ASP.NET auch für das name-Attribut den Wert des id-Attributs. Hier ein Beispiel. Ihr Code lautet:
<input runat="server" type="text" 
       id="txtMeineID"  
       name="txtMeinName">

Daraus erzeugt ASP.NET folgenden Code:

<input name="txtMeineID" id="txtMeineID" type="text" />

Das kann tückisch sein, wenn Sie mit JavaScript-Code über das name-Attribut auf einzelne Elemente zugreifen wollten und alle Ihre name-Attribute auf einmal völlig andere Inhalte haben.


Tipp   Daher mein Tipp: Verwenden Sie das name-Attribut nicht mehr. Verwenden Sie nur noch das id-Attribut. ASP.NET erzeugt dann stets zusätzlich ein name-Attribut mit identischem Inhalt. Die einzige Ausnahme bilden Optionsfelder. Hier benötigen Sie das name-Attribut, um die Zugehörigkeit eines Optionsfeldes zu einer Optionsfeldgruppe festzulegen.


Galileo Computing

4.3.2 Ein Grundgerüst für ASP.NET-Formulare  downtop

Der Aufbau der aspx-Seite aus dem vorherigen Abschnitt lässt sich als Grundgerüst für viele Formulare verwenden. Auf die minimale Form gebracht, ergibt sich diese Form:

<!-- grundgeruest.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub Page_Load (ByVal Sender As Object, _
               ByVal E As EventArgs)
   If Not IsPostBack Then
      ' Hier steht der Code, der nur beim ersten Laden 
      ' der Seite ausgeführt wird, z. B. kann die Seite
      ' hier mit Startwerten etc. initialisiert werden.
   Else
      ' Hier steht der Code, der nach dem 
      ' Formularversand ausgeführt wird, d. h. hier 
      ' werden die Eingaben des Anwenders verarbeitet.  
   End If
End Sub
</script>
<html><head><title>Titel</title></head>
<body><h1>Titel</h1>
<form runat="server" id="myForm">
<!-- Hier steht der Inhalt des Formulars. -->
</form>
</body></html>

Wichtig ist das form-Element im HTML-Block der aspx-Seite, das mit dem Attribut runat="server" versehen sein muss. Nur wenn dieses serverseitige form-Element definiert ist, kann ASP.NET Formulare korrekt verarbeiten. Die folgende Angabe können Sie in allen Formularen verwenden:

<form runat="server" id="myForm">

Das action-Attribut dürfen Sie nicht definieren. ASP.NET fügt hier automatisch den Namen der aktuellen aspx-Seite selbst ein. ASP.NET lässt für jede aspx-Seite nur ein einziges form-Element zu.

Die Eingaben des Anwenders können Sie am leichtesten im Rahmen der Ereignisprozedur Page_Load bearbeiten. Dafür muss innerhalb dieser Prozedur die IsPostBack-Eigenschaft überprüft werden. Beim erstmaligen Laden der Seite ist die Eigenschaft False. In diesem Zweig der If-Abfrage können Sie die Seite initialisieren. Wenn der Anwender irgendwelche Daten eingegeben und abschließend OK angeklickt hat, wird die Seite zum Server versandt. Beim erneuten Laden der Seite ist die Eigenschaft IsPostBack True. In diesem Zweig der If-Abfrage können Sie die Eingaben des Anwenders auswerten.

Viele Beispiele in diesem Buch bauen auf diesem Grundgerüst auf. Sie können es auch gut für Ihre eigenen Experimente verwenden.


Galileo Computing

4.3.3 Validierung von Anwendereingaben  toptop

Wenn der Anwender in dem Beispiel mit der Begrüßung überhaupt nichts eingibt, sondern nur OK anklickt, wird die wenig sinnvolle Meldung Hallo, zurückgegeben. Vor der Bearbeitung sollte das Skript überprüfen, ob der Anwender einen Namen eingegeben hat. Wenn nicht, dann sollte eine Fehlermeldung den Anwender darauf hinweisen.

Unter ASP.NET ist die Realisierung solcher Validierungsfunktionen sehr einfach. Im Beispiel müssen Sie lediglich hinter dem Text-Eingabefeld ein Webserversteuerelement vom Typ RequiredFieldValidator ergänzen, in der Page_Load-Ereignisprozedur die Seite validieren und entsprechend dem Ergebnis der Überprüfung reagieren. Die aspx-Seite gewinnt damit diese Form:

<!-- name02.aspx -->
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub Page_Load (ByVal Sender As Object, _
               ByVal E As EventArgs)
   If IsPostBack Then
      Page.Validate
      If IsValid Then
         meldung.Text = "Hallo, " & txtName.Value
      End If
   End If
End Sub
</script>
<html><head><title>Begrüßung</title></head>
<body><h1>Begrüßung</h1>
<form runat="server">
Wie heißen Sie? 
<br><br>
<input runat="server" id="txtName" type="text" >
<asp:RequiredFieldValidator 
     id="reqTxtName" 
     ControlToValidate="txtName" 
     Display="dynamic" 
     runat="server">
     Bitte geben Sie hier Ihren Namen ein.
</asp:RequiredFieldValidator> 
<br><br>
<input runat="server" type="submit" value=" OK " >
<br><br>
<asp:Label id="meldung" runat="server" />
</form></body></html>

Abbildung
Hier klicken, um das Bild zu Vergrößern

Abbildung 4.7 Für die Validierung von Anwendereingaben stellt ASP.NET zahlreiche Steuerelemente zur Verfügung.

Das Formular reagiert jetzt wie gewünscht. Wenn der Anwender nichts eingibt, erscheint neben dem Feld in roter Schrift der Hinweis: Bitte geben Sie hier Ihren Namen ein. Wenn der Anwender den Namen eingibt und OK anklickt, verschwindet der Hinweis und die Begrüßung erscheint.

Wenn im Browser des Anwenders JavaScript aktiviert ist, findet die Überprüfung bereits im Webbrowser mit Hilfe von JavaScript statt. Auf jeden Fall wird die Überprüfung auch auf der Serverseite vorgenommen.

Wenn Sie sicherstellen möchten, dass der Anwender im Eingabefeld txtName auf jeden Fall eine Eingabe vornimmt, dann bleibt für Sie als Entwickler nicht mehr viel zu tun. Sie definieren im HTML-Block der aspx-Seite das Element asp:RequiredFieldValidator und vergeben neben runat="server" das Attribut ControlToValidate="txtName". Das reicht bereits aus. Mit der Umsetzung in clientseitigen und serverseitigen Code haben Sie sonst nichts mehr zu tun.

Es lohnt sich, einmal den generierten HTML/JavaScript-Quellcode anzusehen. Erschrecken Sie aber nicht!

<!-- name02.aspx -->
<html><head><title>Begrüßung</title></head>
<body><h1>Begrüßung</h1>
<form name="_ctl0" method="post" action="name02.aspx" language="javascript" 
onsubmit="ValidatorOnSubmit();" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" 
value="dDwtMTI1Mjg5Mjg4OTs7PiKrEhu30GwCswlvC944CRBKCSeL" />        
<script language="javascript" 
src="/aspnet_client/system_web/1_0_3705_0/WebUIValidation.js"></script>
Wie heißen Sie? 
<br><br>
<input name="txtName" id="txtName" type="text" />
<span id="reqTxtName" CausesValidation="True" controltovalidate="txtName" 
display="Dynamic" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" 
initialvalue="" style="color:Red;display:none;">
     Bitte geben Sie hier Ihren Namen ein.
</span> 
<br><br>
<input language="javascript" onclick="if (typeof(Page_ClientValidate) == 'function') 
Page_ClientValidate(); " name="_ctl1" type="submit" value=" OK " />
<br><br>
<span id="meldung"></span>
<script language="javascript">
<!--
 var Page_Validators =  new Array(document.all["reqTxtName"]);
 <$tab>// -->
</script>
<script language="javascript">
<!--
var Page_ValidationActive = false;
if (typeof(clientInformation) != "undefined" && 
clientInformation.appName.indexOf("Explorer") != -1) {
    if (typeof(Page_ValidationVer) == "undefined")
        alert("Unable to find script library 
'/aspnet_client/system_web/1_0_3705_0/WebUIValidation.js'. Try placing this file 
manually, or reinstall by running 'aspnet_regiis -c'.");
    else if (Page_ValidationVer != "125")
        alert("This page uses an incorrect version of WebUIValidation.js. The page 
		expects version 125. The script library is " + Page_ValidationVer + ".");
    else
        ValidatorOnLoad();
}
function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        ValidatorCommonOnSubmit();
    }
}
// -->
</script></form></body></html>

Diesen Code haben Sie selbst mit Hilfe von ASP.NET erstellt! Und dabei ist der eigentliche Code, der die Eingabeüberprüfung vornimmt, hier noch gar nicht enthalten. Er ist in der externen Skript-Datei WebUIValidation.js enthalten.

Keine Angst, den generierten Quellcode gehe ich jetzt nicht Zeile für Zeile durch. Für das Verständnis von ASP.NET ist es auch nicht erforderlich, sich in die Details dieser JavaScript-Routinen zu vertiefen. Als ASP.NET-Entwickler sind Sie dafür zuständig, die Programmlogik festzulegen. Die Umsetzung in den entsprechenden HTML- und JavaScript-Code nimmt ASP.NET für Sie vor.

Neben dem RequiredFieldValidator bietet ASP.NET noch zahlreiche andere Webserversteuerelemente für die Validierung. Sie können beispielsweise überprüfen, ob die Eingabe zu einem bestimmten Datentyp passt, ob die Eingabe einem Muster entspricht, ob sie in einen bestimmten Bereich fällt und manches andere. Kurz und gut: Aus der Mühe, die Anwendereingaben zu überprüfen, wird mit ASP.NET ein Vergnügen.

  

Einstieg in VB.NET

VB.NET

Einstieg in C#

Visual C#

VB.NET und Datenbanken

Einstieg in XML




Copyright © Galileo Press GmbH 2003
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press GmbH, Gartenstraße 24, 53229 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de