Tools für ASP.NET-Core Blazor

• Installieren Sie die neueste Version von Visual Studio mit der Workload ASP.NET und Webentwicklung.

• Erstellen Sie mit einer der verfügbaren Blazor-Vorlagen ein neues Projekt:

  • Blazor Web App: Hiermit wird eine Blazor-Web-App erstellt, die das interaktive serverseitige Rendering (interaktives SSR) und das interaktive clientseitige Rendering (interaktives CSR) unterstützt. Die Blazor Web App-Vorlage wird für die ersten Schritte mit Blazor empfohlen, um mehr über serverseitige und clientseitige Blazor-Features zu erfahren.
  • Eigenständige Blazor WebAssembly-App: Hiermit wird eine eigenständige Web-App des Clients erstellt, die als statische Website bereitgestellt werden kann.

Wählen Sie Weiter aus.

• Installieren Sie die neueste Version von Visual Studio mit der Workload ASP.NET und Webentwicklung.

• Erstellen eines neuen Projekts:

  • Wählen Sie für eine Blazor Server-Benutzeroberfläche die Vorlage Blazor Server App mit Demonstrationscode und Bootstrap oder die Vorlage Blazor Server App Empty ohne Demonstrationscode und Bootstrap. Wählen Sie Weiter aus.
  • Wählen Sie für eine eigenständige Blazor WebAssembly-App die Vorlage Blazor WebAssembly-App aus, die Demonstrationscode und Bootstrap enthält, oder die Vorlage Leere Blazor WebAssembly-App ohne Demonstrationscode und Bootstrap aus. Wählen Sie Weiter aus.

• Installieren Sie die neueste Version von Visual Studio mit der Workload ASP.NET und Webentwicklung.

• Erstellen eines neuen Projekts:

  • Wählen Sie für eine Blazor Server-Benutzeroberfläche die Blazor Server-App- Vorlage aus. Klicken Sie auf Weiter.
  • Wählen Sie für eine Blazor WebAssembly-Benutzeroberfläche die Blazor WebAssembly-App- Vorlage aus. Klicken Sie auf Weiter.

• Aktivieren Sie im Dialogfeld Zusätzliche Informationen das Kontrollkästchen Von ASP.NET Core gehostet für eine gehosteteBlazor WebAssembly-App.

Start- und Taskkonfiguration für gehostete Blazor WebAssembly-Projektmappen

Fügen Sie für gehostete Blazor WebAssemblyLösungenden .vscode Ordner mit den Dateien launch.json und tasks.json zum übergeordneten Ordner der Projektmappe hinzu, bei dem es sich um den Ordner handelt, der die typischen Projektordner Client, Server, und Shared enthält (oder verschieben Sie die Dateien in diesen übergeordneten Ordner). Aktualisieren Sie die Konfiguration in den Dateien launch.json und tasks.json, oder bestätigen Sie, dass diese eine gehostete Blazor WebAssembly-App im Projekt Server ausführen.

Untersuchen Sie die Datei Properties/launchSettings.json, und bestimmen Sie die URL der App über die Eigenschaft applicationUrl. Abhängig von der Frameworkversion ist das URL-Protokoll entweder sicher (HTTPS) https://localhost:{PORT} oder unsicher (HTTP) http://localhost:{PORT}, wobei der Platzhalter {PORT} einem zugewiesenen Port entspricht. Notieren Sie sich die URL, um sie in der Datei launch.json zu verwenden.

In der Startkonfiguration der .vscode/launch.json-Datei:

• Legen Sie das aktuelle Arbeitsverzeichnis (cwd) im Projektordner Server fest.
• Geben Sie die URL der App mit der url-Eigenschaft an. Verwenden Sie den Wert, der zuvor in der Properties/launchSettings.json-Datei aufgezeichnet wurde.

"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
"url": "{URL}"

In der vorherigen Konfiguration:

• Der Platzhalter {SERVER APP FOLDER} steht für den Ordner des Projekts Server , in der Regel Server.
• Der {URL}-Platzhalter ist die URL der App, die in der Properties/launchSettings.json-Datei der App in der applicationUrl-Eigenschaft angegeben wird.

Wenn Sie Google Chrome gegenüber Microsoft Edge bevorzugen, aktualisieren Sie die Konfiguration, oder fügen Sie die zusätzliche Eigenschaft "browser": "chrome" hinzu.

Für die folgende Beispieldatei .vscode/launch.json gilt Folgendes:

• Die Datei legt das aktuelle Arbeitsverzeichnis auf den Ordner Server fest.
• Sie legt die URL für die App auf http://localhost:7268 fest.
• Sie stellt den Standardbrowser von Microsoft Edge auf Google Chrome um.

"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"

Die vollständige .vscode/launch.json-Datei:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": "Launch and Debug Blazor WebAssembly Application",
      "request": "launch",
      "cwd": "${workspaceFolder}/Server",
      "url": "http://localhost:7268",
      "browser": "chrome"
    }
  ]
}

Fügen Sie in .vscode/tasks.json ein build-Argument hinzu, das den Pfad zur Projektdatei der Server -App angibt.

"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",

Für das obige Argument gilt Folgendes:

• Der Platzhalter {SERVER APP FOLDER} steht für den Ordner des Server-Projekts, in der Regel Server.
• Der Platzhalter {PROJECT NAME} steht für den Namen der App, der in der Regel auf dem Namen der Projektmappe basiert, gefolgt von .Server bei einer App, die unter Verwendung der Blazor WebAssembly-Projektvorlage generiert wurde.

Eine .vscode/tasks.json-Beispieldatei mit einem Server -Projekt namens BlazorHosted im Ordner Server der Projektmappe:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
        "args": [
          "build",
          "${workspaceFolder}/Server/BlazorHosted.Server.csproj",
          "/property:GenerateFullPaths=true",
          "/consoleloggerparameters:NoSummary",
        ],
        "group": "build",
        "presentation": {
          "reveal": "silent"
        },
        "problemMatcher": "$msCompile"
    }
  ]
}

.vscode/launch.json (launch-Konfiguration):

...
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
...

In der obigen Konfiguration für das aktuelle Arbeitsverzeichnis (cwd) steht der Platzhalter {SERVER APP FOLDER} für den Ordner des Projekts Server , in der Regel „Server“.

Wenn Microsoft Edge verwendet wird und Google Chrome nicht auf dem System installiert ist, fügen Sie der Konfiguration die zusätzliche Eigenschaft "browser": "edge" hinzu.

Beispiel für einen Projektordner von Server, der Microsoft Edge statt den Standardbrowser Google Chrome als Browser für Debugausführungen verwendet:

...
"cwd": "${workspaceFolder}/Server",
"browser": "edge"
...

.vscode/tasks.json (Argumente des dotnet-Befehls):

...
"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
...

Für das obige Argument gilt Folgendes:

• Der Platzhalter {SERVER APP FOLDER} steht für den Ordner des Projekts Server , in der Regel „Server“.
• Der Platzhalter {PROJECT NAME} steht für den Namen der App, der in der Regel auf dem Namen der Projektmappe basiert, gefolgt von „.Server“ bei einer App, die unter Verwendung der Blazor-Projektvorlage generiert wurde.

Im folgenden Beispiel aus dem Tutorial für die Verwendung von SignalR mit einer Blazor WebAssembly-App werden der Projektordnername Server und der Projektname BlazorWebAssemblySignalRApp.Server verwendet:

...
"args": [
  "build",
    "${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
    ...
],
...

Erstellen eines neuen Projekts:

• Wechseln Sie mit dem Befehl cd zum Verzeichnis, in dem Sie den Projektordner erstellen möchten (z. B. cd c:/users/Bernie_Kopell/Documents).

• Für eine Blazor Web App-Erfahrung mit dem standardmäßigen interaktiven serverseitigen Rendering (interaktive SSR) führen Sie den folgenden Befehl aus:

  dotnet new blazor -o BlazorApp
  

• Führen Sie für eine eigenständige Blazor WebAssembly-Instanz den folgenden Befehl in einer Befehlsshell aus, der die blazorwasm-Vorlage verwendet:

  dotnet new blazorwasm -o BlazorApp
  

Erstellen eines neuen Projekts:

• Wechseln Sie mit dem Befehl cd zum Verzeichnis, in dem Sie den Projektordner erstellen möchten (z. B. cd c:/users/Bernie_Kopell/Documents).

• Führen Sie für eine Blazor Server-Benutzeroberfläche mit Demonstrationscode und Bootstrap den folgenden Befehl aus:

  dotnet new blazorserver -o BlazorApp
  

• Führen Sie für eine eigenständige Blazor WebAssembly-App mit Demonstrationscode und Bootstrap den folgenden Befehl aus:

  dotnet new blazorwasm -o BlazorApp
  

• Fügen Sie für eine gehostete Blazor WebAssembly-Benutzeroberfläche mit Demonstrationscode und Bootstrap die Option „hosted“ (-ho/--hosted) an den Befehl an:

  dotnet new blazorwasm -o BlazorApp -ho
  

  Hinweis

  Die gehostete Blazor WebAssembly-WebAssembly-Projektvorlage ist in ASP.NET Core 8.0 oder höher nicht verfügbar. Um eine gehostete Blazor WebAssembly App mit einem .NET 8.0-SDK oder höher zu erstellen, übergeben Sie die -f|--framework-Option mit einem 7.0-Zielframework (net7.0):

  dotnet new blazorwasm -o BlazorApp -ho -f net7.0
  

Erstellen eines neuen Projekts:

• Wechseln Sie mit dem Befehl cd zum Verzeichnis, in dem Sie den Projektordner erstellen möchten (z. B. cd c:/users/Bernie_Kopell/Documents).

• Führen Sie für Blazor WebAssembly den folgenden Befehl aus:

  dotnet new blazorwasm -o BlazorApp
  

• Fügen Sie dem Befehl für ein gehostetes Blazor WebAssembly-Modell die Hostingoption (-ho oder --hosted) hinzu:

  dotnet new blazorwasm -o BlazorApp -ho
  

  Hinweis

  Die gehostete Blazor WebAssembly-WebAssembly-Projektvorlage ist in ASP.NET Core 8.0 oder höher nicht verfügbar. Um eine gehostete Blazor WebAssembly-App mit einem .NET 8.0-SDK oder höher zu erstellen, übergeben Sie die -f|--framework-Option mit dem Zielframeworkmoniker (z. B. net6.0):

  dotnet new blazorwasm -o BlazorApp -ho -f net6.0
  

• Führen Sie für Blazor Server den folgenden Befehl aus:

  dotnet new blazorserver -o BlazorApp