Einstieg in ASP.NET – 3-89842-302-6 – 6.5 HtmlInputControl und abgeleitete Klassen

Kapitel 6 HTML-Serversteuerelemente
	6.1 System.Web.UI.LiteralControl
	6.2 Die HTML-Serversteuerelemente. Vererbungshierarchie und gemeinsame Eigenschaften
	6.3 Die Klasse HtmlImage
	6.4 HtmlContainerControl und abgeleitete Klassen
		6.4.1 Die Basisklasse HtmlContainerControl
		6.4.2 HtmlGenericControl
		6.4.3 HtmlAnchor
		6.4.4 HtmlTable, HtmlTableRow und HtmlTableCell
		6.4.5 HtmlForm
		6.4.6 HtmlButton
		6.4.7 HtmlSelect
		6.4.8 HtmlTextArea
	6.5 HtmlInputControl und abgeleitete Klassen
		6.5.1 Ein Beispiel mit mehreren Eingabeelementen
		6.5.2 HtmlInputButton
		6.5.3 HtmlInputImage
		6.5.4 HtmlInputFile
		6.5.5 HtmlInputText
		6.5.6 HtmlInputCheckBox
		6.5.7 HtmlInputRadioButton
		6.5.8 HtmlInputHidden

6.5 HtmlInputControl und abgeleitete Klassen

Nach der Vorstellung der Klasse HtmlImage und dem langen Abschnitt über die Basisklasse HtmlContainerControl und die von ihr abgeleiteten Klassen folgt nun die dritte Säule der HTML-Serversteuerelemente: die abstrakte Klasse HtmlInputControl mit den von ihr abgeleiteten Klassen. Von der Basisklasse HtmlInputControl stammen diese Klassen ab:

E HtmlInputText

E HtmlInputButton

E HtmlInputCheckBox

E HtmlInputRadioButton

E HtmlInputHidden

E HtmlInputImage

E HtmlInputFile

Diese Klassen haben alle ihre Entsprechung in den verschiedenen Ausformungen des HTML-Elements input. Tabelle 6.17 zeigt, welches HTML-input-Element durch welche HtmlInputControl-Klasse repräsentiert wird.

HTML-Element	HtmlInputControl-Klasse
input type="submit"	HtmlInputButton
input type="reset"	HtmlInputButton
input type="button"	HtmlInputButton
input type="image"	HtmlInputImage
input type="text"	HtmlInputText
input type="password"	HtmlInputText
input type="checkbox"	HtmlInputCheckBox
input type="radio"	HtmlInputRadioButton
input type="file"	HtmlInputFile
input type="hidden"	HtmlInputHidden

Tabelle 6.17 Vom input-Element zur HtmlInputControl-Klasse

In der Eigenschaft Type speichern die HtmlInputControl-Klassen ihren Typ. Hier sind die Werte text, password, checkbox, radio, button, submit, reset, file, hidden und image möglich. Über die Eigenschaft Name greifen Sie auf ein bestimmtes Steuerelement zu. Die Klassen HtmlInputText und HtmlInputFile liefern über die Eigenschaft value jeweils den eingegebenen Inhalt. Bei HtmlInputButton liefert value die Beschriftung der Schaltfläche. Bei den Typen HtmlInputCheckbox und HtmlInputRadioButton überprüfen Sie mit der Eigenschaft checked, ob die entsprechende Auswahl getroffen wurde.

6.5.1 Ein Beispiel mit mehreren Eingabeelementen

Für den schnellen Einstieg demonstriert HtmlInputControl01.aspx in komprimierter Form den Einsatz eines Text-Eingabefelds, eines Passwortfelds, von Kontrollkästchen und Optionsfeldern. Abbildung 6.15 zeigt die Darstellung im Browser. Anschließend werden die Besonderheiten der einzelnen Steuerelemente erläutert.

<!-- HtmlInputControl01.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
      Dim sb as New StringBuilder()
      sb.Append ("Ihr Anwenderprofil:<br><b>Name:</b>")
      sb.Append (myName.value)
      sb.Append (" <b>Ihr Passwort:</b> ")
      sb.Append (myPass.value)
      sb.Append (" <b>Geschlecht: </b>")
      If male.checked Then
         sb.Append ("männlich") 
      ElseIf female.checked Then
         sb.Append ("weiblich")
      End If
      sb.Append (" <b>Eigenschaften: </b>")
      If check1.checked Then
         sb.Append (check1.value & " ")
      End If
      If check2.checked Then
         sb.Append (check2.value & " ")
      End If
      If check3.checked Then
         sb.Append (check3.value)
      End If
      sb.Append (" <b>Versteckter Inhalt:</b> ")
      sb.Append (txtHidden.value) 
      ausgabe.innerHTML = sb.toString()  
   End If
End Sub
</script>
<html><head>
<title>Von HtmlInputControl abgeleitete Klassen</title>
</head><body>
<h3>Von HtmlInputControl abgeleitete Klassen</h3>
<form runat="server" id="myForm">

Ihr Name: <br>
<input type="text" id="myName" runat="server" ><br>

Ihr Passwort: <br>
<input type="password" id="myPass" runat="server" ><br>
<br>
Sie sind<br>
<input type="radio" id="male" 
       name="Geschlecht" runat="server">
<label for="male">männlich</label><br>
<input type="radio" id="female" 
       name="Geschlecht" runat="server">
<label for="female">weiblich</label><br>
<br>
Welche Eigenschaften treffen auf Sie zu? 
Ich bin ...<br>
<input type="checkbox" id="check1" 
       runat="server" value="lustig"/>
<label for="check1">lustig</label><br>
<input type="checkbox" id="check2" 
       runat="server" value="launisch" />
<label for="check2">launisch</label><br>
<input type="checkbox" id="check3" 
       runat="server" value="langweilig" />
<label for="check3">langweilig</label><br>
<br>
<input type="hidden" id="txtHidden" runat="server" 
       value="Das ist mein Geheimversteck." />
<input type="submit" id="btnOK" 
       runat="server" value=" OK "/>
<input type="reset" id="btnCancel" 
       runat="server" value="Abbrechen" /><br>
<p id="ausgabe" runat="server" />
</form></body></html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.15 Value und Type sind die beiden wesentlichen Eigenschaften aller von HtmlInputControl abgeleiteten Klassen.

Die Verwendung der Steuerelemente in HtmlInputControl01.aspx erweist sich als relativ einfach. Die Abfrage auf value oder checked reicht jeweils aus, um den Inhalt eines Felds zu bestimmen.

6.5.2 HtmlInputButton

Die Klasse HtmlInputButton verarbeitet drei Typen des input-Elements:

E input type="button"

E input type="submit"

E input type="reset"

Zur Erinnerung: Für das Element button style=" ..." ist die Klasse HtmlButton zuständig. Das HTML-Element button wird jedoch erst ab der Version 4.0 des Internet Explorers erkannt. Außerdem funktioniert das button-Element nur bei aktiviertem JavaScript.

Die genannten drei input-Varianten werden von den Browsern zuverlässig erkannt. input type="button" ist allerdings nur in Kombination mit selbst erstellten JavaScript-Routinen sinnvoll. Wer einfach nur eine Schaltfläche zum Abschicken eines Formulars zur Verfügung stellen will, sollte nach wie vor den Schaltflächen-Großvater input type="submit" verwenden. Damit gibt es garantiert keine Probleme.

Beim Anklicken der Schaltfläche wird auf dem Server das Ereignis ServerClick ausgelöst. Sie können also für jeden Button eine eigene Ereignisprozedur definieren. Damit haben Sie die Möglichkeit, sehr einfach mehrere Schaltflächen mit unterschiedlicher Funktionalität bereitzustellen. HtmlInputButton01.aspx demonstriert ein mögliches Verfahren. Je nachdem, ob der Anwender auf Ja oder Nein klickt, wird eine andere Ereignisprozedur ausgeführt. Abbildung 6.16 zeigt die Darstellung im Browser.

<!-- HtmlInputButton01.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub btnJa_Click (source As Object, e As EventArgs)
   ausgabe.innerText ="Ja"
End Sub 
Sub btnNein_Click (source As Object, e As EventArgs)
   ausgabe.innerText ="Nein"
End Sub 
</script>
<html><head><title>HtmlInputButton-Demo</title></head>
<body><h3>HtmlInputButton-Demo</h3>
<form runat="server" id="myForm">
Mögen Sie Holundermarmelade?<br><br>
<input type="submit" id="btnJa" value=" Ja " 
       runat="server" OnServerClick="btnJa_Click">
<input type="submit" id="btnNein" value=" Nein " 
       runat="server" OnServerClick="btnNein_Click">
<br><br><p runat="server" id="ausgabe" />
</form></body></html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.16 ASP.NET kann mehreren Submit-Schaltflächen unterschiedliche Ereignisprozeduren zuordnen.

Eine Page_Load-Ereignisprozedur ist nicht erforderlich. Statt dessen stehen im Skript-Teil der aspx-Datei die beiden Ereignisprozeduren für die Schaltflächen.

Im Prinzip ist es nicht erforderlich, für die beiden Schaltflächen je eine eigene Ereignisprozedur zu erstellen. Statt dessen könnten Sie auch eine einzelne Prozedur erstellen und über das Argument source As Object jeweils die auslösende Schaltfläche und z. B. deren Beschriftung in Erfahrung bringen. In Abschnitt 6.4.6, HtmlButton, wird diese Möglichkeit für die HtmlButton-Klasse ausführlich demonstriert. Das Verfahren kann für die HtmlInputButton-Klasse genauso übernommen werden.

6.5.3 HtmlInputImage

Wenn Ihnen die gewöhnlichen grauen Schaltflächen zu langweilig sind, bietet es sich an, eine Grafik als Schaltfläche zu verwenden. Hierfür steht das HTML-Element input type="image" zur Verfügung, das unter ASP.NET durch die Klasse HtmlInputImage repräsentiert wird. Im Unterschied zum Button-Element, mit dem Sie auch eine anklickbare Grafik erzeugen könnten, wird dieses input-Element aber von allen Browsern auch ohne JavaScript zuverlässig unterstützt.

Wenn Sie für das ServerClick-Ereignis eine eigene Ereignisprozedur definieren, können Sie außerdem auf die Koordinaten des Mausklicks Bezug nehmen. HtmlInputImage01.aspx demonstriert, wie Sie die Koordinaten auswerten können. Abbildung 6.17 zeigt die Darstellung im Browser.

<!-- HtmlInputImage01.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub btnImg_Click ( ByVal sender As Object, _
                   ByVal e As ImageClickEventArgs )
   Dim prozent As Integer = 100 – e.Y
   ausgabe.innerText = _
      "Sie mögen Holundermarmelade zu ungefähr " & _
      prozent.toString() & " Prozent."      
End Sub 
</script>
<html><head><title>HtmlInputImage-Demo</title></head>
<body><h3>HtmlInputImage-Demo</h3>
<form runat="server" id="myForm">
Wie gern mögen Sie Holundermarmelade?<br>
Bitte ungefähr die passende Stelle anklicken!<br><br>
<input type="image" src="img/skala.gif" id="btnImg" 
       runat="server" OnServerClick="btnImg_Click">
<br><br>
<p runat="server" id="ausgabe" /></form></body></html>

Die Signatur für die Prozedur, die das Click-Ereignis für ein HtmlInputImage-Objekt auswertet, weicht etwas von der sonst üblichen Form ab. Sie lautet:

Sub btnImg_Click ( ByVal sender As Object, _
                   ByVal e As ImageClickEventArgs )

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.17 Die ServerClick-Ereignisprozedur der HtmlInputImage-Klasse kann auch die Koordinaten des Mausklicks auswerten.

Bei den meisten Ereignisprozeduren wird mit dem zweiten Parameter ein Objekt vom Typ EventArgs übergeben. In vorliegenden Fall wird ein Objekt vom Typ ImageClickEventArgs übergeben. Die Klasse ImageClickEventArgs bietet die beiden Eigenschaften X und Y, mit denen Sie die Koordinaten des Mausklicks in Erfahrung bringen können. Genau das macht im Beispiel die Prozedur btnImg_Click. Da die Grafik genau 100 Pixel hoch ist, zieht die Prozedur von der Zahl 100 den Wert der Y-Koordinate ab und Sie erhalten damit die gesuchte Angabe.

6.5.4 HtmlInputFile

Der Upload einer Datei über den Browser gestaltet sich unter ASP.NET denkbar einfach. Mit dem Element input type="file" erzeugen Sie im Browser ein Eingabefeld mit einer zusätzlichen Schaltfläche "Durchsuchen". Wenn der Anwender die Schaltfläche anklickt, öffnet sich ein Dateiauswahldialog, mit dem der Anwender die gewünschte Datei selektiert. Anschließend wird der Dateiname mit voller Pfadangabe in das Eingabefeld übernommen.

Den Upload selbst stoßen Sie mit einem Klick auf eine Submit-Schaltfläche an. Mit Hilfe einer Ereignisprozedur für das ServerClick-Ereignis benötigt ASP.NET nur noch eine einzige Zeile mit einem SaveAs-Befehl, um die Datei auf dem Server abzulegen. HtmlInputFile.aspx demonstriert das Verfahren. Abbildung 6.18 zeigt die Darstellung im Browser.

<!-- HtmlInputFile.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub myUpload_Click (ByVal Sender as Object, _
                    ByVal e as EventArgs)
   Dim sb as New StringBuilder()
   sb.Append ("<b>Upload-Info</b>")
   sb.Append ("<br>Dateiname: " )
   sb.Append (myUpload.PostedFile.FileName)
   sb.Append ("<br>Länge der Datei: ")
   sb.Append (myUpload.PostedFile.ContentLength)
   sb.Append (" Bytes")
   sb.Append ("<br>MIME-Typ der Datei: ")
   sb.Append (myUpload.PostedFile.ContentType)
   myUpload.PostedFile.SaveAs("c:\Upload\myupload.dat")
   ausgabe.innerHTML = sb.toString()                    
End Sub                    
</script>
<html><head><title>HtmlInputFile-Demo</title></head>
<body><h3>HtmlInputFile-Demo</h3>
<form runat="server" id="myForm" 
      enctype="multipart/form-data" >
Diese Datei laden: <br>      
<input type="file" runat="server" id="myUpload" >
<br><br>
<input type="submit" value=" Jetzt hochladen! " 
       runat="server" OnServerClick="myUpload_Click" >
<br><br><p id="ausgabe" runat="server" />
</form></body></html>

Achtung Für einen Datei-Upload müssen Sie bei der Angabe des form-Elements auf jeden Fall das Attribut enctype="multipart/form-data" ergänzen.

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.18 Mit der HtmlInputFile-Klasse wird für das Speichern der Datei auf dem Server nur noch eine Zeile Code benötigt.

Beim Anklicken der Upload-Schaltfläche wird die Prozedur myUpload_Click ausgeführt. Im Ausgabe-Absatz gibt die Prozedur zunächst einige Informationen über die hochzuladende Datei aus. Die Klasse HtmlInputFile liefert über ihre Eigenschaft PostedFile ein Objekt vom Typ HttpPostedFile. Dieses Objekt bietet Informationen zu Name, Größe und Typ der Datei und als besonders praktische Zutat die Methode SaveAs, mit der sich die Datei auf dem Server speichern lässt. Tabelle 6.19 listet die Merkmale der Klasse HttpPostedFile auf.

Beim Ausführen des Skripts fällt auf, dass nach dem Postback der Name der Datei aus dem Eingabefeld verschwunden ist. Von ASP.NET ist man es sonst gewöhnt, dass alle Eingaben auch nach einem Postback erhalten bleiben. Dieses Verhalten wird vom Browser verursacht. Auf diese Weise soll der Zugriff auf möglicherweise sensible Daten erschwert werden.

Name der Eigenschaft	Typ	Beschreibung
Accept	String	Kommaseparierte Liste mit denjenigen MIME-Codes, die als Upload-Datei akzeptiert werden. Unterstützung hängt vom jeweiligen Browser ab.
MaxLength	Integer	Definiert die maximal zulässige Länge des Dateipfades (nicht der Datei selbst). Die Unterstützung ist browserabhängig.
PostedFile	HttpPostedFile	Die hochzuladende Datei. Tabelle 6.19 nennt Eigenschaften und Methoden dieser Klasse.
Size	Integer	Breite des Textfeldes, das den Dateipfad aufnimmt

Tabelle 6.18 Eigenschaften der Klasse HtmlInputFile

Name der Eigenschaft/Methode	Typ	Beschreibung
ContentLength	Integer	Länge der Datei in Byte
ContentType	String	MIME-Typ der Datei
FileName	String	Dateiname mit komplettem Pfad
InputStream	Stream	Ein Stream-Objekt, das auf die hochzuladende Datei zeigt
SaveAs (String)		Speichert die Datei unter dem übergebenen Namen

Tabelle 6.19 Vier Eigenschaften und eine Methode der Klasse HttpPostedFile

Name der Eigenschaft/Methode	Typ	Beschreibung
AllKeys	String()	Ein String-Array mit den Datei-Schlüsseln. Das sind die id-Werte der input type=file-Elemente.
Count	Integer	Anzahl der enthaltenen Dateien
Item(Integer) oder Item(String)	HttpPostedFile	Eine der Dateien. Auswahl über die id oder über die Indexzahl
Keys	NameObjectCollectionBase.KeysCollection	Alle Schlüssel der NameObjectCollectionBase-Instanz

Tabelle 6.20 Eigenschaften der Klasse HttpFileCollection

HttpFileCollection für den Upload mehrerer Dateien verwenden

Wenn Sie in einem Formular den Upload mehrerer Dateien erlauben, bietet Ihnen die Klasse HttpFileCollection für den Dateizugriff die größere Flexibilität. Die Eigenschaft Request.Files liefert ein Objekt der Klasse HttpFileCollection, dessen einzelne Elemente vom Typ HttpPostedFile sind. Tabelle 6.20 nennt die wichtigsten Eigenschaften der Klasse HttpFileCollection. HttpFileCollection01.aspx demonstriert den Upload von drei Dateien. Abbildung 6.19 zeigt die Darstellung im Browser.

<!-- HttpFileCollection01.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub myUpload_Click (ByVal Sender as Object, _
                    ByVal e as EventArgs)
   Dim sb As New StringBuilder()
   Dim i As Integer
   Dim myFiles As HttpFileCollection
   myFiles = Request.Files
   sb.Append ("Anzahl Dateien: ")
   sb.Append (CStr(myFiles.Count))
   For i = 0 to (myFiles.Count – 1)      
      sb.Append ("<br>")
      sb.Append (i+1).toString()
      sb.Append (") ")
      sb.Append ("Dateiname: ")
      sb.Append (myFiles(i).FileName)
      sb.Append (". Länge: ")
      sb.Append (myFiles(i).ContentLength)
      sb.Append (" Bytes")
      sb.Append (". MIME-Typ: ")
      sb.Append (myFiles(i).ContentType)
   Next
   ausgabe.innerHTML = sb.toString()
End Sub                    
</script><html>
<head><title>HttpFileCollection-Demo</title></head>
<body><h3>HttpFileCollection-Demo</h3>
<form runat="server" id="myForm" 
      enctype="multipart/form-data" >
Datei 1<br>      
<input type="file" runat="server" id="datei1" ><br>
Datei 2<br>      
<input type="file" runat="server" id="datei2" ><br>
Datei 3<br>      
<input type="file" runat="server" id="datei3" ><br>
<input type="submit" value=" Jetzt hochladen! " 
       runat="server" OnServerClick="myUpload_Click" >
<br><br><p id="ausgabe" runat="server" />
</form></body></html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.19 Beim Upload mehrerer Dateien erleichtert die Klasse HttpFileCollection den Zugriff auf die Dateien.

Die Variable myFiles enthält das Objekt vom Typ HttpFileCollection. Die Ereignisprozedur myUpload_Click durchläuft mit einer For-Schleife alle enthaltenen Elemente:

For i = 0 to (myFiles.Count – 1)

Auf das einzelne HttpPostedFile-Objekt greifen Sie über einen Index zu, wobei Sie als Indexwert eine Zahl oder den jeweiligen Schlüssel angeben können. Die Prozedur verwendet den einfachen Zugriff über die Position.

myFiles(i).FileName

Damit können Sie die Eigenschaften des jeweiligen HttpPostedFile-Objekts auslesen und anzeigen.

6.5.5 HtmlInputText

Die Klasse HtmlInputText verarbeitet die beiden HTML-Steuerelementtypen input type="text" und input type="password". Im Abschnitt 6.5.1, Ein Beispiel mit mehreren Eingabeelementen, wurden die beiden Typen bereits kurz vorgestellt. Tabelle 6.21 listet die Eigenschaften dieser Klasse auf.

Die HtmlInputText-Klasse unterstützt das ServerChange-Ereignis. Wenn der Anwender den Text des Eingabefelds verändert hat, kann eine serverseitige Prozedur ausgelöst werden. Diese Prozedur kann dann beispielsweise eine Eingabevalidierung durchführen. HtmlInputText01.aspx demonstriert eine solche Möglichkeit.

Das Beispiel ist allerdings mit Vorsicht zu genießen. Bevor Sie in größerem Umfang auf diese Weise Eingabevalidierungen erstellen, sollten Sie das Kapitel 7, Validierung von Anwendereingaben, lesen. Die serverseitigen Validierungssteuerelemente bieten einen erheblich höheren Komfort, als es mit solchen selbst erstellten Routinen möglich ist. Und wenn Sie dann auch noch Webserversteuerelemente mit dem AutoPostBack-Feature verwenden, muss der Anwender nicht einmal mehr auf OK klicken, damit die Validierung durchgeführt wird.

Trotzdem hier nun das Beispiel:

<!-- HtmlInputText01.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub check (ByVal Sender As Object, _
           ByVal E As EventArgs)
   Dim ctrl As HtmlInputText = _
                         CType(Sender, HtmlInputText) 
   If ctrl.id = "txta" Then
      If ctrl.value = "a" Or ctrl.value = "A" Then
         meldunga.innerText ="Richtig!"
      Else
         meldunga.innerText ="Falsch!"
      End If
   ElseIf ctrl.id = "txtz" Then
      If ctrl.value = "z" Or ctrl.value = "Z" Then
         meldungz.innerText ="Richtig!"
      Else
         meldungz.innerText ="Falsch!"
      End If   
   End If
End Sub
</script>
<html><head><title>HtmlInputText-Demo</title></head>
<body><h3>HtmlInputText-Demo</h3>
<form runat="server" id="myForm">
Wie heißt der erste Buchstabe des Alphabets? 
<input type="text" runat="server" id="txta" 
       OnServerChange="check" size="1" maxlength="1">
<span id="meldunga" runat="server"/><br>
Wie heißt der letzte Buchstabe des Alphabets? 
<input type="text" runat="server" id="txtz" 
       OnServerChange="check" size="1" maxlength="1">
<span id="meldungz" runat="server"/><br>
<input type="submit" runat="server" 
       id="btnOK" value=" OK " >
</form></body></html>

Name der Eigenschaft	Typ	Beschreibung
MaxLength	Integer	Anzahl der maximal zulässigen Zeichen
Size	Integer	Breite des Eingabefelds in Anzahl Zeichen
Value	String	Inhalt des Eingabefelds

Tabelle 6.21 Die Eigenschaften der Klasse HtmlInputText

Der Anwender soll den ersten und den letzten Buchstaben des Alphabets jeweils in ein Textfeld eingeben. Wenn der Anwender die Buchstaben eingibt und auf OK klickt, wird das Formular zum Server gesandt. Bei beiden Eingabefeldern wird das ServerChange-Ereignis ausgelöst und damit jeweils die Prozedur check angestoßen. Zur Demonstration wurde die gesamte Funktionalität in einer einzelnen Prozedur zusammengefasst.

Weil die check-Prozedur nach dem Aufruf erst einmal herausfinden muss, welches Steuerelement sie aufgerufen hat, wandelt sie den Parameter Sender As Object in ein Objekt vom Typ HtmlInputText um:

Dim ctrl As HtmlInputText = CType(Sender,HtmlInputText)

Damit hat die Prozedur den vollen Zugriff auf das auslösende Steuerelement, kann dessen Eigenschaften in Erfahrung bringen und entsprechend reagieren, beispielsweise so:

If ctrl.id = "txta" Then

Anschließend gibt die Prozedur direkt neben dem jeweiligen Eingabefeld die Erfolgs- oder Misserfolgsmeldung aus.

6.5.6 HtmlInputCheckBox

ASP.NET verarbeitet das Kontrollkästchen-Element input type="checkbox" mit Hilfe der Klasse HtmlInputCheckBox. Auch diese Klasse unterstützt das ServerChange-Ereignis. HtmlInputCheckBox01.aspx demonstriert, wie eine entsprechende Ereignisprozedur eingesetzt werden kann. Abbildung 6.20 zeigt die Darstellung im Browser. Eine Tabelle mit den Eigenschaften von HtmlInputCheckBox erübrigt sich. Die einzige erwähnenswerte Eigenschaft ist die Abfrage des logischen Wertes Checked.

<!-- HtmlInputCheckBox01.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub myCheck_Change (ByVal Sender As Object, _
                    ByVal E As EventArgs)
   If myCheck.Checked Then
      ausgabe.innerText = "Angeklickt!"
   Else
      ausgabe.innerText = "Ausgeklickt!"
   End If
End Sub
</script>
<html><head>
<title>HtmlInputCheckBox-Demo</title></head>
<body><h3>HtmlInputCheckBox-Demo</h3>
<form runat="server" id="myForm">
<input type="checkbox" runat="server" id="myCheck" 
       OnServerChange="myCheck_Change">
<Label for="myCheck">Bitte an- oder ausklicken</Label> 
<br><br>
<input type="submit" value=" OK " runat="server" >
<p id="ausgabe" runat="server" />
</form></body></html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.20 Auch die HtmlInputCheckBox-Klasse unterstützt das ServerChange-Ereignis.

6.5.7 HtmlInputRadioButton

Die Klasse HtmlInputRadioButton verarbeitet das HTML-Element input type="radio". Weil ihre grafische Darstellung so ähnlich ist, könnte man meinen, dass die Klassen HtmlInputRadioButton und HtmlInputCheckBox fast identisch sein müssten. Das stimmt aber nicht, weil Optionsfelder nie einzeln, sondern immer nur in der Gruppe auftreten können und weil jeweils nur eine einzige Option selektiert sein kann. Daraus resultieren eine Reihe von Besonderheiten:

Sie ordnen Optionsfelder einer Gruppe zu, indem Sie allen Optionsfeldern dieser Gruppe ein name-Attribut mit einheitlichem Wert zuweisen.

Im Unterschied zu Kontrollkästchen können Optionsfelder über ein value-Attribut verfügen. Ähnlich wie bei Listenfeldern können Sie damit zwischen dem dargestellten Text und dem übertragenen Wert unterscheiden.

Und schließlich gibt es noch einen kleinen, aber feinen Unterschied bei der Ereignisbehandlung. Auch die Klasse HtmlInputRadioButton wertet das Ereignis ServerChange aus. Dieses Ereignis tritt jedoch nur ein, wenn ein Optionsfeld selektiert wird. Es wird nicht ausgelöst, wenn ein Optionsfeld deselektiert wird.

Achtung Da ein Optionsfeld immer einer Gruppe zugeordnet ist, kann ein Optionsfeld nur deselektiert werden, indem ein anderes Optionsfeld ausgewählt wird. Wenn Sie also auf die Auswahl in einer Gruppe von Optionsfeldern mit einer Ereignisprozedur reagieren möchten, müssen Sie allen Optionsfeldern die Ereignisprozedur zuweisen.

Wenn das Ereignis dann sowohl beim An- wie beim Abwählen ausgelöst würde, würde jede Selektion zwei Ereignisse auslösen. Weil das nicht nötig ist, wird das Ereignis nur bei der Auswahl eines Optionsfeldes ausgelöst, nicht aber bei der Abwahl. HtmlInputRadioButton01.aspx demonstriert diese Eigenschaften beispielhaft. Abbildung 6.21 zeigt die Darstellung im Browser.

<!-- HtmlInputRadioButton01.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub auswahl (ByVal Sender As Object, _
             ByVal E As EventArgs)
   ausgabe.innerHTML = "Dann empfehlen wir:<b> " & _ 
   CType(Sender, HtmlInputRadioButton).value  & "</b>"
End Sub
</script>
<html><head>
<title>HtmlInputRadioButton-Demo</title></head>
<body><h3>HtmlInputRadioButton-Demo</h3>
<form runat="server" id="myForm">
Welchen Typ von Rundfunksender möchten Sie gerne hören?
<br><br>
<input type="radio" runat="server" name="rundfunk" 
       OnServerChange="auswahl" id="radio1" 
       value="Deutschlandfunk">
<label for="radio1">Nachrichten und Wortbeiträge
       </label><br>
<input type="radio" runat="server" name="rundfunk"
       OnServerChange="auswahl" id="radio2" 
       value="SWR 3">
<label for="radio2">Aktuelle Popmusik und Verkehrsfunk
       </label><br>
<input type="radio" runat="server" name="rundfunk"
       OnServerChange="auswahl" id="radio3"
       value="Bayern 1">
<label for="radio3">Volksmusik</label><br><br>
<input type="submit" runat="server" value=" OK " ><br>
<p runat="server" id="ausgabe" />
</form></body></html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.21 Ein Optionsfeld löst nur dann das ServerChange-Ereignis aus, wenn es selektiert wird. Das vereinfacht die Auswertung.

Interessant gestaltet sich die Ereignisprozedur. Um herauszufinden, welches Optionsfeld angeklickt wurde, ist es nicht nötig, alle Optionsfelder nacheinander auf die Eigenschaft Checked zu überprüfen. Tatsächlich müssen Sie Checked überhaupt nicht bemühen. Da das Ereignis nur von jenem Optionsfeld ausgelöst wird, das selektiert wird, bekommt die Ereignisprozedur das ausgewählte Optionsfeld als Parameter Sender As Object frei Haus gleich mitgeliefert. Also reicht eine einzelne Anweisung für die Auswertung aus:

   ausgabe.innerHTML = "Dann empfehlen wir:<b> " & _ 
   CType(Sender, HtmlInputRadioButton).value  & "</b>"

Das Verfahren wurde bereits mehrfach demonstriert: Konvertieren Sie das Sender-Objekt in die erwartete Steuerelement-Klasse, und schon können Sie alle Eigenschaften des auslösenden Steuerelements auslesen.

Name der Eigenschaft	Typ	Beschreibung
Checked	Boolean	Selektiert oder nicht?
Name	String	Name der Gruppe, zu der ein Optionsfeld gehört
Value	String	Optionsfeldern kann ein gesonderter Wert zugewiesen werden.

Tabelle 6.22 Eigenschaften der Klasse HtmlInputRadioButton

6.5.8 HtmlInputHidden

Versteckte Felder vom Typ input type="hidden" verarbeitet ASP.NET mit Hilfe der Klasse HtmlInputHidden. Die Eigenschaft Value enthält den jeweiligen Inhalt. Die Klasse unterstützt das ServerChange-Ereignis. Es wird ausgelöst, wenn sich der Wert eines versteckten Feldes zwischen den Serveraufrufen ändert. Auf diese Weise lassen sich beispielsweise unerwünschte Manipulationen an versteckten Feldern erkennen. Die Klasse verfügt ansonsten über keine zusätzlichen Eigenschaften. Das Beispiel im Abschnitt 6.5.1, Ein Beispiel mit mehreren Eingabeelementen, enthält auch ein verstecktes Feld.

Wenn Sie selbst Informationen zwischen den Seitenaufrufen speichern wollen, bieten sich neben den herkömmlichen versteckten Feldern noch andere Methoden an. Sie können beispielsweise Daten im Viewstate speichern oder serverseitige Sessions anlegen. Mehr dazu erfahren Sie in Kapitel 11, Der Status von Seiten, Sitzungen und Applikationen.

<< zurück

<top>

vor >>