Freigeben über


Erstellen einer ASP.NET 4.5 Web Forms-Seite mit Visual Studio 2013

von Erik Reitan

Für die Entwicklung neuer Webanwendungen empfehlen wir Razor Pages. Weitere Informationen finden Sie unter Erste Schritte mit Razor Pages.

In dieser exemplarischen Vorgehensweise erhalten Sie eine Einführung in die Webentwicklungsumgebung in Microsoft Visual Studio 2013 und in Microsoft Visual Studio Express 2013 für Web. Diese exemplarische Vorgehensweise führt Sie durch das Erstellen einer einfachen ASP.NET Web Forms Seite und veranschaulicht die grundlegenden Techniken zum Erstellen einer neuen Seite, zum Hinzufügen von Steuerelementen und zum Schreiben von Code.

In dieser exemplarischen Vorgehensweise werden u. a. folgende Aufgaben veranschaulicht:

  • Erstellen eines Dateisystems Web Forms Anwendungsprojekts.
  • Sich mit Visual Studio vertraut machen.
  • Erstellen einer ASP.NET Seite.
  • Hinzufügen von Steuerelementen.
  • Hinzufügen von Ereignishandlern.
  • Ausführen und Testen einer Seite in Visual Studio.

Voraussetzungen

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

Erstellen eines Webanwendungsprojekts und einer Seite

In diesem Teil der exemplarischen Vorgehensweise erstellen Sie ein Webanwendungsprojekt und fügen ihr eine neue Seite hinzu. Außerdem fügen Sie HTML-Text hinzu und führen die Seite in Ihrem Browser aus.

So erstellen Sie ein Webanwendungsprojekt

  1. Öffnen Sie Microsoft Visual Studio.

  2. Wählen Sie im Menü Datei die Option Neues Projekt aus.
    Menü

    Das Dialogfeld Neues Projekt wird angezeigt.

  3. Wählen Sie links die Gruppe Vorlagen ->Visual C# ->Webvorlagen aus.

  4. Wählen Sie die Vorlage ASP.NET Web Application in der mittleren Spalte aus.

  5. Nennen Sie Ihr Projekt BasicWebApp , und klicken Sie auf die Schaltfläche OK .
    Dialogfeld

  6. Wählen Sie als Nächstes die vorlage Web Forms aus, und klicken Sie auf die Schaltfläche OK, um das Projekt zu erstellen.
    Dialogfeld

    Visual Studio erstellt ein neues Projekt, das vordefinierte Funktionen basierend auf der Web Forms-Vorlage enthält. Es bietet Ihnen nicht nur eine Home.aspx-Seite , eine About.aspx-Seite , eine Contact.aspx-Seite , sondern enthält auch Mitgliedschaftsfunktionen, die Benutzer registrieren und ihre Anmeldeinformationen speichern, damit sie sich bei Ihrer Website anmelden können. Wenn eine neue Seite erstellt wird, zeigt Visual Studio standardmäßig die Seite in der Quellansicht an, in der Sie die HTML-Elemente der Seite sehen können. Die folgende Abbildung zeigt, was in der Quellansicht angezeigt wird, wenn Sie eine neue Webseite mit dem Namen BasicWebApp.aspx erstellen würden.
    Quellansicht

Eine Tour durch die Visual Studio-Webentwicklungsumgebung

Bevor Sie mit dem Ändern der Seite fortfahren, ist es nützlich, sich mit der Visual Studio-Entwicklungsumgebung vertraut zu machen. Die folgende Abbildung zeigt die Fenster und Tools, die in Visual Studio und Visual Studio Express für Web verfügbar sind.

Hinweis

Dieses Diagramm zeigt Standardfenster und Fensterspeicherorte. Mit dem Menü Ansicht können Sie zusätzliche Fenster anzeigen und Fenster anordnen und an Ihre Einstellungen anpassen. Wenn bereits Änderungen an der Fensteranordnung vorgenommen wurden, stimmt das angezeigte Element nicht mit der Abbildung überein.

Die Visual Studio-Umgebung

Visual Studio-Umgebung

Machen Sie sich mit dem Webdesigner vertraut

Untersuchen Sie die obige Abbildung, und ordnen Sie den Text der folgenden Liste zu, in der die am häufigsten verwendeten Fenster und Tools beschrieben werden. (Nicht alle Fenster und Tools, die Sie sehen, werden hier aufgeführt, nur die in der vorherigen Abbildung markierten.)

  • Symbolleisten. Stellen Sie Befehle zum Formatieren von Text, Suchen von Text usw. bereit. Einige Symbolleisten sind nur verfügbar, wenn Sie in der Entwurfsansicht arbeiten.
  • Projektmappen-Explorer Fenster. Zeigt die Dateien und Ordner in Ihrer Webanwendung an.
  • Dokumentfenster. Zeigt die Dokumente an, an denen Sie in Registerkartenfenstern arbeiten. Sie können zwischen Dokumenten wechseln, indem Sie auf Registerkarten klicken.
  • Eigenschaftenfenster . Ermöglicht das Ändern von Einstellungen für die Seite, HTML-Elemente, Steuerelemente und andere Objekte.
  • Registerkarten anzeigen. Zeigen Sie verschiedene Ansichten desselben Dokuments an. Die Entwurfsansicht ist eine Bearbeitungsoberfläche in der Nähe von WYSIWYG. Die Quellansicht ist der HTML-Editor für die Seite. Die geteilte Ansicht zeigt sowohl die Entwurfsansicht als auch die Quellansicht für das Dokument an. Weiter unten in dieser exemplarischen Vorgehensweise arbeiten Sie mit den Ansichten Entwurf und Quelle . Wenn Sie webseiten lieber in der Entwurfsansicht öffnen möchten, klicken Sie im Menü Extras auf Optionen, wählen Sie den Knoten HTML Designer aus, und ändern Sie die Option Startseiten in.
  • ToolBox. Stellt Steuerelemente und HTML-Elemente bereit, die Sie auf Ihre Seite ziehen können. Toolboxelemente werden nach allgemeiner Funktion gruppiert.
  • S erver Explorer. Zeigt Datenbankverbindungen an. Wenn server Explorer nicht sichtbar ist, klicken Sie im Menü Ansicht auf Server Explorer.

Erstellen einer neuen ASP.NET Web Forms-Seite

Wenn Sie mithilfe der Projektvorlage ASP.NET Webanwendung eine neue Web Forms-Anwendung erstellen, fügt Visual Studio eine ASP.NET Seite (Web Forms Seite) mit dem Namen Default.aspx sowie mehrere andere Dateien und Ordner hinzu. Sie können die Seite Default.aspx als Startseite für Ihre Webanwendung verwenden. Für diese exemplarische Vorgehensweise erstellen Und arbeiten Sie mit einer neuen Seite.

So fügen Sie der Webanwendung eine Seite hinzu

  1. Schließen Sie die Seite Default.aspx . Klicken Sie hierzu auf die Registerkarte, die den Dateinamen anzeigt, und klicken Sie dann auf die Option Schließen.
  2. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Webanwendung (in diesem Tutorial lautet der Anwendungsname BasicWebSite), und klicken Sie dann auf Hinzufügen –>Neues Element.
    Das Dialogfeld Neues Element hinzufügen wird angezeigt.
  3. Wählen Sie links die Gruppe Visual C#->Webvorlagen aus. Wählen Sie dann in der mittleren Liste Webformular aus, und nennen Sie es FirstWebPage.aspx.
    Dialogfeld
  4. Klicken Sie auf Hinzufügen , um die Webseite ihrem Projekt hinzuzufügen.
    Visual Studio erstellt die neue Seite und öffnet sie.

Hinzufügen von HTML zur Seite

In diesem Teil der exemplarischen Vorgehensweise fügen Sie der Seite statischen Text hinzu.

So fügen Sie der Seite Text hinzu

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

    Die Entwurfsansicht zeigt die aktuelle Seite auf WYSIWYG-ähnliche Weise an. Zu diesem Zeitpunkt verfügen Sie über keinen Text oder Steuerelemente auf der Seite, sodass die Seite leer ist, mit Ausnahme einer gestrichelten Linie, die ein Rechteck umreißt. Dieses Rechteck stellt ein div-Element auf der Seite dar.

  2. Klicken Sie in das Rechteck, das durch eine gestrichelte Linie umrissen wird.

  3. Geben Sie Willkommen bei Visual Web Developer ein, und drücken Sie zweimal die EINGABETASTE .

    Die folgende Abbildung zeigt den Text, den Sie in der Entwurfsansicht eingegeben haben.

    Willkommenstext in der Entwurfsansicht

  4. Wechseln Sie zur Quellansicht .

    Sie können den HTML-Code in der Quellansicht sehen, den Sie bei der Eingabe in der Entwurfsansicht erstellt haben.
    Webseite mit statischem Text

Ausführen der Seite

Bevor Sie mit dem Hinzufügen von Steuerelementen zur Seite fortfahren, können Sie sie zuerst ausführen.

So führen Sie die Seite aus

  1. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf FirstWebPage.aspx, und wählen Sie Als Startseite festlegen aus.

  2. Drücken Sie STRG+F5 , um die Seite auszuführen.

    Die Seite wird im Browser angezeigt. Obwohl die von Ihnen erstellte Seite über die Dateinamenerweiterung ASPX verfügt, wird sie derzeit wie jede HTML-Seite ausgeführt.

    Um eine Seite im Browser anzuzeigen, können Sie auch mit der rechten Maustaste auf die Seite in Projektmappen-Explorer klicken und im Browser anzeigen auswählen.

  3. Schließen Sie den Browser, um die Webanwendung zu beenden.

Hinzufügen und Programmieren von Steuerelementen

Sie fügen der Seite nun Serversteuerelemente hinzu. Serversteuerelemente, z. B. Schaltflächen, Bezeichnungen, Textfelder und andere vertraute Steuerelemente, bieten typische Formularverarbeitungsfunktionen für Ihre Web Forms Seiten. Sie können die Steuerelemente jedoch mit Code programmieren, der nicht auf dem Client, sondern auf dem Server ausgeführt wird.

Sie fügen der Seite ein Button-Steuerelement , ein TextBox-Steuerelement und ein Label-Steuerelement hinzu, und schreiben Code, um das Click-Ereignis für das Button-Steuerelement zu behandeln.

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 am Ende des Texts Willkommen bei Visual Web Developer , und drücken Sie die EINGABETASTE fünf oder mehrMal, um platz im Feld div-Element zu schaffen.

  3. Erweitern Sie in der Toolbox die Gruppe Standard , falls sie noch nicht erweitert wurde.
    Beachten Sie, dass Sie möglicherweise das Fenster Toolbox auf der linken Seite erweitern müssen, um es anzuzeigen.

  4. Ziehen Sie ein TextBox-Steuerelement auf die Seite, und legen Sie es in der Mitte des Div-Elementfelds ab, das in der ersten Zeile Willkommen bei Visual Web Developer enthält.

  5. Ziehen Sie ein Button-Steuerelement auf die Seite, und legen Sie es rechts neben dem TextBox-Steuerelement ab.

  6. Ziehen Sie ein Label-Steuerelement auf die Seite, und legen Sie es in einer separaten Zeile unter dem Button-Steuerelement ab.

  7. Platzieren Sie die Einfügemarke über dem TextBox-Steuerelement , und geben Sie dann Geben Sie Ihren Namen ein: ein.

    Dieser statische HTML-Text ist die Untertitel für das TextBox-Steuerelement. Sie können statische HTML- und Serversteuerelemente auf derselben Seite kombinieren. Die folgende Abbildung zeigt, wie die drei Steuerelemente in der Entwurfsansicht angezeigt werden.

    Drei Steuerelemente in der Entwurfsansicht

Festlegen von Steuerelementeigenschaften

Visual Studio bietet verschiedene Möglichkeiten, die Eigenschaften von Steuerelementen auf der Seite festzulegen. In diesem Teil der exemplarischen Vorgehensweise legen Sie Eigenschaften sowohl in der Entwurfsansicht als auch in der Quellansicht fest.

So legen Sie Steuerelementeigenschaften fest

  1. Zeigen Sie zunächst die Fenster Eigenschaften an, indem Sie im Menü Ansicht ->Andere Windows ->Eigenschaftenfenster auswählen. Alternativ können Sie F4 auswählen, um das Eigenschaftenfenster anzuzeigen.

  2. Wählen Sie das Steuerelement Schaltfläche aus, und legen Sie dann im Fenster Eigenschaften den Wert von Text auf Anzeigename fest. Der eingegebene Text wird auf der Schaltfläche im Designer angezeigt, wie in der folgenden Abbildung dargestellt.

    Schaltflächentext festlegen

  3. Wechseln Sie zur Quellansicht .

    Die Quellansicht zeigt den HTML-Code für die Seite an, einschließlich der Elemente, die Visual Studio für die Serversteuerelemente erstellt hat. Steuerelemente werden mit HTML-ähnlicher Syntax deklariert, mit dem Unterschied, dass die Tags das Präfix asp: verwenden und das Attribut runat="server" enthalten.

    Steuerelementeigenschaften werden als Attribute deklariert. Wenn Sie beispielsweise die Text-Eigenschaft für das Button-Steuerelement festlegen, haben Sie in Schritt 1 tatsächlich das Text-Attribut im Markup des Steuerelements festgelegt.

    Hinweis

    Alle Steuerelemente befinden sich in einem Formularelement , das auch das Attribut runat="server" aufweist. Das runat="server"- Attribut und das Asp :- Präfix für Steuerelementtags markieren die Steuerelemente, sodass sie von ASP.NET auf dem Server verarbeitet werden, wenn die Seite ausgeführt wird. Code außerhalb der <Elemente runat="server"> und <script runat="server"> wird unverändert an den Browser gesendet, weshalb sich der ASP.NET Code in einem Element befinden muss, dessen öffnendes Tag das Attribut runat="server" enthält.

  4. Als Nächstes fügen Sie dem Label-Steuerelement eine zusätzliche Eigenschaft hinzu. Platzieren Sie die Einfügemarke direkt hinter asp:Label im <asp:Label-Tag> , und drücken Sie dann die LEERTASTE.

    Es wird eine Dropdownliste angezeigt, in der die Liste der verfügbaren Eigenschaften angezeigt wird, die Sie für ein Label-Steuerelement festlegen können. Dieses Feature, das als IntelliSense bezeichnet wird, hilft Ihnen in der Quellansicht mit der Syntax von Serversteuerelementen, HTML-Elementen und anderen Elementen auf der Seite. Die folgende Abbildung zeigt die IntelliSense-Dropdownliste für das Label-Steuerelement .

    IntelliSense-Attribute

  5. Wählen Sie ForeColor aus, und geben Sie dann ein Gleichheitszeichen ein.

    IntelliSense zeigt eine Liste von Farben an.

    Hinweis

    Sie können eine IntelliSense-Dropdownliste jederzeit anzeigen, indem Sie beim Anzeigen von Code STRG+J drücken.

  6. Wählen Sie eine Farbe für den Text des Label-Steuerelements aus. Stellen Sie sicher, dass Sie eine Farbe auswählen, die dunkel genug ist, um vor einem weißen Hintergrund zu lesen.

    Das ForeColor-Attribut wird mit der farbe abgeschlossen, die Sie ausgewählt haben, einschließlich des schließende Anführungszeichens.

Programmieren des Schaltflächensteuerelements

In dieser exemplarischen Vorgehensweise schreiben Sie Code, der den Namen liest, den der Benutzer in das Textfeld eingibt, und dann den Namen im Label-Steuerelement anzeigt.

Hinzufügen eines Standardschaltflächenereignishandlers

  1. Wechseln Sie zur Entwurfsansicht .

  2. Doppelklicken Sie auf das Button-Steuerelement .

    Standardmäßig wechselt Visual Studio zu einer CodeBehind-Datei und erstellt einen Skelettereignishandler für das Standardereignis des Button-Steuerelements , das Click-Ereignis . Die CodeBehind-Datei trennt Ihr UI-Markup (z. B. HTML) von Ihrem Servercode (z. B. C#).
    Der Cursor wird positioniert, um Code für diesen Ereignishandler hinzuzufügen.

    Hinweis

    Das Doppelklicken auf ein Steuerelement in der Entwurfsansicht ist nur eine von mehreren Möglichkeiten zum Erstellen von Ereignishandlern.

  3. Geben Sie im Button1_Click Ereignishandler Label1 gefolgt von einem Punkt (.) ein.

    Wenn Sie den Zeitraum nach der ID der Bezeichnung (Label1) eingeben, zeigt Visual Studio eine Liste der verfügbaren Member für das Label-Steuerelement an, wie in der folgenden Abbildung dargestellt. Ein Member ist in der Regel eine Eigenschaft, Methode oder ein Ereignis.

    IntelliSense in der Codeansicht

  4. Beenden Sie den Click-Ereignishandler für die Schaltfläche, damit sie wie im folgenden Codebeispiel dargestellt liest.

    protected void Button1_Click(object sender, System.EventArgs e)
    {    
        Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
    }
    
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
    End Sub
    
  5. Wechseln Sie zurück zur Quellansicht Ihres HTML-Markups, indem Sie im Projektmappen-Explorer mit der rechten Maustaste auf FirstWebPage.aspx klicken und Markup anzeigen auswählen.

  6. Scrollen Sie zum <asp:Button-Element> . Beachten Sie, dass das <asp:Button-Element> jetzt über das Attribut onclick="Button1_Click" verfügt.

    Dieses Attribut bindet das Click-Ereignis der Schaltfläche an die Handlermethode, die Sie im vorherigen Schritt codiert haben.

    Ereignishandlermethoden können einen beliebigen Namen haben. der angezeigte Name ist der von Visual Studio erstellte Standardname. Der wichtige Punkt ist, dass der Name, der für das OnClick-Attribut im HTML-Code verwendet wird, mit dem Namen einer Methode übereinstimmen muss, die im CodeBehind definiert ist.

Ausführen der Seite

Sie können jetzt die Serversteuerelemente auf der Seite testen.

So führen Sie die Seite aus

  1. Drücken Sie STRG+F5 , um die Seite im Browser auszuführen. Wenn ein Fehler auftritt, überprüfen Sie die obigen Schritte erneut.

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

    Der eingegebene Name wird im Label-Steuerelement angezeigt. Beachten Sie, dass beim Klicken auf die Schaltfläche die Seite auf dem Webserver veröffentlicht wird. ASP.NET erstellt dann die Seite neu, führt Ihren Code aus (in diesem Fall wird der Click-Ereignishandler des Button-Steuerelements ausgeführt), und sendet dann die neue Seite an den Browser. Wenn Sie die status leiste im Browser watch, können Sie sehen, dass die Seite bei jedem Klicken auf die Schaltfläche eine Rundreise zum Webserver macht.

  3. Zeigen Sie im Browser die Quelle der Seite an, die Sie ausführen, indem Sie mit der rechten Maustaste auf die Seite klicken und Quelle anzeigen auswählen.

    Im Quellcode der Seite wird HTML ohne Servercode angezeigt. Insbesondere werden die asp:>-Elemente, mit denen< Sie gearbeitet haben, nicht in der Quellansicht angezeigt. Wenn die Seite ausgeführt wird, verarbeitet ASP.NET die Serversteuerelemente und rendert HTML-Elemente auf der Seite, die die Funktionen ausführen, die das Steuerelement darstellen. Beispielsweise wird das <asp:Button-Steuerelement> als HTML input <type="submit">-Element gerendert.

  4. Schließen Sie den Browser.

Arbeiten mit zusätzlichen Steuerelementen

In diesem Teil der exemplarischen Vorgehensweise arbeiten Sie mit dem Calendar-Steuerelement , das Gleichzeitig Datumsangaben für einen Monat anzeigt. Das Calendar-Steuerelement ist ein komplexeres Steuerelement als die Schaltfläche, das Textfeld und die Bezeichnung, mit der Sie gearbeitet haben, und veranschaulicht einige weitere Funktionen von Serversteuerelementen.

In diesem Abschnitt fügen Sie der Seite ein System.Web.UI.WebControls.Calendar-Steuerelement hinzu und formatieren es.

So fügen Sie ein Kalendersteuerelement hinzu

  1. Wechseln Sie in Visual Studio zur Entwurfsansicht .

  2. Ziehen Sie im Abschnitt Standard der Toolbox ein Calendar-Steuerelement auf die Seite, und legen Sie es unter dem div-Element ab, das die anderen Steuerelemente enthält.

    Der Smarttagbereich des Kalenders wird angezeigt. Im Bereich werden Befehle angezeigt, mit denen Sie die am häufigsten verwendeten Aufgaben für das ausgewählte Steuerelement ausführen können. In der folgenden Abbildung wird das Calendar-Steuerelement in der Entwurfsansicht gerendert.

    Kalendersteuerelement in der Entwurfsansicht

  3. Wählen Sie im Smarttagbereich Auto Format aus.

    Das Dialogfeld Automatisches Format wird angezeigt, mit dem Sie ein Formatierungsschema für den Kalender auswählen können. Die folgende Abbildung zeigt das Dialogfeld Automatisches Formatieren für das Calendar-Steuerelement .

    Dialogfeld

  4. Wählen Sie in der Liste Schema auswählendie Option Einfach aus, und klicken Sie dann auf OK.

  5. Wechseln Sie zur Quellansicht .

    Das asp:Calendar-Element> wird angezeigt<. Dieses Element ist viel länger als die Elemente für die einfachen Steuerelemente, die Sie zuvor erstellt haben. Es enthält auch Unterelemente wie <WeekEndDayStyle>, die verschiedene Formatierungseinstellungen darstellen. Die folgende Abbildung zeigt das Calendar-Steuerelement in der Quellansicht . (Das genaue Markup, das in der Quellansicht angezeigt wird, unterscheidet sich möglicherweise geringfügig von der Abbildung.)

    Kalendersteuerelement in der Quellansicht

Programmieren des Kalendersteuerelements

In diesem Abschnitt programmieren Sie das Kalendersteuerelement , um das aktuell ausgewählte Datum anzuzeigen.

So programmieren Sie das Kalendersteuerelement

  1. Doppelklicken Sie in der Entwurfsansicht auf das Steuerelement Kalender .

    Ein neuer Ereignishandler wird erstellt und in der CodeBehind-Datei mit dem Namen FirstWebPage.aspx.cs angezeigt.

  2. Schließen Sie den SelectionChanged-Ereignishandler mit dem folgenden Code ab.

    protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
    {    
        Label1.Text = Calendar1.SelectedDate.ToLongDateString();
    }
    
    Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = Calendar1.SelectedDate.ToLongDateString()
    End Sub
    

    Der obige Code legt den Text des Beschriftungssteuerelements auf das ausgewählte Datum des Kalendersteuerelements fest.

Ausführen der Seite

Sie können jetzt den Kalender testen.

So führen Sie die Seite aus

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

  2. Klicken Sie im Kalender auf ein Datum.

    Das Datum, auf das Sie geklickt haben, wird im Label-Steuerelement angezeigt.

  3. Zeigen Sie im Browser den Quellcode für die Seite an.

    Beachten Sie, dass das Calendar-Steuerelement auf der Seite als Tabelle gerendert wurde, wobei jeder Tag als td-Element dargestellt wurde.

  4. Schließen Sie den Browser.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurden die grundlegenden Features des Visual Studio-Seiten-Designers veranschaulicht. Nachdem Sie nun wissen, wie Sie eine Web Forms Seite in Visual Studio erstellen und bearbeiten, sollten Sie andere Features erkunden. Sie können z. B. folgendes tun: