Programmieren von ASP.NET Web Pages (Razor) mit Visual Studio

von Tom FitzMacken

In diesem Artikel wird erläutert, wie Sie Visual Studio oder Visual Web Developer Express verwenden können, um ASP.NET Web Pages (Razor)-Websites zu programmieren.

Sie lernen Folgendes

• Was Sie (falls überhaupt) installieren müssen, um mit ASP.NET Web Pages in Ihrer Visual Studio-Version zu arbeiten.
• Hier erfahren Sie, wie Sie Visual Web Developer 2010 Express Unterstützung für ASP.NET Web Pages hinzufügen.
• Verwenden von Features in Visual Studio zum Arbeiten mit ASP.NET Razor-Seiten, einschließlich IntelliSense und dem Debugger.

Im Tutorial verwendete Softwareversionen

• ASP.NET Web Pages (Razor) 3
• Visual Studio 2013
• WebMatrix 3

Dieses Tutorial funktioniert auch mit ASP.NET Web Pages 2, Visual Studio 2012, Visual Studio 2010 und WebMatrix 2.

Sie können ASP.NET Webseiten mit Razor-Syntax mithilfe von WebMatrix oder vielen anderen Code-Editoren programmieren. Sie können auch Microsoft Visual Studio verwenden. Hierbei handelt es sich um eine integrierte Entwicklungsumgebung (IDE), die einen leistungsstarken Satz von Tools zum Erstellen vieler Arten von Anwendungen (nicht nur Websites) bietet. Um mit ASP.NET Razor-Seiten zu arbeiten, können Sie Visual Studio 2017 verwenden.

Zwei besonders nützliche Features, die Visual Studio für die Programmierung mit ASP.NET Razor-Webseiten bietet, sind:

• IntelliSense. Das in Visual Studio integrierte IntelliSense-Feature ist umfassender als IntelliSense in WebMatrix.
• Debugger. Mit dem Debugger können Sie Probleme mit Ihrem Code beheben, indem Sie ein Programm während der Ausführung beenden, Variablen untersuchen und den Code Zeile für Zeile durchlaufen.

Verwenden von Visual Studio mit verschiedenen Versionen von ASP.NET Web Pages

Installieren Sie zum Entwickeln ASP.NET Web-Apps in Visual Studio 2017 die Workload ASP.NET und Webentwicklung .

Visual Studio 2012 und Visual Studio 2013 unterstützen ASP.NET Web Pages. (Die Pakete, die zur Unterstützung von ASP.NET Web Pages erforderlich sind, werden bei der Installation von Visual Studio installiert.)

Visual Studio 2010 bietet standardmäßig keine Unterstützung für ASP.NET Web Pages. Um ASP.NET Web Pages mit Visual Studio 2010 zu verwenden, müssen Sie das ASP.NET MVC-Paket installieren. Um ASP.NET Web Pages 2 zu erhalten, installieren Sie ASP.NET MVC 4.

In der folgenden Tabelle wird die Unterstützung für ASP.NET Web Pages in verschiedenen Versionen von Visual Studio zusammengefasst.

Informationen zum Arbeiten mit Visual Studio 2010 finden Sie unter Installieren der Unterstützung für ASP.NET Web Pages in Visual Studio 2010.

Starten von Visual Studio aus WebMatrix

Wenn Sie ein Projekt in WebMatrix gestartet haben und zu Visual Studio wechseln möchten, bietet WebMatrix eine Schaltfläche zum einfachen Öffnen des Projekts in Visual Studio. Sie müssen Visual Studio auf Ihrem Computer installiert haben, damit diese Schaltfläche aktiviert werden kann. Die folgende Abbildung zeigt die Schaltfläche in WebMatrix.

Wenn Sie auf die Schaltfläche klicken, wird das Projekt in Visual Studio geöffnet. Sie können problemlos zwischen WebMatrix und Visual Studio hin- und herwechseln. Sie werden benachrichtigt, wenn sich Dateien in der anderen Umgebung geändert haben und neu geladen werden müssen, um die neuesten Änderungen zu erhalten.

Erstellen ASP.NET Razor Site in Visual Studio

So erstellen Sie eine ASP.NET Razor-Website in Visual Studio:

1. Öffnen Sie Visual Studio.

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

   

3. Wählen Sie im Dialogfeld Neue Website die zu verwendende Sprache aus (Visual C# oder Visual Basic).

4. Wählen Sie die Vorlage ASP.NET Website (Razor) aus.

   

5. Klicken Sie auf OK.

Ihr neues Projekt ist vorhanden und wird mit einigen Standardwebseiten aufgefüllt, um Ihnen den Einstieg zu erleichtern.

Using IntelliSense

Nachdem Sie nun eine Website erstellt haben, können Sie sehen, wie IntelliSense in Visual Studio funktioniert.

1. Öffnen Sie auf der Website, die Sie gerade erstellt haben, die Seite Default.cshtml .

2. Geben Sie @ServerInfo. nach den <h3> Tags auf der Seite (einschließlich des Punkts) ein. Beachten Sie, wie IntelliSense die verfügbaren Methoden für das ServerInfo Hilfsprogramm in einer Dropdownliste anzeigt.

   

3. Wählen Sie die GetHtml Methode aus der Liste aus, und drücken Sie dann die EINGABETASTE. IntelliSense füllt die -Methode automatisch aus. (Wie bei jeder Methode in C# müssen Sie Zeichen nach der -Methode hinzufügen () .) Der fertige Code für die GetHtml -Methode sieht wie im folgenden Beispiel aus:

   @ServerInfo.GetHtml()
   

4. Drücken Sie STRG+F5, um die Seite auszuführen. So sieht die Seite aus, wenn sie in einem Browser angezeigt wird:

   

5. Schließen Sie den Browser.

Verwenden des Debuggers

1. Fügen Sie oben auf der Seite Default.cshtml nach der Zeile, die mit Page.Titlebeginnt, die folgende Codezeile hinzu:

   var myTime = DateTime.Now.TimeOfDay;
   

2. Klicken Sie am grauen Rand des Editors links neben dem Code neben dieser neuen Zeile, um einen Haltepunkt hinzuzufügen. Ein Haltepunkt ist ein Marker, der den Debugger angibt, die Ausführung des Programms zu diesem Zeitpunkt zu beenden, damit Sie sehen können, was passiert.

   

3. Entfernen Sie den Aufruf der ServerInfo.GetHtml -Methode, und fügen Sie an ihrer Stelle einen Aufruf der @myTime Variablen hinzu. Dieser Aufruf zeigt den aktuellen Zeitwert an, der von der neuen Codezeile zurückgegeben wird.

4. Drücken Sie F5, um die Seite im Debugger auszuführen. Die Seite wird an dem von Ihnen festgelegten Haltepunkt beendet. Die folgende Abbildung zeigt, wie die Seite im Editor mit dem Haltepunkt (in Gelb) aussieht.

   

5. Klicken Sie auf der Symbolleiste Debuggen auf die Schaltfläche Schrittweise ausführen (oder drücken Sie F11), um die nächste Codezeile auszuführen. Jedes Mal, wenn Sie auf diese Schaltfläche klicken, fahren Sie die Ausführung zur nächsten Codezeile fort.

   

6. Untersuchen Sie den Wert der myTime Variablen, indem Sie den Mauszeiger darauf halten oder die Werte überprüfen, die in den Fenstern Lokal und Aufrufliste angezeigt werden. Visual Studio zeigt den Wert der Variablen an.

   

7. Wenn Sie die Überprüfung der Variablen und das Durchlaufen des Codes abgeschlossen haben, drücken Sie F5, um die Ausführung der Seite fortzusetzen, ohne an jeder Zeile anzuhalten. Wenn Sie den gesamten Code durchlaufen haben, zeigt der Browser die Seite an.

Weitere Informationen zum Debugger und zum Debuggen von Code in Visual Studio finden Sie unter Exemplarische Vorgehensweise: Debuggen von Webseiten in Visual Web Developer.

Verwenden von Razor in ASP.NET MVC-Projekten mit Visual Studio

Die Razor-Syntax wird auch häufig in ASP.NET MVC-Projekten verwendet. MVC ist eine leistungsstarke, musterbasierte Methode zum Erstellen dynamischer Websites. Wenn Ihre ASP.NET Web Pages Website schwierig zu verwalten ist, sollten Sie die Konvertierung in eine ASP.NET MVC-Anwendung in Erwägung ziehen. Ein Beispiel zum Erstellen einer MVC-Anwendung finden Sie unter Erste Schritte mit ASP.NET MVC 5.

Installieren der Unterstützung für ASP.NET Web Pages in Visual Studio 2010

In diesem Abschnitt erfahren Sie, wie Sie Visual Web Developer Express 2010 und die ASP.NET Web Pages Tools für Visual Studio installieren.

1. Wenn Sie noch nicht über den Webplattform-Installer verfügen, laden Sie ihn über die folgende URL herunter:

   https://www.microsoft.com/web/downloads/platform.aspx

2. Führen Sie den Webplattform-Installer aus.

3. Klicken Sie auf die Registerkarte Produkte .

   

4. Suchen Sie nach ASP.NET MVC 4 (für ASP.NET Web Pages 2), und klicken Sie dann auf Hinzufügen. Zu diesen Produkten gehören Visual Studio-Tools zum Erstellen ASP.NET Razor-Websites.

   

5. Klicken Sie auf Installieren, um die Installation durchzuführen.