Freigeben über


Codebearbeitung ASP.NET Webformulare in Visual Studio 2013

von Erik Reitan

In vielen ASP.NET Webformularseiten schreiben Sie Code in Visual Basic, C# oder einer anderen Sprache. Der Code-Editor in Visual Studio kann Ihnen beim schnellen Schreiben von Code helfen, um Fehler zu vermeiden. Darüber hinaus bietet der Editor Möglichkeiten, wie Sie wiederverwendbaren Code erstellen können, um die Menge an Arbeit zu verringern, die Sie erledigen müssen.

In dieser Schritt-für-Schritt-Anleitung werden verschiedene Funktionen des Visual Studio-Code-Editors veranschaulicht.

In diesem Rundgang erfahren Sie, wie Sie:

  • Inline-Codefehler korrigieren.
  • Umgestalten und Umbenennen von Code.
  • Umbenennen von Variablen und Objekten.
  • Fügen Sie Codeausschnitte ein.

Voraussetzungen

Um diese Schritt-für-Schritt-Anleitung abzuschließen, werden Sie Folgendes benötigen:

Erstellen eines Webanwendungsprojekts und einer Seite

In diesem Teil der exemplarischen Vorgehensweise erstellen Sie ein Webanwendungsprojekt und fügen eine neue Seite hinzu.

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 auf der linken Seite die Gruppe "Vorlagen ->Visual C# ->Webvorlagen " aus.

  4. Wählen Sie die ASP.NET Webanwendungsvorlage in der mittleren Spalte aus.

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

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

    Visual Studio erstellt ein neues Projekt, das vordefinierte Funktionen enthält, die auf der Webformularvorlage basieren.

Erstellen einer neuen ASP.NET-Webformularseite

Wenn Sie eine neue Webanwendung mithilfe der ASP.NET-Webanwendungsprojektvorlage 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 Default.aspx Seite als Startseite für Ihre Webanwendung verwenden. Für diese Anleitung erstellen Sie jedoch eine neue Seite und arbeiten damit.

So fügen Sie der Webanwendung eine Seite hinzu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Namen der Webanwendung (in diesem Lernprogramm lautet der Anwendungsname "BasicWebSite"), und klicken Sie dann auf "Hinzufügen ->Neues Element".
    Das Dialogfeld Neues Element hinzufügen wird angezeigt.
  2. Wählen Sie auf der linken Seite die Gruppe "Visual C# ->Webvorlagen " aus. Wählen Sie dann webformular aus der mittleren Liste aus, und nennen Sie es FirstWebPage.aspx.
    Dialogfeld
  3. Klicken Sie auf "Hinzufügen ", um dem Projekt die Webformularseite hinzuzufügen.
    Visual Studio erstellt die neue Seite und öffnet sie.
  4. Legen Sie als Nächstes diese neue Seite als Standardstartseite fest. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die neue Seite mit dem Namen FirstWebPage.aspx , und wählen Sie "Als Startseite festlegen" aus. Wenn Sie diese Anwendung das nächste Mal ausführen, um unseren Fortschritt zu testen, wird diese neue Seite automatisch im Browser angezeigt.

Korrektur von Inline-Codierungsfehlern

Der Code-Editor in Visual Studio hilft Ihnen, Fehler beim Schreiben von Code zu vermeiden, und wenn Sie einen Fehler gemacht haben, hilft Ihnen der Code-Editor, den Fehler zu beheben. In diesem Teil der exemplarischen Vorgehensweise schreiben Sie eine Codezeile, die die Fehlerkorrekturfeatures im Editor veranschaulicht.

So beheben Sie einfache Codierungsfehler in Visual Studio

  1. Doppelklicken Sie in der Entwurfsansicht auf die leere Seite, um einen Handler für das Load-Ereignis für die Seite zu erstellen.
    Sie verwenden den Ereignishandler nur als Ort zum Schreiben von Code.

  2. Geben Sie innerhalb des Handlers die folgende Zeile ein, die einen Fehler enthält, und drücken Sie die EINGABETASTE:

    string myStr = "Loading..."
    

    Wenn Sie die EINGABETASTE drücken, platziert der Code-Editor grüne und rote Unterstreichungen (die häufig als 'Wellenlinien' bezeichnet werden) unter Bereichen des Codes, die fehlerhaft sind. Eine grüne Unterstreichung zeigt eine Warnung an. Eine rote Unterstreichung gibt einen Fehler an, den Sie beheben müssen.

    Halten Sie den Mauszeiger über myStr, um einen Tooltip anzuzeigen, der Sie über die Warnung informiert. Halten Sie auch den Mauszeiger über die rote Unterstreichung, um die Fehlermeldung anzuzeigen.

    Die folgende Abbildung zeigt den Code mit den Unterstreichungen.

    Willkommenstext in der Entwurfsansicht
    Der Fehler muss behoben werden, indem am Ende der Zeile ein Semikolon ; hinzugefügt wird. Die Warnung benachrichtigt Sie einfach darüber, dass Sie die myStr Variable noch nicht verwendet haben.

    Hinweis

    Sie zeigen Ihre aktuellen Codeformatierungseinstellungen in Visual Studio an, indem Sie "Extras ->Optionen ->Schriftarten und Farben" auswählen.

Umgestaltung und Umbenennung

Bei der Umgestaltung handelt es sich um eine Softwaremethodik, die eine Umstrukturierung Ihres Codes beinhaltet, um es leichter zu verstehen und zu verwalten, während die Funktionalität erhalten bleibt. Ein einfaches Beispiel könnte sein, dass Sie Code in einem Ereignishandler schreiben, um Daten aus einer Datenbank abzurufen. Beim Entwickeln der Seite stellen Sie fest, dass Sie von mehreren verschiedenen Handlern auf die Daten zugreifen müssen. Daher umgestalten Sie den Code der Seite, indem Sie eine Datenzugriffsmethode auf der Seite erstellen und Aufrufe an die Methode in den Handlern einfügen.

Der Code-Editor enthält Tools, mit denen Sie verschiedene Umgestaltungsaufgaben ausführen können. In dieser exemplarischen Vorgehensweise arbeiten Sie mit zwei Umgestaltungstechniken: Umbenennen von Variablen und Extrahieren von Methoden. Andere Umgestaltungsoptionen umfassen das Kapseln von Feldern, das Fördern lokaler Variablen für Methodenparameter und das Verwalten von Methodenparametern. Die Verfügbarkeit dieser Umgestaltungsoptionen hängt vom Speicherort im Code ab.

Refaktorisierung von Code

Ein häufiges Umgestaltungsszenario besteht darin, eine Methode aus Code zu erstellen (extrahieren), der sich innerhalb eines anderen Elements befindet, z. B. eine Methode. Dadurch wird die Größe des ursprünglichen Elements reduziert und der extrahierte Code wiederverwendbar.

In diesem Teil der exemplarischen Vorgehensweise schreiben Sie einfachen Code und extrahieren dann eine Methode daraus. Die Umgestaltung wird für C# unterstützt, sodass Sie eine Seite erstellen, die C# als Programmiersprache verwendet.

So extrahieren Sie eine Methode auf einer C#-Seite

  1. Wechseln zur Entwurfsansicht .

  2. Ziehen Sie in der Toolbox auf der Registerkarte Standard ein Schaltflächen-Steuerelement auf die Seite.

  3. Doppelklicken Sie auf das Schaltflächensteuerelement , um einen Handler für das Click-Ereignis zu erstellen, und fügen Sie dann den folgenden hervorgehobenen Code hinzu:

    protected void Button1_Click(object sender, EventArgs e)
    {
    
        System.Collections.ArrayList alist = 
            new System.Collections.ArrayList();
        int i;
        string arrayValue;
        for(i=0; i<5; i++)
        {
            arrayValue = "i = " + i.ToString();
            alist.Add(arrayValue);
        }
        for(i=0; i<alist.Count; i++)
        {
            Response.Write("<br />" + alist[i]);
        };
    }
    

    Der Code erstellt ein ArrayList - Objekt, verwendet eine Schleife, um es mit Werten zu laden, und verwendet dann eine andere Schleife, um den Inhalt des ArrayList - Objekts anzuzeigen.

  4. Drücken Sie STRG+F5 , um die Seite auszuführen, und klicken Sie dann auf die Schaltfläche , um sicherzustellen, dass die folgende Ausgabe angezeigt wird:

    i = 0
    i = 1
    i = 2
    i = 3
    i = 4
    
  5. Kehren Sie zum Code-Editor zurück, und wählen Sie dann die folgenden Zeilen im Ereignishandler aus.

    for(i=0; i<alist.Count; i++) 
    {
          Response.Write("<br />" + alist[i]);
    }
    
  6. Klicken Sie mit der rechten Maustaste auf die Auswahl, klicken Sie auf "Umgestalten", und wählen Sie dann " Extrahieren"-Methode aus.

    Das Dialogfeld "Methode extrahieren " wird angezeigt.

  7. Geben Sie im Feld "Neuer Methodenname" den Namen "DisplayArray" ein, und klicken Sie dann auf "OK".

    Der Code-Editor erstellt eine neue Methode mit dem Namen DisplayArrayund fügt einen Aufruf der neuen Methode in den Click-Handler ein, in dem die Schleife ursprünglich war.

    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Collections.ArrayList alist = 
            new System.Collections.ArrayList();
        int i;
        string arrayValue;
        for(i=0; i<5; i++)
        {
            arrayValue = "i = " + i.ToString();
            alist.Add(arrayValue);
        }
        i = DisplayArray(alist, i);
    }
    
  8. Drücken Sie STRG+F5 , um die Seite erneut auszuführen, und klicken Sie auf die Schaltfläche.

    Die Seite funktioniert wie zuvor. Die DisplayArray Methode kann jetzt von überall in der Seitenklasse aufgerufen werden.

Umbenennen von Variablen

Wenn Sie mit Variablen und Objekten arbeiten, sollten Sie sie umbenennen, nachdem sie bereits im Code referenziert wurden. Das Umbenennen von Variablen und Objekten kann jedoch dazu führen, dass der Code abgebrochen wird, wenn sie einen der Verweise nicht umbenennen. Daher können Sie Refactoring verwenden, um die Umbenennung durchzuführen.

So verwenden Sie die Refaktorisierung, um eine Variable umzubenennen

  1. Suchen Sie im Click-Ereignishandler die folgende Zeile:

    System.Collections.ArrayList alist = 
        new System.Collections.ArrayList;
    
  2. Klicken Sie mit der rechten Maustaste auf den Variablennamen alist, wählen Sie "Umgestalten" aus, und wählen Sie dann "Umbenennen" aus.

    Das Dialogfeld "Umbenennen " wird angezeigt.

  3. Geben Sie im Feld "Neuer Name " "ArrayList1 " ein, und stellen Sie sicher, dass das Kontrollkästchen "Vorschaureferenzänderungen" aktiviert wurde. Klicken Sie dann auf OK.

    Das Dialogfeld "Änderungen in der Vorschau " wird angezeigt und zeigt eine Struktur an, die alle Verweise auf die Variable enthält, die Sie umbenennen.

  4. Klicken Sie auf „Übernehmen“, um das Dialogfeld „Vorschau Änderungen“ zu schließen.

    Die Variablen, die sich speziell auf die ausgewählte Instanz beziehen, werden umbenannt. Beachten Sie jedoch, dass die Variable alist in der folgenden Zeile nicht umbenannt wird.

    private int DisplayArray(System.Collections.ArrayList alist, 
        int i)
    

    Die Variable alist in dieser Zeile wird nicht umbenannt, da sie nicht denselben Wert wie die variable alist darstellt, die Sie umbenannt haben. Die Variable alist in der DisplayArray Deklaration ist eine lokale Variable für diese Methode. Dies veranschaulicht, dass die Verwendung der Umgestaltung zum Umbenennen von Variablen anders ist als das Einfache Ausführen einer Suchen-und-Ersetzen-Aktion im Editor; Durch die Umgestaltung werden Variablen mit Kenntnissen der Semantik der Variablen, mit der sie arbeitet, umbenannt.

Einfügen von Codeausschnitten

Da es viele Codierungsaufgaben gibt, die Web Forms-Entwickler häufig ausführen müssen, stellt der Code-Editor eine Bibliothek mit Codeausschnitten oder Blöcken vorgeschriebenem Code bereit. Sie können diese Codeausschnitte in Ihre Seite einfügen.

Jede Sprache, die Sie in Visual Studio verwenden, weist geringfügige Unterschiede beim Einfügen von Codeausschnitten auf. Informationen zum Einfügen von Codeausschnitten finden Sie unter Visual Basic IntelliSense Code Snippets. Informationen zum Einfügen von Codeausschnitten in Visual C# finden Sie unter Visual C#-Codeausschnitte.

Nächste Schritte

In dieser exemplarischen Vorgehensweise wurden die grundlegenden Features des Visual Studio 2010-Code-Editors zum Beheben von Fehlern in Ihrem Code, zum Umgestalten von Code, zum Umbenennen von Variablen und zum Einfügen von Codeausschnitten in Den Code veranschaulicht. Zusätzliche Features im Editor können die Anwendungsentwicklung schnell und einfach gestalten. Sie könnten zum Beispiel Folgendes tun:

  • Erfahren Sie mehr über die Features von IntelliSense, z. B. das Ändern von IntelliSense-Optionen, das Verwalten von Codeausschnitten und die Onlinesuche nach Codeausschnitten. Weitere Informationen finden Sie unter Verwenden von IntelliSense.
  • Erfahren Sie, wie Sie eigene Codeausschnitte erstellen. Weitere Informationen finden Sie unter Erstellen und Verwenden von IntelliSense-Codeausschnitten
  • Erfahren Sie mehr über die Visual Basic-spezifischen Features von IntelliSense-Codeausschnitten, z. B. anpassen der Codeausschnitte und Problembehandlung. Weitere Informationen finden Sie unter Visual Basic IntelliSense Code Snippets
  • Erfahren Sie mehr über die C#-spezifischen Features von IntelliSense, z. B. Umgestaltung und Codeausschnitte. Weitere Informationen finden Sie unter Visual C# IntelliSense.