Nástroje pro ASP.NET Core Blazor

• Nainstalujte nejnovější verzi sady Visual Studio s úlohou vývoje pro ASP.NET a web.

• Vytvořte nový projekt pomocí jedné z dostupných Blazor šablon:

  • Blazor Web App: Vytvoří webovou Blazor aplikaci, která podporuje interaktivní vykreslování na straně serveru (interaktivní SSR) a vykreslování na straně klienta (CSR). Tato Blazor Web App šablona se doporučuje, abyste se seznámili s funkcemi Blazor na straně serveru a na straně Blazor klienta.
  • Blazor WebAssembly Samostatná aplikace: Vytvoří samostatnou klientskou webovou aplikaci, která se dá nasadit jako statický web.

Vyberte Další.

• Nainstalujte nejnovější verzi sady Visual Studio s úlohou vývoje pro ASP.NET a web.

• Vytvořte nový projekt:

  • Pro prostředí Blazor Server zvolteBlazor Server šablonu aplikace, která obsahuje ukázkový kód a Bootstrap, nebo prázdnou Blazor Server šablonu aplikace bez ukázkového kódu a bootstrap. Vyberte Další.
  • Pro samostatné Blazor WebAssembly prostředí zvolte Blazor WebAssembly šablonu aplikace, která obsahuje ukázkový kód a bootstrap, nebo prázdnou Blazor WebAssembly šablonu aplikace bez ukázkového kódu a bootstrap. Vyberte Další.

• Nainstalujte nejnovější verzi sady Visual Studio s úlohou vývoje pro ASP.NET a web.

• Vytvořte nový projekt:

  • Pro prostředí Blazor Server zvolte Blazor Server šablonu aplikace . Vyberte Další.
  • Pro prostředí Blazor WebAssembly zvolte Blazor WebAssembly šablonu aplikace . Vyberte Další.

• U hostovanéBlazor WebAssembly aplikace zaškrtněte políčko ASP.NET Hostované jádro v dialogovém okně Další informace.

Konfigurace hostovaného Blazor WebAssembly spuštění a úlohy

V případě hostovaných řešení přidejte (nebo přesuňte) .vscode složku se launch.json soubory do tasks.json nadřazené složky řešení, což je složka, která obsahuje typické složky projektu: Client, Servera Shared.Blazor WebAssembly Aktualizujte nebo potvrďte, že konfigurace v souborech launch.json a tasks.json souborech spouští hostované Blazor WebAssembly aplikace z Server projektu.

Properties/launchSettings.json Prozkoumejte soubor a určete adresu URL aplikace z applicationUrl vlastnosti. V závislosti na verzi architektury je protokol URL zabezpečený (HTTPS) https://localhost:{PORT} nebo nezabezpečený (HTTP), http://localhost:{PORT}kde {PORT} zástupný symbol je přiřazený port. Poznamenejte si adresu URL pro použití v launch.json souboru.

V konfiguraci .vscode/launch.json spuštění souboru:

• Nastavte aktuální pracovní adresář (cwd) do Server složky projektu.
• Zadejte adresu URL aplikace s url vlastností. Použijte hodnotu zaznamenanou dříve ze Properties/launchSettings.json souboru.

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

V předchozí konfiguraci:

• Zástupný {SERVER APP FOLDER} symbol je Server složka projektu, obvykle Server.
• Zástupný {URL} symbol je adresa URL aplikace, která je zadaná v souboru aplikace Properties/launchSettings.json ve applicationUrl vlastnosti.

Pokud je Google Chrome upřednostňovaný před Microsoft Edge, aktualizujte nebo přidejte do konfigurace další vlastnost "browser": "chrome" .

Následující ukázkový .vscode/launch.json soubor:

• Nastaví aktuální pracovní adresář do Server složky.
• Nastaví adresu URL aplikace na http://localhost:7268.
• Změní výchozí prohlížeč z Microsoft Edge na Google Chrome.

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

Úplný .vscode/launch.json soubor:

{
  "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"
    }
  ]
}

Do .vscode/tasks.jsonpole přidejte build argument, který určuje cestu k Server souboru projektu aplikace:

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

V předchozím argumentu:

• Zástupný {SERVER APP FOLDER} symbol je Server složka projektu, obvykle Server.
• Zástupný {PROJECT NAME} symbol je název aplikace, obvykle na základě názvu řešení následovaného .Server v aplikaci vygenerované ze Blazor WebAssembly šablony projektu.

Ukázkový .vscode/tasks.json soubor s projektem pojmenovaným BlazorHosted Server ve Server složce řešení:

{
  "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 konfigurace):

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

V předchozí konfiguraci pro aktuální pracovní adresář (cwd) {SERVER APP FOLDER} je Server zástupný symbol složka projektu, obvykle "Server".

Pokud se microsoft Edge používá a Google Chrome není v systému nainstalovaný, přidejte do konfigurace další vlastnost "browser": "edge" .

Například pro složku Server projektu, která vytváří Microsoft Edge jako prohlížeč pro ladicí běhy místo výchozího prohlížeče Google Chrome:

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

.vscode/tasks.json (dotnet argumenty příkazu ):

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

V předchozím argumentu:

• Zástupný {SERVER APP FOLDER} symbol je Server složka projektu, obvykle "Server".
• Zástupný {PROJECT NAME} symbol je název aplikace, obvykle na základě názvu řešení následovaného ".Server" v aplikaci vygenerované ze Blazor šablony projektu.

Následující příklad z kurzu pro použití SignalR s Blazor WebAssembly aplikací používá název Server složky projektu a název BlazorWebAssemblySignalRApp.Serverprojektu:

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

Vytvořte nový projekt:

• Pomocí příkazu přejděte do adresáře cd , do kterého chcete vytvořit složku projektu (například cd c:/users/Bernie_Kopell/Documents).

• Blazor Web App Pro prostředí s výchozím interaktivním vykreslováním na straně serveru (interaktivní SSR) spusťte následující příkaz:

  dotnet new blazor -o BlazorApp
  

• Pro samostatné Blazor WebAssembly prostředí spusťte v příkazovém prostředí následující příkaz, který používá blazorwasm šablonu:

  dotnet new blazorwasm -o BlazorApp
  

Vytvořte nový projekt:

• Pomocí příkazu přejděte do adresáře cd , do kterého chcete vytvořit složku projektu (například cd c:/users/Bernie_Kopell/Documents).

• Blazor Server Pro zkušenosti s ukázkovým kódem a bootstrap spusťte následující příkaz:

  dotnet new blazorserver -o BlazorApp
  

• Pro samostatné Blazor WebAssembly prostředí s ukázkovým kódem a bootstrap spusťte následující příkaz:

  dotnet new blazorwasm -o BlazorApp
  

• Pro hostované Blazor WebAssembly prostředí s ukázkovým kódem a bootstrap přidejte hostované možnosti (-ho/--hosted) do příkazu:

  dotnet new blazorwasm -o BlazorApp -ho
  

  Poznámka:

  Šablona hostovaného Blazor WebAssembly projektu není dostupná v ASP.NET Core 8.0 nebo novějším. Pokud chcete vytvořit hostované Blazor WebAssembly aplikace pomocí sady SDK .NET 8.0 nebo novější, předejte -f|--framework možnost s cílovou architekturou 7.0 (net7.0):

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

Vytvořte nový projekt:

• Pomocí příkazu přejděte do adresáře cd , do kterého chcete vytvořit složku projektu (například cd c:/users/Bernie_Kopell/Documents).

• Blazor WebAssembly Pro prostředí spusťte následující příkaz:

  dotnet new blazorwasm -o BlazorApp
  

• Pro hostované Blazor WebAssembly prostředí přidejte do příkazu možnost hostované (-ho nebo --hosted):

  dotnet new blazorwasm -o BlazorApp -ho
  

  Poznámka:

  Šablona hostovaného Blazor WebAssembly projektu není dostupná v ASP.NET Core 8.0 nebo novějším. Pokud chcete vytvořit hostované Blazor WebAssembly aplikace pomocí sady .NET 8.0 nebo novější sady SDK, předejte -f|--framework možnost s monikerem cílové architektury (například net6.0):

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

• Blazor Server Pro prostředí spusťte následující příkaz:

  dotnet new blazorserver -o BlazorApp