Webseiten und Webanwendungen programmieren mit VB.NET

ASP.NET führt eine ganz neue Art ein, interaktive Webanwendungen zu bauen. Gerade im Zusammenspiel mit dem kostenlosen Visual Web Developer 2005 und VB.NET macht die Entwicklung richtig Spaß, weil der Programmierer voll bei seiner Arbeit unterstützt wird und sich um die wesentlichen Aufgaben kümmern kann.

Wer seine Website im alten ASP programmiert, hatte als Sprachmittel eine Variante von Visual Basic zur Verfügung. Die machte allerdings nur wenig Freude: Ihr fehlte es an mächtigen Funktionen, so dass wegen fast jedem besonderen Wunsch neue Server-seitige Komponenten zu erwerben und installieren waren. Auch mit der Objektorientierung war es nicht weit her. Die war nur ansatzweise realisiert.

Mit dem nun in seiner zweiten Version vorliegende ASP.NET tut sich für den klassischen ASP-Programmierer eine ganz neue Welt auf. Das sogenannte .NET-Framework ist die Softwarebasis, auf der ASP.NET aufbaut. Eine der Säulen dieser Basis ist eine breit angelegte Bibliothek an Funktionen für alle denkbaren Zwecke: Egal ob Datentypen, Filesystem-Zugriffe, Datenbank-Treiber oder XML-Parsing, der Begriff Bibliothek ist hier wörtlich zu nehmen: Zu fast jedem Thema gibt es dort Softwareunterstützung.

Das .NET-Konzept sieht vor, dass beliebige Sprachen eingesetzt werden können, um diesen Funktionsschatz zu verwenden. Microsoft sieht neben C# auch Visual Basic .NET als Standard-Sprachen für die Entwicklung von Webanwendungen vor. Egal welche Sprache zur Verwendung kommt: Die Fähigkeiten des .NET-Frameworks können immer im vollen Umfang genutzt werden, nur gegebenenfalls mit anderer Schreibweise.

Wie auch im Fall von C# lässt sich der kostenlose Visual Web Developer zur bequemen Entwicklung von Anwendungen heranziehen.

Neues Programmiermodell

Die interessanteste Neuerung für altgediente ASP-Haudegen ist die abstraktere Sicht auf das, was bei Benutzeraktionen zwischen dessen Browser und dem Webserver passiert: Man muss sich als Programmierer schlichtweg um weniger Details kümmern und kann sich stattdessen auf die wesentlichen Probleme der Anwendung beschränken.

Als Beispiel dafür verwenden wir ein typisches Eingabeformular im Web, das zur Anmeldung an einem Newsletter dient und neben der Email-Adresse einen Namen als Eingaben erwartet. Im ASP der ersten Generation löste eine solche Formualbehandlung in etwa so:

– Beim ersten Aufruf des Formulars ein Formular mit leeren Werten oder Defaultwerten anzeigen.

– Stellt das Skript fest, dass der Aufruf aus dem eigenen Formular heraus erfolgt, sind alle Formularfelder zu extrahieren, die Plausibilität zu überprüfen und im Erfolgsfall die gewünschte Aktion durchzuführen, also etwa die eingegebenen Daten in einer Datenbank abzulegen.

– Hat der Benutzer ein Pflichtfeld nicht ausgefüllt oder sonst einen Fehler gemacht, muss ihm das Formular nochmals angezeigt werden, mit einer passenden Fehlermeldung als Hinweis. Damit er alle anderen Daten nicht nochmals eingeben muss, hat das Skript jeden vorher extrahierten Formularwert in das nochmals aufgebaute Formular einzufügen.

ASP.NET erlöst Sie von diesem Aufwand vor allem dadurch, dass es Sie programmieren lässt, als hätten Sie eine normales Windows-Anwendung zu bauen und keine komplizierte Anwendung via Internet, die sich mit Formularen, POST-Variablen und wechselnden Browser-Fähigkeiten herumschlagen muss.

Sie stellen also grafisch eine Oberfläche zusammen, deren Elemente auf bestimmte Ereignisse reagieren müssen. Klickt der Benutzer auf den Absende-Knopf des Formulars, lassen Sie die relevanten Feldwerte überprüfen und geben gegebenenfalls in einem Textfeld entsprechende Meldungen aus. Dass die gestaltete Oberfläche in den richtigen HTML-Code überführt wird, den der Browser eines Surfers zu sehen bekommt, wird vom .NET-System erledigt. Auch um die Übernahme der POST-Variablen und den eventuell notwendigen Erhalt der Feldwerte zum nochmaligen anzeigen kümmert sich der Server selbst. Für Ihre Programmierung gibt es einfach Textfelder, die als Eigenschaft den eingegebenen Wert besitzen.

Raus aus der grauen Theorie. Nun bauen Sie Ihr eigenes Formular.

Starten Sie Visual Web Developer 2005 und legen mit “File – New Web Site” ein neues Web an. Verwenden Sie von den Templates das standardmäßig vorgeschlagene “ASP.NET Web Site” und achten darauf, dass in der Listbox “Language” nicht C#, sondern Visual Basic ausgewählt ist. Als lokalen Speicherort gibt das Programm einen laufend durchnummerierten Ordner vor, den sie aus Bequemlichkeit so belassen oder Ihren Wünschen anpassen können.

Nun haben Sie eine geöffnete Datei “Default.aspx” vor sich, die das Programm immer anlegt, da sie die Standarddatei eines ASP.NET-Webservers ist.

Die Datei enthält nun bereits ein wenig Code. Abgesehen von der Direktive in der ersten Zeile besteht sie aber nur aus einem grundsätzlichen HTML-Seitengerüst mit– und-Tags.

Schalten Sie mit dem Knopf “Design” am unteren Bildrand in die grafische Gestaltung um. Bei der Gestaltung machen Sie es sich leicht und bauen die Formularelemente nicht in eine Tabellenstruktur, sondern aktivieren die absolute Positionierung. Das geschieht im Menü “Layout – Position – Auto-Position Options” mit der Einstellung “Absolutely Positioned” in der erscheinenden Dropdown-Box.

Bausteine einfügen

Die Seite ist noch leer. Ziehen Sie nun aus der linken Toolbox-Leiste ein “Label” und eine “Textbox” in den Anzeigebereich und positionieren das Label so über die Textbox, dass sie als Feldbeschreibung erkennbar ist.

Über das Property-Fenster rechts unten ändern Sie die Eigenschaft “Text” des Labels auf “Benutzername” und die Eigenschaft “ID” der Textbox auf “txtName”. So weiss man im Programm, wofür das Eingabefeld steht.

Schalten Sie nun wieder in die “Source”-Sicht zurück. Die enthält nun innerhalb des-Tags zwei neue Elemente, die den gerade eingefügten Feldern entsprechen. Doch auch wenn das so aussieht, wie fertiges HTML: Ein Browser könnte mit den Tags, wie “” nichts anfangen. Daraus generiert erst der Server beim Bearbeiten der ASPX-Datei normalen HTML für den Browser auf der Client-Seite.

Auf Ereignisse reagieren

Fügen Sie nun noch einen Button in das Webformular ein. Für einen ersten Funktionstest soll es erst einmal genügen, auf Knopfdruck das Feld mit dem Benutzernamen zu manipulieren. Klickt man darauf, soll an den eingegebenen Name ein Ausrufezeichen angehängt werden.

Damit Visual Web Developer eine leere Routine einfügt, die auf die Betätigung des gerade neu eingefügten Buttons reagiert, klicken Sie einfach doppelt darauf.

Sie befinden sich nun direkt im leeren Rumpf der Subroutine, die das Ereignis “Click” für den Knopf behandelt. Die Abkürzung mit dem Doppelklick funktioniert, weil der Click das Standardereignis eines Knopfes ist. Zum gezielten Einfügen anderer Ereignisbehandlungs-Routinen verwenden Sie besser die beiden Listboxen oberhalb des Eingabefensters. Die linke enthält alle definierten Objekte, die rechte die jeweils möglichen Ereignisse. Eine Auswahl rechts fügt automatisch eine leere Ereignisroutine ein.

In der Subroutine Button1_Click() tragen Sie nun diese Zeile ein:

txtName.Text = txtName.Text + “!”

Die Zeile behandelt die Text-Eigenschaft des gerade angelegten Eingabefeldes “txtName” und hängt das Satzzeichen ans Ende des aktuellen Inhalts. Ein Großteil der anderen Eigenschaften des Eingabefeldes ließe sich auch vom Programm aus manipulieren, wie etwa die Eigenschaft “BackColor”, mit der die Hintergrundfarbe des Feldes gewählt werden kann.

Eine vollständige Übersicht aller Eigenschaften eines gewählten Objekts zur Entwicklungszeit bietet das Property-Fenster rechts unten, das mit der Kurztaste [F4] angesteuert werden kann.

Mit der Funktionstaste [F5] lassen Sie Mini-Programm nun zum ersten Mal laufen. Dabei startet Visual Web Developer einen Adhoc-Webserver und lädt einen Browser mit der gerade erzeugten Seite.

Ein im Eingabefeld eingegebener Name sollte nun bei einem Klick auf den Button mit einem Ausrufezeichen versehen werden. Weitere Klicks hängen immer noch eines mehr dran.

Vielleicht ist ihnen schon aufgefallen, dass der Programmcode zur Behandlung des Klick-Ereignisses nicht in der Datei Default.aspx zu finden ist. Stattdessen hat ihn das System in die neu angelegte Datei Default.aspx.vb eingebaut.

Dies ist ein gewolltes Konzept unter ASP.NET, genannt “Code Behind”. Es trennt den HTML-artigen Code der die grafischen Elemente definiert, vom eigentlichen Programmcode. Gerade diese Vermengung war es ja, die bei den alten ASP-Anwendungen zu unlesbaren Programmen führte. Zwischen den verschiedenen Bestandteilen der Seite schalten Sie einfach über die Reiter am oberen Bildrand um.

Wer unbedingt möchte, kann übrigens immer noch den Programmcode in die ASPX-Seite selbst einbauen. Das Programm muss dann über eine Klammerung mit <script>-Tags vom Rest separiert werden. Aber auch in dieser Variante gilt, dass die alte sequentielle Ausführung von Scripts nicht mehr existiert. Man muss also auch eingebetteten Code auf die Nutzung von ereignisgesteuerter Logik abstimmen.

VB.NET Validationsbeispiel

Automatische Aufpasser

Das nächste Eingabefeld soll die Email-Adresse für die Newsletter-Anmeldung erhalten. Fügen Sie also noch ein Feld “txtEmail” dafür ein und geben ihm auch ein passendes Label mit.

Um zu überprüfen, ob der Anwender auch eine korrekte Email-Adresse eingegeben hat, könnte man in die nun bereits existierende Routine “Button1_Click” einen Test einbauen, der beispielsweise auf das Vorhandensein eines @-Zeichens sowie einer Mindestanzahl von Zeichen aufsetzt. Ein vollständiger Synaxcheck dagegen wäre recht kompliziert zu programmieren. Das ist auch unnötig, den so etwas gibt es bereits in den Bordmitteln von ASP.NET.

Prinzipiell sind für Tests korrekter Eingaben die Controls aus der Gruppe “Validation” zuständig. Sie baut man in die Oberfläche ein und koppelt sie an ein Eingabefeld. Entsprechen die Benutzereingaben nicht der jeweiligen Vorgabe, meckert der Validator durch die Anzeige einer Fehlermeldung an der Stelle, an der er abgelegt wurde. Ohne aufgetretenen Fehler sind Validatoren unsichtbar.

Solche Aufpasser gibt es zum Test, ob ein Feld überhaupt belegt ist (“RequiredFieldValidator”), ob numerische Eingaben in einem bestimmten Bereich liegen (“RangeValidator”) oder einem regulären Ausdruck genügen (“RegularExpressionValidator”).

Reguläre Ausdrücke sind kryptische Zeichenfolgen, die testen, ob eine Zeichenkette ein bestimmtes Schema erfüllt. Für den Email-Check müssen Sie das Konzept aber nicht lernen, denn Visual Web Developer kommt mit einer ganzen Reihe fertiger Prüfausdrücke, von denen einer für Email-Adressen zuständig ist.

Fügen Sie also einen RegularExpressionValidator ein. Wählen Sie in seinen Properties als “ControlToValidate” das Email-Textfeld, als “ValidationExpression” den String für “Internet Email-Address” und als “ErrorMessage” zum Beispiel “Ungültige Email-Adresse eingegeben”.

Testen Sie die Funktion mittels [F5]. Bei einer syntaktisch ungültigen Adresse, wie etwa “abc@xy” sollte die Fehlermeldung erscheinen.

Was in diesem Artikel nicht zur Sprache kommt, ist der Part, der nach einem gültig eingetragenen Formular passiert. In einer echten Anwendung würde man diese in der Click-Routine des Absenden-Knopfes erledigen und zum Beispiel einen neuen Eintrag in einer Datenbank oder einer Verteilerliste für den Newsletter in der Form einer Textdatei anlegen.

Download-Quelle für Visual Web Developer Express:

msdn.microsoft.com/vstudio/express/

Ähnliche Beiträge