Glengamoi (Forum) · AspHeute · .NET Heute (RSS-Suche) · AspxFiles (Wiki) · .NET Blogs

Einführung in ASP.NET Web Forms

Geschrieben von: Christian Holm
Kategorie: ASP.NET

This printed page brought to you by AlphaSierraPapa

Wenn Sie mit ASP gearbeitet haben, dann sind Ihnen sicherlich Formulare ein Begriff. Die FORM, INPUT, SELECT usw. HTML Elemente für Formulare sind Ihnen ebenso geläufig, und Sie haben auch mit gePOSTeten Daten gearbeitet - über die Request.Forms Collection, dem Weg zum Auslesen der Werte der Felder. Was es nicht gab, ist ein einheitliches serverseitiges Controlmodell, das Ihnen das Arbeiten mit Werbformularen wie mit Visual Basic Formularen erlaubt - mit Eigenschaften und Methoden der jeweiligen Formularelemente.

Mit ASP.NET haben Sie genau diese Funktionalität - jedes Element eines Formulars ist auch am Server in ASP.NET als "echtes" Objekt - eine Control - ansprechbar. Damit eröffnen sich völlig neue Perspektiven der Formularabarbeitung, wie sie unter ASP nicht oder nur sehr schwer realisierbar war. Das Feature nennt sich ASP.NET Web Forms, und man kann die Controls in zwei Varianten, einer rückwärtskompatiblen als auch einer völlig neuen Variante verwenden:

HTML Controls: das ist die server-seitige Repräsentation von HTML Formularelementen, wie wir sie bereits kennen. Die Funktionalität ist sehr stark an die tatsächliche HTML Funktionalität angelehnt, was dazu führt, daß die Programmierung der einzelnen Elemente nicht vollständig konsistent ist. Mit diesem Modell kann man existierende Formulare 1:1 übernehmen.
Web Controls: Diese Controls haben mehr Features als HTML Controls, und lehnen sich nicht so stark daran an, wie sie am Client gerendert werden. Diese Controls umfassen nicht nur Formularelemente, sondern auch Spezialcontrols wie zum Beispiel einen Kalender. Dies ist der Weg, den man gehen sollte, wenn man ASP.NET Seiten von Grund auf neu programmiert.

In diesem Artikel werden wir uns mit den Web Controls beschäftigen, da diese für alle von uns Neuland darstellen. Da wir uns hauptsächlich mit den Controls selbst - und nicht mit Formularprogrammierung beschäftigen, möchte ich bereits hier auf die noch folgenden Artikel hinweisen. In diesen geht es dann um Auswertung, Validierung von Inhalten und auch Ereignisprogrammierung.

Voraussetzung um den Sourcecode dieses Artikels verwenden zu können ist eine Installation des Microsoft .NET Framework SDK's auf einem Webserver. Weiters ist es von Vorteil, daß der Leser schon Grundkenntnisse bzw. Erfahrung in Programmiertechniken besitzt - es finden sich etliche Artikel auf diesem Server, um das notwendige Wissen von Grund auf zu erlernen.

Warum ASP.NET Web Forms?

Zur Beanwortung möchte ich Ihnen die Keyfeatures aufzählen (und Ihnen somit den Mund wäßrig machen...):

Rapid Development

Web Forms - Grundfunktionalität für alle Browser (HTML Formularelemente)
Nur 1 Sourcecode für alle Browser, die Controls passen sich an den Browser an
Der verwendete Code ist kompatibel zu Ihren bisherigen ASP Seiten (HTML Controls)

Einheitliches Objektmodell

modularer Aufbau der Web Forms
ereignisbasierendes Programmiermodell für serverseitig dynamisch generierte Webseiten
der View State bleibt erhalten (nach einem POST stehen die eingegebenen Werte automatisch wieder in den Controls)

Überzeugendes optisches Design

einfache Integration in HTML, jedoch übersichtliche Trennung von HTML-Design und ASP.NET Code
ASP.NET Web Forms bieten WYSIWYG Designunterstützung, d.h. Visual Studio.net kann die Eigenschaften setzen, beziehungsweise einen Designer anbieten (für kompliziertere Controls).

Bevor wir die Controls besprechen, möchte ich noch 2 wesentliche Punkte besprechen, die für das Verständnis der Controls in Web Forms unerlässlich sind:

Parsing eines Web Forms
Das State Management

Parsing eines Web Forms

Früher war es in ASP so, daß HTML- und ASP-Code miteinander "vermischt" waren. Die ASP-Engine filterte den ASP-Code aus dem HTML heraus, interpretierte diesen dann und gab diesen in Form von statischen HTML an den Client zurück. Bei jedem Page-Request der gleichen Seite wieder die gleichen Schritte.

Grundsätzlich besteht ein Web Form auch aus zwei Bestandteilen - dem Design- und dem Anweisungs-Code. Der größte Unterschied ist, daß eine ASP.NET Seite und somit auch die Web Forms kompiliert anstatt interpretiert wird und erst als Ergebnis HTML ausgegeben wird.

Im Prinzip läuft folgendes ab: Der Browser des Clients schickt einen Request, der zu einer ASP.NET Seite weist, an den Server und die ASP.NET Runtime kompiliert die Datei bei ihrem erstmaligen Aufruf in eine .Net Klasse. Die kompilierte Klasse steht dann auch für weitere Requests zur Verfügung, d.h. sie muß also nur einmal kompiliert werden. Dies und die Tatsache, daß der Code an sich kompiliert wird und trotzdem dynamisch verwendbar ist bringt enorme Geschwindigkeitsvorteile.

Das State Management

Web Forms speichern selbsttätig den sogenannte View State. Dieser beinhaltet Informationen über die im Formular enthaltenen Controls, ihre Werte, ihre Eigenschaften, usw. Dadurch hat man, auch wenn das Formular mehrfach gepostet wird, immer die Einstellungen der Controls konsistent zur Verfügung.

Der Grund, warum ich den View State vorab erwähne ist daß sich dieser als zusätzliches verstecktes Feld für jedes Formular auf einer Seite manifestiert. Wer also den HTML Code ansieht, weiß nun wozu dieses zusätzliche Feld dient.

Einsatz der ASP.NET Web Form Controls

Wie eingangs schon erwähnt möchte ich Ihnen mit diesem Artikel nur die Grundprinzipien der Web Form Controls präsentieren. Die Validierung der Controls und die Ereignisbehandlung werde ich in den nächsten Artikeln zu diesem Thema besprechen.

Die Control Elemente

Die folgenden Sektionen demonstrieren die am häufigsten verwendeten Grund-Controls der ASP.NET Web Forms:

Statischer Text: <asp:Label>
Eingabefeld: <asp:TextBox>
Listenauswahl: <asp:DropDownList>
Auswahlfeld: <asp:CheckBox>
Einfache Schaltfläche: <asp:Button>
Radiobutton: <asp:RadioButton>
Hyperlink: <asp:Hyperlink>

Beachte: Wenn Sie die Beispiele ausprobieren und auf die Controls klicken und z.B. bei der Dropdown Liste eine Auswahl treffen, werden Sie feststellen, daß eigentlich fast nichts passiert. Was Sie allerdings sehen, ist daß die Controls den State (also das Aussehen) als auch die eingegebenen Werte behalten - wenn das Formular an den Server zurückgepostet wird.

Beginnen wir nun mit Beispielen im Detail.

Statischer Text - Die Label Control

Die Label-Control erlaubt Ihnen statischen Text anzuzeigen, z.B. für einen Anweisungstext (label.aspx).

<%@ Page Language="C#" %>
<html>
<body>

<h2>ASP.NET Web Forms Demo</h2>
<p><b>Label-Control:</b></p>
   <form method="post" runat="server">
	<asp:Label id="text" runat="server" 
	    Text="Das ist statischer Text"/>
   </form>
</body>
</html>

Wie Sie sehen, haben alle Controls inklusive des form Tags den Zusatz runat="server". Damit werden Controls definiert, die eine Repräsentation als Objekt für den Code der Seite haben sollen. Vergessen Sie dieses Tag, dann können Sie diese Controls aus dem Code heraus nicht ansprechen. Ach ja, das Action Attribut wird automatisch mit dem Namen des Scripts eingefügt.

Das Eingabefeld

In der Textbox-Control können Sie einen beliebigen String (Buchstaben, Ziffern) eingeben. Diese ist ähnlich zu INPUT TYPE="TEXT", und wird am Client auch als solche repräsentiert (textbox.aspx).

<%@ Page Language="C#" %>
<html>
<body>

<h2>ASP.NET Web Forms Demo</h2>
<p><b>Eingabefeld:</b></p>
	 <form method="post" runat="server">
		Eingabetext: <asp:textbox id="input" runat="server"/>
	</form>

</body>
</html>

Dieser Sourcecode (inklusive eines Submit Buttons) produziert folgendes Eingabeformular:

Posten Sie das Formular mit eingegeben Daten gegen den Server, und schauen Sie sich den HTML Sourcecode an - der Wert, den Sie vorher eingegeben haben, steht nun als Vorgabewerte in der Textbox. Und das, ohne daß Sie eine Zeile Code schreiben mußten. Im Artikel über Validation Controls zeige ich Ihnen dann, wie man sehr einfach die Eingabe des Users auch überprüfen kann - wieder ohne Code schreiben zu müssen.

Die Listenauswahl

Die DropDownList-Control öffnet beim Anklicken auf den Pfeil nach unten eine Liste, in der Sie eines der angezeigten Listenelemente auswählen können. Auch hier wird der Wert zwischen POST's erhalten (dropdownlist.aspx).

<%@ Page Language="C#" %>
<html>
<body>

<h2>ASP.NET Web Forms Demo</h2>
<p><b>DropDownList-Control:</b></p>
	<form method="post" runat="server">
	
	Auswahl:  <asp:dropdownlist id="Auswahl" runat="server">
                          <asp:listitem>gestern</asp:listitem>
                          <asp:listitem>heute</asp:listitem>
                          <asp:listitem>morgen</asp:listitem>
                  </asp:dropdownlist>	   
   </form>
</body>
</html>

Das Auswahlfeld

Mit der CheckBox-Control können Sie durch Auswählen des Kästchens eine Option aktivieren oder deaktivieren. Diese wird meist für Ja/Nein Entscheidungen auf Formularen verwendet (checkbox.aspx):

<%@ Page Language="C#" %>
<html>
<body>

<h2>ASP.NET Web Forms Demo</h2>
<p><b>CheckBox-Control:</b></p>
   	
 <form method="post" runat="server">
   <asp:CheckBox id="Auswahlfeld" runat="server" Text="Auswahloption"/>
 </form>
 
</body>
</html>

Der einfache Button

Die Button-Control funktioniert vom Prinzip her wie ein in HTML definierter Button. Sie können damit Befehle ausführen lassen, und damit z.B. einen "Submit"-Button oder "Login"-Button generieren (button.aspx):

<%@ Page Language="C#" %>
<html>
<body>

<h2>ASP.NET Web Forms Demo</h2>
<p><b>Button:</b></p>

	 <form method="post" runat="server">
		<asp:button text="Hier Klicken" runat="server"/>
		<%-- Das in der Control enthaltene 'Command="command"' --%>
		<%-- Statement fehlt hier bewußt, da nur Demo --%>
	 </form>
	 
</body>
</html>

Natürlich können Sie statt dem langweiligen 08/15 Button, der standardmäßig verfügbar ist, eine Graphik verwenden. Alles, was am Client an Formaten dargestellt werden kann, darf als Button-Image verwendet werden (ibutton.aspx).

<%@ Page Language="C#" %>
<html>
<body>

<h2>ASP.NET Web Forms Demo</h2>
<p><b>Graphik-Button:</b></p>

	<form method="post" runat="server">
	 	<asp:ImageButton id="ImageButton" runat="server"
			ImageUrl="ibutton.png"/>
	</form>
</body>
</html>

Der Radiobutton

Die Radiobutton-Control ermöglicht Ihnen die Auswahl eines Elements aus einer Gruppe von Elementen (rbutton.aspx).

<%@ Page Language="C#" %>
<html>
<body>

<h2>ASP.NET Web Forms Demo</h2>
<p><b>Radiobutton:</b></p>

  <form method="post" runat="server">
	
  Optionen:<br>
    <asp:RadioButton id="RadioButton1" text="gestern" 
       Checked="True" GroupName="RadioAuswahl" 
       runat="server"/><br>
    <asp:RadioButton id="RadioButton2" text="heute" 
       GroupName="RadioAuswahl" 
       runat="server"/><br>	     
    <asp:RadioButton id="RadioButton3" text="morgen" 
       GroupName="RadioAuswahl" 
       runat="server"/>
  </form>
</body>
</html>

Beachte: Um eine Exklusivauswahl zu ermöglichen müssen Sie in allen Statements der Radiobutton-Control denselben Gruppennamen verwenden (z.B. im vorigen Beispiel: GroupName="RadioAuswahl").

Mit dem Checked="True" Statement können Sie die standardmäßig ausgewählte Option angeben. Wenn das Formular mit einem anderen Wert gePOSTet wird, dann wird der Standardwert natürlich nicht gesetzt, sondern die Auswahl des Benutzers.

Der Hyperlink

Die Hyperlink-Control erstellt einen Hyperlink zu der Webseite, die im NavigateUrl Attribut eingetragen ist. Für die Beispieldatei hyperlink.aspx ist dies http://www.aspheute.com (hyperlink.aspx).

<%@ Page Language="C#" %>
<html>
<body>

<h2>ASP.NET Web Forms Demo</h2>
<p><b>Hyperlink:</b></p>

	<form action="hyperlink.aspx" method="post" runat="server">
	
		<asp:Hyperlink id="hyperlink" runat="server"
   			NavigateUrl="http://www.aspheute.com"
   			Text="ASPHeute"
		/>
	</form>
</body>
</html>

Ähnlich wie beim Graphik-Button können Sie statt dem trivialen Text-Link auch eine Graphik verwenden, indem Sie der Control das Attribut ImageUrl="url" zuweisen. Falls Sie dieses definieren, hat das ImageUrl="url"-Statement Vorrang gegenüber dem Text, d.h. der Text wird nur angezeigt wenn die Graphik nicht gefunden wird oder der Browser keine Graphiken unterstützt (soll ja bei manchen Browsern vorkommen!).

Sie können dem Hyperlink-Control auch das Target-Fenster vorgeben, in dem der Hyperlink die URL anzeigen soll. Dies geschieht mit Hilfe des Target="window" Attributs. Das Attribut kann den Namen des Fensters oder die Frame-Reference (z.B.: _TOP) enthalten.

Schlußbemerkung

ASP.NET Web Forms und die Controls stellen ein sehr mächtiges Werkzeug für die Programmierung von Websites dar. Obwohl der ASP.NET Code nicht wie HTML aussieht, wird für den Browser passendes HTML generiert. Der Sourcecode der Controls beschränkt sich auf ein paar wenige Zeilen, die State-Erhaltung erfolgt automatisch. In reinem HTML und nur mit ASP war diese einfache Aufgabenstellung bereits sehr aufwendig - und erforderte Programmierung.

Ebenso wenig (bis gar keine) Programmierung erfordert die Validierung von eingegebenen Daten. Die Validierung wird das Thema eines kommenden Artikels. Bis bald!