|
|
|
|
|
Einführung in ASP.NET Web Forms
Geschrieben von: Christian Holm 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:
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
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 FormsFrü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 ManagementWeb 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 ControlsWie 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 ElementeDie folgenden Sektionen demonstrieren die am häufigsten verwendeten Grund-Controls der ASP.NET Web Forms:
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 ControlDie 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 <%@ 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 ListenauswahlDie 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 AuswahlfeldMit 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 ButtonDie 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 RadiobuttonDie 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 HyperlinkDie 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ßbemerkungASP.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! Download des CodesKlicken Sie hier, um den Download zu starten. Verwandte Artikel
ASP.NET User Controls im Einsatz Links zu anderen SitesWenn Sie jetzt Fragen haben...Wenn Sie Fragen rund um die in diesem Artikel vorgestellte Technologie haben, dann schauen Sie einfach bei uns in den Community Foren der deutschen .NET Community vorbei. Die Teilnehmer helfen Ihnen gerne, wenn Sie sich zur im Artikel vorgestellten Technologie weiterbilden möchten.
Eine weitere sehr hilfreiche Resource ist das deutsche ASP.NET Wiki, das als zentrale Anlaufstelle für Tips, Tricks, Know How und alles Nützliche was man in seinem Alltag als (ASP).NET-Entwickler so braucht und entdeckt gedacht ist. Haben Sie Fragen die sich direkt auf den Inhalt des Artikels beziehen, dann schreiben Sie dem Autor! Unsere Autoren freuen sich über Feedback zu ihren Artikeln. Ein einfacher Klick auf die Autor kontaktieren Schaltfläche (weiter unten) und schon haben Sie ein für diesen Artikel personalisiertes Anfrageformular.
Und zu guter Letzt möchten wir Sie bitten, den Artikel zu bewerten. Damit helfen Sie uns, die Qualität der Artikel zu verbessern - und anderen Lesern bei der Auswahl der Artikel, die sie lesen sollten.
©2000-2006 AspHeute.com |
