Docstoc

Microsoft Visual Web Developer 2

Document Sample
Microsoft Visual Web Developer 2 Powered By Docstoc
					        Microsoft
Visual Web Developer 2005
      Express Edition


        Ein Einsteiger-Tutorial
   von Jörg Neumann und Neno Loje



              Stand: 12/2005
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Inhalt
Die Oberfläche kennen lernen ........................................................................................................ 3
  Der Arbeitsbereich ..................................................................................................................... 5
  Die Toolbox ............................................................................................................................... 5
  Anpassen der Design-Oberfläche ................................................................................................. 6
  Formatieren von Text ................................................................................................................. 9
  Erstellen von Tabellen ...............................................................................................................11
  Der Projektmappen-Explorer ......................................................................................................12
  Das Eigenschaftenfenster ..........................................................................................................12
Erstellen einer Beispielanwendung .................................................................................................15
  Erstellen der Startseite ..............................................................................................................15
  Anlegen eines neuen Projektes ..................................................................................................16
  Formatieren der Seite ................................................................................................................17
  Einfügen der Elemente ..............................................................................................................18
  Testen der Seite ........................................................................................................................22
Erstellung einfacher Listen ............................................................................................................25
  Erstellen einer Masterseite .........................................................................................................25
  Erstellen der Seite .....................................................................................................................28
  Erstellen des Kopfbereichs .........................................................................................................30
  Erstellen der Film-Tabelle ..........................................................................................................31
Einsatz einer Datenbank ...............................................................................................................34
  Verbinden mit der Datenbank ....................................................................................................34
  Bearbeiten der Daten ................................................................................................................37
  Erstellen der Seite .....................................................................................................................39
  Einfügen der Tabelle auf der Seite .............................................................................................39
Erstellung einer Download-Liste ....................................................................................................48
  Daten eingeben ........................................................................................................................48
  Dateien hinzufügen ...................................................................................................................49
  Seite erstellen ...........................................................................................................................49
  Tabelle einfügen .......................................................................................................................49
  Zusammenfassung ....................................................................................................................56
Erstellung eines Gästebuchs ..........................................................................................................57
  Seiten erstellen .........................................................................................................................57
  Verbindung zur Datenbank herstellen .........................................................................................58
  Ansicht anpassen ......................................................................................................................60
  Felder ausschließen ...................................................................................................................64
  Weiterleitung definieren ............................................................................................................70
  Erstellung der Gästebuchseite ....................................................................................................72
  Tabelle konfigurieren .................................................................................................................72
  Vorlagen entwerfen ...................................................................................................................74
  Datenbindungen zuweisen .........................................................................................................76
  Kopfbereich anpassen ...............................................................................................................78
  Sortierung einstellen .................................................................................................................79
  Zusammenfassung ....................................................................................................................80
E-Mails versenden ........................................................................................................................81
  Clientseitig vs. Serverseitig ........................................................................................................81
  Erstellen der Beispielseite ..........................................................................................................82
  Versenden der E-Mail ................................................................................................................84
  Zusammenfassung ....................................................................................................................87
Übertragen der Seite auf einen Server ...........................................................................................88
  Übertragen der Dateien .............................................................................................................88
  Zusammenfassung ....................................................................................................................90
                                                             Seite 2 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Die Oberfläche kennen lernen
Bevor es um die Erstellung eines konkreten Projektes geht, werden im folgenden Kapitel zunächst die
wichtigsten Bestandteile von Visual Web Developer 2005 Express Edition beschrieben.
Starten Sie zunächst Visual Web Developer und wählen Sie aus dem Menü Datei den Eintrag Neue
Website aus. Daraufhin erscheint der folgende Dialog:




Im oberen Bereich können Sie den Typ der Anwendung, die Sie erstellen wollen auswählen. Hierbei
finden Sie unter „Visual Studio installierte Vorlagen“ Projektvorlagen, während „Meine Vorlagen“ auf
benutzerdefinierte Vorlagen verweist. Darüber hinaus haben Sie über den Eintrag „Onlinevorlagen
suchen…“ die Möglichkeit, nach Vorlagen im Internet zu suchen.
Im unteren Bereich können Sie angeben, wo Ihre Seiten gespeichert werden kann. Hierbei haben
stehen Ihnen die Optionen „Dateisystem“, „HTTP" (Internet per HTTP-Upload) und „FTP“ (Internet
per FTP-Upload) zu Verfügung.
Zusätzlich können Sie unter „Sprache“ zwischen den Programmiersprachen „Visual Basic“ und „Visual
C#“ wählen.
Fürs erste wählen Sie die Vorlage „ASP.NET Website“, „Dateisystem“ und „Visual Basic“ aus. Nachdem
Sie auf „OK“ geklickt haben, wird die Seite zunächst in der Code-Ansicht geöffnet.




                                            Seite 3 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Wechseln Sie über die Schaltflächen im unteren Bereich des Fensters in die Entwurfsansicht.




Jetzt erscheint der Designer, über den Sie die Seite grafisch bearbeiten können. Die Oberfläche sollte
nun in etwa wie folgt aussehen:




                                            Seite 4 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Der Arbeitsbereich
In der Mitte der Oberfläche befindet sich das Arbeitsfenster, auf dem die Seite
entworfen und kodiert wird. Es besteht aus mehreren Sichten, die über
Karteireiter am unteren Fensterrand gewechselt werden können.
Der Reiter „Entwurf“ bietet einen sog. „WYSIWYG“-Editor (what you see is what
you get), mit dem die Seite entworfen wird. Dabei entspricht die Darstellung fast
vollständig der, die später im Browser angezeigt wird.
Im Reiter „Quelle“ haben Sie die Möglichkeit den generierten HTML-Code
einzusehen und zu verändern, sowie Programmcode für die Seite zu hinterlegen.
Daneben werden, je nach Auswahl, dynamisch Schaltflächen eingeblendet, mit
denen Sie während des Entwurfs zwischen den verschiedenen HTML-Tags der
Seite navigieren können.

Die Toolbox
Auf der linken Seite befindet sich die Toolbox, die alle Elemente beinhaltet, die
für den Entwurf einer Seite benötigt werden. Sie ist in die folgenden Bereiche
aufgeteilt:


Bereich            Beschreibung
Standard           Enthält .NET-Steuerelemente, die auf dem
                   Server ausgeführt werden.
Daten              Enthält Steuerelemente, die für

                                             Seite 5 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




                   datengebundene Seiten benötigt werden.
Validierung        Enthält Steuerelemente für die Validierung
                   von Benutzereingaben.
Navigation         Enthält Steuerelemente für die Navigation
                   auf und zwischen Seiten.
Anmelden           Enthält Steuerelemente für das Anmelden
                   an geschützte Seiten.
WebParts           Enthält WebPart-Elemente, die auf
                   Sharepoint-Portalen zum Einsatz kommen.
HTML               Enthält statische HTML-Elemente, die auf
                   dem Client verarbeitet werden.
Allgemein          Enthält den lediglich den „Zeiger“, der
                   angewählt werden kann, um den
                   Mauszeiger wieder in seinen
                   Standardzustand zu bringen.
Zum Wechseln der Bereiche klicken Sie einfach auf das entsprechende Wort.
Um ein Element aus der einzufügen, klicken Sie das entsprechende Element an und ziehen es aus der
Toolbox in den Arbeitsbereich.

Anpassen der Design-Oberfläche
Die Darstellung des Arbeitsbereiches kann über das „Ansicht“-Menü verändert werden. Neben dem
Wechseln der Sichten, können auch zusätzliche Elemente für den Designer angezeigt werden.
So kann es unter Umständen sinnvoll sein, die dargestellten Elemente mit kleinen Bildzeichen
versehen zu lassen, die Informationen über den generierten HTML-Code anzeigen. Im folgenden
Beispiel wird dies sichtbar.
Expandieren Sie den „HTML“-Bereich in der Toolbox und ziehen Sie das Element „Input (Text)“ mit
der Maus auf den Arbeitsbereich. Das Design-Fenster sieht nun in etwa so aus:




                                            Seite 6 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Nun aktivieren Sie im Menü „Ansicht“ den Eintrag „Details“.




                                            Seite 7 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Um die eingefügten Elemente werden nun kleine Textmarken gesetzt, die den umschließenden HTML-
Tag beinhalten. So wissen Sie auch in der Design-Ansicht, ob sich ein Element innerhalb eines
bestimmten Tags befindet, ohne in die HTML-Ansicht wechseln zu müssen.
Über den Menüpunkt „Sichtbare Rahmen“ können Sie bestimmen, das Tabellen in der Design-Ansicht
immer mit einem Rahmen versehen werden sollen auch wenn der Tabelle kein Rahmen zugewiesen
wurde. Dies sorgt für eine bessere Übersicht beim Entwurf und erleichtert das Einfügen neuer
Elemente.
Wenn der Menüpunkt „Nicht visuelle Steuerelemente“ aktiviert ist, so sehen Sie auch Elemente, die
nur zur Entwurfszeit ein Erscheinungsbild haben und zur Laufzeit unsichtbar sind, wie die z.B. bei
Steuerelementen für den Datenzugriff der Fall ist.
Über das „Ansicht“-Menü können darüber hinaus eine Reihe von Hilfsfenstern ein- und ausgeblendet
werden. Die folgende Tabelle gibt eine kurze Beschreibung.

Menüpunkt                  Beschreibung
Datenbank-Explorer         Dient zur Verwaltung von Datenbankverbindungen.
Projektmappen-Explorer     Dient zur Navigation der verschiedenen Dateien eines Projektes.
Lesezeichenfenster         Zeigt Lesenzeichen an, die in der Code-Ansicht erstellt wurden.
Klassenansicht             Zeigt das Projekt in der Klassenansicht an.
Dokumentengliederung       Zeigt eine hierarchische Ansicht der aktiven Seite an.
Objektbrowser              Katalog der eingebundenen Assemblys, sowie dessen Klassen.
Fehlerliste                Zeigt eine Liste aufgetretener Fehler der aktiven Seite an.
Ausgabe                    Zeigt Informationen an, die von der Seite zur Laufzeit ausgegeben werden.
Eigenschaftenfenster       Zeigt die Eigenschaften des selektieren Elements an.
                                            Seite 8 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Aufgabenliste                Dient zur Verwaltung von Aufgaben.
Toolbox                      Enthält Steuerelemente zur Web-Seite-Erstellung.
Suchergebnisse               Zeigt die Ergebnisse einer Suche an.
Weitere Fenster              Zeigt zusätzliche Fenster für Suchergebnisse und anderes an.
Symbolleisten                Zeigt zusätzliche Toolbars an.
Ganzer Bildschirm            Zeigt das aktive Dokument im Vollbildmodus an.
Eigenschaftenseiten          Zeigt Eigenschaftenseiten für das gewählte Element an (sofern
                             vorhanden).
Aktualisieren                Aktualisiert die Anzeige des aktiven Dokuments.

Formatieren von Text
Über das Menü „Format“ kann der jeweils markierte Text bzw. das markierte Element formatiert
werden. Zur Auswahl stehen die folgenden Menüpunkte:

Hauptmenü             Untermenü              Beschreibung
Stil                                         Öffnet einen Dialog in dem Stile definiert werden können.
Vordergrundfarbe                             Öffnen eine Dialog mit dem die Vordergrundfarbe
                                             festgelegt werden kann.
Hintergrundfarbe                             Öffnen eine Dialog mit dem die Hintergrundfarbe
                                             festgelegt werden kann.
Schriftart            Fett                   Stellt den Text fett dar.
                      Kursiv                 Stellt den Text kursiv dar.
                      Unterstrichen          Stellt den Text unterstrichen dar.
                      Hochgestellt           Stellt den Text hochgestellt dar.
                      Tiefgestellt           Stellt den Text tiefgestellt dar.
Blocksatz             Links                  Richtet den Text links aus.
                      Zentriert              Richtet den Text mittig aus.
                      Rechts                 Richtet den Text rechts aus.
                      Blocksatz              Formatiert den Text als Blocksatz.
In Hyperlink                                 Wandelt das markierte Element in einen Hyperlink um.
konvertieren
Lesezeichen                                  Fügt ein Lesezeichen ein.
einfügen
Ausrichtung           Links                  Richtet die markierten Elemente linksbündig aus.
                      Zentriert              Richtet die markierten Elemente zentriert aus.
                      Rechts                 Richtet die markierten Elemente rechtsbündig aus.
                      Open                   Richtet die markierten Elemente oberhalb aus.
                      Mitte                  Richtet die markierten Elemente mittig aus.
                      Unten                  Richtet die markierten Elemente unterhalb aus.
                      Am Raster              Richtet die markierten Elemente am Gitternetz aus.
Größe angleichen      Breite                 Setzt bei den markierten Elementen die gleiche Breite.
                      Höhe                   Setzt bei den markierten Elementen die gleiche Höhe.
                      Beides                 Setzt bei den markierten Elementen die gleiche Breite und
                                             Höhe.
                      Größe an Raster        Passt die Größe der markierten Elemente dem Gitternetz
                      anpassen               an.
Horizontaler          Angleichen             Gleicht den horizontalen Abstand der markierten Elemente
Abstand                                      an.
                      Vergrößern             Vergrößert den horizontalen Abstand der markierten
                                             Elemente.
                      Verkleinern            Vermindert den horizontalen Abstand der markierten
                                             Seite 9 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




                                            Elemente.
                    Entfernen               Entfernt den horizontalen Abstand der markierten
                                            Elemente.
Vertikaler Abstand Angleichen               Gleicht den vertikalen Abstand der markierten Elemente
                                            an.
                    Vergrößern              Vergrößert den vertikalen Abstand der markierten
                                            Elemente.
                    Verkleinern             Vermindert den vertikalen Abstand der markierten
                                            Elemente.
                    Entfernen               Entfernt den vertikalen Abstand der markierten Elemente.
Reihenfolge         In den Vordergrund      Bring das markierte Element in den Vordergrund.
                    In den Hintergrund      Bring das markierte Element in den Hintergrund.
Bei Anwahl des „Stil“-Menüpunktes öffnet sich der „Stil-Generator“-Dialog.




Über diesen können Sie die verschiedensten Stileigenschaften für das selektierte Element festlegen.
Hierzu wählen Sie aus dem linken Bereich des Fensters die gewünschte Kategorie und passen auf der
rechten Seite die entsprechenden Attribute an.
Zur Auswahl stehen die folgenden Kategorien:

Kategorie                  Beschreibung
Schriftart                 Enthält Attribute der Schrift.
Hintergrund                Hier können Hintergrundbild und Farbe definiert werden.

                                           Seite 10 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Text                       Bestimmt Textfluss und Ausrichtung.
Position                   Dient zur Definition von Positionsangaben.
Layout                     Enthält allgemeine Layout-Eigenschaften.
Konturen                   Dient zur Definition von Tabellenrahmen.
Listen                     Dient zur Definition von Listenstilen.
Andere                     Enthält sonstige Attribute.

Erstellen von Tabellen
Über das „Layout“-Menü können Tabellen eingefügt und bearbeitet werden hierfür werden die
folgenden Funktionen angeboten:

Menüpunkt                  Beschreibung
Tabelle einfügen           Fügt eine Tabelle ein.
Ebene einfügen             Fügt einen Layer ein, der als Container für andere Elemente dienen kann.
Einfügen
  Spalte nach links        Fügt   in der selektierten Tabelle eine neue Spalte auf der rechten Seiten
                           ein.
  Spalte nach rechts       Fügt   in der selektierten Tabelle eine neue Spalte auf der linke Seiten ein.
  Zeile oberhalb           Fügt   eine neue Zeile oberhalb der selektierten Zeile ein.
  Zeile unterhalb          Fügt   eine neue Zeile unterhalb der selektierten Zeile ein.
  Zelle links              Fügt   eine neue Zelle links neben der selektierten Zelle ein.
  Zelle rechts             Fügt   eine neue Zelle rechts neben der selektierten Zelle ein.
  Beschriftung             Fügt   eine Kopfzeile in der selektierten Tabelle ein.
Löschen
  Tabelle                  Löscht   die   markierte   Tabelle.
  Spalten                  Löscht   die   markierte   Spalte.
  Zeilen                   Löscht   die   markierte   Zeile.
  Zellen                   Löscht   die   markierte   Zelle.
Auswählen
  Tabelle                  Selektiert   die   markierte   Tabelle.
  Spalte                   Selektiert   die   markierte   Spalte.
  Zeile                    Selektiert   die   markierte   Zeile.
  Zelle                    Selektiert   die   markierte   Zelle.
Größe ändern
  Zeilengröße ändern       Ändert die Größe der markierten Zeile.
  Spaltengröße ändern      Ändert die Größe der markierten Spalte.
Zellen zusammenführen      Verbindet die markierten Zellen.
Positionierung
  Absolut                  Positioniert das markierte Element absolut.
  Relativ                  Positioniert das markierte Element relativ.
  Statisch                 Positioniert das markierte Element statisch.
  Nicht festgelegt         Positioniert das markierte Element automatisch.
  Optionen für             Blendet einen Dialog zur Konfiguration der automatischen Positionierung
  automatische             ein.
  Positionierung

Die Erstellung von Tabellen wird im Kapitel „Anlegen eines Projekts“ näher erklärt.




                                                Seite 11 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Der Projektmappen-Explorer
Auf der rechten Seite der Oberfläche befindet sich im oberen Bereich der „Projektmappen-Explorer“.
Er enthält alle Dateien des Projektes. Durch einen Doppelklick auf ein Element, öffnet sich die
entsprechende Datei im Arbeitsbereich.




Der Projektmappen-Explorer bietet über seine Toolbar einige nützliche Befehle an (von rechts nach
links):
      Eigenschaften der gewählten Datei anzeigen.
      Liste aktualisieren
      Dateien hierarchisch oder als flache Liste anzeigen.
      Gewählte Datei in der Code-Ansicht öffnen.
      Gewählte Datei in der Design-Ansicht öffnen.
      Gewählte Datei auf einen Web-Server übertragen.
      ASP.NET-Konfiguration



Das Eigenschaftenfenster
Im unteren, rechten Teil der Oberfläche befindet sich das Eigenschaftenfenster. Es zeigt die
Eigenschaften des aktuell markierten Elements an und bietet die Möglichkeit, diese zu verändern.
Im unteren Bild werden z.B. die Eigenschaften einer HTML-Seite angezeigt:




                                           Seite 12 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Im oberen Teil des Fensters kann aus einer Auswahlbox der entsprechende Bereich ausgewählt
werden, für den die Eigenschaften angezeigt werden sollen. Da in diesem Beispiel im oberen Teil der
Eintrag DOCUMENT gewählt wurde, werden im unteren Teil alle Eigenschaften der HTML-Seite
angezeigt. Hier kann nun z.B. die Hintergrundfarbe über „BgColor“ verändert werden oder der Titel
der Seite über „Title“ festgelegt werden.
Wird hingegen eine Textbox im Arbeitsbereich markiert, so erscheinen die folgenden Eigenschaften:




                                           Seite 13 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Hier könnte nun z.B. die Breite über „Size“ oder die Anzahl der Zeichen, die maximal eingegeben
werden dürfen über „MaxLength“, zugewiesen werden. Die Änderungen werden daraufhin
automatisch im HTML-Text der Seite angepasst.




                                           Seite 14 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Erstellen einer Beispielanwendung
Nachdem Sie nun mit Microsoft Visual Web Developer 2005 Express Edition und dem Aufbau einer
ASP.NET-Seiten vertraut sind, kommen wir nun zum praktischen Teil: Der Erstellung einer
Beispielanwendung.
Die Beispielanwendung besteht aus den folgenden Bereichen:
     Einer Liste mit Lieblings-CD’s
     Einer Liste mit Lieblingsfilmen
     Einer Download-Liste für Handy-Klingeltöne
     Einem Gästebuch, in dem die Besucher der Seite etwas schreiben können.
     Einem E-Mail-Link, über den der Besucher dem Autor der Seite eine Mail schicken kann.

Erstellen der Startseite
In diesem Kapitel erstellen Sie zunächst eine einfache Startseite, von der aus der Benutzer auf die
verschiedenen Bereiche der Site navigieren kann. Die Erstellung der einzelnen Bereiche wird dann in
den nächsten Kapiteln beschrieben.
Die fertige Startseite soll später wie folgt aussehen:




                                             Seite 15 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Anlegen eines neuen Projektes
Erstellen Sie zunächst auf der Festplatte einen neuen Ordner mit dem Namen „Demo“.
Kopieren Sie im Anschluss die folgenden Grafiken in diesen Ordner:
     Backround.jpg
     Back.gif
     CD.gif
     Guestbook.gif
     Handy.gif
     Mail.gif
     Movies.gif


Zum Anlegen der Startseite gehen Sie nun wie folgt vor:
    Öffnen Sie Microsoft Visual Web Developer 2005 Express Edition und erstellen Sie eine neue
       Web-Anwendung, wie im vorherigen Kapitel beschrieben.
    Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Hauptelement und
       wählen Sie aus dem erscheinenden Kontextmenü den Eintrag „Neues Element hinzufügen“
       aus.
    Nun erscheint ein Dialog zum Hinzufügen von Dateien (siehe unten).
    Wählen Sie das Symbol „Web Form“ aus.
    Im Feld „Name“ geben Sie Default.aspx ein
    Unter „Sprache“ wählen Sie „Visual Basic“ aus




Nachdem Sie auf „Hinzufügen“ geklickt haben, sieht der Arbeitsbereich in etwa so aus:


                                           Seite 16 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Formatieren der Seite
Zuerst weisen Sie der Seite einen Titel zu, der später in der Titelleiste des Browsers angezeigt werden
soll. Dazu wählen Sie im Eigenschaftenfenster in der Auswahlbox den Eintrag „DOCUMENT“ aus und
geben nun unter „Title“ einen beliebigen Titel ein.




                                            Seite 17 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Nun weisen Sie der Seite ein Hintergrundbild zu, um das Aussehen etwas aufzupeppen. Geben Sie
dazu im Eigenschaftenfenster im Eintrag „Background“ den Dateinamen des Hintergrundbilds
(„Background.jpg“) ein.

Einfügen der Elemente
Kommen wir nun zum eigentlichen Aufbau der Seite.
    Schreiben Sie in den oberen Bereich der Seite den Text „Willkommen auf meiner Homepage!“.
    Markieren Sie den Text und wählen Sie aus der Schriftauswahlbox die Schriftart „Verdana“.




                                           Seite 18 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




       Wählen Sie aus der die Schaltfläche „Fett“ um die Schrift fett darzustellen.




       Nun gehen Sie mit dem Cursor an das Ende des Textes und drücken die „Enter“-Taste.
       Jetzt fügen Sie eine Tabelle ein. Hierzu wählen Sie aus dem Menü „Layout“ den Punkt „Tabelle
        einfügen“. Im nun erscheinenden Fenster geben Sie die abgebildeten Werte ein:




                                           Seite 19 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




       Der Arbeitsbereich sollte nun in etwa so aussehen:




                                           Seite 20 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




       Markieren Sie die Tabelle und ändern Sie im Eigenschaftenfenster die Eigenschaft „Border“ auf
        0. Dies bewirkt, dass der Tabellenrahmen später im Browser nicht angezeigt wird.
       Jetzt werden die Zellen jeder Tabellenzeile mit jeweils einem HyperLink gefüllt. In der linken
        Spalte soll hierbei ein Symbol und in der rechten der entsprechende Text dargestellt werden.
        Dazu wählen Sie aus dem „Standard“-Bereich der Toolbox zuerst ein HyperLink-Element aus
        und ziehen es in die erste Zelle der Tabelle. Suchen Sie nun im Eigenschaftenfenster nach der
        Eigenschaft ImageUrl und weisen ihr das Bild CD.gif zu. Das Resultat sollte nun so
        aussehen:




       Nun ziehen sie ein weiteres HyperLink-Control aus der Toolbox in die rechte Spalte, ändern
        die Schriftart auf „Verdana“ und formatieren es fett. Ändern Sie außerdem die Schriftgröße
                                            Seite 21 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




        auf den 10 (in der Auswahlbox neben der Schriftauswahl). Der anzuzeigende Text kann über
        die „Text“-Eigenschaft im Eigenschaftenfenster geändert werden. Diesen Text sollten Sie bei
        beiden Hyperlink-Elementen ebenfalls auch der ToolTip-Eigenschaft zuweisen. Dadurch
        erscheint zur Laufzeit ein kleines Tipp-Fenster, wenn der Benutzer mit der Maus über die Links
        fährt.




       Anschließend weisen Sie den beiden HyperLink-Elementen die URL zu, zu der navigiert
        werden soll, wenn der Benutzer auf den Link klickt. Dazu tragen Sie im Eigenschaftenfenster
        unter NavigateUrl den Text CDs.aspx ein. Dies ist die Datei, die Sie später für die Anzeige
        der CD-Liste erstellen.
Fügen Sie nun nach dem beschriebenen Muster alle weiteren Elemente in die Tabelle ein. Die
Dateinamen der Bilder, Link-Texte und URL’s entnehmen Sie der folgenden Tabelle:

Bild                               Text                               URL
Movies.gif                         Meine Lieblingsfilme               Movies.aspx
Handy.gif                          Handy-Klingeltöne                  Handy.aspx
Guestbook.gif                      Gästebuch                          Guestbook.aspx
Mail.gif                           E-Mail schreiben                   Mail.aspx

Bevor Sie jedoch noch nicht die beschriebenen Seiten angelegt haben, sollten Sie die URLs zunächst
mit Default.aspx füllen, damit es beim Testen der Seite zu keinem Fehler kommt. Wenn Sie dann
in den späteren Kapiteln die Seiten erstellt haben, ändern Sie die Startseite entsprechend.


Die fertige Seite sollte am Ende so aussehen wie in der Abbildung am Anfang des Kapitels dargestellt.

Testen der Seite
Nachdem nun alle notwendigen Schritte zur Erstellung der Startseite abgearbeitet wurden, können Sie
das Ergebnis im Browser testen. Hierzu klicken Sie mit der rechten Maustaste in den Hintergrund der
Seite und wählen aus dem erscheinenden Menü den Punkt „In Browser anzeigen“. Alternativ können
Sie auch die gesamte Anwendung in Debug-Modus starten. Hierzu wählen Sie aus dem „Debug“-Menü
den Eintrag „Debuggen starten“.




                                           Seite 22 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Daraufhin startet Microsoft Visual Web Developer 2005 Express Edition seinen lokalen Web Server,
der die Seite verarbeitet und im Browser anzeigt. Signalisiert wird dies durch eine Sprechblase im
rechten Bereich der Startleiste.




Wenn Sie mit der rechten Maustaste auf das Symbol klicken, erscheint ein Menü, aus dem Sie die
folgenden Punkte auswählen können:

       Im Web Browser öffnen
        Zeigt die aktuelle Seite im Browser an.
       Beenden
        Beendet den Web Server.
       Details anzeigen
        Öffnet einen Dialog, in dem die aktuellen Einstellungen begutachtet werden können, wie hier
        zu sehen:



                                           Seite 23 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Nun öffnet sich der Internet Explorer und zeigt die fertige Seite an:




                                            Seite 24 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Erstellung einfacher Listen
In diesem Kapitel erstellen Sie die Seite mit Ihren Lieblingsfilmen. Die Filme werden dabei in einem
GridView-Web-Control angezeigt. Die fertige Seite soll später in etwa so aussehen:




Erstellen einer Masterseite
Alle Seiten der Web-Anwendung haben im unteren Bereich einen Link, über den der Benutzer auf die
Startseite zurückkehren kann. Um nun zu vermeiden diesen auf jeder Seite erneut erstellen zu
müssen, kann eine sogenannte Masterseite erstellt werden, die jede Elemente enthält, die auf
mehreren Seiten dargestellt werden. Außerdem ermöglichen Masterseiten das einfache Ändern von
allgemeinen Elementen im Nachhinein.
Zum Anlegen der Masterseite gehen Sie wie folgt vor:
    Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Hauptelement und
       wählen Sie aus dem erscheinenden Kontextmenü den Eintrag „Neues Element hinzufügen“
       aus.
    Nun erscheint ein Dialog zum Hinzufügen von Dateien (siehe unten).
    Wählen Sie das Symbol „Masterseite“ aus.
    Übernehmen Sie den vorgeschlagenen Namen „MasterPage.master“ und die Sprache „Visual
       Basic“.
    Klicken Sie die Option „Code in eigener Datei platzieren“ an, der bewirkt, dass die Seite in
       einer separaten Datei gespeichert wird.
                                          Seite 25 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Nachdem Sie auf „Hinzufügen“ geklickt haben, sieht der Arbeitsbereich in etwa so aus:




                                           Seite 26 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Im oberen Bereich wurde ein sogenannter „Content Place Holder“ eingefügt, ein Platzhalter, in den
später der Inhalt der Seite kommt. Nun können Sie ober- oder unterhalb des Platzhalters Elemente
einfügen, die auf jeder Seite angezeigt werden, die mit dieser Masterseite verknüpft sind.

Zum Konfigurieren der Masterseite gehen Sie wie folgt vor:
    Wechseln Sie im Eigenschaftenfenster in den „DOCUMENT“-Bereich aus.
    Geben Sie in der Eigenschaft „Background“ die Datei Background.jpg an.
    Ziehen Sie ein Horizontal Rule-Element aus dem HTML-Bereich der Toolbox auf den
      Arbeitsbereich und positionieren es unterhalb des Platzhalters.
    Darunter fügen Sie über das „Layout/Tabelle einfügen“-Menü eine Tabelle mit zwei Spalten
      und einer Zeile ein (Weite 217, Höhe 41).
    Klicken Sie nun in die erste Spalte und fügen Sie aus dem „Standard“-Bereich der Toolbox ein
      HyperLink-Element ein.
    Weisen Sie dem Element über die „ImageUrl“-Eigenschaft den Namen der Grafik (Back.gif)
      zu.
    Fügen Sie in die zweite Spalte ein weiteres HyperLink-Element ein und weisen ihm über die
      Text-Eigenschaft die Beschriftung „Zurück zur Startseiten“ zu.
    Formatieren Sie den Text wie folgt: Schriftart „Verdana“, Größe 10, fett.

Die fertige Seite sollte nun wie folgt aussehen:




                                            Seite 27 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Erstellen der Seite
Nachdem sie die Masterseite angelegt haben, können Sie nun die eigentliche Seite erstellen und mit
der Masterseite verknüpfen. Hierzu gehen Sie wie folgt vor:
     Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Hauptelement und
       wählen Sie aus dem Kontextmenü den Eintrag „Neues Element hinzufügen“
     Wählen Sie im nun erscheinenden Dialog den Eintrag „Web Form“ aus.
     Geben Sie der Seite den Namen Movies.aspx.
     Aktivieren Sie die Option „Code in eigener Datei platzieren“.
     Durch Aktivieren der Option „Masterseite auswählen“, bestimmen Sie, dass die Seite mit einer
       Masterseite verknüpft werden soll.




                                           Seite 28 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Nachdem Sie auf die „Hinzufügen“-Schaltfläche geklickt haben, öffnet sich ein Dialog, in dem Sie die
gewünschte Masterseite auswählen können.




                                           Seite 29 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Wenn Sie mit „OK“ bestätigt haben, öffnet sich die Seite. Wenn Sie in den Entwurfsmodus wechseln,
sehen Sie, wie der Inhalt der Masterseite eingefügt wurde. Alles, was Sie nun auf der Seiten erstellen
wollen, müssen Sie in das „Content Place Holder“-Element einfügen.




Wechseln Sie nun im Eigenschaftenfenster in den Bereich „DOCUMENT“ und weisen der Seite über die
„Title“-Eigenschaft der Seite den Titel „Meine Lieblingsfilme“ zu.

Erstellen des Kopfbereichs
Für die Erstellung des Kopfbereichs der Seite, die den Titel und das Symbol enthält, gehen Sie wie
folgt vor:
      Klicken Sie in den Arbeitsbereich und fügen Sie über das „Layout/Tabelle einfügen“-Menü eine
         Tabelle mit zwei Spalten und einer Zeile ein (Weite 168, Höhe 68).
      Fügen Sie in die erste Spalte ein Image-Element aus dem HTML-Bereich der Toolbox ein.
      Weisen Sie dem Bild über die „Scr“-Eigenschaft den Namen der Grafik („Movies.gif“) zu.
      Fügen Sie in die zweite Spalte ein Label-Element aus dem Standard-Bereich der Toolbox ein.
      Ändern Sie den Text in „Meine Lieblingsfilme“.
      Formatieren Sie den Text wie folgt: Schriftart „Verdana“, Größe 3, fett.
      Vergrößern Sie ggf. die Tabelle, so dass der Titel nicht in eine neue Zeile umgebrochen wird.
      Ziehen Sie ein Horizontal Rule-Element aus dem HTML-Bereich der Toolbox auf den
         Arbeitsbereich und positionieren ihn unterhalb der Tabelle.
      Fügen Sie eine Leerzeile durch Drücken der „Enter“-Taste ein.


Die Seite sollte nun in etwas so aussehen:


                                             Seite 30 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Erstellen der Film-Tabelle
Nachdem der Aufbau der Seite steht, können Sie nun mit dem Erstellen der Film-Tabelle beginnen.
Dazu gehen Sie wie folgt vor:
    Ziehen Sie das „Table“-Steuerelement aus dem „Standard“-Bereich der Toolbox auf den
       Arbeitsbereich und positionieren es zwischen den beiden Linien.
    Weisen Sie der Tabelle über die „BackColor“-Eigenschaft die „Web“-Farbe „LightCyan“ zu.
    Den Tabellenrahmen formatieren Sie wie folgt:

         Eigenschaft     Wert
         BorderColor     blue
         BorderStyle     Solid
         BorderWidth     1

       Setzen Sie die Eigenschaften „CellPadding“ und „CellSpacing“ auf 0, um den Abstand zwischen
        den Tabellenzellen zu entfernen. Dies ist später für die Darstellung der Rahmen um die Zellen
        wichtig.
       Wählen Sie im Eigenschaftenfenster den Eintrag „Rows“ aus und klicken dort auf die
        Schaltfläche mit den drei Punkten.


Nun öffnet sich ein Dialog mit dem Sie die Zeilen der Tabelle bearbeiten können.
    Klicken Sie auf die Schaltfläche „Hinzufügen“, um eine neue Zeile zu erstellen. Auf der linken
        Seite können Sie nun die Eigenschaften der Zeile bearbeiten.
    Die erste Zeile ist die Titelzeile in der Tabelle und wird wie folgt formatiert:

                                           Seite 31 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




          Eigenschaft     Wert
          BackColor       blue
          BorderColor     blue
          BorderStyle     Solid
          BorderWidth     1
          Font            Verdana
          Bold            true
          ForeColor       White
          Width           300


Nun werden die einzelnen Spalten der Zeile erstellt. Dazu wählen Sie die Eigenschaft „Cells“ an und
klicken auf die Schaltfläche mit den drei Punkten. Es erscheint ein Dialog, ähnlich dem der Zeilen, in
dem Sie die einzelnen Spalten erstellen und formatieren können.
Führen   Sie dazu die folgenden Schritte aus:
        Klicken Sie auf die Schaltfläche „Hinzufügen“ um eine neue Spalte anzulegen.
        Tragen Sie in der Eigenschaft „Text“ den Spaltentitel „Film“ ein.
        Formatieren Sie den Rahmen wie folgt:

          Eigenschaft     Wert
          BorderColor     blue
          BorderStyle     Solid
          BorderWidth     1

        Erstellen Sie eine weitere Spalte, weisen Sie ihr den Text „Darsteller“ zu und formatieren den
         Rahmen wie in der ersten Spalte.
        Schließen Sie den Dialog durch Klicken auf „OK“.


Nun befinden Sie sich wieder im Zeilen-Dialog, in dem Sie nun die Zeilen für die einzelnen Filme
anlegen. Hierbei müssen Sie die Zeilen nur mit „Hinzufügen“ anlegen und brauchen keine weiteren
Formatierungen vorzunehmen.
Für jede Zeile müssen wieder zwei Spalten angelegt werden, die nun jeweils mit dem Titel des Films
und deren Darsteller gefüllt werden. Die Formatierung der Spalten sieht dabei wie folgt aus:

Eigenschaft      Wert
BorderColor      blue
BorderStyle      Dotted
BorderWidth      1
In der „Titel“-Spalte wird die Schrift zusätzlich in fett dargestellt („Bold“-Eigenschaft unter „Font“).
Wenn Sie nun die Dialoge mit „OK“ schließen, können Sie sich das Ergebnis Ihrer Arbeit ansehen. Das
Resultat sollte in etwa so aussehen:




                                              Seite 32 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Öffnen Sie die Seite im Browser, indem Sie mit der rechten Maustaste in den Hintergrund klicken und
aus dem Menü den Punkte „In Browser anzeigen“ auswählen. Prüfen Sie, ob alles korrekt formatiert
ist und ob die Navigation zur Startseite funktioniert.




                                           Seite 33 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Einsatz einer Datenbank
Wenn sich der Inhalt einer Web-Seite häufig ändert, bietet sich der Einsatz einer Datenbank an. In ihr
werden alle benötigten Daten gespeichert und gepflegt. Dies hat nicht nur den Vorteil der einfachen
Pflege, sondern auch der klaren Trennung von Web-Seite und Daten. Auch können verschiedene
Seiten auf den gleichen Datenbestand zugreifen, ohne dass die Daten mehrfach eingegeben werden
müssen. Bei Änderungen sind auf diese Weise alle Seiten automatisch auf dem neusten Stand.
Für die Filmseite finden Sie auf der CD die Microsoft Access-Datenbank „DemoDb.mdb“, die Sie mit
Ihren Filmen füllen können. Das Ergebnis dieses Kapitels sollte in etwa wie folgt aussehen:




Verbinden mit der Datenbank
Um die Daten auf der Web-Seite anzeigen zu können, müssen Sie in Microsoft Visual Web Developer
2005 Express Edition zunächst eine Verbindung zur Datenbank herstellen. Hierfür wählen im Fenster
„Projektmappen-Explorer“ den Bereich „Datenbank-Explorer“ an.



                                           Seite 34 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Klicken Sie auf das Symbol     um eine neue Verbindung zu erstellen. Daraufhin erscheint der
folgende Dialog:




Wählen Sie den Punkt „Microsoft Access-Datenbankdatei“ und klicken Sie auf „Weiter“. Nun erscheint
ein weiterer Dialog, in dem Sie den Dateinamen der Datenbank angeben.




                                           Seite 35 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Geben Sie hier den Pfad zur „DemoDb.mdb“ an. Um zu überprüfen, ob alle Werte korrekt angegeben
wurden, klicken Sie zuletzt auf die Schaltfläche „Testverbindung“, um eine Verbindung zur Datenbank
herzustellen. War der Test erfolgreich, gibt Microsoft Visual Web Developer 2005 Express Edition die
Meldung „Die Testverbindung war erfolgreich“ aus.
Nachdem Sie das Fenster mit „OK“ geschlossen haben, sieht der Datenbereich nun wie folgt aus:




                                           Seite 36 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Bearbeiten der Daten
Nun können Sie Ihre Filme in der Datenbank erfassen. Hierfür klicken Sie mit der rechten Maustaste
auf den Eintrag „Tabellen“ und wählen aus dem Menü den Punkt „Neue Abfrage“ aus. Hierdurch
erstellen Sie eine neue Datenbankabfrage.




Im nun erscheinenden Fenster wählen Sie die Tabelle „tbCD“ aus und klicken auf „Hinzufügen“. Da Sie
keine weiteren Tabellen in der Abfrage verwenden wollen, schließen Sie den Dialog über „Schließen“.
Der Arbeitsbereich sieht nun wie folgt aus:




                                           Seite 37 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




In der oberen Hälfte des Bildschirms sehen Sie die ausgewählte Tabelle. Hier klicken Sie auf den
Eintrag „* (Alle Spalten)“, um alle Felder auszuwählen. Um die Abfrage auszuführen klicken Sie in der
Toolbar die Schaltfläche „SQL ausführen“ aus.




Das Ergebnis der Abfrage wird daraufhin im unteren Bereich des Fensters angezeigt. Hier können Sie
nun die vorhandenen Daten ändern, löschen oder neue hinzufügen.

                                           Seite 38 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Erstellen der Seite
Nachdem alle Vorbereitungen getroffen sind, können Sie sich jetzt dem Entwurf der Seite zuwenden.
Dazu erstellen Sie eine neue ASP.NET-Datei mit dem Namen CDs.aspx. Weisen Sie ihr, wieder die
Masterseite zu und geben der Seite den Titel „Meine CD’s“. Fügen Sie den Kopfbereich ein, wie dies im
letzten Kapitel bereits beschrieben wurde. Als Grafik für den Kopfbereich verwenden Sie die Datei
CD.gif.

Einfügen der Tabelle auf der Seite
Für die Darstellung der Daten ziehen Sie das GridView-Steuerelement aus dem Bereich „Daten“ der
Toolbox auf den Arbeitsbereich. Daraufhin wird neben der Tabelle auch ein Konfigurationsfenster
angezeigt, über das Sie die Datenbindung und Darstellung anpassen können. Wählen Sie hierin unter
„Datenquelle auswählen“ den Punkt „<Neue Datenquelle>“ aus.




Daraufhin erscheint ein Konfigurationsdialog, in dem Sie die Datenbankverbindung angeben. Wählen
Sie aus der Liste den Punkt „Access-Datenbank“ und geben Sie als Namen „DemoDb“ an.


                                           Seite 39 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Nachdem Sie den Dialog bestätigt haben, öffnet sich ein Assistent, der bei der Konfiguration der
Tabelle behilflich ist. Zunächst werden Sie nach dem Pfad der Datenbankdatei gefragt. Hier geben Sie
„~/App_Data/DemoDb.mdb“ an.




                                           Seite 40 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Im nächsten Schritt definieren Sie die Datenbankabfrage, die die darzustellenden Felder enthält. Hier
wählen Sie die Felder „Interpret“ und „Titel“ aus.




                                           Seite 41 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Über die „ORDER BY“-Schaltfläche haben Sie außerdem die Möglichkeit eine Sortierreihenfolge
festzulegen. Bei Anwahl öffnet sich ein Dialog, indem Sie angeben können, nach welchen Feldern und
in welcher Reihenfolge die Sortierung erfolgen soll. Wählen Sie hier das Feld „Interpret“ aus und
übernehmen Sie die Vorgabe „Aufsteigend“, die für eine aufsteigende Sortierung steht.




                                           Seite 42 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Im nächsten Schritt haben Sie die Möglichkeit sich das Ergebnis der Abfrage anzuschauen. Hierzu
wählen Sie die Schaltfläche „Test Query“ aus.




                                           Seite 43 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Nachdem Sie den Assistenten über die „Fertig stellen“-Schaltfläche beendet haben, sieht Ihr
Arbeitsbereich nun wie folgt aus:




                                           Seite 44 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Um das Konfigurationsmenü zu öffnen, klicken Sie mit der Maus auf den Pfeil der in der linken, oberen
Ecke der Tabelle angezeigt wird:




Was nun noch fehlt, ist der Tabelle eine ansprechende Darstellung zu geben. Hierfür wählen Sie aus
dem Konfigurationsfenster den Punkt „Autom. Formatierung“ an, der den folgenden Dialog öffnet:




                                           Seite 45 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Hier können Sie nun aus verschiedenen vorgefertigten Darstellungstypen auswählen. Wenn Sie die
Schaltfläche „Übernehmen“ wählen, können Sie den jeweiligen Stil im Arbeitsbereich begutachten,
bevor Sie ihn zuweisen.
Darüber hinaus bietet das Konfigurationsfenster die Option „Sortieren aktivieren“. Hierüber können Sie
festlegen, dass die Einträge der Tabellentitelzeile als Links dargestellt werden. Klickt der Benutzer auf
diese, wird die Tabelle nach dem entsprechenden Feld sortiert.
Außerdem kann über „Paging aktivieren“ festgelegt werden, dass die Einträge der Tabelle auf mehrere
Seiten verteilt werden soll. Hierbei werden – je nach Anzahl – mehrere Seitenzahlen im Fußbereich
angezeigt, über die der Benutzer zwischen den Seiten navigieren kann. Bei Umfangreichen Listen
macht dies die Seite nicht nur übersichtlicher, sondern beschleunigt auch den Seitenaufbau, da Initial
nicht alle Daten aus der Datenbank ermittelt und dargestellt werden müssen, sondern nur ein
Teilbereich. Die Anzahl der Datensätze, die pro Seite angezeigt werden sollen, können Sie im
Eigenschaftenfenster über den Punkt „PageSize“ festlegen.
Die Option „Auswahl aktivieren“ bewirkt, dass die Einträge der Tabelle als Links angezeigt werden und
somit vom Benutzer angewählt werden können. Dies ist sinnvoll, wenn Sie beispielsweise eine
Extraseite je CD erstellen wollen, um zusätzliche Informationen anzuzeigen.
Die fertige Seite könnte nun beispielsweise wie folgt aussehen:




                                            Seite 46 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




                                           Seite 47 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Erstellung einer Download-Liste
Ziel dieses Kapitels ist es am Beispiel einer Download-Liste für Handyklingeltöne die Techniken des
vorangegangenen Kapitels mit Neuem zu verbinden.




Daten eingeben
Da die Tabelle tbKlingeltoene bereits in der Datenbank DemoDb.mdb erstellt ist, können Sie sich
daran machen diese mit Daten zu füllen. Dazu wählen Sie einfach Ihre Tabelle und klicken im
Kontextmenü (rechte Maustaste) auf den Eintrag „Tabellendaten anzeigen“.




                                           Seite 48 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Wie immer sollten Sie in das Feld „ID“ nichts eingegeben, da dieses Feld automatisch von der
Datenbank gefüllt wird. Sobald Sie damit beginnen eine Zeile zu füllen wird automatisch eine neue,
leere unten angefügt. Im Feld „Dateiname“ tragen Sie nur den relativen Dateinamen (ohne Pfad) ein.

Wenn Sie fertig sind, klicken Sie auf   um die Änderungen zu speichern und die Ansicht zu beenden.

Dateien hinzufügen
Legen Sie einen Unterordner mit dem Namen „Midi“ an und kopieren Sie die Dateien, die sie in die
Datenbank eingetragen haben hinein. Wir verwenden in unserem Beispiel MIDI (Musical Instruments
Digital Interface)-Dateien, die von neueren Handys als Klingeltöne akzeptiert werden. Trotzdem bietet
es die Möglichkeit praktisch beliebige Dateien (Bilder, Texte etc.) zum Download anzubieten.

Denken Sie auch daran diesen Ordner mit auf den Internetserver zu kopieren.

Seite erstellen
Bisher haben wir festgelegt, welche Daten angezeigt werden sollen. Nun müssen wir uns darum
kümmern, wie die Daten anzuzeigen sind.

Erstellen Sie eine neue ASP.NET-Seite (Datei » Neu » Datei… » Web Form) mit dem Namen
Handy.aspx und ordnen diese der Masterseite zu.

Als Grafik für den Kopfbereich können Sie die Handy.gif verwenden, als Titel beispielsweise „Handy
Klingeltöne“.

Tabelle einfügen
Um die Daten der Tabelle aus der Datenbank tabellarisch auf der Seite darzustellen, markieren Sie die
Tabelle im Datenbank-Exlorer und ziehen diese mit gedrückter, linker Maustaste auf den
Arbeitsbereich (Drag & Drop). Es erscheint eine automatisch erstellte Tabelle („GridView“) sowie ein
grauer Kasten mit der Aufschrift „AccessDataSource“, der für die Verbindung mit der Datenbank
verantwortlich ist.

Die Seite sollte nun im Entwurf etwa so aussehen:




                                           Seite 49 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Die Tabelle hat dabei das Design der aktuellen Seite übernommen. Um andere vordefinierte
Farbschemas zu verwenden wählen Sie im Smart Tag „GridView-Aufgaben“ (siehe rote Markierung auf
der Abbildung) den Eintrag „Autom. Formatierung…“ und entscheiden sich im nachfolgenden Dialog
für einen Sie optisch ansprechenden Look. Für dieses Beispiel verwenden wir „Schneebedeckte
Kiefer“.




                                           Seite 50 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Es empfiehlt sich im Smart Tag die Optionen „Paging aktivieren“ und „Sortieren aktivieren“
einzuschalten. Durch „Sortieren aktivieren“ kann der Benutzer später selber die Tabelle nach einer
bestimmten Spalte neu sortieren, indem er die Überschrift anklickt. „Paging aktivieren“ zeigt nur
maximal die ersten 10 Einträge aus der Datenbank an und fügt am Ende der Tabelle eine Zeile mit
den vorhandenen Seiten ein, sodass der Benutzer selber zwischen den „Seiten“ blättern kann.




                                           Seite 51 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Jetzt stören noch zwei Dinge. Zum einen ist die „ID“-Spalte für den Besucher unserer Seite
uninteressant und dient nur für die interne Verwaltung in der Datenbank und zum anderen sollen in
der Spalte „Datei“ nicht die Dateinamen der Klingeltöne angezeigt werden, sondern ein Link auf die
entsprechende Datei erscheinen.




                                           Seite 52 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Um diese Änderungen vorzunehmen, öffnen Sie das Smart Tag der Tabelle und klicken auf „Spalten
bearbeiten…“. Daraufhin erscheint ein Dialog, in dem die einzelnen Spalten der Tabelle links unten
aufgelistet sind.

Zuerst wählen Sie die erste Spalte und ändern rechts in der Liste die Eigenschaft „Visible“ auf den
Wert „False“. Die Spalte wird damit dem Betrachter nicht mehr mit angezeigt.




                                            Seite 53 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Als nächstes wollen wir in der Spalte „Dateiname“ nicht den Inhalt des Feldes ausgeben, der ja ein
Dateiname ist, sondern dem Betrachter einen Link bieten, der auf diese Datei verweist. Dazu wählen
wir die dritte Spalte aus und tragen unter „DataFormatString“ folgendes ein:

<a href="midi/{0}">Download</a>

Dies ist normales HTML, welches in jeder Zeile eingefügt wird, wobei {0} für den Datenbankinhalt der
Spalte (in unserem Fall: der Dateiname) steht. Der Text „Download“ erscheint für den Besucher
sichtbar in jeder Zeile.




                                           Seite 54 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Ändern Sie als letzten Schritt noch die Eigenschaft „HeaderText“ von „Dateiname“ in „Datei“, da für
den Besucher der Dateiname jetzt nicht mehr erkennbar ist.

Die fertige Seite sieht dann etwa so aus:




                                            Seite 55 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Zusammenfassung
Wie Sie sehen konnten wir mit wenigen Mausklicks eine voll funktionsfähige Seite mit einer
datenbankgebundene Tabelle erstellen und dabei diverse Optionen und Formatierungen
(Sichtbarkeit/Formatierung der Spalten, Sortier- und Paging-Funktionen) ganz ohne zu Programmieren
nach unseren Wünschen anzupassen.

                                           Seite 56 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Erstellung eines Gästebuchs
In diesem Kapitel wird die Erstellung eines Gästebuchs vorgestellt, wie man es aus dem Internet
kennt. Dieses besteht aus zwei Teilen: der Anzeige der Einträge und einer Eingabemaske um eine
neue Eintragung vorzunehmen. Dazu werden wir uns einiger fortgeschrittener Techniken bedienen
und die in den vorangegangenen Kapiteln vorgestellten Verfahren voraussetzen.

Eine Datenbank für das Gästebuch mit dem Namen tbGaestebuch finden Sie in der DemoDb.mdb.
Diesmal brauchen Sie keine Daten in die Tabelle eingeben. Das sollen ja die hoffentlich zahlreichen
Besucher Ihres Webauftritts in einer Eingabemaske tun. Diese gilt es als Nächstes zu Erstellen.

Seiten erstellen
Erstellen Sie eine neue ASP.NET Seite mit dem Namen Guestbook.aspx, weisen Sie die Masterseite
(MasterPage.master) zu und geben Sie der Seite den Titel „Mein Gästebuch“.

Als Grafik für den Kopfbereich aus den vorangegangenen Kapiteln, können Sie die Guestbook.gif
verwenden.

Damit Sie für die Eingabeseite das Design nicht nochmals erstellen müssen, speichern Sie die Seite am
besten gleich unter dem Namen GuestbookAdd.aspx ab (Datei » Guestbook.aspx speichern
unter…).




                                           Seite 57 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Verbindung zur Datenbank herstellen
Wie im vorangehenden Kapitel ziehen wir die Datenbanktabelle (hier: tbKlingeltoene) aus dem
Datenbaank-Explorer mit gedrückter, linker Maustaste auf den Arbeitsbereich. Dies tun wir, damit wir
ein fertig konfiguriertes „AccessDataSource“-Objekt erhalten. Allerdings benötigen wir die automatisch
angelegte Tabellenansicht nicht, welche Sie bitte mit der rechten Maustaste und dem Menüpunkt
„Löschen“ wieder entfernen.




Stattdessen wollen wir eine Reihe von Textfeldern anzeigen in welche der Benutzer die Informationen
für seinen Gästebucheintrag eingeben kann. Dabei bedienen wir uns der Komponente „DetailsView“,
die Sie ebenfalls mit der linken Maustaste aus der Toolbox am linken Rand auf die Seite ziehen
können.


                                           Seite 58 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Als ersten Schritt müssen wir der Komponente mitteilen, woher die Daten kommen (bzw. in unserem
Fall die Daten geschrieben werden sollen). Dazu wählen Sie im erschienenen Smart Tag „DetailsView-
Aufgaben“ unter dem ersten Eintrag „Datenquelle auswählen“ unsere automatisch konfigurierte
„AccessDataSource1“ aus. Mehr braucht die Komponente nicht zu wissen um die Daten in unsere
Datenbanktabelle zu schreiben.




                                           Seite 59 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Ansicht anpassen
Mit Hilfe von „Autom Formatierung“ (im Smart Tag oder rechte Maustaste auf die DetailsView) lässt
sich das Farbschema anpassen. Wir verwenden den Stil „Brauner Zucker“ in diesem Beispiel.




                                           Seite 60 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Damit die DetailsView, die deutlich mehr kann, als nur Daten in Datenbanktabellen zu schreiben, weiß,
was wir von ihr wollen, sind zwei Schritte zu tun. Zum einen muss im Smart Tag die Option „Einfügen
aktivieren“ angehakt sein, damit das Einfügen neuer Zeilen in die Datenbanktabelle erlaubt wird.




                                           Seite 61 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Zum anderen muss im Eigenschaftenfenster (rechts unten) die Eigenschaft „DefaultMode“ auf „Insert“
gestellt werden, damit die Komponente direkt im Eingabemodus angezeigt wird.




                                           Seite 62 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Wenn Sie möchten, können Sie der Komponente mit der Eigenschaft „HeaderText“ noch eine
Überschrift wie zum Beispiel „Neuer Eintrag“ verpassen.




                                           Seite 63 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Felder ausschließen
Ihnen wird aufgefallen sein, dass nun für alle Felder in der Datenbanktabelle automatisch Textfelder
angezeigt werden. Dies macht für die meisten Fälle auch Sinn, jedoch werden die Felder „ID“ und
„Datum“ automatisch vom Datenbanksystem gefüllt und nicht vom Benutzer, weshalb wir diese per
Hand wieder entfernen müssen. Um die Felder zu bearbeiten wählen Sie „Felder bearbeiten…“ im
Smart Tag.




                                           Seite 64 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Unten links sehen Sie die angezeigten Felder. Wählen Sie das Feld „ID“ aus und löschen Sie es durch
einen Klick auf    . Verfahren Sie genauso mit dem Feld „Datum“.




                                           Seite 65 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Nun können die letzte Zeile, die derzeit die zwei Links „Einfügen“ und „Abbrechen“ enthält an unsere
Bedürfnisse anpassen. Diese Zeile findet sich in der Liste der Felder an letzter Stelle unter der
Bezeichnung „Neu, Einfügen, Abbrechen“. Wählen Sie diese aus und ändern Sie rechts die Eigenschaft
„ShowCancelButton“ auf „False“ sowie „InsertText“ in eine passende Bezeichnung wie beispielsweise
„Eintragen“.




                                           Seite 66 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




                                           Seite 67 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Noch weiß unsere AccessDataSource nichts davon, dass wir die Felder „ID“ und „Datum“ nicht durch
den Benutzer, sondern durch die Datenbank füllen lassen wollen. Dazu klicken Sie die
AccessDataSource mit der rechten Maustaste an uns wählen „Eigenschaften“. Neben der Eigenschaft
„InsertQuery“ und dem Text „(Abfrage)“ befindet sich der Button „…“, der einen kleinen Editor für die
Datenbankbefehle öffnet.




Der in dem oberen Textfeld eingetragene Befehl wird ausgeführt, wenn der Benutzer auf dem
„Eintragen“-Link klickt und ein neuer Datensatz in die Datenbanktabelle geschrieben werden soll. Hier
genügt es in unserem Fall nach dem tbGaestebuch die beiden Felder „ID“ und „Datum“
herauszunehmen und aus dem VALUES-Teil entsprechend zwei Fragezeichen (diese stehen jeweils für
ein Textfeld) zu entfernen. Der modifizierte Befehl sieht dann so aus:

INSERT INTO tbGaestebuch(Name, Email, Homepage, Ort, Kommentar) VALUES
(?,?,?,?,?)




                                           Seite 68 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Die Seite sollte nun ungefähr so aussehen:




                                             Seite 69 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Sie können die Seite nun ausprobieren und Daten eingeben. Nach einem Klick auf Eintragen landen
die Daten in der DemoDb.mdb.



Weiterleitung definieren
Schön wäre jetzt noch, wenn nach einem Eintrag das Gästebuch angezeigt werden würde, da
üblicherweise ein Besucher nicht mehr als einen Eintrag (pro Besuch) schreiben möchte. Wie wir
wissen ist die AccessDataSource-Komponente für alle Zugriffe auf die Datenbank zuständig. Von
dieser können wir uns benachrichtigen lassen, wenn das Schreiben abgeschlossen ist, damit wir auf
die Gästebuchseite wechseln können.

       Wählen Sie die Komponente „AccessDataSource“ durch einen Mausklick aus.
                                           Seite 70 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




       Ändern Sie die Ansicht im Eigenschaftsfenster (rechts unten) durch Klick auf das Symbol       ,
        sodass nur Ereignisse angezeigt werden.

       Machen Sie einen Doppelklick auf den Text „Inserted“. Das Ereignis „Inserted“ tritt ein,
        nachdem ein neuer Datensatz in der Datenbank angelegt wurde.




       Es öffnet sich der Texteditor. Geben Sie folgenden Code ein:
        Response.Redirect("Guestbook.aspx")

        Diese Zeile sorgt dort dafür, dass eine Weiterleitung (engl. „Redirect“) auf die Gästebuchseite
        Guestbook.aspx erfolgt.




                                            Seite 71 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Erstellung der Gästebuchseite

Öffnen Sie die Guestbook.aspx, die sie im ersten Teil erstellt haben und platzieren Sie einen
„HyperLink“. Ändern Sie die Eigenschaft „Text“ in „Neuer Eintrag“ und „NavigateUrl“ in den Namen der
Zielseite (in diesem Fall die Eingabeseite "GuestbookAdd.aspx"). Sie können auch auf die
Schaltfläche „…“ klicken und die Seite im darauf erscheinenden Fenster durch Klicken auswählen.

Damit sorgen Sie dafür, dass wenn der HyperLink angeklickt wird, die Eingabeseite angezeigt wird.




Tabelle konfigurieren
Nun können Sie ganz normal die Tabelle tbGaestebuch aus dem Datenbank-Explorer auf die Seite
unter den eben eingefügten HyperLink ziehen. Wie gewöhnlich werden dadurch eine „GridView“ sowie
ein „AccessDataSource“ erzeugt.

Das GridView sieht standardmäßig etwas trist aus, sodass Sie diesem etwas Leben einhauchen sollten.
Glücklicherweise ist dies mit vorgegebenen Formatierungen möglich, die Sie lediglich auswählen
brauchen. Diese Funktionalität verbirgt sich hinter dem Namen „Autom. Formatierung“ und erscheint
im Smart Tag oder sobald Sie das GridView selektieren und mit der rechten Maustaste anklicken. Sie
können das ausgewählte Schema zu einem späteren Zeitpunkt wieder ändern. Für unser Beispiel
wurde das Farbschema „Schiefer“ verwendet. Wenn Sie sich mit einem Schema anfreunden konnten
bestätigen Sie Ihre Auswahl mit „OK“.




                                           Seite 72 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Für ein Gästebuch ist die reguläre tabellarische Ansicht der Daten eher ungeeignet, sodass wir hier
manuell nachbessern müssen. Sie finden bei ausgewähltem GridView im Smart Tag den Punkt
„Spalten bearbeiten…“ mit welchem wir die angezeigten Daten beeinflussen können.




Im neuen Fenster stehen links unten die derzeit angezeigten Felder. Hierbei handelt es sich um
datengebundene Felder welche durch Werte aus einer Datenbanktabelle ersetzt werden und in Form
von Spalten dargestellt werden.




                                           Seite 73 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Da wir unsere Kreativität voll entfalten wollen löschen Sie alle bereits vorhandenen Felder, wählen in
der Liste „Verfügbare Felder“ direkt darüber ein „TemplateField“ (befindet sich an letzter Stelle) und
klicken auf „Hinzufügen“ um es in die Tabelle einzufügen. Ein „TemplateField“ – also ein Vorlagenfeld
– gibt Ihnen die Möglichkeit frei zu entscheiden was angezeigt wird anhand von so genannten
Vorlagen („Templates“).




Vorlagen entwerfen
Diese Vorlagen gilt es im nächsten Schritt nach unseren Wünschen anzupassen. Dazu wählen Sie im
Smart Tag des GridViews den Eintrag „Vorlagen bearbeiten“.


                                           Seite 74 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Die Ansicht wechselt nun in den Vorlagenbearbeitungsmodus. Was Sie hier jetzt entwerfen wird später
für die Anzeige jedes Datensatzes einmal erscheinen. Um die verschiedenen Elemente besser
anordnen zu können empfiehlt es sich eine (unsichtbare) Tabelle zu verwenden. Fügen Sie diese über
Layout » Tabelle einfügen ein. Geben Sie dabei an, dass die Tabelle zwei Zeilen und drei Spalten
haben soll.




Nun steht der eigenen Entfaltung nichts mehr im Wege. Die Tabelle kann beispielsweise wie in der
folgenden Abbildung aussehen. Dort wo „Label“ steht sind Label-Steuerelemente aus der Toolbox zu
nehmen und auf die Seite zu ziehen. Die Label werden wir später mit den Daten aus der
Datenbanktabelle verbinden. Das blaue „Homepage“ soll ein „HyperLink“ sein, welches ebenfalls in der
Toolbox zu finden ist. Nach dem Platzieren ändern Sie am besten gleich die Eigenschaft „Text“ in
„Homepage“. In diesem soll später der Link auf die Homepage des Besuchers erscheinen.




                                           Seite 75 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Datenbindungen zuweisen
Da wir die „Label“-Objekte selber erzeugt haben müssen wir dem AccessDataSource mitteilen mit
welchen Daten aus der Datenbank wir diese verknüpfen möchten, sodass diese automatisch gefüllt
werden können.

 Bewegen Sie hierzu die Maus auf das erste Label und öffnen das Smart Tag mit einem Klick auf
  den kleinen Pfeil auf dem Label.

 In dem aufklappenden Smart Tag klicken Sie auf „DataBindings bearbeiten…“.




 Es erscheint ein Fenster in dem Sie in der Auswahlliste „Gebunden an“ rechts das Feld in der
  Datenbank zuweisen können welches später anstelle des Labels dargestellt wird. In diesem Fall
  wählen Sie „Name“.




                                           Seite 76 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




 Verfahren Sie analog mit den weiteren Labels wie in der folgenden Abbildung dargestellt.




 Ein Sonderfall ist der „Homepage“-HyperLink: Hier soll nicht der Text aus der Datenbank kommen,
  sondern die Internetadresse (URL) zu der navigiert werden soll. Öffnen Sie auch hier über
  „DataBindungs bearbeiten…“ das nun schon bekannte Fenster zur Datenbindung und wählen Sie
  zuerst auf der linken Seite NavigateUrl als die Eigenschaft, die aus der Datenbank kommen soll
  und rechts bei „Bound To“ das Feld „Homepage“. Damit wird der Wert in der
  Datenbanktabellenspalte „Homepage“ nicht als Text, sondern als Ziel des Hyperlinks verwendet.




                                           Seite 77 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Kopfbereich anpassen
Unsere Vorlage für die Darstellung der einzelnen Gästebucheinträge ist nun fertig. Es ist auch möglich
weitere Vorlagen zu definieren, zum Beispiel für die Darstellung eines Kopfbereichs über allen
Einträgen. Solange Sie sich im Vorlagenbearbeitungsmodus finden wechseln Sie über das Smart Tag
zu anderen Vorlagen. Für die Anpassung des Kopfbereichs wählen Sie „HeaderTemplate“.




                                           Seite 78 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Für unser einfaches Beispiel belassen wir es bei dem Text „Gästebuch“.




Sortierung einstellen
Vom Design stimmt das Gästebuch soweit. Schön wäre nun noch, dass die neusten Einträge immer
ganz oben erscheinen würden. Dazu muss wie die Tabelle nach dem Datum sortieren. Klicken Sie
hierzu auf „AccessDataSource1“ und dann im Eigenschaftenfenster bei „SelectQuery“ auf  .




                                           Seite 79 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Fügen Sie ans Ende des bereits vorhandenen SELECT-Befehls ORDER BY Datum DESC ein.

Der vollständige Text SELECT-Befehls lautet nun: SELECT 'ID', 'Datum', 'Email',
'Homepage', 'Ort', 'Kommentar' FROM 'tbGaestebuch' ORDER BY Datum DESC.




Zusammenfassung
Bei den speziellen Anforderungen des Gästebuchs haben Sie gesehen, dass die automatischen
Funktionen von Visual Web Developer 2005 Express Edition, die in den vorigen Kapiteln zum Ergebnis
führten, einfach durch individuelle Vorgaben erweitert werden können, sodass Ihrer Kreativität durch
ASP.NET keine Grenzen gesetzt werden. Und das Beste: Selbst komplexe Vorlagen lassen sich mit
Hilfe von Smart Tags, Eigenschaften und Dialogen realisieren ohne selber Code schreiben zu müssen.




                                           Seite 80 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




E-Mails versenden
In diesem Kapitel wird Ihnen anhand einer Seite zum Weiterempfehlen Ihrer Homepage per E-Mail
gezeigt wie sie mit einfachen Mitteln eine E-Mail aus ihrer Internetseite heraus verschicken.



Clientseitig vs. Serverseitig
Generell gibt es zwei Möglichkeiten, wie eine E-Mail aus dem Internet versandt werden kann.

Die E-Mailadresse kann als gewöhnlicher HyperLink direkt im HTML eingebaut werden. Hierbei muss
der Link statt auf eine andere Internetseite auf mailto: gefolgt von der E-Mailadresse des
Empfängers gesetzt werden.

Beispiel:       mailto:irgendwer@dotnet-online.de




Zusätzlich kann der Betreff sowie ein vordefinierter Inhalt wie folgt mit übergeben werden:

mailto:irgendwer@dotnet-online.de?subject=Betreff&body=Der%20Inhalt
(Dabei steht „%20“ für ein Leerzeichen.)

Dieser Methode funktioniert auch auf Seiten ohne ASP.NET hat jedoch zum Nachteil, dass die E-Mail
clientseitig, d.h. mit dem E-Mailprogramm auf dem Computer des Besuchers, verschickt wird. Ist
dieser in einem Internetcafé, wird dies häufig nicht funktionieren.

Außerdem wird die E-Mail nicht sofort automatisch verschickt, sondern es öffnet sich ein Fenster, in
dem die E-Mail angezeigt wird, und der Benutzer die Möglichkeit hat zu entscheiden, ob diese
verschickt werden soll oder nicht.




                                           Seite 81 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Bei der zweiten Möglichkeit wird die E-Mail serverseitig, also vom Internetserver auf dem die
Homepage liegt, verschickt. Dies ist die gängige Vorgehensweise bei ASP.NET Anwendungen und wird
von den Autoren empfohlen. Für diese Methode benötigen Sie die Adresse Ihres E-Mailservers für
ausgehende Nachrichten (SMTP-Server) über den die E-Mails verschickt werden sollen (z.B.
smtp.1und1.com bei 1&1 oder mailto.t-online.de bei T-Online). Bei einigen Hostern reicht die
Angabe von localhost als SMTP-Server. Damit wird der Server verwendet auf dem sich die
Homepage befindet.

Erstellen der Beispielseite
Anhand der folgenden Beispielseite werden Ihnen die näheren Details zum Versenden von
serverseitigen E-Mails schrittweise erläutert und mit bekannten Konzepten aus den vorangegangenen
Kapiteln ergänzt.

       Als Erstes erstellen Sie eine neue ASP.NET-Seite mit dem Namen Mail.aspx (Menü: Datei
        » Neu » Datei…) und wesen Sie dieser die bekannte Masterseite zu.

        Um allen Seiten ein durchgehendes Aussehen zu verleihen, erstellen Sie den Kopf-
        bereich wie in vorigen Kapiteln. Verwenden Sie dabei den Titel „Seite
        weiterempfehlen“ und als Bild Mail.gif.


                                           Seite 82 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




       Ziehen Sie ein Textfeld (engl. „Textbox“) aus der Toolbox am linken Rand auf Ihre Seite und
        fügen Sie wie in folgender Abbildung Text hinzu.




       Benennen Sie das Textfeld unter „E-Mail“ um, indem Sie es anklicken und anschließend im
        Eigenschaftenfenster („Eigenschaften“) auf der rechten Seite unter „(ID)“ den neuen Namen
        eintragen. Für unser Beispiel soll der Name Email lauten.

       Nun benötigt die Seite noch eine Schaltfläche („Button“), die Sie wie das Textfeld auf die Seite
        ziehen können. Ändern Sie in den Eigenschaften der Schaltfläche „(ID)“ und „Text“ in
        „Senden“. Jetzt sollte die Seite wie Folgt aussehen.




                                            Seite 83 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Versenden der E-Mail
       Um die E-Mail zu versenden müssen wir darauf reagieren, wenn ein Besucher der Seite auf
        die Schalfläche Senden klickt. Dazu doppelklicken Sie auf die Schaltfläche und es die Ansicht
        wechselt automatisch auf „Quelle“.

       Begeben Sie sich in die freie Zeile zwischen dem Sub Senden_Click […] und End Sub.
        Eigentlich wäre dies die erste Stelle wo Programmierung notwendig wird, allerdings werden
        eine Reihe von Standardaufgaben wie auch das Senden einer E-Mail als Textschnipsel
        mitgeliefert. Um diese abzurufen gehen Sie im Menü Bearbeiten » IntelliSense » Abschnitt
        einfügen oder Drücken zuerst die Tastenkombination Strg+K und danach Strg+X. Es erscheint
        ein Menü mit Kategorien zu denen fertige Codeabschnitte existieren. Wählen Sie mit Hilfe der
        Pfeiltasten und der Tabulatortaste oder der Maus aus der Kategorie „Konvektivität und
        Netzwerk“ den Eintrag „E-Mail-Nachricht erstellen“.




                                           Seite 84 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




         Nun erscheint der Beispielcode zum Versenden von E-Mails samt grün hervorgehobenen
          Platzhaltern wie Absender, Empfänger, Betreff, Format etc., die von Ihnen ausgefüllt werden
          müssen. Mithilfe der Tabulator-Taste können Sie zwischen den einzelnen Feldern springen. w
          vorgeben können. Beachten Sie, dass Sie alle Texte in Anführungszeichen setzen müssen.
          Tragen Sie folgende Daten ein:


Feld                         Inhalt
sender@address               Tragen Sie hier den Namen Ihrer Homepage, gefolgt von Ihrer E-
                             Mailadresse in spitzen Klammern ein.
                             Beispiel: "VisualWebDeveloperDemo <nobody@dotnet-
                             online.de>"
from@address                 Hier wird der Name des Empfängers eingetragen. In unserem Fall ist soll
                             dies der aktuelle Text des Textfeldes „Email“ sein:
                             Email.Text
Subject                      Der Betreff der Nachricht, z.B.: „Ein Freund empfiehlt Ihnen
                             eine Internetseite“.
Message Text                 Der eigentliche Inhalt der Nachricht. Beispielsweise: "Hallo! Ein
                             Freund empfiehlt Ihnen die Internetseite:
                             http://www.dotnet-online.de"
Email Server Name            Hier müssen Sie die Internetadresse Ihres SMTP-Servers zum versenden
                             von E-Mails eintragen (z.B. "localhost").




                                            Seite 85 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




       Nun sollte der Code ungefähr so aussehen:

    Sub Senden_Click(ByVal sender As Object, ByVal e As System.EventArgs)
       Dim message As New MailMessage(Email.Text, "Demo <nobody@dotnet-
online.de", "Ein Freund empfiehlt Ihnen eine Internetseite", "Hallo! Ein
Freund empfiehlt Ihnen die Internetseite http://www.dotnet-online.de.")
       Dim emailClient As New SmtpClient("localhost")
       emailClient.Send(message)
    End Sub

       Als letzten Schritt sollten wir eine Seite festlegen, die angezeigt wird, nachdem die E-Mail
        erfolgreich verschickt wurde. Fügen Sie dafür vor der Zeile End Sub Folgendes ein:

        Response.Redirect("EmailOK.aspx")

       Als letzten Schritt sollten Sie eine neue ASP.NET-Seite mit einem Hinweis auf den
        erfolgreichen Versand der Nachricht. Wenn Sie das selbe Design verwenden, sieht das dann in
        etwa so aus:




                                            Seite 86 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Zusammenfassung
In diesem Kapitel haben Sie die Möglichkeiten zum E-Mailversand sowie die grundlegenden Befehle
um das Versenden unter ASP.NET zu programmieren kennen gelernt. Analog zu diesem Beispiel
könnten Sie mit diesem Wissen beispielsweise ein Kontaktformular bauen.




                                           Seite 87 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Übertragen der Seite auf einen Server
Um die erstelle Seite ins Internet zu bekommen, benötigen Sie zunächst einen sog. „Hosting-Anbieter“
einen Anbieter von Speicherplatz, der über das Internet erreichbar ist (auch Web Space genannt).

Microsoft hat eine Seite mit Hosting-Anbietern veröffentlicht die für 10 Euro oder weniger ASP.NET
Hosting anbieten. Sie finden diese unter http://www.microsoft.com/germany/msdn/aspnet/.

Übertragen der Dateien
Das Übertragen der ASP.NET-Dateien und Grafiken auf den Server findet bei Hosting-Anbietern
meistens über FTP (File Transfer Protokoll) statt. Hierbei kommt die „Website kopieren“-Funktion zum
Einsatz, welche sich hinter dem Menüpunkt Website » Website kopieren… oder im Projektmappen-

Explorer hinter dem Symbol        verbirgt.

Um eine Verknüpfung zu einem FTP-Server herzustellen gehen Sie wie folgt vor:
    Öffnen Sie die „Website kopieren“-Ansicht wie beschrieben über das Menü oder den
       Projektmappen-Explorer.
    Klicken Sie auf die Schaltfläche „Verbinden“ rechts neben dem „Verbinden mit“-Auswahlfeld.




       Im nun erscheinenden Dialog wählen Sie links das Symbol „FTP-Site“ und geben unter
        „Server“ die FTP-Adresse an, die Sie von Ihrem Hosting-Anbieter bekommen haben.
        Im Feld „Port“ sollten Sie die Vorgabe „21“ beibehalten.
       Die Felder „Benutzername“ und „Kennwort“ füllen Sie mit Ihrem Benutzernamen und
        Passwort, welches Ihnen ebenfalls von Ihrem Hosting-Anbieter zur Verfügung gestellt wurde.




                                              Seite 88 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Nun können Sie den Kopiervorgang starten in dem Sie in der linken Liste mit der rechten Maustaste
klicken und den Eintrag „Website synchronisieren“ starten. Dabei werden nur geänderte Dateien
übertragen. Sobald die Fortschrittsanzeige vollständig ausgefüllt ist, sind die Dateien auf dem Server
aktualisiert.




Beachten Sie, dass ggf. eine Warnung von Ihrer Firewall (zum Beispiel bei installiertem Windows XP
Service Pack 2) erscheint. In dem Fall wählen Sie unbedingt „Nicht mehr blockieren“ um Microsoft
Visual Web Developer 2005 Express Edition die Verbindung zum Internet zu ermöglichen.




                                            Seite 89 von 90
Microsoft Visual Web Developer 2005 Express Edition - Ein Einsteiger-Tutorial




Zusammenfassung
Sie haben gesehen wie einfach das Übertragen aller Dateien zu einem Hosting-Anbieter mit Hilfe der
„Website kopieren“-Funktion ist. Allerdings kann die Kopierfunktion noch viel mehr. Zum Beispiel
synchronisiert sie die geänderten Dateien zwischen Ihrem Computer und den Server in beide
Richtungen, sodass Änderungen die von jemand anderem vorgenommen und auf den Server gespielt
wurden nicht blind überschrieben werden. Auch werden nur Dateien übertragen die sich geändert
haben um Zeit und Bandbreite zu sparen.




                                           Seite 90 von 90

				
DOCUMENT INFO