Übung: Erstellen und Ausführen einer Blazor-Web-App

Abgeschlossen

Richten wir nun unsere .NET-Entwicklungsumgebung ein und erstellen unsere erste Blazor-Web-App.

Dieses Modul bietet Ihnen die Möglichkeit, die .NET-CLI, Visual Studio Code oder Visual Studio 2022 für die lokale Entwicklung zu verwenden. Wenn Sie mit Visual Studio Code entwickeln, installieren Sie unbedingt die Erweiterung C# Dev Kit, die wir in diesem Modul verwenden.

In diesem Modul wird das .NET 8.0 SDK verwendet. Stellen Sie sicher, dass .NET 8.0 installiert ist, indem Sie in Ihrem bevorzugten Befehlsterminal den folgenden Befehl ausführen:

dotnet --list-sdks

Die daraufhin angezeigte Ausgabe sieht in etwa wie im folgenden Beispiel aus:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Stellen Sie sicher, dass eine Version aufgeführt wird, die mit 8 beginnt. Wenn nichts aufgeführt ist oder der Befehl nicht gefunden wurde, installieren Sie das neueste .NET 8.0 SDK.

Erstellen einer neuen Blazor-Web-App mit dem C# Dev Kit

So erstellen Sie ein neues Blazor-Web-App-Projekt in Visual Studio Code mit dem C# Dev Kit

1. Rufen Sie die Befehlspalette mit STRG+UMSCHALT+P auf, und geben Sie dann „.NET“ ein.

2. Suchen Sie den Befehl .NET: Neues Projekt, und wählen Sie ihn aus.

3. Wählen Sie in der Dropdownliste Blazor-Web-App aus.

4. Wählen Sie den Ordner aus, in dem Sie das neue Projekt erstellen möchten.

5. Nennen Sie das Projekt BlazorApp, und drücken Sie die EINGABETASTE, um dies zu bestätigen.

6. Zeigen Sie Ihr neues Blazor-App-Projekt im Projektmappen-Explorer an.

Optional: Erstellen einer neuen Blazor-App mit der .NET-CLI

Verwenden Sie den folgenden Befehl, um ein Blazor-Web-App-Projekt mit dem .NET SDK über die Befehlszeile zu erstellen:

dotnet new blazor

Unabhängig davon, ob Sie die Blazor-App mit Visual Studio Code oder der .NET-CLI erstellt haben, enthält das generierte Projekt die folgenden Dateien und Seiten:

• Program.cs ist der Einstiegspunkt für die App, die den Server startet, und dort konfigurieren Sie die App-Dienste und die Middleware.
• App.razor ist die Stammkomponente für die App.
• Routes.razor konfiguriert den Blazor-Router.
• Das Verzeichnis Components/Pages enthält einige Beispielwebseiten für die App.
• BlazorApp.csproj definiert das App-Projekt und dessen Abhängigkeiten und kann durch Doppelklicken auf den Projektknoten im Projektmappen-Explorer angezeigt werden.
• Die Datei launchSettings.json im Eigenschaftenverzeichnis definiert unterschiedliche Profileinstellungen für die lokale Entwicklungsumgebung. Bei der Projekterstellung wird automatisch eine Portnummer zugewiesen und in dieser Datei gespeichert.

Ausführen der App mit dem integrierten Debugger

1. Wählen Sie in Visual Studio Code im Menü Ausführen aus.

2. Wählen Sie Debuggen starten aus.

3. Wählen Sie in der Dropdownliste Debugger auswählen die Option C# aus.

4. Wählen Sie C#: BlazorApp [Standardkonfiguration] aus.

   Dadurch wird die App mit aktiviertem Debugging erstellt und gestartet. Die App sollte automatisch in Ihrem Standardbrowser geöffnet werden. Ihr Browser warnt Sie möglicherweise, dass die Website nicht sicher ist. Sie können trotzdem fortfahren.

   

Optional: Ausführen der App mit der .NET-CLI

1. Kopieren Sie im Terminalfenster den folgenden Befehl, und fügen Sie ihn ein, um die App auszuführen. Achten Sie auf Dateiänderungen:

   dotnet watch
   

   Dieser Befehl erstellt und startet die App und wendet dann alle Codeänderungen auf die ausgeführte App an. Die App sollte automatisch in Ihrem Standardbrowser geöffnet werden. Ihr Browser weist Sie möglicherweise darauf hin, dass die Website noch nicht über ein gültiges Zertifikat verfügt. Es ist trotzdem sicher, fortzufahren.

Sie haben Ihre erste Blazor-App erfolgreich ausgeführt!

Erstellen einer neuen Blazor-App

Visual Studio ist eine vollwertige IDE für die .NET-Entwicklung, die das Erstellen von Blazor-Apps vereinfacht.

Um Visual Studio zum Erstellen und Verwenden der Blazor-Web-Apps zu nutzen, müssen Sie die Workload „ASP.NET und Webentwicklung“ mithilfe des Visual Studio-Installationsprogramms installieren.

So erstellen Sie eine neue Blazor-Web-App mit Visual Studio

1. Starten Sie Visual Studio, und wählen Sie Neues Projekt erstellen aus.

2. Geben Sie im Fenster Neues Projekt erstellen im Suchfeld Blazor ein, und drücken Sie die Eingabetaste.

3. Wählen Sie die Vorlage Blazor-Web-App und dann Weiter aus.

   

4. Geben Sie im Fenster Neues Projekt konfigurieren als Projektnamen BlazorApp ein, und wählen Sie Weiter aus:

   

5. Wählen Sie im Fenster Zusätzliche Informationen in der Dropdownliste Framework den Eintrag .NET 8.0 (Langfristiger Support) aus, wenn er noch nicht ausgewählt ist, und klicken Sie auf die Schaltfläche Erstellen.

   Beim Erstellen einer Blazor-Web-App können Sie aus verschiedenen Optionen auswählen, z. B. ob die Authentifizierung aktiviert werden soll, welche interaktiven Rendermodi aktiviert werden sollen und in welchem Umfang die App interaktiv sein soll. Stellen Sie für diese App sicher, dass die folgenden Standardwerte ausgewählt sind:

   • Authentifizierungstyp: Keine
   • Interaktiver Rendermodus: Server
   • Ort für die Interaktivität: Pro Seite/Komponente

   

Ihr Projekt wird in Visual Studio erstellt und geladen. Sehen Sie sich den Inhalt Ihres Projekts mithilfe des Projektmappen-Explorers an.

Mehrere Dateien wurden erstellt, damit Sie eine einfache Blazor-App erhalten, die Sie direkt ausführen können:

• Program.cs ist der Einstiegspunkt für die App, die den Server startet, und dort konfigurieren Sie die App-Dienste und die Middleware.
• App.razor ist die Stammkomponente für die App.
• Routes.razor konfiguriert den Blazor-Router.
• Das Verzeichnis Components/Pages enthält einige Beispielwebseiten für die App.
• BlazorApp.csproj definiert das App-Projekt und dessen Abhängigkeiten und kann durch Doppelklicken auf den Projektknoten im Projektmappen-Explorer angezeigt werden.
• Die Datei launchSettings.json im Eigenschaftenverzeichnis definiert unterschiedliche Profileinstellungen für die lokale Entwicklungsumgebung. Bei der Projekterstellung wird automatisch eine Portnummer zugewiesen und in dieser Datei gespeichert.

Ausführen der App

Klicken Sie in Visual Studio auf der Debugsymbolleiste auf die Schaltfläche Debuggen starten (grüner Pfeil), um Ihre App auszuführen.

Sobald die App ausgeführt wird, können Sie Codeänderungen auf die ausgeführte App anwenden, indem Sie auf die Schaltfläche Hot Reload klicken.

Sie können die App jederzeit beenden, indem Sie auf der oberen Symbolleiste auf die Schaltfläche Beenden klicken.

Wenn Sie zum ersten Mal eine Web-App in Visual Studio ausführen, wird ein Entwicklungszertifikat für das Hosten der App über HTTPS eingerichtet. Sie werden dann aufgefordert, dem Zertifikat zu vertrauen. Wir empfehlen, dem Zertifikat zu vertrauen. Das Zertifikat wird nur für die lokale Entwicklung verwendet. Ohne das Zertifikat beanstanden die meisten Browser die Sicherheit der Website.

Warten Sie, bis die App im Browser gestartet wird. Sobald Sie zur folgenden Seite gelangen, haben Sie Ihre erste Blazor-App erfolgreich ausgeführt!

Verwenden Sie diese Blazor-App in den folgenden Übungen.