Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite mit Codetrennung in Visual Web Developer

  • Artikel

Aktualisiert: November 2007

Wenn Sie ASP.NET-Webseiten erstellen und in ihnen Code schreiben, können Sie aus zwei Modellen auswählen, wie Sie die sichtbaren Elemente (Steuerelemente, Text) und den Programmcode verwalten. Im Einzeldateimodell werden die sichtbaren Elemente und der Code zusammen in der gleichen Datei abgelegt. Im alternativen Modell, der "Codetrennung", befinden sich die sichtbaren Elemente in einer Datei und der Code in einer anderen Datei, die als "Code-Behind-Datei" bezeichnet wird. In dieser exemplarischen Vorgehensweise werden Sie mit Webseiten vertraut gemacht, in denen Codetrennung verwendet wird.

Das Einzeldateimodell wird in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer eingeführt. In dieser exemplarischen Vorgehensweise wird gezeigt, wie Sie eine Webseite mit den gleichen Funktionen wie in der exemplarischen Vorgehensweise zum Einzeldateimodell erstellen. Der Schwerpunkt liegt aber hier auf der Verwendung der Codetrennung.

Die Wahl zwischen der Verwendung von Einzeldateiseiten und Seiten mit Codetrennung ist in erster Linie eine Wahl aus Gründen der Zweckdienlichkeit und der persönlichen Vorlieben. Das Arbeiten mit beiden Modellen ist in Microsoft Visual Web Developer ähnlich. Beide Modelle werden im Editor in annähernd gleicher Weise unterstützt. Beide Modelle zeigen beim Ausführen der Seite eine vergleichbare Leistung. Da bei einer Seite mit Codetrennung die beiden Seiten getrennt bearbeitet werden können, kann ein Webdesigner am Layout einer Seite arbeiten, während ein Programmierer den Code für die Seite erstellt.

Zu den Aufgaben in dieser exemplarischen Vorgehensweise gehören:

  • Verwenden von Visual Web Developer zum Erstellen einer ASP.NET-Seite mit Codetrennung

  • Hinzufügen von Steuerelementen

  • Hinzufügen von Ereignishandlern

  • Ausführen von Seiten mit dem ASP.NET Development Server

Vorbereitungsmaßnahmen

Für die Durchführung dieser exemplarischen Vorgehensweise benötigen Sie Folgendes:

  • Visual Web Developer und .NET Framework

Erstellen einer Website und einer Webseite

In diesem Teil der exemplarischen Vorgehensweise erstellen Sie eine Website und fügen dieser eine neue Seite hinzu. Sie fügen auch HTML-Text hinzu und führen die Seite im Webbrowser aus.

Wenn Sie bereits eine Website in Visual Web Developer erstellt haben (z. B., indem Sie die Schritte in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer ausgeführt haben), können Sie diese Website verwenden und mit "Erstellen einer neuen Webseite" weiter unten in dieser exemplarischen Vorgehensweise fortfahren. Erstellen Sie andernfalls eine neue Website und eine neue Webseite, indem Sie folgende Schritte ausführen.

So erstellen Sie eine Dateisystem-Website

  1. Öffnen Sie Visual Web Developer.

  2. Klicken Sie im Menü Datei auf Neue Website.

    Das Dialogfeld Neue Website wird angezeigt.

  3. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

  4. Wählen Sie im Feld Speicherort die Option Dateisystem aus, und geben Sie den Namen des Ordners ein, in dem Sie die Seiten der Website speichern möchten.

    Geben Sie zum Beispiel den Ordnernamen C:\BasicWebSite ein.

  5. Klicken Sie in der Liste Sprache auf Visual Basic oder auf Visual C#.

    Hinweis:

    Visual Web Developer unterstützt das Erstellen von Code-Behind-Seiten in Visual J# derzeit nicht.

    Die ausgewählte Programmiersprache wird zur Standardsprache für die Website. Sie können jedoch die Programmiersprache für jede Seite einzeln festlegen.

  6. Klicken Sie auf OK.

    Visual Web Developer erstellt den Ordner und die neue Seite Default.aspx.

Erstellen einer neuen Webseite

Wenn Sie eine neue Website erstellen, fügt Visual Web Developer die Seite Default.aspx hinzu. Standardmäßig erstellt Visual Web Developer eine Seite mit Codetrennung.

So fügen Sie der Website eine Seite mit Codetrennung hinzu

  1. Schließen Sie die Seite Default.aspx. Klicken Sie dazu mit der rechten Maustaste auf die Registerkarte mit dem Dateinamen, und wählen Sie Schließen aus.

  2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Website (z. B. C:\BasicWebSite), und wählen Sie Neues Element hinzufügen.

  3. Wählen Sie unter Von Visual Studio installierte Vorlagen die Option Web Form aus.

  4. Geben Sie im Feld Name die Zeichenfolge WebPageSeparated ein.

  5. Wählen Sie in der Liste Sprache die Programmiersprache aus, die Sie verwenden möchten (Visual Basic oder C#).

  6. Vergewissern Sie sich, dass das Kontrollkästchen Code in eigener Datei platzieren aktiviert ist.

    Standardmäßig ist dieses Kontrollkästchen aktiviert.

  7. Klicken Sie auf Hinzufügen.

    Visual Web Developer erstellt zwei Dateien. Die erste Datei, WebPageSeparated.aspx, enthält den Text und die Steuerelemente der Seite und wird im Editor geöffnet. Die zweite Datei, je nach Programmiersprache WebPageSeparated.aspx.vb oder WebPageSeparated.aspx.cs, ist die Codedatei. Sie können beide Dateien im Projektmappen-Explorer anzeigen, indem Sie auf das Pluszeichen (+) neben der Datei WebPageSeparated.aspx klicken. Die Codedatei wurde erstellt, aber noch nicht geöffnet. Sie öffnen diese später in der exemplarischen Vorgehensweise, wenn Sie Code schreiben.

Hinzufügen von HTML zur Seite

In diesem Teil der exemplarischen Vorgehensweise fügen Sie der Seite WebPageSeparated.aspx statischen HTML-Text hinzu.

So fügen Sie der Seite Text hinzu

  1. Klicken Sie im unteren Bereich des Dokumentfensters auf die Registerkarte Entwerfen, um zur Entwurfsansicht zu wechseln.

    In der Entwurfsansicht wird die Seite, an der Sie gerade arbeiten, im WYSIWYG-Stil angezeigt. Zu diesem Zeitpunkt sind auf der Seite kein Text und auch keine Steuerelemente vorhanden, die Seite ist also leer.

  2. Setzen Sie die Einfügemarke in das div-Element, das bereits in der Seite vorhanden ist.

  3. Geben Sie die Wörter Welcome to Visual Web Developer Using Code Separation ein.

  4. Wechseln Sie zur Quellansicht.

    Es wird das HTML angezeigt, das Sie beim Eingeben in der Entwurfsansicht erstellt haben. In dieser Phase sieht die Seite wie eine normale HTML-Seite aus. Der einzige Unterschied liegt in der <%@ Page %>-Direktive im oberen Bereich der Seite.

Hinzufügen und Programmieren von Steuerelementen

In diesem Teil der exemplarischen Vorgehensweise fügen Sie der Seite eine Schaltfläche, ein Textfeld und ein Bezeichnungssteuerelement hinzu, und Sie schreiben Code zum Behandeln des Click-Ereignisses für die Schaltfläche. Serversteuerelemente, zu denen Schaltflächen, Bezeichnungen, Textfelder und andere übliche Steuerelemente gehören, stellen typische formularverarbeitende Funktionen für die ASP.NET-Webseiten bereit. Sie können jedoch die Steuerelemente mit Code programmieren, der auf dem Server ausgeführt wird, nicht aber auf dem Client.

So fügen Sie der Seite Steuerelemente hinzu

  1. Klicken Sie auf die Registerkarte Entwurf, um zur Entwurfsansicht zu wechseln.

  2. Setzen Sie die Einfügemarke hinter den Text, den Sie vorher hinzugefügt haben.

  3. Drücken Sie mehrmals die EINGABETASTE, um etwas Platz zu schaffen.

  4. Ziehen Sie aus der Registerkarte Standard der Toolbox die drei Steuerelemente TextBox, Button und Label auf die Seite.

  5. Positionieren Sie die Einfügemarke vor dem Textfeld, und geben Sie Enter your name: ein.

    Dieser statische HTML-Text ist die Beschriftung für das TextBox-Steuerelement. Sie können auf ein und derselben Seite statisches HTML und Serversteuerelemente kombinieren.

Festlegen von Steuerelementeigenschaften

Visual Web Developer bietet Ihnen verschiedene Möglichkeiten zum Festlegen der Eigenschaften von Steuerelementen auf der Seite. In diesem Teil der exemplarischen Vorgehensweise arbeiten Sie sowohl in der Entwurfsansicht als auch in der Quellansicht mit Eigenschaften.

So legen Sie Steuerelementeigenschaften fest

  1. Wählen Sie das Button-Steuerelement aus, und legen Sie im Fenster Eigenschaften die Text-Eigenschaft auf Display Name fest.

  2. Wechseln Sie zur Quellansicht.

    In der Quellansicht wird das HTML für die Seite angezeigt, einschließlich der Elemente, die Visual Web Developer für die Serversteuerelemente erstellt hat. Steuerelemente werden mit einer HTML-ähnlichen Syntax deklariert. Lediglich bei Tags werden das Präfix asp: verwendet und das Attribut eingeschlossen.

    Eigenschaften von Steuerelementen werden als Attribute deklariert. Wenn Sie beispielsweise in Schritt 1 die Text-Eigenschaft der Schaltfläche festlegen, legen Sie tatsächlich das Text-Attribut im Markup des Steuerelements fest.

    Beachten Sie, dass sich alle Steuerelemente in einem form-Element befinden, das ebenfalls das Attribut aufweist. Das -Attribut und das asp:-Präfix für Steuerelementtags kennzeichnen die Steuerelemente so, dass sie beim Ausführen der Seite von ASP.NET verarbeitet werden können.

Programmieren des Button-Steuerelements

In dieser exemplarischen Vorgehensweise schreiben Sie Code, mit dem der Name gelesen wird, den der Benutzer im Textfeld eingegeben hat, und mit dem der Name dann im Label-Steuerelement angezeigt wird.

So fügen Sie einen Handler für ein Standardschaltflächenereignis hinzu

  1. Wechseln Sie zur Entwurfsansicht.

  2. Doppelklicken Sie auf das Button-Steuerelement.

    Visual Web Developer öffnet die Datei WebPageSeparated.aspx.vb oder WebPageSeparated.aspx.cs in einem separaten Fenster im Editor. Die Datei enthält ein Skelett eines Click-Ereignishandlers für die Schaltfläche.

  3. Vervollständigen Sie den Click-Ereignishandler, indem Sie den folgenden hervorgehobenen Code hinzufügen.

    Protected Sub Button1_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs) Handles Button1.Click
        Label1.Text = Textbox1.Text & ", welcome to Visual Web Developer!"
End Sub

    protected void Button1_Click(object sender, System.EventArgs e)
{    
    Label1.Text = TextBox1.Text + ", welcome to Visual Web Developer!";
}

    IntelliSense unterstützt Sie bei der Eingabe mit kontextbezogenen Auswahlmöglichkeiten. Dies entspricht dem Verhalten beim Codieren in einer Einzeldateiseite.

Überprüfen der Seite und der Codedatei

Sie haben jetzt zwei Dateien, die die vollständige WebPageSeparated-Seite bilden: WebPageSeparated.aspx und WebPageSeparated.aspx.vb bzw. WebPageSeparated.aspx.cs. In diesem Abschnitt der exemplarischen Vorgehensweise überprüfen Sie, wie diese Dateien strukturiert sind und wie sie zueinander in Beziehung stehen.

So untersuchen Sie die Seitendatei und die Codedatei

  1. Klicken Sie auf die Registerkarte WebPageSeparated.aspx im oberen Bereich des Editorfensters, um zur Seitendatei zu wechseln.

  2. Wechseln Sie zur Quellansicht.

    Im oberen Bereich der Seite wird eine @ page-Direktive angezeigt, die diese Seite an die Codedatei bindet. Die Direktive sieht wie der folgende Code aus.

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="WebPageSeparated.aspx.vb" Inherits="WebPageSeparated" %>

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebPageSeparated.aspx.cs" Inherits="WebPageSeparated" %>

    (Die Zeile wird im Editor nicht umbrochen, und das Sprachattribut sowie die Dateinamenerweiterungen entsprechen der von Ihnen ausgewählten Programmiersprache.)

    Beim Ausführen der Seite erstellt ASP.NET dynamisch eine Instanz einer Klasse, die die Seite darstellt. Das Inherits-Attribut identifiziert die Klasse, die in der Code-Behind-Datei definiert wird, aus der die ASPX-Datei abgeleitet wird. Standardmäßig verwendet Visual Web Developer den Seitennamen als Grundlage für den Klassennamen in der Code-Behind-Datei.

    Das CodeFile-Attribut identifiziert die Codedatei für diese Seite. Einfacher ausgedrückt: Die Code-Behind-Datei enthält den Ereignisbehandlungscode für die Seite.

  3. Klicken Sie auf die Registerkarte WebPageSeparated.aspx.vb oder WebPageSeparated.aspx.cs, um zur Codedatei zu wechseln.

    Die Codedatei enthält Code, der einer Klassendefinition ähnelt. Es handelt sich jedoch nicht um eine vollständige Klassendefinition. Stattdessen handelt es sich um eine "partielle Klasse", die nur einen Teil der vollständigen Klasse enthält, aus der die Seite besteht. Insbesondere enthält die in der Codedatei definierte partielle Klasse die von Ihnen geschriebenen Ereignishandler und anderen benutzerdefinierten Code. Zur Laufzeit generiert ASP.NET eine andere partielle Klasse, die den Benutzercode enthält. Diese vollständige Klasse wird dann als Basisklasse verwendet, mit der die Seite wiedergegeben wird. Weitere Informationen finden Sie unter Übersicht über die ASP.NET-Seitenklasse.

    Hinweis:

    Wenn Sie mit dem in Microsoft Visual Studio .NET 2003 verwendeten Code-Behind-Modell vertraut sind, werden Sie feststellen, dass die Code-Behind-Klasse im neuen Modell unterhalb der Klassendefinition selbst keinen generierten Code enthält. Zum Beispiel enthält die Klasse keine Instanzvariablen für Steuerelemente auf der Seite. Dieser Typ von generiertem Code ist nicht mehr erforderlich.

Ausführen der Seite

Sie können die Seite jetzt testen.

So führen Sie die Seite aus

  1. Drücken Sie STRG+F5, um die Seite im Browser auszuführen.

    Die Seite wird mit ASP.NET Development Server ausgeführt.

    Hinweis:

    Wenn im Browser der Fehler 502 oder ein anderer Fehler mit dem Inhalt angezeigt wird, dass die Seite nicht angezeigt werden kann, müssen Sie möglicherweise den Browser so konfigurieren, dass er Proxyserver für lokale Anforderungen umgeht. Ausführliche Informationen finden Sie unter Gewusst wie: Umgehen eines Proxyservers bei lokalen Webanforderungen.

  2. Geben Sie einen Namen im Textfeld ein, und klicken Sie auf die Schaltfläche.

    Der von Ihnen eingegebene Name wird im Label-Steuerelement angezeigt.

  3. Zeigen Sie im Browser die Quelle der Seite an, die gerade ausgeführt wird.

  4. Schließen Sie den Browser.

    Die Seite funktioniert genau wie eine Einzeldateiseite. (Wenn Sie die Schritte in Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer zum Erstellen einer Einzeldateiseite ausgeführt haben, können Sie die beiden Seiten vergleichen. Sie werden sehen, dass diese bei Ausführung gleich sind.)

Nächste Schritte

In dieser exemplarische Vorgehensweise wurde veranschaulicht, wie eine Webseite erstellt und bearbeitet wird, die Codetrennung verwendet. Mit Blick auf Erstellung und Ausführung der Seite gibt es keinen wesentlichen Unterschied zwischen einer Einzeldateiseite und einer Seite mit Codetrennung.

Sie können sich auch mit anderen Features näher vertraut machen. Auf diese Weise können Sie beispielsweise folgende Vorgänge durchführen:

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Erstellen einer einfachen Webseite in Visual Web Developer

Konzepte

Typen von Websites in Visual Web Developer