Webprogrammierung mit ASP.net

Ohne viel Aufwand schreiben Sie eine Webanwendung, die auf ein Kalendersteuerelement und eine Datenbank zugreift. Durch den Aufbau einer Masterpage erhalten alle Webseiten ein einheitliches Layout. Die moderne Oberfläche des Webdevelopers legt automatisch CSS-Codes an. Tabellen aus Datenbanken binden Sie mittels Drag & Drop ein. Das Schönste: Das Werkzeug von Microsoft ist kostenlos.

Einheitlich mit Masterpage

Klicken Sie im Öffnungsfenster vom VWD auf den Eintrag Erstellen Website. Im Dialogfenster Neue Website aktivieren Sie ASP.NET-Website mit Visual Basic und legen den Speicherort fest. Dies schließen Sie per Klick auf OK ab. Die angelegte Default. aspx für Ihre Webpräsenz sehen Sie im Bearbeitungsfenster als Quellcode.Mit den Registern Entwurf, Teilen und Quelle im Entwicklungsfenster gestalten Sie per Klick auf Entwurf Ihre Website. In der Ansicht Teilen überblicken Sie sowohl die Entwurfsansicht als auch den Quellcode. Um alle Webseiten einheitlich zu gestalten, legen Sie eine Masterpage fest. Wenn Sie das Layout für alle Seiten ändern wollen, ändern Sie einfach die Masterpage.Diese verschaffen Sie sich in der Menüleiste mit dem Befehl Website/Neues Element hinzufügen. Im Dialogfenster wählen Sie den Eintrag Masterseite aus, wobei das Kontrollkästchen Code in eigener Datei platzieren aktiviert sein muss. Dadurch wird der Programmcode in eine separate Datei geschrieben, die an der aspx-Datei mit der Endung .aspx.vb hängt. Per Klick auf Hinzufügen sehen Sie die Masterseite in der Quellansicht. Mit dem Eintrag

zwischen die Tags title beschriften Sie die Site. Aktivieren Sie das Registerblatt Entwurf, klicken Sie in die Seite und bestätigen Sie per Eingabe. In der Toolbox aktivieren Sie im Bereich HTML das Steuerelement Table und ziehen es in die Entwurfsansicht. Platzieren Sie es in den Bereich, in dem die Schreibmarke blinkt.So legen Sie eine dreispaltige und dreizeilige Tabelle an. Tippen Sie in die erste Zeile der zweiten Spalte ein: Ferienwohnung tagweise zu vermieten. Zentrieren Sie den Eintrag und stellen Sie die Schrift auf xx-large ein. Um in den von der Masterseite abgeleiteten Webseiten Inhalt einzufügen, benötigen Sie einen ContentPlaceHolder.Markieren Sie den ContentPlaceHolder1 unterhalb der Tabelle und ziehen Sie ihn dann in die zweite Zeile der zweiten Spalte der Tabelle. Um den Contentbereich zu vergrößern, betätigen Sie fünfmal die Eingabe-Taste.

Navigationsleiste und Startseite

Web Developer

Alle Visual-Studio-Express-Produkte zum kostenlosen Download finden Sie unter www.microsoft.com/germany/express

Zusätzlich finden Sie dort ausführliche Produktinformationen, Beispiele und weiterführende Links wie zum Beispiel zu Anwenderforen und Supportmöglichkeiten.

Das Menü gestalten Sie für alle Inhaltsseiten. Dazu ziehen Sie das Steuerelement Menü aus dem Bereich Navigation der Toolbox in die erste Spalte der zweiten Zeile der Tabelle. Klicken Sie auf den Auswahlpfeil des eingefügten Menüelements und wählen Sie Menüelemente bearbeiten. Der Menüelement- Editor wird eingeblendet. Damit bereichern Sie das Menüsteuerelement mit Element hinzufügen um Einträge.Ändern Sie im Bereich der Eigenschaften den Text auf Ansicht Ferienwohnung. Fügen Sie die Menüelemente Preise und Buchung hinzu. Mit diesen ersten Webseiten schalten Sie die Menüeinträge über Navigate URL aktiv. Momentan beenden Sie die Bearbeitung und übernehmen per Klick auf OK die Einträge.Über Automatische Formatierung bestimmen Sie ein Schema für das Steuerelement, wobei Sie über Klassisch, Farbig, Professionell, Einfach verfügen. Im Dialogfenster lassen sich auch Formatierungen entfernen, um das Menü zu gestalten. Mit der Eigenschaft Orientation richten Sie das Menü horizontal aus.Die Tabelle der Masterseite lässt sich per Vorschaubild veredeln. Dieses speichern Sie im Verzeichnis der Webanwendung. Über die Toolbox ziehen Sie das Steuerelement Image in ein freies Tabellenfeld. Mit dem Auswahlfeld der Eigenschaft ImageURL wählen Sie das Bild und fügen es so in die Webseite ein.Die Startseite einer ASP-Anwendung Default.aspx hat die Eröffnung des Projekts angelegt. Damit diese Seite das Layout und den Inhalt der Masterpage erhält, öffnen Sie diese Dafault.aspx. Aktivieren Sie die Ansicht Quelle und klicken Sie in den Eigenschaften auf MasterPageFile. Dort wählen Sie die Seite MasterPage.master.Bevor die Website jedoch angezeigt wird, müssen Sie HTML-Tags entfernen. Löschen Sie dazu den HTML-Teil, der zwischen <html> und </html> steht. Löschen Sie die zweite Zeile <!DOCTYPE html ...> in der HTML-Darstellung. Speichern Sie die Datei und wechseln Sie dann in die Entwurfsansicht. Mit der Übernahme der Masteransicht bearbeiten Sie den Content- PlaceHolder1, den Sie dazu markieren.Klicken Sie auf den Auswahlpfeil daneben und aktivieren Sie in den Content-Aufgaben den Befehl Benutzerdefinierten Inhalt erstellen. Jetzt geben Sie dort den Text ein. Um die Seite zu begutachten, speichern Sie diese und klicken in der Symbolleiste auf In Browser anzeigen. Damit startet der interne ASP.NET Developer Server.

Inhaltsseiten und Menüelemente

Um Inhaltsseiten hinzuzufügen, aktivieren Sie die MasterPage. Klicken Sie auf Website und auf Inhaltsseite hinzufügen, womit Sie sich die Seite Default2.aspx schaffen. Wechseln Sie in die Entwurfsansicht dieser Seite, um Bilder zu hinterlegen, die Sie wieder in Ihr Projektverzeichnis kopieren.Die Objekte richten Sie per HTML-Tabelle aus, die Sie aus der Toolbox einfügen. Die Bilder werden mithilfe des Steuerelements Image hinterlegt. Das jeweilige Bild wählen Sie in dem Image Steuerelement über die Eigenschaft ImageURL aus. Fügen Sie, wie oben beschrieben, zwei weitere Inhaltsseiten hinzu. Die Seite Default3.aspx soll die Preise enthalten. Die Seite Default4.aspx dient als Buchungsseite, auf der Sie programmieren.Da Sie alle Seiten angelegt haben, belegen Sie das Menü mit aktiven Adressen. So lassen sich im Browser die Seiten mit der Navigation gleich testen. Die Einstellungen erfolgen auf MasterPage. Aktivieren Sie auf der Masterseite die Menü-Aufgaben des Menüsteuerelements. Klicken Sie dort auf Menüelemente bearbeiten. Hinterlegen Sie im Bereich der Eigenschaften NavigateURL, speichern Sie das Projekt und testen Sie die Navigation.