Die ersten Schritte. default. mspx

Transkript

1

2 3 Die ersten Schritte Bevor es losgehen kann, muss erst einmal die notwendige Infrastruktur bereitgestellt werden. Zwar lässt sich auch mit den kostenlosen Tools des.net-framework-sdk eine.net-anwendung entwickeln, aber ohne komfortable Entwicklungsumgebung wird man in angemessener Zeit nicht weit kommen. Die gängige Wahl für die Entwicklung von ASP.NET- Anwendungen ist Microsoft Visual Studio. Hier haben Sie die Auswahl zwischen verschiedenen Varianten, die sich sowohl in Preis als auch im Leistungsumfang deutlich unterscheiden. Auf der Buch-CD finden Sie die kostenlose Visual Web Developer Express Edition, die Sie auch über das Internet herunterladen können. Sie bietet die Möglichkeit, Webanwendungen sowohl mit VB2005 als auch mit C# zu entwickeln. Für die meisten Beispiele in diesem Buch reicht die Express- Edition aus. Allerdings unterliegt sie zahlreichen Einschränkungen. So gibt es beispielsweise keinen Designer für Klassendiagramme, keine Möglichkeit, Anwendungen für Windows oder mobile Geräte zu entwickeln und nur eingeschränkte Unterstützung bei der Bearbeitung von XML- Dateien. Auch wenn Microsoft ausdrücklich die Nutzung der Express-Editions für die kommerzielle Anwendungsentwicklung gestattet, so sollten Sie für den professionellen Einsatz die käuflichen Versionen (ab der Professional Edition) vorziehen. Einen Überblick über den Leistungsumfang der einzelnen Versionen finden Sie auf der Website von Microsoft (zum Zeitpunkt der Drucklegung unter com/germany/ msdn/vstudio/products/produktvergleich.mspx). Sollte Ihnen die Buch-CD abhanden gekommen sein, können Sie die verschiedenen Express-Editions auch direkt kostenlos aus Microsofts Download-Bereich herunterladen: default. mspx 47

3 3 Die ersten Schritte 3.1 Installation der Visual Web Developer Express Edition Nachdem Sie das Setup der Installations-CD von Visual Web Developer 2005 gestartet haben, müssen Sie die zu installierenden optionalen Komponenten auswählen (Abbildung 3.1). Die erste Komponente (MSDN Library) enthält die umfangreiche Dokumentation zum.net-framework, die zweite ist eine Minimalversion von Microsoft SQL Server 2005 Express. Abbildung 3.1 Optionale Komponenten installieren Geben Sie im nachfolgenden Dialog (Abbildung 3.2) an, wo die Installation erfolgen soll. Achten Sie darauf, dass ausreichend Speicherplatz zur Verfügung steht. Belegen Sie nicht die letzten 2 GB Ihrer Systempartition. 48

4 Installation der Visual Web Developer Express Edition Abbildung 3.2 Speicherort festlegen Nach dem Start des Installationsvorgangs informiert ein Dialog über den Fortschritt (Abbildung 3.3). Unterbrechen Sie die Installation nach Möglichkeit nicht! Abbildung 3.3 Die Installation läuft. 49

5 3 Die ersten Schritte Windows Vista ist unter Umständen nicht zufrieden und zeigt einen Dialog wie in Abbildung 3.4. Wählen Sie trotzdem Programm ausführen. Unter Windows XP oder Windows Server 2003 sollte es keine Probleme geben. Falls doch, hilft meist eine Internetsuche in den betreffenden Newsgroups. Abbildung 3.4 Vista ist unzufrieden Nach erfolgreicher Installation können Sie die Entwicklungsumgebung starten. Beim ersten Aufruf erwartet Sie eine Anzeige wie in Abbildung 3.5 zu sehen. Die benötigten Fenster und Einstellungen werden Sie nach und nach in diesem Buch kennenlernen. Abbildung 3.5 Der erste Start der Entwicklungsumgebung Microsoft SQL Server 2005 Express Edition Die Handhabung von Datenbanken in der Visual Web Developer Express Edition ist recht mühsam. Die verfügbaren Konfigurationsprogramme (Abbildung 3.6) lassen nur die Einrichtung der Dienste zu, nicht aber das 50

6 Die ersten Programme grafische Erstellen neuer Datenbanktabellen und -abfragen. Besser ist es, Sie verwenden die Standardversion des SQL-Servers 2005 oder greifen auf die entsprechende kostenlose Express-Edition zurück. Sie finden den Download von Microsoft SQL Server 2005 Express Edition with Advanced Services unter: 319A-4887-BC75-3B02B5E48A40&displaylang=de Das Verwaltungstool Microsoft SQL Server Management Studio Express erhalten Sie unter: default. mspx Abbildung 3.6 Viel mehr hat die Sparversion nicht zu bieten. 3.2 Die ersten Programme Im Einführungskapitel lernten Sie bereits einiges an theoretischen Hintergründen kennen. Jetzt folgt ein wenig Praxis mit einigen einfachen Beispielen. Die Beispiele sollen Ihnen den Umgang mit der Entwicklungsumgebung vertraut machen und die für die Webprogrammierung notwendige Denkweise näher bringen. 51

7 3 Die ersten Schritte Labels und Schaltflächen Vielleicht kennen Sie es bereits aus der Windows-Entwicklung. Dort gibt es einfache Steuerelemente wie Labels und Schaltflächen. Sie können Text in unterschiedlichen Formaten anzeigen und auf Benutzereingaben reagieren. Lassen Sie uns mit einer einfachen Anwendung beginnen, die auf einer Webseite ein Label mit einem Text anzeigt und daneben eine Schaltfläche. Wird auf die Schaltfläche geklickt, soll der Text des Labels geändert werden. Beginnen wir mit dem Einrichten einer neuen Website. Dazu gibt es mehrere Vorgehensweisen, die jedoch alle zum selben Ergebnis führen. Wird die Startseite angezeigt, reicht ein Klick auf ERSTELLEN WEBSITE im Unterfenster GEÖFFNETE PROJEKTE (Abbildung 3.7) oder alternativ WEBSITE ERSTELLEN im Unterfenster ERSTE SCHRITTE. Aber auch, wenn die Startseite nicht sichtbar ist, lassen sich über das Menü oder die Symbolleiste neue Webanwendungen anlegen (Abbildung 3.8 und Abbildung 3.9). Abbildung 3.7 Anlegen einer neuen Website über die Startseite 52

8 Die ersten Programme Abbildung 3.8 Ein Klick in die Symbolleiste genügt. Abbildung 3.9 Der erste Punkt im Menü legt eine neue Website an. Nun müssen Sie ein Verzeichnis vorgeben, in dem alle benötigten Dateien für die neue Website abgelegt werden (Abbildung 3.10). Als Speicherort wählen Sie für dieses und die folgenden Beispiele das Dateisystem und geben Sie einen lokalen Verzeichnispfad an. An dieser Stelle können Sie auch die Standardsprache für die neuen Webseiten vorgeben. Wählen Sie gemäß des Buchtitels VISUAL BASIC aus. Abbildung 3.10 Einstellungen für die neue Website 53

9 3 Die ersten Schritte Visual Studio legt, nachdem Sie auf OK geklickt haben, einige Dateien für eine Default-Seite an und schaltet direkt in die Quellansicht der Datei Default.aspx (Abbildung 3.11). Sie sehen jetzt die ASP-Definition der anzuzeigenden Seite. Sie beginnt mit einer Page-Direktive, die unter anderem die ausgewählte Programmiersprache (hier VB) angibt. Es folgt ein typischer Aufbau einer HTML-Seite, wie sie ein Browser interpretieren könnte. Abbildung 3.11 Visual Studio hat das neue Projekt vorbereitet. Im rechten Teil zeigt die Entwicklungsumgebung den Projektmappen- Explorer an. Er stellt alle beteiligten Dateien und Verzeichnisse in Form eines Baums dar. Wir werden uns zunächst mit den Dateien, die die Endung.aspx sowie.aspx.vb besitzen, befassen. Erstere beinhalten die ASP-Deklarationen, Letztere den Visual Basic-Code. Im nächsten Schritt fügen Sie ein Label auf der Webseite ein. Auch hierzu gibt es wieder mehrere Vorgehensweisen. Sie können in der Quellansicht alles per Tastatur eingeben, Sie können aber auch mit Mausaktionen vieles zusammenklicken. Ziehen Sie zunächst wie in Abbildung 3.12 gezeigt aus der Toolbox ein Label zwischen das öffnende und das schließende <div>- Tag. Visual Studio fügt dann automatisch den Code für das Label ein (<asp:label >). 54

10 Die ersten Programme Abbildung 3.12 Ein Label in der Quellansicht Über die Schaltflächen ENTWURF und QUELLE unterhalb des Codefensters können Sie zwischen den beiden Anzeigemodi umschalten. Abbildung 3.13 zeigt die Darstellung in der Entwurfsansicht. Wählen Sie nun mit der Maus das Label aus und ändern Sie wie in der Abbildung gezeigt die Eigenschaft Text im Eigenschaftsfenster. Die Änderung wird in der Entwurfsansicht nachgeführt, sobald Sie das Eingabefeld verlassen oder die Eingabetaste drücken. Wenn Sie wieder in die Quellansicht umschalten, sehen Sie, dass auch dort der geänderte Text (Attribut Text = " ") eingetragen worden ist. Abbildung 3.13 Die neue Seite in der Entwurfsansicht 55

11 3 Die ersten Schritte Fügen Sie nun in der Entwurfsansicht eine neue Schaltfläche (Button) ein, indem Sie sie aus der Toolbox auf das Fenster ziehen. Die Schaltfläche wird neben dem Label angezeigt. Sie können sie nicht frei auf dem Fenster platzieren, da die Standardeinstellung für das Layout, anders als in der Vorgängerversion, das FlowLayout ist. Ändern Sie auch für die Schaltfläche die Eigenschaft Text, um einen aussagekräftigeren Text auf dem Button anzuzeigen. Im nächsten Schritt soll nun VB-Code definiert werden, der durchlaufen wird, sobald der Anwender die Schaltfläche betätigt hat. Ähnlich einer Windows-Anwendung kann dies in einem Eventhandler vorgenommen werden. Führen Sie in der Entwurfsansicht zunächst einen Doppelklick auf die Schaltfläche durch. Visual Studio legt dann automatisch den Eventhandler an und schaltet in die Codeansicht um (Abbildung 3.14). Der automatisch generierte Handler trägt den Namen des Control (hier Button1), verbunden mit einem Unterstrich und dem Namen des Events (hier Click). Innerhalb des Handler können Sie nun den benötigten VB- Code programmieren. Die Reaktion auf das Klicken der Schaltfläche soll sein, dass der Text des Labels geändert wird. Sie müssen also der Texteigenschaft des Label-Control einen neuen Wert zuweisen. Geben Sie zunächst den Namen des Labels (Label1) ein, gefolgt von einem Punkt. Nun greift der Intellisense-Mechanismus der Entwicklungsumgebung und bietet Ihnen, wie in Abbildung 3.14 gezeigt, eine Auswahl möglicher Eigenschaften und Methoden an. Wählen Sie Text oder schreiben Sie einfach weiter, bis die Auswahl eindeutig ist und geben Sie dann = für die Zuweisung ein. Abbildung 3.14 Unterstützung durch Intellisense im Codefenster 56

12 Die ersten Programme Vervollständigen Sie nun die Zeile: Label1.Text = "Nachher" Zum Starten der Anwendung drücken Sie (F5), die Starttaste in der Symbolleiste oder wählen Sie den Menüpunkt DEBUGGEN/DEBUGGEN STARTEN. Da die Website noch nicht für das Debuggen eingerichtet worden ist, erscheint zunächst ein Dialogfenster (Abbildung 3.15). Wählen Sie die erste Option, um die Konfigurationsdatei für das Debuggen zu ändern, und klicken Sie auf OK. Abbildung 3.15 Beim ersten Start muss das Debuggen eingeschaltet werden. Der eingerichtete Standard-Browser, meist der Internet Explorer, wird nun gestartet und die Seite wird angezeigt. Klicken Sie auf die Schaltfläche, um die korrekte Ausführung Ihres Codes zu überprüfen (Abbildung 3.16). Doch wo läuft denn jetzt eigentlich die Webanwendung? Vielleicht haben Sie bislang gar keinen Webserver eingerichtet und trotzdem wird die Webanwendung ausgeführt. Visual Studio 2005 startet hierfür einen eigenen Miniatur- Webserver, der auf das Dateisystem zugreift. Haben Sie das kleine Symbol in der Taskleiste bemerkt (Abbildung 3.17)? Klicken Sie einmal mit der rechten Maustaste darauf und wählen Sie DETAILS ANZEIGEN. Ein Fenster wie in Abbildung 3.18 wird geöffnet. Abbildung 3.16 Der Browser zeigt die erste ASP.NET-Seite. 57

13 3 Die ersten Schritte Abbildung 3.17 Der Miniatur-Webserver von Visual Studio Abbildung 3.18 Der Webserver benutzt einen zufällig gewählten Port. Ein Webserver benutzt typischerweise den TCP-Port 80. Der in Visual Studio integrierte Server hingegen verwendet einen zufällig ausgewählten freien Port. Im gezeigten Beispiel ist dies der Port Wenn Sie die Anwendung auf Ihrem Rechner ausführen, wird es höchstwahrscheinlich eine andere Nummer sein. Grundsätzlich können Sie die gestartete Website auch innerhalb Ihres lokalen Netzes von einem anderen Rechner aus erreichen. Vorausgesetzt, der Netzwerkname des Rechners wäre»entwicklungsrechner«, dann lautete der korrekte URL der Seite %202/Default.aspx. Beachten Sie jedoch, dass beim nächsten Start von Visual Studio wahrscheinlich wieder eine andere Portnummer vergeben wird, so dass es wenig hilfreich ist, den Link dauerhaft zu speichern. Ein anderes Problem beim Zugriff auf die Website innerhalb des lokalen Netzes ist, dass möglicherweise eine eingerichtete Firewall die betreffende Portnummer blockiert. Sie müssten dann die Firewall für den jeweiligen Port öffnen, um das gewünschte Ergebnis zu erhalten bei ständig wechselnden Portnummern ein wenig sinnvolles Unterfangen. Der integrierte Webserver dient daher lediglich zu Entwicklungszwecken. Für die Entwicklung von Webanwendungen unerlässlich ist der Blick auf den Code, den der Browser zu Gesicht bekommt. Dies ist natürlich nicht der ASP-Code, den Sie programmiert haben. Denn mit einem Tag wie <asp:label > kann der Browser nichts anfangen. Alle ASP.NET-Controls müssen in HTML-Code umgesetzt werden. Dieser Vorgang wird Rendern genannt und später noch näher beschrieben. Den generierten HTML-Code können Sie sich vom Browser anzeigen lassen. Abbildung 3.19 zeigt den Weg über das Kontextmenü, wie es der Internet Explorer anbietet. Wenn Sie andere Browser verwenden, werden Sie an anderer Stelle einen entsprechenden Menüpunkt finden. 58

14 Die ersten Programme Abbildung 3.19 Anzeigen des generierten Quelltextes Der Browser wird daraufhin den Standardeditor des Betriebssystems starten, etwa wie in Abbildung Suchen Sie nun einmal nach der Umsetzung für Label und Schaltfläche. Das Label wird durch ein <span>-tag abgebildet, die Schaltfläche durch ein <input>-tag. Abbildung 3.20 Diesen Code sieht der Browser. 59

15 3 Die ersten Schritte Zwischen GET und POST differenzieren Anhand des gerade vorgestellten Beispiels sollen noch einmal die Abläufe verdeutlicht werden. Der erste Aufruf des Browsers erfolgt mittels eines HTTP-GET-Kommandos. Der Browser erhält vom Server daraufhin den in Abbildung 3.20 gezeigten Code zurück, interpretiert ihn und stellt die Seite dar. Klickt nun der Anwender auf die Schaltfläche, wendet sich der Browser wieder an den Server, diesmal aber mit einem HTTP-POST-Kommando. Gäbe es auf der Seite Eingabefelder, würden dann auch deren Inhalte zum Server transferiert werden. Um den Ablauf nachvollziehen zu können, ergänzen Sie die Webseite um ein weiteres Label. In der Entwurfsansicht führen Sie dann einen Doppelklick auf den Hintergrund des Fensters, nicht auf die Steuerelemente, aus. Visual Studio zeigt dann den Page_Load-Handler für die Seite an. Dieser Handler wird bei jeder Abfrage der Seite durchlaufen. Über die Eigenschaft IsPostBack des Page-Objekts lässt sich erfragen, ob es sich um den ersten Aufruf der Seite (GET) handelt oder ob der Browser Benutzereingaben übermittelt (POST). Ergänzen Sie den Code, wie in Listing 3.1 gezeigt. Listing 3.1 IsPostBack unterscheidet zwischen GET und POST. 01 Protected Sub Page_Load( ) Handles Me.Load 02 If IsPostBack Then 03 Label2.Text = "Nach PostBack" 04 Else 05 Label2.Text = "Erster Aufruf" 06 End If 07 End Sub Wenn Sie die Anwendung nun erneut starten, wird zunächst der zweite Teil der If-Abfrage durchlaufen. Bei jedem Klick auf die Schaltfläche ist es dann der erste Teil (Abbildung 3.21). Überprüfen Sie auch das Verhalten, wenn Sie die Seite in mehreren Browser-Fenstern parallel öffnen. Abbildung 3.21 Änderung des Labeltextes nach einem PostBack Das Beispiel zeigt den üblichen Weg, der beschritten werden muss, um Informationen an den Webserver zu senden. Ein PostBack ist zwingend erforderlich, damit der Server diese Informationen erhält. Die verwendete 60

16 Die ersten Programme Schaltfläche erzeugt bereits automatisch den clientseitigen Code, um das Verhalten zu gewährleisten. Sollen auch andere Controls ein PostBack auslösen können, zum Beispiel eine Auswahlliste, nachdem der Anwender die Auswahl geändert hat, dann müssen zusätzliche Vorkehrungen getroffen werden. In vielen Fällen reicht es aus, die Eigenschaft AutoPostback auf True zu setzen, sofern sie vom betreffenden Control implementiert wird. Wie der Internet Explorer bieten auch die anderen Browser eine Möglichkeit an, eine angezeigte Seite zu aktualisieren. Dies kann aber unter Umständen zu Problemen führen, wenn zuvor bereits ein POST ausgeführt worden ist. Denn dann müssen alle Eingaben erneut zum Webserver geschickt werden. Dieser muss entscheiden, wie er mit den Daten umgehen soll. Da dies bei vielen Webanwendungen offenbar nicht korrekt funktioniert, zeigt der Internet Explorer eine Warnung an (Abbildung 3.22), wenn der Anwender nach dem PostBack auf die AKTUALISIEREN-Schaltfläche des Browsers klickt. Abbildung 3.22 Der Internet Explorer reagiert skeptisch, wenn der Anwender nach einem POST die Seite aktualisieren will Events auf der Clientseite abfangen Wie bereits in der Einführung gezeigt, ist es nicht immer notwendig oder sinnvoll, auf Ereignisse auf der Serverseite zu reagieren. Geht es wie in den vorangegangenen Beispielen lediglich darum, auf einen Mausklick hin Texte zu ändern, so kann das auch vollständig auf der Clientseite gelöst werden. Hierzu wird ein clientseitiges JavaScript benötigt. Wenngleich in diesem Buch JavaScript nicht vertieft werden kann, da die Sprachbeschreibung alleine schon buchfüllend ist, sollen Sie trotzdem die Vorgehensweise kennenlernen, solche Skripte in einer ASP.NET-Anwendung zu nutzen. Ergänzen Sie das vorhandene Projekt um ein weiteres Label, dem Sie wieder einen Ausgangstext zuweisen. Dann fügen Sie der Seite eine dritte Schaltfläche hinzu, diesmal aber keinen ASP-Button, sondern ein HTML- Input-Control. Sie finden es in der Toolbox im Register HTML unter dem Namen INPUT (BUTTON). Ändern Sie auch den Text für diese Schaltfläche. In der Entwurfsansicht führen Sie jetzt einen Doppelklick auf die neue Schaltfläche durch. Anders als bei einem ASP-Button, wird jetzt kein Handler im VB-Code erzeugt, sondern eine JavaScript-Methode in der 61

17 3 Die ersten Schritte ASP-Darstellung. Hierfür wird innerhalb des <head>-tag ein Skriptblock angelegt. Die enthaltene Methode wird im onclick-event des Buttons aufgerufen. Hierfür ändert Visual Studio die <input>-deklaration etwa so ab: <input id="button2" type="button" value="änderung ohne Postback" language="javascript" onclick="return Button2_onclick()" /> Die onclick-methode muss jetzt noch so ergänzt werden, dass sie den Text des Labels ändert. Allerdings kann Sie die Entwicklungsumgebung hierbei nicht weiter unterstützen. JavaScript kennt keine Typdeklarationen, weshalb das Intellisense so gut wie gar nicht funktioniert. Variablen für den Zugriff auf die Steuerelemente werden auch nicht automatisch angelegt, wie Sie es bei der Servervariante kennengelernt haben. Vielmehr müssen Sie in JavaScript zunächst das Label-Objekt ermitteln, bevor Sie auf dessen Eigenschaften und Methoden zugreifen können. Dies geschieht, wie in Listing 3.2 gezeigt, über den Aufruf von document.get- ElementById (Zeile 4). Über die Eigenschaft innertext lässt sich dann der angezeigte Text neu definieren. Listing 3.2 Die clientseitige Variante zum Ändern des Labeltextes 01 function Button2_onclick() 02 { 03 // Control ermitteln 04 var label = document.getelementbyid("label3"); // Text ändern 07 label.innertext="nachher"; 08 } Sie können die Anwendung nun starten und durch Betätigen der neuen Schaltfläche den Text des Labels ändern. Die Aktion löst kein PostBack aus. Der Server erfährt davon nichts. Solche Aktionen finden allein im Browser, also auf Clientseite statt. Eine Variante, auch im Clientcode auf Serverfunktionalitäten zuzugreifen, ist AJAX (Asynchronous JavaScript And XML). Inzwischen bietet Microsoft unter dem Namen ASP.NET 2.0 AJAX Extensions ein auf ASP.NET abgestimmtes Framework hierfür an, auf das später noch eingegangen wird. Zu JavaScript gibt es zahlreiche Bücher. Auch im Internet finden Sie viele Erklärungen und Beispiele. Als Einstieg seien Javascript sowie die JavaScript-Sektion bei SelfHTML ( org/javascript/) genannt Inhalte dynamisch erzeugen In den nächsten Beispielen wird gezeigt, wie der an den Browser geschickte HTML-Code dynamisch generiert werden kann, also die eigentliche Aufgabe einer Webanwendung. Hierfür wird die Website um zusätzliche Seiten erweitert. Dabei werden verschiedene Techniken vorgestellt. Über das Hauptmenü (siehe Abbildung 3.23) oder alternativ auch über das Kontextmenü im Projektmappen-Explorer können Sie neue Elemente hin- 62

18 Die ersten Programme zufügen. Visual Studio öffnet daraufhin ein Dialogfenster wie in Abbildung 3.24 zu sehen. Markieren Sie hier links oben den Eintrag WEBFORM für eine neue ASP.NET-Seite. Im Eingabefeld NAME geben Sie den Dateinamen an. Die Voreinstellung für die Sprachauswahl folgt der beim Anlegen der Website ausgewählten Sprache. Sie können aber auch eine davon abweichende Sprache wählen und beispielsweise eine einzelne Seite mit C# programmieren. Setzen Sie, falls noch nicht geschehen, den Haken für CODE IN EIGENER DATEI PLATZIEREN, damit der Programmcode in einer Codebehind-Datei abgelegt wird. Auf die Einstellung MASTERSEITE AUSWÄHLEN gehen wir später noch ein. Abbildung 3.23 Auch neue WebForms werden so hinzugefügt. Abbildung 3.24 Visual Studio bietet eine Reihe von Vorlagen an. Nachdem die Entwicklungsumgebung wieder eine Vorlage vorbereitet und in die ASP-Code-Darstellung umgeschaltet hat, ändern Sie zunächst den Inhalt des <title>-tag. Der angegebene Text wird in der Titelzeile des Internet Explorers angezeigt. Legen Sie anschließend wieder ein Label an, das zur Textanzeige dienen soll. 63

19 3 Die ersten Schritte Schalten Sie nun wie in Abbildung 3.25 gezeigt in die CodeBehind- Anzeige. Sie können auch über den Projektmappen-Explorer über das Kontextmenü der betreffenden ASP-Datei oder durch Doppelklick auf die zugehörige VB-Datei diese Ansicht öffnen. Wie früher in VB6 lassen sich auch in VB2005 neue Eventhandler über die beiden Comboboxen oberhalb des Editorbereichs anlegen. In der linken wählen Sie den Eintrag (PAGE- EREIGNISSE), über den alle Events der Page-Klasse erreichbar sind (Abbildung 3.26). Anschließend wählen Sie in der rechten Auswahlliste das Ereignis Load (siehe Abbildung 3.27). Visual Studio legt dann wieder eine Page_Load-Methode an und verknüpft sie automatisch mit dem Event. Abbildung 3.25 Schnelle Umschaltung zwischen ASPund VB-Code Abbildung 3.26 Ereignisquelle wählen Abbildung 3.27 Ereignis wählen 64

20 Die ersten Programme Im Load-Eventhandler (Listing 3.3) wird dem Label wieder ein neuer Text zugewiesen. Diesmal besteht er aus einem konstanten Text plus dem aktuellen Datum. Eine einfache Textverknüpfung mithilfe des &-Zeichens setzt den Text zusammen. Das aktuelle Datum bzw. die aktuelle Uhrzeit erhält man über die Struktur System.DateTime und deren Eigenschaft Now (Zeile 3). Durch den Aufruf der Methode ToLongDateString wird das aktuelle Datum gemäß der Windows-Einstellungen für die lange Datumsausgabe formatiert. Zusätzlich werden HTML-Tags in den String für die Formatierung eingebaut (Zeilenumbruch, Fettschrift). Das Ergebnis sehen Sie in Abbildung Protected Sub Page_Load( ) Handles Me.Load 02 Label1.Text = "Guten Tag, <br/>heute ist <b>" _ 03 & DateTime.Now.ToLongDateString() & "</b>" 04 End Sub Listing 3.3 Eine formatierte Datumsausgabe Abbildung 3.28 Der Fenstertitel ist jetzt definiert. In der Voreinstellung wählt die Entwicklungsumgebung übrigens die gerade aktive Datei als Startdatei. Sie können somit im jetzigen Stand wahlweise Beispiel1.aspx oder Default.aspx als Startdatei auswählen. Aber legen Sie nach demselben Muster gleich noch eine dritte Seite an, nennen Sie sie Beispiel2, setzen Sie das <title>-tag auf Beispiel Quadratzahlen und fügen Sie ein neues Label hinzu. Im Load-Eventhandler programmieren Sie diesmal eine Schleife, die für die Zahlen von 1 bis 20 die Quadrate berechnet und den Text für das Label aufbereitet (Listing 3.4). Wie bei einer Windows- Anwendung sollen die Werte für i bzw. das Quadrat durch ein Tabulatorzeichen (VB-Konstante vbtab) getrennt werden. Für den Zeilenumbruch wird in jedem Schleifendurchgang die VB-Konstante vbcrlf angehängt. Die Zuweisung an die Texteigenschaft des Labels erfolgt diesmal durch den Operator &=. Er hängt den String-Ausdruck auf der rechten Seite an den bereits vorhandenen Text an. Daher muss vor Beginn der Schleife die Texteigenschaft auf einen leeren String gesetzt werden. 01 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 02 Label1.Text = "" 03 For i As Integer = 1 To Label1.Text &= i & vbtab & i * i & vbcrlf 05 Next 06 End Sub Listing 3.4 Der erste Versuch zur Ausgabe von Quadratzahlen 65

21 3 Die ersten Schritte Doch wie in Abbildung 3.29 zu sehen, sieht das Ergebnis im Browser nicht so aus wie erwünscht. Von Zeilenumbrüchen keine Spur. Woran liegt das? Nun, werfen Sie zunächst einmal wieder einen Blick in den generierten HTML-Code (Abbildung 3.30). Dieser enthält im Bereich der Zahlenausgabe durchaus die gewünschte Formatierung. Allerdings sind Tabulatorzeichen sowie die Zeichen für den Zeilenumbruch für den Browser lediglich sogenannte Whitespaces, die er in diesem Fall ignoriert. Abbildung 3.29 Die Ausgabe entspricht noch nicht ganz den Erwartungen. Abbildung 3.30 Zumindest der HTML-Code ist formatiert. 66

22 Die ersten Programme Für die Formatierung der Ausgabe im Browser sind also Konstanten wie vbtab oder vbcrlf sinnlos. Stattdessen müssen die üblichen HTML-Tags eingesetzt werden. Das Tag für den Zeilenumbruch haben Sie bereits im vorherigen Beispiel kennengelernt: <br/>. Möchten Sie gezielt mehrere Leerzeichen in einem Text einfügen, dann lässt sich das durch mehrfache Anwendung von erreichen. Die Abkürzung steht hierbei für Non Breaking Space. Wenn Sie nun die Zeile für die Textaufbereitung entsprechend ändern, sieht die Ausgabe schon besser aus (Abbildung 3.31). Label1.Text &= i & " " & i * i & "<br/>" Abbildung 3.31 Der zweite Versuch der Formatierung Aber so richtig zufriedenstellend ist das Ergebnis immer noch nicht. Die Ausrichtung der Zahlen müsste rechtsbündig erfolgen, damit die Spalten vernünftig lesbar sind. In HTML erreicht man dieses Verhalten am besten durch den Einsatz von Tabellen. Einen typischen Aufbau, der für dieses Beispiel sinnvoll wäre, zeigt Listing <table> 02 <thead > 03 <tr> 04 <th>kopf 1</th> 05 <th>kopf 2</th> 06 </tr> 07 </thead> 08 <tbody> 09 <tr> 10 <td>zeile 1 Spalte 1</td> 11 <td>zeile 1 Spalte 2</td> 12 </tr> 13 </tbody> 14 </table> Listing 3.5 Aufbau der benötigten Tabelle 67

23 3 Die ersten Schritte Eine mögliche Variante nach diesem Muster sehen Sie in Listing 3.6, das Ergebnis in Abbildung Hierbei wird der Text wieder Stück für Stück zusammengesetzt. Der Aufwand ist jetzt schon beträchtlich und es wird schwierig, die richtige Reihenfolge der HTML-Tags einzuhalten. Listing 3.6 Zusammensetzen einer HTML-Tabelle mit String- Operationen 01 Protected Sub Page_Load( ) Handles Me.Load 02 Label1.Text = "<table > <thead> <tr>" 03 Label1.Text &= "<th style=""text-align: center; paddingright: 5px; padding-left: 5px; background-color: silver;" ">Zahl</th>" 04 Label1.Text &= "<th style=""text-align: center; paddingright: 5px; padding-left: 5px; background-color: silver;"">quadrat</th>" 05 Label1.Text &= "</tr></thead>" 06 Label1.Text &= "<tbody>" 07 For i As Integer = 1 To Label1.Text &= "<tr>" 09 Label1.Text &= "<td style=""text-align: right"">" & i & "</td>" 10 Label1.Text &= "<td style=""text-align: right"">" & i * i & "</td>" 11 Label1.Text &= "</tr>" 12 Next 13 Label1.Text &= "</tbody></table>" 14 End Sub Abbildung 3.32 So ist die Ausgabe schon lesbarer. Das Zusammensetzen des gesamten HTML-Codes ist recht mühsam und vor allem äußerst fehlerträchtig. Der VB-Code gibt in keinster Weise optisch die tatsächliche Struktur des generierten HTML-Codes wieder, so dass der Überblick schnell verloren geht. Bei komplexeren Strukturen ist es daher meist günstiger, auf vorhandene ASP-Controls zurückzugreifen 68

24 Die ersten Programme und deren Objektmodell zu verwenden. Lassen Sie uns das Beispiel noch einmal aufgreifen und im Entwurfsmodus bereits die Tabelle vorbereiten. Legen Sie noch eine weitere Webseite an und platzieren Sie auf ihr ein <asp:table>-control. Sie finden es im STANDARD-Register der Toolbox. In der Entwurfsansicht können Sie bereits einige Eigenschaften wie BackColor, HorizontalAlign, BorderStyle oder ForeColor einstellen. Schalten Sie dann in die Quellansicht, um den Tabellenkopf zu deklarieren. Zwischen dem öffnenden und dem schließenden <asp:table>-tag geben Sie < ein und wählen aus der angebotenen Liste <asp:tableheaderrow> aus. Auch in der Entwurfsansicht können Sie nun für die Formatierung des Tabellenkopfs Einstellungen im Eigenschaftsfenster vornehmen. Die Änderungen werden direkt im Text angezeigt. Ergänzen Sie die Einstellungen entsprechend Listing <body> 02 <form id="form1" runat="server"> 03 <div> <%--Tabelle deklarieren--%> 06 <asp:table ID="Table1" runat="server" 07 BackColor="LightSlateGray" BorderStyle="NotSet" 08 HorizontalAlign="NotSet" GridLines="Both" 09 ForeColor="AliceBlue"> <%-- Kopfzeile --%> 12 <asp:tableheaderrow Font-Bold="true" Font- Italic="true" 13 BackColor="AliceBlue" ForeColor="DarkBlue"> 14 <asp:tablecell>zahl</asp:tablecell> 15 <asp:tablecell>quadrat</asp:tablecell> 16 </asp:tableheaderrow> <%-- Alle weiteren Zeilen werden per Code generiert -- %> 19 </asp:table> </div> 22 </form> 23 </body> Listing 3.7 Ein Tabellen-Control wird im Entwurfsmodus vorbereitet. Über eine Referenzvariable mit dem Namen Table1 ist nun im VB-Code das Tabellen-Control erreichbar. Die Vorgehensweise in der Programmierung unterscheidet sich jetzt erheblich von der im vorangegangenen Beispiel. Table1 verweist auf ein Table-Objekt. Dieses besitzt eine Auflistung von TableRow-Objekten, die über die Eigenschaft Rows erreichbar ist. Ein Table- Row-Objekt repräsentiert eine Tabellenzeile. Es besitzt seinerseits die Eigenschaft Cells, die auf eine Auflistung von TableCell-Objekten verweist. Ein TableCell-Objekt wiederum repräsentiert eine einzelne Tabellenzelle. Listing 3.8 zeigt den VB-Code dieser Beispielvariante. Für jede Zeile wird ein neues TableRow-Objekt angelegt (Zeile 7). Für dieses Objekt wird die Ausrichtung des Textes auf rechtsbündig gesetzt. Für die beiden Zahlen- 69

25 3 Die ersten Schritte werte wird je ein TableCell-Objekt instanziert (Zeilen 14 und 23). Der Texteigenschaft dieser Objekte wiederum werden die in einen String umgewandelten Zahlenwerte zugewiesen. Mithilfe der Add-Methode werden die Zellen in die Cells-Auflistung des TableRow-Objekts aufgenommen. Das TableRow-Objekt seinerseits wird ebenfalls durch Aufruf von Add der Rows-Auflistung hinzugefügt. Listing 3.8 Die Quadratzahlenausgabe mithilfe eines Table-Control 01 Protected Sub Page_Load(ByVal sender As Object, _ 02 ByVal e As System.EventArgs) Handles Me.Load For i As Integer = 1 To ' Neue Tabellenzeile anlegen 07 Dim row As New TableRow() ' Horizontale Ausrichtung für die Texte 10 row.horizontalalign = HorizontalAlign.Right ' Zelle für laufenden Wert anlegen 13 Dim cell As TableCell 14 cell = New TableCell() ' Text für Zahlenwert eintragen 17 cell.text = i.tostring() ' Zelle der Zeile hinzufügen 20 row.cells.add(cell) ' Noch eine Zelle anlegen 23 cell = New TableCell() ' Berechneten Wert hinzufügen 26 cell.text = (i * i).tostring() ' Auch diese Zelle der Zeile zuordnen 29 row.cells.add(cell) ' Die erzeugte Zeile der Tabelle zuordnen 32 Table1.Rows.Add(row) 33 Next 34 End Sub Diese Programmvariante kommt dem Gedanken der Trennung von HTML- Code und Programmlogik schon deutlich näher. Im ASP-Teil wird lediglich der visuelle Rahmen für die Tabelle festgelegt, während auf der VB-Seite die Baumstruktur des Table-Control genutzt wird. Im VB-Code sind nun keinerlei HTML-Tags erforderlich. Sie werden automatisch generiert, wenn das Table-Control gerendert wird. Das Ergebnis, wie es der Browser darstellt, sehen Sie in Abbildung Im Verlauf dieses Buchs werden Sie noch eine Reihe weiterer Varianten kennenlernen. Es gibt viele Möglichkeiten, dynamisch im VB-Code auf den Aufbau der HTML-Seite Einfluss zu nehmen mal mehr, mal weniger abstrakt. 70

26 Die ersten Programme Abbildung 3.33 Ausgabe unter Zuhilfenahme des Table- Control 71