Programmieren ASP.NET Webseiten (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 Webseiten (Razor)-Websites zu programmieren.

Was Sie lernen werden

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

Im Lernprogramm verwendete Softwareversionen

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

Dieses Lernprogramm funktioniert auch mit ASP.NET Webseiten 2, Visual Studio 2012, Visual Studio 2010 und WebMatrix 2.

Sie können ASP.NET Webseiten mit Razor-Syntax mit WebMatrix oder vielen anderen Code-Editoren programmieren. Sie können auch Microsoft Visual Studio verwenden, bei dem es sich um eine integrierte Entwicklungsumgebung (Integrated Development Environment, IDE) handelt, die eine leistungsstarke Reihe 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 beenden, während es ausgeführt wird, Variablen untersuchen und die Codezeile nach Zeile durchlaufen.

Verwenden von Visual Studio mit verschiedenen Versionen von ASP.NET Webseiten

Um ASP.NET Web-Apps in Visual Studio 2017 zu entwickeln, installieren Sie die ASP.NET- und Webentwicklungsworkloads .

Visual Studio 2012 und Visual Studio 2013 umfassen Unterstützung für ASP.NET Webseiten. (Die Pakete, die erforderlich sind, um ASP.NET Webseiten zu unterstützen, werden installiert, wenn Sie Visual Studio installieren.)

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

In der folgenden Tabelle wird die Unterstützung für ASP.NET Webseiten 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 Webseiten 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, um das Projekt ganz einfach in Visual Studio zu öffnen. Sie müssen Visual Studio auf Ihrem Computer installiert haben, damit diese Schaltfläche aktiviert ist. 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 zwischen WebMatrix und Visual Studio ohne Probleme hin- und herwechseln. Sie werden benachrichtigt, wenn dateien in der anderen Umgebung geändert wurden und neu geladen werden müssen, um die neuesten Änderungen zu erhalten.

Das Erstellen einer ASP.NET Razor-Website 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 (Visual C# oder Visual Basic) aus.

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

   

5. Klicke auf OK.

Ihr neues Projekt ist vorhanden und wird mit einigen Standardwebseiten aufgefüllt, die Ihnen bei den ersten Schritten helfen.

Verwenden von IntelliSense

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

1. Öffnen Sie auf der soeben erstellten Website die Seite "Default.cshtml ".

2. Geben Sie nach den <h3>-Tags auf der Seite @ServerInfo. ein (einschließlich des Punkts). 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 nach der Methode Zeichen 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.Title"Default.cshtml" beginnt, die folgende Codezeile hinzu:

   var myTime = DateTime.Now.TimeOfDay;
   

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

   

3. Entfernen Sie den Aufruf der ServerInfo.GetHtml Methode, und fügen Sie an seiner 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 in Gelb markierten Haltepunkt aussieht.

   

5. Klicken Sie auf der Symbolleiste "Debuggen" auf die Schaltfläche " Schritt in " (oder drücken Sie F11), um die nächste Codezeile auszuführen. Jedes Mal, wenn Sie auf diese Schaltfläche klicken, wechseln Sie zur nächsten Codezeile.

   

6. Untersuchen Sie den Wert der myTime Variablen, indem Sie mit dem Mauszeiger darauf zeigen oder die in den Fenstern "Lokal" und " Aufrufstapel " angezeigten Werte überprüfen. Visual Studio zeigt den Wert der Variablen an.

   

7. Wenn Sie damit fertig sind, die Variable zu untersuchen und Code zu durchlaufen, drücken Sie F5, um die Ausführung der Seite fortzusetzen, ohne bei jeder Zeile zu stoppen. 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 in ASP.NET MVC-Projekten umfassend verwendet. MVC ist eine leistungsstarke, musterbasierte Methode zum Erstellen dynamischer Websites. Wenn Ihre ASP.NET-Website für Webseiten schwierig zu verwalten ist, empfiehlt es sich, sie in eine ASP.NET MVC-Anwendung zu konvertieren. 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-Webseiten in Visual Studio 2010

In diesem Abschnitt wird gezeigt, wie Visual Web Developer Express 2010 und die ASP.NET Webseitentools für Visual Studio installiert werden.

1. Wenn Sie noch nicht über das Webplattform-Installationsprogramm verfügen, laden Sie es aus der folgenden 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 Webseiten 2), und klicken Sie dann auf "Hinzufügen". Zu diesen Produkten gehören Visual Studio-Tools zum Erstellen von ASP.NET Razor-Websites.

   

5. Klicken Sie auf "Installieren ", um die Installation abzuschließen.