Einstieg in ASP.NET – 3-89842-302-6 – 6.4 HtmlContainerControl 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.4 HtmlContainerControl und abgeleitete Klassen

Fast alle HTML-Elemente können andere Elemente und Text enthalten. Für diese Kategorie stellt ASP.NET die abstrakte Basisklasse HtmlContainerControl zur Verfügung, von der eine Hand voll instanzierbarer Klassen abgeleitet sind. Die meisten Container-Elemente fallen unter die Kategorie HtmlGenericControl. Elemente wie title, b, i, div, center, font usw. werden serverseitig mit Hilfe dieser Klasse verwaltet. Für einige wenige Container-Elemente gibt es spezialisierte Klassen. Für Tabellen stehen HtmlTable, HtmlTableCell und HtmlTableRow zur Verfügung. Hyperlinks können mit HtmlAnchor gesteuert werden und HtmlForm, HtmlButton, HtmlSelect und HtmlTextArea bilden die Klassen für die entsprechenden Formularelemente.

6.4.1 Die Basisklasse HtmlContainerControl

Ein Container-Steuerelement »enthält« etwas. Was enthält es? Es kann Text und andere Steuerelemente enthalten. Den enthaltenen Steuerelementen geht es nicht viel anders. Wenn es sich auch um Container-Elemente handelt, können auch sie wieder Text und andere Steuerelemente enthalten. Offenkundig liegt hier eine rekursive Struktur vor. Die Aufgabe liegt nahe, diese Struktur mit Hilfe eines kleinen Skripts im Browser grafisch zu verdeutlichen. Für die Realisierung eines solchen Skripts stellen sich die folgenden Fragen, mit denen sich die für Container-Elemente typischen Eigenschaften in Erfahrung bringen lassen:

Wie lässt sich auf den Inhalt eines Container-Steuerelements zugreifen? Hierfür stehen zwei Eigenschaften zur Verfügung, die bereits gelegentlich erwähnt wurden:

innerHtml enthält den HTML-Code, der zwischen Start- und Ende-Tag liegt,

innerText enthält den Text, der zwischen Start- und Ende-Tag liegt.

Enthält ein Container-Steuerelement weitere Steuerelemente? Die Antwort darauf liefert die Methode HasControls, die von der Klasse Control vererbt ist.

Welche Steuerelemente enthält ein Container-Control, sofern es Steuerelemente enthält? Die Antwort liefert die von Control geerbte Eigenschaft Controls, die ein Objekt der Klasse ControlCollection zurückgibt.

Mit diesem Werkzeug ausgestattet, lässt sich eine rekursive Prozedur erstellen, die die verschachtelte Struktur einer Seite oder eines Abschnitts darstellt. HtmlContainer01.aspx enthält die benötigten Skripte:

<!-- HtmlContainer01.aspx -->
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Dim sb As StringBuilder = New StringBuilder()

Sub Page_Load (ByVal Sender As Object, _
               ByVal E As EventArgs)
   zeigeControl (meinAbschnitt, 0)
   ausgabe.innerHTML = sb.toString()
End Sub

Sub zeigeControl (ByVal inCtrl As Control, _
                  ByVal inStufe As Integer)
   Dim i As Integer
   sb.Append ("<br>")
   For i = 1 to inStufe
      sb.Append ("   ")
   Next
   sb.Append ("<b>")
   sb.Append (inCtrl.toString())
   sb.Append ("</b> : ")
   
   If TypeOf inCtrl Is HtmlControl Then
      sb.Append (CType(inCtrl, HtmlControl).TagName)
   Else If TypeOf inCtrl Is LiteralControl Then
      sb.Append (Server.HtmlEncode _
      ((CType(inCtrl, LiteralControl).Text)))
   End If
   
   If inCtrl.HasControls() Then
      Dim myStufe As Integer = inStufe + 1
      Dim myCtrl as New Control()
      For Each myCtrl in inCtrl.Controls
         zeigeControl (myCtrl, myStufe)
      Next 
   End If
End Sub

</script>
<html><head><title>HtmlContainerControl-Demo
</title></head><body>
<div id="meinAbschnitt" runat="server">
<img src="img/benjaminklein.jpg" align="left">
<p>Hier steht ein <b>Absatz</b> und außerdem gibt 
es auch noch einen 
<a href="HtmlContainer01.aspx">Link</a>, 
der aber nur zur <i>gleichen</i> Seite führt.</p>
Das steht nach dem Absatz.</div><hr>
<pre runat="server" id="ausgabe"></pre>
</body></html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.4 HTML-Elemente ohne runat="server"-Zusatz werden von ASP.NET zu einem einzelnen großen Objekt der Klasse LiteralControl zusammengezogen.

Im HTML-Block der aspx-Seite wird ein serverseitiges div-Element definiert, das ein Bild, einen Hyperlink und etwas formatierten Text enthält. Beim Laden der Seite ruft Page_Load die Prozedur zeigeControl auf und übergibt ihr das div-Element meinAbschnitt. ZeigeControl hangelt sich rekursiv durch die Elemente, die meinAbschnitt enthält, und sammelt dabei seine Erkenntnisse in dem StringBuilder-Objekt sb. Nach getaner Arbeit werden die gesammelten Erkenntnisse in das Feld ausgabe geschrieben.

Die Prozedur zeigeControl erhält zwei Parameter. inCtrl liefert das Steuerelement, das dargestellt werden soll. inStufe übermittelt die Einrücktiefe. Am Anfang ist inStufe gleich 0. Bei jeder Verschachtelungstiefe wird inStufe um 1 erhöht. zeigeControl schreibt zunächst das Umbruchtag <br> in das StringBuilder-Objekt und eine zur Einrückstufe passende Anzahl von Leerzeichen. Dann nimmt die Prozedur eine Unterscheidung vor zwischen Objekten, die von der Basisklasse HtmlControl abstammen, und Objekten vom Typ LiteralControl. Bei Objekten, die von HtmlControl abstammen, notiert sich die Prozedur die Eigenschaft TagName im sb-Objekt. Bei Objekten vom Typ LiteralControl wird der Text-Bestandteil ausgegeben. In beiden Fällen muss jeweils zunächst mit CType das inCtrl-Objekt erst in den gewünschten Ziel-Typ konvertiert werden.

Der Aufruf

sb.Append (inCtrl.TagName)

würde beispielsweise nicht funktionieren. Die Fehlermeldung lautet:

'TagName' is not a member of 'System.Web.UI.Control'.

Das Objekt, das der Prozedur als Objekt vom Typ Control übergeben wurde, muss zunächst in ein Objekt vom Typ HtmlControl konvertiert werden, um auf die zu HtmlControl gehörende Eigenschaft TagName zugreifen zu können:

sb.Append (CType(inCtrl, HtmlControl).TagName)

Entsprechend muss beim LiteralControl-Objekt verfahren werden. Anschließend prüft das Skript mit If inCtrl.HasControls(), ob das aktuelle Objekt selbst weitere Steuerelemente enthält. In diesem Fall ruft das Skript für jedes Steuerelement die Prozedur zeigeControl auf:

   For Each myCtrl in inCtrl.Controls
      zeigeControl (myCtrl, myStufe)
   Next

Abbildung 6.4 zeigt die Darstellung im Browser. Das Skript erkennt lediglich zwei Objekte. Das erste Objekt ist der div-Abschnitt. Das zweite Objekt ist alles, was im div-Abschnitt enthalten ist. Wie ist das zu erklären? Ganz einfach. Nur solche Elemente werden zu einem serverseitigen Objekt »veredelt«, die mit dem Attribut runat="server" ausgezeichnet sind. Das ist nur bei dem div-Element der Fall. Der ganze »Rest« wird zu einem einzigen LiteralControl zusammengefasst. So kommt es, dass dieses einzelne LiteralControl-Objekt jede Menge HTML-Elemente enthält.

Ein völlig anderes Bild ergibt sich, wenn man testweise einmal alle Elemente im div-Bereich mit dem Zusatz runat="server" auszeichnet. Der HTML-Code lautet damit (HtmlContainer02.aspx):

<div id="meinAbschnitt" runat="server">
<img src="img/benjaminklein.jpg" runat="server" 
align="left">
<p runat="server">Hier steht ein 
<b runat="server">Absatz</b> und außerdem gibt 
es auch noch einen 
<a href="HtmlContainer01.aspx" runat="server">Link</a>, 
der aber nur zur <i runat="server">gleichen</i> Seite 
führt.</p>Das steht nach dem Absatz.</div>

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.5 Für jedes Element mit dem Zusatz runat="server" hat ASP.NET ein eigenes Objekt angelegt.

Abbildung 6.5 zeigt ein völlig verändertes Bild. Am Anfang steht wieder das HtmlGenericControl für das div-Element. Es folgt ein LiteralControl, in dem aber nichts drinsteht. Was ist das? Das ist lediglich das Absatzzeichen, das im Quellcode zwischen dem div-Tag und dem folgenden img-Tag steht. Danach folgt ein Objekt der Klasse HtmlImage. Wunderbar. ASP.NET hat von selbst erkannt, dass es für img-Elemente über die Klasse HtmlImage verfügt, und hat eine entsprechende Instanz erstellt. Es folgt wieder ein leeres LiteralControl-Objekt (wieder bloß ein Absatzzeichen). Dann folgt für das p-Element ein HtmlGenericControl-Objekt. Alles, was dieser Absatz enthält, ist in den folgenden Zeilen weiter eingerückt. Das b- und das i-Element werden in Objekten der Klasse HtmlGenericControl verwaltet. Der Text dazwischen findet sich jeweils in Objekten vom Typ LiteralControl wieder. Für den Hyperlink hat ASP.NET ein Objekt vom Typ HtmlAnchor angelegt.

6.4.2 HtmlGenericControl

TagName ist die einzige Eigenschaft, die die Klasse HtmlGenericControl den übrigen Eigenschaften hinzufügt, die diese Klasse von Control, HtmlControl und HtmlContainerControl geerbt hat. Dieses »generische« HTML-Serversteuerelement verwendet ASP.NET für alle HTML-Serversteuerelemente, für die keine spezialisierte Klasse zur Verfügung steht. Ein Beispiel speziell für HtmlGenericControl erübrigt sich. Dieses allgegenwärtige Objekt ist bei den anderen Beispielen bereits oft vorgekommen.

6.4.3 HtmlAnchor

Die Klasse HtmlAnchor erlaubt die serverseitige Verarbeitung von Hyperlinks. Mit den Eigenschaften HRef, Name, Target und Title können Sie die bekannten Eigenschaften von Hyperlinks beeinflussen. Tabelle 6.6 fasst die Eigenschaften von HtmlAnchor zusammen.

Name der Eigenschaft	Typ	Beschreibung
HRef	String	Der Ziel-URL der Hypertextreferenz <a href="...">
Name	String	Für Sprünge innerhalb einer Seite <a name="...">
Target	String	Nennt das Zielfenster bzw. den Ziel-Frame für die Referenz. Die Werte müssen mit einem Buchstaben beginnen. Sonderwerte sind die folgenden vier Werte, die alle mit einem Unterstrich beginnen: _blank öffnet ein neues Browserfenster, _parent öffnet die Referenz im unmittelbaren Elternframeset, _self öffnet die Referenz im dem Frame, der gerade den Fokus hat, _top öffnet die Referenz im aktuellen Fenster ohne Verwendung von Frames.
Title	String	Der Text, der als Tooltip erscheint, wenn der Mauszeiger auf den Link zeigt
InnerText und InnerHtml (von HtmlContainerControl geerbt)	String	Der Text, der als Link angeklickt werden kann

Tabelle 6.6 Eigenschaften der Klasse HtmlAnchor

HtmlAnchor01.aspx zeigt ein einfaches Beispiel. In der Page_Load-Ereignisprozedur wird ein Hyperlink zusammengesetzt. Abbildung 6.6 zeigt das erwartete Ergebnis mitsamt dem erzeugten HTML-Code.

<!-- HtmlAnchor01.aspx -->
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub Page_Load (ByVal Sender As Object, _
               ByVal E As EventArgs)
   meinLink.innerHTML = _
                "Hier geht's zu <b>meiner</b> Website"
   meinLink.HRef ="http://www.mlohrer.de"
   meinLink.Title = "www.mlohrer.de"
   meinLink.Target = "_top"   
End Sub
</script>               
<html><head><title>HtmlAnchor-Demo</title></head>
<body>
<a runat="server" id="meinLink"></a>
</body></html>

Zusätzlich bietet die Klasse HtmlAnchor die Möglichkeit, eine Art serverseitigen Link zu erstellen, wenn der Eigenschaft OnServerClick der Name einer entsprechenden Ereignisprozedur zugewiesen wurde. Das Verfahren funktioniert jedoch nur dann, wenn der Link in ein serverseitiges Formular eingebettet ist. Beim Anklicken des Links wird das umgebende Formular zum Server versandt und die Ereignisprozedur wird ausgeführt. HtmlAnchor02.aspx demonstriert das Verfahren.

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.6 Die Klasse HtmlAnchor bietet zusätzliche Eigenschaften, um die besonderen Merkmale von Hyperlinks beeinflussen zu können.

<!-- HtmlAnchor02.aspx -->
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub Page_Load (ByVal Sender As Object, _
               ByVal E As EventArgs)
   meinLink.innerHTML = _
                "Hier bleibe ich auf der Website"
   meinLink.Title = "Hiergeblieben!"   
End Sub

Sub meinLink_Click (ByVal Sender As Object, _
                    ByVal E As EventArgs)
  ausgabe.innerText = _
  "Jetzt haben Sie den serverseitigen Link angeklickt!"
End Sub
</script>
<html><head><title>HtmlAnchor-Demo 2</title></head>
<body>
<form runat="server">
<a runat="server" id="meinLink" 
   onServerClick="meinLink_Click"></a><br><br>
<p runat="server" id="ausgabe" />
</form></body></html>

Abbildung 6.7 zeigt das Ergebnis im Browser einschließlich des erzeugten HTML-Quellcodes.

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.7 Ein serverseitiger Link funktioniert nur, wenn er auch in ein serverseitiges Formular eingebettet ist.

Achtung Der HTML-Quelltext zeigt deutlich, dass diese Art Link völlig anders funktioniert als ein gewöhnlicher Link. Der serverseitige Link ist darauf angewiesen, dass im Browser JavaScript aktiviert ist. Nur so kann durch das Anklicken eines Links ein Postback ausgelöst werden. Im href-Attribut des Hyperlinks steht der Aufruf der JavaScript-Routine, die mit submit() den Formularversand durchführt:

href="javascript:__doPostBack('meinLink','')"

Ein Anwender kann aus einer Website nur dann einen Nutzen ziehen, wenn er in ihr navigieren kann. Circa zehn Prozent aller Websurfer deaktivieren jedoch aus Sicherheitsgründen JavaScript. Es ist daher prinzipiell keine gute Idee, eine so grundlegende Funktion wie einen Link von aktiviertem JavaScript abhängig zu machen. Der Gebrauch von JavaScript sollte statt dessen auf solche Funktionen beschränkt werden, die lediglich einen zusätzlichen Komfort bieten, auf den zur Not verzichtet werden kann.

Die Navigation innerhalb einer Website von aktiviertem JavaScript abhängig zu machen, ist ein grundlegender Entwurfsfehler (der aber oft begangen wird). Aus diesem Grund ist vom Gebrauch der OnServerClick-Eigenschaft abzuraten.

6.4.4 HtmlTable, HtmlTableRow und HtmlTableCell

Für die serverseitige Bearbeitung von Tabellen stellt ASP.NET die Klasse HtmlTable zur Verfügung, die das HTML-Element table erfasst. Die Rows-Eigenschaft der HtmlTable-Klasse liefert eine HtmlTableRowCollection, die Objekte vom Typ HtmlTableRow enthält. Diese stehen für das HTML-Objekt tr. Ein Objekt vom Typ HtmlTableRow liefert über die Eigenschaft Cells eine Collection, die Objekte vom Typ HtmlTableCell enthält. Diese erfassen HTML-Elemente vom Typ td oder th (»table header« für den Tabellenkopf). Mit Hilfe von For Each-Schleifenkonstruktionen fällt es also leicht, die Bestandteile einer Tabelle zu durchlaufen.

Tipp Wenn man eine Tabelle, die im HTML-Block einer aspx-Datei definiert wird, serverseitig steuern möchte, reicht es übrigens aus, im table-Tag den Zusatz runat="server" einzutragen. Dieses Attribut muss nicht bei jedem tr- und td-Element wiederholt werden. ASP.NET bezieht die gegebenen Zeilen und Zellen der Tabelle automatisch mit ein.

Über die Eigenschaften der Tabellen-Klassen können Sie vorwiegend das Erscheinungsbild der einzelnen Tabellenbestandteile steuern. Die folgenden Tabellen informieren über die individuellen Eigenschaften dieser drei Klassen. Stolpern Sie bei HtmlTable nicht über eine Besonderheit. HtmlTable stammt zwar von der Klasse HtmlContainerControl ab, die die beiden Eigenschaften innerHtml und innerText definiert. HtmlTable unterstützt diese beiden Eigenschaften aber nicht.

Name der Eigenschaft	Typ	Beschreibung
Align	String	Für die horizontale Ausrichtung der Tabelle stehen die Werte Left, Center und Right zur Verfügung.
BgColor	String	Hintergrundfarbe für die gesamte Tabelle. Zur Auswahl stehen 16 vordefinierte HTML-Farbnamen (siehe Tabelle 6.10) oder eine Angabe in der Form #RRGGBB.
Border	Integer	Breite des Tabellenrahmens in Pixel
BorderColor	String	Farbe des Tabellenrahmens. Zur Auswahl stehen 16 vordefinierte HTML-Farbnamen (siehe Tabelle 6.10) oder eine Angabe in der Form #RRGGBB.
CellPadding	Integer	Zusätzlicher Abstand zwischen dem Zelleninhalt und dem Zellenrand
CellSpacing	Integer	Zusätzlicher Abstand zwischen den einzelnen Zellen
Height	String	Höhe der Tabelle als Anzahl Pixel oder als Prozentzahl (Prozentzeichen an die Zahl anhängen)
Rows	HtmlTableRowCollection	Das Objekt vom Typ HtmlTableRowCollection enthält Objekte vom Typ HtmlTableRow.
Width	String	Breite der Tabelle als Anzahl Pixel oder als Prozentzahl (Prozentzeichen an die Zahl anhängen)

Tabelle 6.7 Eigenschaften der Klasse HtmlTable

Name der Eigenschaft	Typ	Beschreibung
Align	String	In Bezug auf ein HtmlTableRow-Objekt steuert die Eigenschaft Align die horizontale Ausrichtung der Zelleninhalte dieser Tabellenzeile. Die Werte Left, Center und Right stehen zur Verfügung.
BgColor	String	Hintergrundfarbe dieser Tabellenzeile. Zur Auswahl stehen 16 vordefinierte HTML-Farbnamen (siehe Tabelle 6.10) oder eine Angabe in der Form #RRGGBB.
BorderColor	String	Zur Auswahl stehen 16 vordefinierte HTML-Farbnamen (siehe Tabelle 6.10) oder eine Angabe in der Form #RRGGBB.
Cells	HtmlTableCellCollection	Die HtmlTableCellCollection enhält Objekte vom Typ HtmlTableCell.
Height	String	Höhe der Tabelle als Anzahl Pixel. Bei Zeilen ist keine Prozentangabe möglich.
InnerHtml	String	Inhalt zwischen Start- und Ende-Tag
InnerText	String	Inhalt zwischen Start- und Ende-Tag mit zitierten Sonderzeichen (<b> wird zu <b> usw.)
VAlign	String	Definiert die vertikale Ausrichtung der Inhalte einer kompletten Tabellenzeile. Die Werte Top, Middle und Bottom stehen zur Verfügung.

Tabelle 6.8 Eigenschaften der Klasse HtmlTableRow

Name der Eigenschaft	Typ	Beschreibung
Align	String	Die horizontale Ausrichtung des Zelleninhalts. Die Werte Left, Center und Right stehen zur Verfügung.
BgColor	String	Hintergrundfarbe der Tabellenzelle. Zur Auswahl stehen 16 vordefinierte HTML-Farbnamen (siehe Tabelle 6.10) oder eine Angabe in der Form #RRGGBB.
BorderColor	String	Zur Auswahl stehen 16 vordefinierte HTML-Farbnamen (siehe Tabelle 6.10) oder eine Angabe in der Form #RRGGBB.
Colspan	Integer	Anzahl der Spalten, über die sich eine Zelle erstreckt
Height	String	Höhe der Tabelle in Anzahl Pixel
NoWrap	Boolean	Default-Wert ist false, d. h., dass der Text standardmäßig in eine weitere Zeile umbricht. Wenn der Wert true ist, erfolgt kein Zeilenumbruch für den Zelleninhalt.
RowSpan	Integer	Anzahl der Zeilen, über die sich eine Zelle erstreckt
VAlign	String	Definiert die vertikale Ausrichtung des Zelleninhalts. Die Werte Top, Middle und Bottom stehen zur Verfügung.
Width	String	Zellenbreite in Anzahl Pixel. Wirkt sich automatisch auf die gesamte Tabellenspalte aus.

Tabelle 6.9 Eigenschaften der Klasse HtmlTableCell

Farbname
Black
Blue
Cyan
Gray
Green
Lime
Magenta
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow

Tabelle 6.10 Die 16 HTML-Farbnamen, die Sie für die Eigenschaften BgColor und BorderColor der Tabellen-Klassen verwenden können

HtmlTable01.aspx demonstriert, wie Sie eine Tabelle codegesteuert erzeugen können. Abbildung 6.8 zeigt die Ausgabe im Browser einschließlich des erzeugten HTML-Codes.

<!-- HtmlTable01.aspx  -->
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub Page_Load (ByVal Sender As Object, _
               ByVal E As EventArgs)
Dim tr As HtmlTableRow
Dim td As HtmlTableCell
Dim i, k As Integer

' 3 Zeilen
For i = 1 to 3
   tr = New HtmlTableRow()
   meineTabelle.Rows.Add (tr)
   tr.Align="Center"
   ' 5 Spalten
   For k = 1 to 5 
      td = new HtmlTableCell()
      tr.Cells.Add (td)
      td.innerText = i.toString() & "," & k.toString()
      td.NoWrap = true
   Next
Next 
With meineTabelle
   .Border = 1
   .Align = "Left"
   .BorderColor = "Magenta"
   .CellPadding = 3
   .CellSpacing = 3
   .Height = "50%"
   .Width = "30%" 
End With               
End Sub
</script>               
<html><head><title>HtmlTable-Demo</title></head>
<body><table runat="server" id="meinetabelle" />
</body></html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.8 Mit der HtmlTable-Klasse können Sie Tabellen mit Hilfe von Skripten erstellen.

Im HTML-Abschnitt der aspx-Datei definieren Sie lediglich ein Tabellenelement, ohne Zeilen und Zellen festzulegen.

<table runat="server" id="meinetabelle" />

Über Page_Load füllen Sie die Tabelle mit Inhalten. Eine erste For-Schleife erzeugt jeweils ein neues HtmlTableRow-Objekt und fügt es an die Collection vom Typ HtmlTableRowCollection an, die über Rows zugänglich ist:

   tr = New HtmlTableRow()
   meineTabelle.Rows.Add (tr)

Die zweite For-Schleife erzeugt entsprechend die Tabellenzellen, die an die Collection vom Typ HtmlTableCellCollection angefügt werden, die über die Eigenschaft Cells zugänglich ist.

      td = new HtmlTableCell()
      tr.Cells.Add (td)

Außerdem werden jeweils einige Eigenschaften für Tabellenzeilen und -zellen definiert. Mit td.NoWrap = true wird beispielsweise dafür gesorgt, dass die Zelleninhalte nicht umbrechen.

6.4.5 HtmlForm

Formulare sind einer der wichtigsten Bestandteile überhaupt bei der Webprogrammierung, weil ein Anwender nur mit Hilfe von Formularen Eingaben vornehmen kann. In herkömmlicher HTML-Manier wird ein Formular auf diese Weise definiert:

<form method="post" action="myScript.asp"> ... </form>

Das method-Attribut legt die Übertragungsweise fest. Die Werte post und get stehen zur Auswahl. Mit get werden die Elemente des Formulars an den URL angehängt und es entstehen die bekannten Aufrufzeilen von der Form myScript.asp?txtEingabe=hallo. Mit method="post" werden die Formulareingaben hingegen im HTTP-Datenstrom codiert. Die post-Methode hat eine Reihe von Vorteilen. Die enthaltenen Datenmengen können größer sein und der Anwender wird nicht durch unförmige URLs verwirrt. post hat sich daher als Standardmethode für die Übertragung von Formularen etabliert.

Wann immer Sie unter ASP.NET ein Formular einsetzen wollen, das serverseitige Steuerelemente enthält, müssen Sie im HTML-Block der aspx-Seite ein solches form-Element mit dem Zusatz runat="server" einsetzen. Folgende Formulierung ist völlig ausreichend:

<form runat="server"> ... </form>

Beachten Sie folgende Punkte, wenn Sie unter ASP.NET ein Formular anlegen:

Wenn das Formular serverseitige Steuerelemente enthält, muss auch das form-Element den Zusatz runat="server" erhalten.

Geben Sie kein action-Attribut an. ASP.NET fügt im generierten Code automatisch das action-Attribut mit einem Verweis auf die eigene Seite ein.

Geben Sie kein method-Attribut an. ASP.NET fügt im generierten Code automatisch das Attribut method="post" ein. Diese Einstellung sollten Sie nur ausnahmsweise über das serverseitige HtmlForm-Objekt verändern.

Sie können optional ein id-Attribut angeben. Das erleichtert es Ihnen, das Formular in Ihren Skripten anzusprechen.

Eine aspx-Seite kann maximal ein Formular enthalten.

Tipp Eigentlich ist es ganz einfach. Verwenden Sie diese Form:

<form runat="server"> ... </form>

und alles wird wunschgemäß funktionieren.

Wenn ASP.NET ein form-Element mit dem Zusatz runat="server" vorfindet, erstellt es ein Objekt der Klasse HtmlForm. Tabelle 6.11 zeigt die spezifischen Eigenschaften von HtmlForm.

Name der Eigenschaft	Typ	Beschreibung
Enctype	String	Definiert die Codierung, in der die Formulardaten zum Server gesendet werden. Standard ist der Wert application/x-www-form-urlencoded. Gültige Werte sind außerdem multipart/form-data, text/plain und image/jpeg.
Method	String	GET oder POST, das ist hier die Frage. Standard ist POST und das sollte ohne Not auch nicht geändert werden.
Name	String	Eindeutiger Bezeichner
Target	String	Name des Zielfensters bzw. -frames. Vier Sonderbezeichnungen stehen zur Verfügung: _blank öffnet ein neues Browserfenster, _parent zeigt den Inhalt im unmittelbaren Eltern-Frameset an, _self zeigt den Inhalt im aktuellen Frame an, _top zeigt den Inhalt im aktuellen Fenster ohne Frames an.

Tabelle 6.11 Eigenschaften der Klasse HtmlForm

Die Datei HtmlForm01.aspx erweitert das Grundgerüst für ASP.NET-Formulare, wie es im Kapitel 4 mit dem ASP.NET-Crashkurs entwickelt wurde, lediglich um einen Button und einen Absatz und demonstriert damit die prinzipielle Funktionsweise. Beim ersten Laden der Seite trifft die Bedingung If Not IsPostBack zu und der Text Das ist der erste Aufruf. wird ausgegeben. Nachdem der Anwender OK angeklickt hat, erkennt der Server, dass ein Postback stattgefunden hat, und gibt die Meldung Das ist ein Postback. aus.

<!-- HtmlForm01.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.
      anzeige.innerHtml = "Das ist der erste Aufruf."
   Else
      ' Hier steht der Code, der nach dem 
      ' Formularversand ausgeführt wird.
      anzeige.innerHtml = "Das ist ein Postback."  
   End If
End Sub
</script>
<html><head><title>HtmlForm-Demo</title></head>
<body><h1>HtmlForm-Demo</h1>
<form runat="server" id="myForm">
<p runat="server" id="anzeige"></p>
<input type="submit" value=" OK ">
</form>
</body></html>

Das form-Element und das p-Element mit der id ausgabe haben jeweils den Zusatz runat="server", weil sie beide serverseitig bekannt sein müssen. Der eigentliche Submit-Button kommt ohne diese Angabe aus. Er erfüllt seinen Zweck – das Formular zum Server zu schicken –, auch ohne ASP.NET bekannt zu sein.

Abbildung 6.9 zeigt die Darstellung nach einem Postback einschließlich des generierten HTML-Codes. ASP.NET hat das form-Element um etliche Attribute ergänzt. Der Sinn des versteckten Viewstate-Felds wird später am Beispiel von Eingabefeldern erläutert.

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.9 Die Attribute des form-Elements und das versteckte VIEWSTATE-Feld hat ASP.NET generiert.

6.4.6 HtmlButton

Die Klasse HtmlButton repräsentiert das HTML-Element Button. Ein Button-Element ist jedoch etwas anderes als das bekanntere Element vom Typ input type="submit", das durch die Klasse HtmlInputButton repräsentiert wird.

Das Button-Element ist erheblich flexibler als das HTML-Element input type="submit". Für ein Button-Element können beispielsweise Style-Eigenschaften und DHTML-Eventhandler festgelegt werden. Die beliebten Mouseover-Effekte lassen sich auf diese Weise sehr einfach realisieren.

Achtung Der Nachteil des Button-Elements gegenüber dem klassischen input type="submit" ist seine geringere Kompatibilität mit den Browsern dieser Welt. Der Internet Explorer unterstützt das Element erst ab Version 4.0. Der Netscape Navigator 4.x kann mit dem Element nichts anfangen und zeigt lediglich die Beschriftung des Buttons an, die sich aber nicht anklicken lässt. Der Netscape 6.x unterstützt das Button-Element, weicht bei der Interpretation der Style-Eigenschaften aber in einigen Details vom Internet Explorer ab.

Außerdem funktioniert ein Button-Element generell nur bei aktiviertem JavaScript. Daher sollten Sie sich gut überlegen, ob Sie input type="submit" wirklich gegen Button eintauschen möchten. Denn die Schaltfläche Bestellen beispielsweise sollte schließlich immer funktionieren ...

Die HtmlButton-Klasse unterstützt das OnServerClick-Ereignis. Damit können Sie eine solche Schaltfläche sehr einfach mit einer serverseitigen Prozedur verknüpfen. HtmlButton01.aspx demonstriert einige Fähigkeiten des Button-Elements. Abbildung 6.10 zeigt die Darstellung im Browser und einen Ausschnitt aus dem erzeugten HTML-Code.

<!-- HtmlButton01.aspx --> 
<%@ Page Language="VB" Debug="True" Strict="True"  %>
<script runat="server">
Sub myButton1_OnClick(Source As Object, e As EventArgs)
   anzeige.innerText = "Button 1 angeklickt."
End Sub
Sub myButton2_OnClick(Source As Object, e As EventArgs)
   anzeige.innerText = "Button 2 angeklickt."
End Sub
</script>
<html><head><title>HtmlButton-Demo</title></head>
<body><h3>HtmlButton-Demo</h3>
<form runat="server" id="myForm">
<button runat="server" id="myButton1" 
        OnServerClick="myButton1_OnClick"
        style="font: 8pt verdana;
               background-color:lightgreen;
               border-color:black;
               height=30;
               width:150"
  onmouseover="this.style.backgroundColor='yellow'"
  onmouseout="this.style.backgroundColor='lightgreen'">
Button 1</button>&nbsp;

<button runat="server" id="myButton2" 
        OnServerClick="myButton2_OnClick"
        style="font: 8pt verdana;
               background-color:lightgreen;
               border-color:black;

               height=30;
               width:150"
  onmouseover="this.style.backgroundColor='yellow'"
  onmouseout="this.style.backgroundColor='lightgreen'">
Button 2</button>
<p runat="server" id="anzeige"></p>
</form></body></html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.10 Button-Elemente funktionieren nur bei aktiviertem JavaScript.

Die Zuweisung der Style-Eigenschaften und das Erzeugen des Mouseover-Effekts sind eine rein clientseitige Angelegenheit. ASP.NET kommt erst mit dem Attribut OnServerClick="myButton1_OnClick" ins Spiel. Der Skript-Block der aspx-Datei definiert die beiden Ereignisprozeduren für die Schaltflächen mit der Standard-Signatur:

Sub myButtonx_OnClick(Source As Object, e As EventArgs)

In diesem Fall wäre es eigentlich gar nicht nötig, für jedes Button-Element eine eigene Ereignisprozedur anzulegen. Eine einzige würde völlig ausreichen. Über das Argument Source könnte die Prozedur bequem die Quelle des Ereignisses ermitteln. Der Skript-Block der aspx-Datei hätte dann beispielsweise diese Form:

<script runat="server">
Sub myButton_OnClick(Source As Object, e As EventArgs)
   anzeige.innerText = _
    CType(Source,HtmlButton).InnerText & " angeklickt."
End Sub
</script>

Bei den beiden Button-Elementen passen Sie das OnServerClick-Attribut an:

OnServerClick="myButton_OnClick"

HtmlButton02.aspx fasst diese Änderungen zusammen. Was würde hier passieren? Beim Klicken wird das Ereignis ausgelöst und in jedem Fall die Prozedur myButton_OnClick ausgeführt. Die Prozedur erhält über das Argument Source eine Referenz auf das Objekt, das dieses Ereignis ausgelöst hat. Weil Sie wissen, dass das auslösende Objekt vom Typ HtmlButton ist, können Sie ohne Skrupel das übergebene Objekt in ein Objekt vom Typ HtmlButton konvertieren und damit auch auf die Eigenschaft innerText zugreifen. Genau das passiert mit diesem Ausdruck:

CType(Source,HtmlButton).InnerText

Somit haben Sie eine flexible Prozedur erstellt. Und sobald Sie die Beschriftung des Button-Elements ändern, ändert sich die Meldung automatisch gleich mit.

6.4.7 HtmlSelect

Wenn der Anwender einen oder mehrere Einträge aus einer Palette von Möglichkeiten selektieren soll, stehen unter anderem Kombinationsfelder und Listenfelder als Steuerelemente zur Verfügung. Beide Steuerelementtypen werden unter HTML mit Hilfe des select-Elements erstellt. ASP.NET verarbeitet sie mit Hilfe der Klasse HtmlSelect. Kombinationsfelder zeigen nur einen einzelnen Eintrag an, Listenfelder zeigen stets mehrere Einträge auf einmal an. Über das Attribut size steuern Sie die Anzahl der gleichzeitig sichtbaren Einträge. Mit size="1" erstellen Sie ein Kombinationsfeld. Jeder größere Wert erzeugt ein Listenfeld.

Da die folgenden Ausführungen sowohl auf Kombinationsfelder als auch auf Listenfelder zutreffen, ist im Folgenden nur noch von Listenfeldern die Rede.

Wenn Sie das Attribut Multiple im HTML-Code angeben, kann der Anwender mehrere Einträge selektieren, indem er während der Auswahl die Strg-Taste gedrückt lässt. Sonst kann der Anwender nur einen einzelnen Eintrag auswählen.

Beim Umgang mit Listenfeldern ergeben sich vorwiegend zwei Fragen:

Welche Möglichkeiten gibt es, zu dem Listenfeld Einträge hinzufügen?

Wie kann ein Skript erkennen, welche Einträge der Anwender selektiert hat?

Es gibt drei Methoden, um zu einem Listenfeld Einträge hinzuzufügen:

1. Statisch: Sie verwenden im HTML-Teil der aspx-Datei option-Elemente. 2. Dynamisch-iterativ: Im Skript-Teil der aspx-Datei verwenden Sie die Methode mySelect.Items.Add (myStringVar) für jeden Eintrag, der in die Liste aufgenommen werden soll. 3. Deklarativ mit Datenbindung: Statt mit mySelect.Items.Add (myStringVar) jeden Eintrag einzeln »abklappern« zu müssen, verknüpfen Sie das Listenfeld direkt mit einer Datenquelle, z. B. mit einem Array oder mit dem Abfrageergebnis einer Datenbank.

Alle drei Möglichkeiten sollen an einem Beispiel demonstriert werden. Bei einem Quiz stellen Sie dem Anwender eine Frage und bieten verschiedene Antwortmöglichkeiten zur Auswahl, von denen genau eine richtig ist.

Listenelemente statisch definieren

HtmlSelect01.aspx zeigt eine Realisierungsmöglichkeit mit statischen option-Elementen:

<!-- HtmlSelect01.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
     If mySelect.value = "Elbe" Then
        myAusgabe.innerHTML = "Richtig!"
     Else 
        myAusgabe.innerHTML = "Leider falsch!"
     End If
   End If
End Sub
</script>
<html><head><title>HtmlSelect-Demo</title></head>
<body><h3>HtmlSelect-Demo</h3>
<form runat="server" id="myForm">
An welchem Fluss liegt Dresden?
<select id="mySelect" runat="server">
  <option>Rhein</option>
  <option>Mosel</option>
  <option>Donau</option>
  <option>Elbe</option>
  <option>Oder</option>
</select>
<input type="submit" runat="server" value=" OK " /><br>
<p runat="server" id="myAusgabe" />
</form></body></html>

Beachten Sie, dass Sie den runat="server"-Zusatz nur beim select-Element, aber nicht bei den option-Elementen benötigen. Abbildung 6.11 zeigt die Darstellung im Browser und den generierten Quellcode. Beim Quellcode ist deutlich zu erkennen, dass ASP.NET Ihre option-Elemente alle um das Attribut value erweitert hat. Wenn Sie in einem option-Element das value-Attribut selbst nicht definieren, erzeugt ASP.NET dieses Attribut selbst und weist den jeweiligen Text als Wert zu.

Diese aspx-Seite erweitert das Standardgerüst für ASP.NET-Formulare im Übrigen lediglich um die Abfrage der selektierten Antwort. Bei einem Postback wird mySelect.value mit der richtigen Antwort "Elbe" verglichen. Der Absatz myAusgabe informiert den Anwender über Erfolg oder Misserfolg.

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.11 ASP.NET ergänzt in den option-Elementen automatisch ein value-Attribut.

Listenelemente dynamisch zuweisen

Wenn Sie die Logik der Seite stärker in den Programmcode verschieben wollen, bietet es sich an, die einzelnen Einträge des Listenfeldes beim Starten der Seite dynamisch einzufügen. HtmlSelect02.aspx zeigt eine entsprechende Möglichkeit.

<!-- HtmlSelect02.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
      If mySelect.value = "Elbe" Then
         myAusgabe.innerHTML = "Richtig!"
      Else 
         myAusgabe.innerHTML = "Leider falsch!"
      End If
   Else
      mySelect.Items.Add ("Rhein")
      mySelect.Items.Add ("Mosel")
      mySelect.Items.Add ("Donau")
      mySelect.Items.Add ("Elbe")
      mySelect.Items.Add ("Oder")
   End If
End Sub
</script>
<html><head><title>HtmlSelect-Demo</title></head>
<body><h3>HtmlSelect-Demo</h3>
<form runat="server" id="myForm">
An welchem Fluss liegt Dresden?
<select id="mySelect" runat="server" />
<input type="submit" runat="server" value=" OK " /><br>
<p runat="server" id="myAusgabe" />
</form></body></html>

Über seine Items-Eigenschaft liefert das HtmlSelect-Objekt ein Objekt vom Typ ListItemCollection. Einer ListItemCollection können Sie über die Methode Add neue Einträge hinzufügen. Beim ersten Aufruf der Seite trifft die Eigenschaft IsPostBack nicht zu. In diesem Fall werden die Einträge jeweils mit mySelect.Items.Add ("Flussname") an das Listenfeld angehängt. Die Auswertung der Selektion bleibt unverändert. Im HTML-Teil der aspx-Seite bleibt vom Listenfeld nur noch das eigentliche Element stehen:

<select id="mySelect" runat="server" />

Die Klassen ListItemCollection und ListItem

ASP.NET speichert einzelne Listenfeldeinträge in Objekten vom Typ ListItem. Diese bilden das Äquivalent zum option-Element. Die Gesamtheit aller Listenfeldeinträge bildet ein Objekt vom Typ ListItemCollection. Weil diese beiden Klassen für den Umgang mit Listenfeldern von grundlegender Bedeutung sind, sollen sie einzeln vorgestellt werden.

Tabelle 6.12 führt die häufig verwendeten Eigenschaften, Tabelle 6.13 die häufig verwendeten Methoden von ListItemCollection auf.

Tabelle 6.14 nennt Eigenschaften und Methoden der ListItem-Klasse.

Name der Eigenschaft	Typ	Beschreibung
Capacity	Integer	Maximal zulässige Anzahl von Einträgen
Count	Integer	Anzahl der enthaltenen ListItem-Objekte
Item(index)	ListItem	Default-Eigenschaft, die das ListItem-Objekt an der übergebenen Position zurückgibt

Tabelle 6.12 Eigenschaften von ListItemCollection

Methode	Beschreibung
Add (ListItem) oder Add(String)	Fügt ein weiteres ListItem-Objekt hinzu
AddRange(array)	Fügt ein Array mit ListItem-Objekten an
Clear()	Entfernt alle ListItem-Objekte
Contains(ListItem) As Boolean	Zeigt an, ob ein ListItem-Objekt enthalten ist
CopyTo (Array, Integer)	Kopiert die Inhalte in das Array ab der genannten Indexposition
FindByText (String) As ListItem	Gibt ein ListItem-Objekt mit dem genannten Text zurück
FindByValue(String) As ListItem	Gibt ein ListItem-Objekt mit dem genannten Wert zurück
GetEnumerator () As IEnumerator	Liefert ein iterierbares Objekt mit allen ListItem-Einträgen
IndexOf(ListItem) As Integer	Liefert die Indexnummer des übergebenen ListItem-Objekts. Liefert –1, wenn nichts gefunden wurde
Insert (Integer, ListItem) oder Insert (Integer, String)	Fügt an der genannten Indexposition ein neues ListItem-Objekt ein
Remove (ListItem) oder Remove (String)	Entfernt ein ListItem-Objekt
RemoveAt (Integer)	Entfernt ein ListItem-Objekt an der genannten Position

Tabelle 6.13 Methoden von ListItemCollection

Eigenschaft/Methode	Typ	Beschreibung
Attributes	AttributeCollection	Liefert die definierten Attribute, sofern sie nicht von der Klasse selbst unterstützt werden
Selected	Boolean	True, wenn der Eintrag selektiert ist, sonst False
Text	String	Der angezeigte Text
Value	String	Der zugewiesene Wert
Shared Function FromString(String) As ListItem	ListItem	Statische Methode, um ein ListItem-Objekt mit dem übergebenen Text zu erzeugen

Tabelle 6.14 Eigenschaften und Methoden von ListItem

Der Umgang mit ListItemCollection und ListItem ist recht einfach. Die Items-Eigenschaft eines HtmlSelect-Objekts liefert das zugehörige Objekt vom Typ ListItemCollection. Auf einen einzelnen Eintrag greifen Sie über die Item-Eigenschaft zu, der Sie die Indexposition des gewünschten Elements übergeben.

Mit den Methoden Contains, FindByText, FindByValue, IndexOf bietet ListItemCollection Methoden für den gezielten Zugriff auf einzelne Elemente. Sie bearbeiten die Collection mit Add, AddRange, Clear, Insert, Remove und RemoveAt. Und für die Weiterbearbeitung in anderen Zusammenhängen bieten sich CopyTo und GetEnumerator an.

Die Eigenschaften Text und Value der Klasse ListItem liefern jeweils den gewünschten Bestandteil. Über Selected erfahren Sie, ob ein Eintrag momentan selektiert ist.

In den folgenden Beispielen kommen die beiden Klassen immer wieder zum Einsatz.

Das Listenfeld an eine Datenquelle binden

Der fünfmalige Aufruf von mySelect.Items.Add wirkt aber noch immer etwas holprig. Falls Sie die Daten, die Sie im Listenfeld anzeigen möchten, ohnehin bereits in einem Array, in einem Objekt vom Typ ArrayList oder in einem anderem Objekt vorliegen haben, dessen Elemente sich einzeln durchlaufen lassen, dann ist ein direktes Databinding die effizienteste Methode, das Oberflächenelement mit Inhalten zu versorgen. Hierfür ersetzen Sie den Inhalt des Else-Zweiges von If IsPostBack Then ... beispielsweise gegen diese drei Anweisungen (HtmlSelect03.aspx):

      Dim fluesse() As String = _
         {"Rhein", "Mosel", "Donau", "Elbe", "Oder"}
      mySelect.DataSource = fluesse
      mySelect.DataBind()

Das hat den gleichen Effekt wie der fünfmalige Aufruf von mySelect.Items.Add (...).

Name der Eigenschaft	Typ	Beschreibung
DataMember	String	Wenn die über DataSource spezifizierte Datenquelle über mehrere Data-Sets verfügt, lässt sich hier bspw. die zu bindende Tabelle angeben.
DataSource	Object	Objekt mit iterierbaren Einträgen, z. B. ein Array oder ein andere Objekt, das das Interface IEnumerable oder IListSource implementiert
DataTextField	String	Name des Feldes, das an die Eigenschaft ListItem.Text gebunden werden soll
DataValueField	String	Names des Feldes, das an die Eigenschaft ListItem.Value gebunden werden soll
Items	ListItemCollection	Die Listeneinträge
Multiple	Boolean	Einfach- oder Mehrfachauswahl
Name	String	Eindeutiger Bezeichner
SelectedIndex	Integer	Indexwert des selektierten Eintrags. –1 bedeutet, dass kein Eintrag selektiert ist.
Size	Integer	Höhe des Steuerelements, Anzahl der gleichzeitig sichtbaren Einträge
Value	String	Wert des selektierten Eintrags

Tabelle 6.15 Eigenschaften der Klasse HtmlSelect

Das direkte Databinding bietet insbesondere in Verbindung mit Datenbanken mächtige Möglichkeiten. In Kapitel 12, ASP.NET und Datenbanken, wird dieses Thema vertieft.

Listenfelder mit separater Wert-Spalte

Listenfelder bieten die Möglichkeit, zu den textlichen Einträgen einen separaten Wert zu speichern. Im HTML-Code erreichen Sie das, indem Sie bei jedem option-Element ein zusätzliches value-Attribut definieren.

<option value="1">Wolga</option>

Sie haben bereits gesehen, dass ASP.NET dieses value-Attribut selbstständig ergänzt, wenn Sie es nicht selbst definieren. Sie können hier Werte eingeben, die vom jeweiligen Text abweichen. HtmlSelect04.aspx zeigt den Umgang mit einer solchen Konstruktion.

<!-- HtmlSelect04.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 
      myAusgabe.innerHTML = "Wert: " & mySelect.value
      myAusgabe.innerHTML += "<br>Bezeichner: " & _
       mySelect.Items.Item(mySelect.SelectedIndex).Text
      If mySelect.value = "4" Then
          myAusgabe.innerHTML += "<br>Richtig!"
      Else 
          myAusgabe.innerHTML += "<br>Leider falsch!"
      End If
   End If
End Sub
</script>
<html><head><title>HtmlSelect-Demo</title></head>
<body><h3>HtmlSelect-Demo</h3>
<form runat="server" id="myForm">
An welchem Fluss liegt Dresden?
<select id="mySelect" runat="server">
  <option value="1">Rhein</option>
  <option value="2">Mosel</option>
  <option value="3">Donau</option>
  <option value="4">Elbe</option>
  <option value="5">Oder</option>
</select>
<input type="submit" runat="server" value=" OK " /><br>
<p runat="server" id="myAusgabe" />
</form></body></html>

Der Zugriff auf mySelect.value fördert jetzt nicht mehr den Namen des ausgewählten Flusses, sondern die jeweils definierte Zahl zutage. Denken Sie also daran, die If-Abfrage entsprechend zu ändern.

Aus dieser Form

If mySelect.value = "Elbe"

wird diese Abfrage:

If mySelect.value = "4"

Abbildung 6.12 zeigt, dass zur Verdeutlichung bei der Ausgabe sowohl der Text als auch der Wert mit ausgegeben werden. Auf beide können Sie über die Eigenschaft Items zugreifen. Das Objekt vom Typ ListItemCollection enthält Elemente vom Typ ListItem. Auf ein einzelnes ListItem-Objekt greifen Sie über die Eigenschaft Items zu, indem Sie den Index angeben. Den Indexwert des selektierten Eintrags erhalten Sie über die Eigenschaft SelectedIndex. Und ein ListItem-Objekt verfügt schließlich über die Eigenschaften Text und Value, die Ihnen den Text und den value-Eintrag zur Verfügung stellen.

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.12 Ein Objekt vom Typ ListItem enthält sowohl Text als auch Wert eines Listeneintrags.

Der folgende Ausdruck liefert den Text des selektierten Eintrags:

mySelect.Items.Item(mySelect.SelectedIndex).Text

Tipp Da Item die Default-Eigenschaft von Items ist, funktioniert auch dieser Ausdruck:

mySelect.Items(mySelect.SelectedIndex).Text

Listenfelder mit Mehrfachauswahl

Wenn Sie ein Listenfeld mit Mehrfachauswahl definieren möchten, reicht es im HTML-Code aus, dem select-Element das Attribut multiple hinzuzufügen:

<select id="mySelect" runat="server" multiple>

ASP.NET erzeugt in diesem Fall automatisch ein Listenfeld, das heißt, es werden automatisch mehrere Einträge gleichzeitig angezeigt. Über das Attribut size können Sie die Anzahl der gleichzeitig sichtbaren Einträge steuern. Durch Gedrückthalten der Strg-Taste selektiert der Anwender mehrere Einträge.

Um die getroffene Auswahl auszuwerten, reicht es nicht aus, nur mySelect.value auszuwerten, denn value kann nur einen einzelnen Wert enthalten. Sie müssen jeden Eintrag einzeln daraufhin überprüfen, ob er selektiert wurde oder nicht. Mit einer For Each-Schleife durchlaufen Sie alle ListItem-Elemente von mySelect.Items und fragen jeweils die Eigenschaft Selected ab. HtmlSelect05.aspx demonstriert die Vorgehensweise. Abbildung 6.13 zeigt die Darstellung im Browser mit dem generierten Quellcode.

<!-- HtmlSelect05.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 ("Hier haben Sie geangelt: <br>")
      Dim i As ListItem
      For Each i in mySelect.Items
         If i.Selected
            sb.Append (i.Text)
            sb.Append ("<br>")
         End If 
      Next
      myAusgabe.innerHTML = sb.toString()
   End If
End Sub
</script>
<html><head>
<title>HtmlSelect mit Mehrfachauswahl</title>
</head><body>
<h3>HtmlSelect mit Mehrfachauswahl</h3>
<form runat="server" id="myForm">
In welchen Flüssen haben Sie schon einmal geangelt?<br>
<select id="mySelect" runat="server" multiple>
  <option>Rhein</option>
  <option>Mosel</option>
  <option>Donau</option>
  <option>Elbe</option>
  <option>Oder</option>
</select>
<input type="submit" runat="server" value=" OK " /><br>
<p runat="server" id="myAusgabe" />
</form></body></html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.13 Zur Auswertung eines Listenfeldes mit Mehrfachauswahl müssen Sie das zugehörige ListItemCollection-Objekt durchlaufen.

6.4.8 HtmlTextArea

Die Klasse HtmlTextArea bietet das ASP.NET-Äquivalent zum HTML-Element textarea. Die Attribute Cols und Rows definieren die Breite und die Höhe des Eingabeelements. Mit Value greifen Sie auf den jeweiligen Inhalt zu. Wenn Sie dem Attribut OnServerChange eine Funktion zuweisen, löst das Element nach einer Änderung automatisch ein Postback aus. Auf diese Weise kann beispielsweise eine Eingabeüberprüfung vorgenommen werden. HtmlTextArea01.aspx demonstriert den Einsatz dieses einfachen Steuerelements. Abbildung 6.14 zeigt die Darstellung im Browser.

<!-- HtmlTextArea01.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
      ausgabe.innerHTML = "Sie haben erzählt: <br>" & _
                           myTextarea.value
   End If
End Sub
</script>
<html><head><title>HtmlTextArea-Demo</title></head>
<body><h3>HtmlTextArea-Demo</h3>
<form runat="server" id="myForm">
Erzählen Sie mal etwas: <br>
<textarea cols="50" rows="10" runat="server" 
id="myTextarea"></textarea><br>
<input type="submit" 
       value="Jetzt habe ich genug erzählt!" /><br>
<p runat="server" id="ausgabe" />
</form></body></html>

Hier klicken, um das Bild zu Vergrößern

Abbildung 6.14 Die Klasse HtmlTextArea repräsentiert ein textarea-Element.

Name der Eigenschaft	Typ	Beschreibung
Cols	Integer	Anzahl der Spalten gemessen in Zeichenbreiten
Name	String	Gibt einen eindeutigen Bezeichner zurück, der mit UniqueID übereinstimmt
Rows	Integer	Höhe in Anzahl Zeilen
Value	String	Eingabetext

Tabelle 6.16 Eigenschaften der Klasse HtmlTextArea

<< zurück

<top>

vor >>