Share via

Nástroje pro ASP.NET Core Blazor

  • Článek

Poznámka:

Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Důležité

Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.

Aktuální verzi najdete ve verzi .NET 8 tohoto článku.

Tento článek popisuje nástroje pro vytváření Blazor aplikací na různých platformách. V horní části tohoto článku vyberte svou platformu.

Pokud chcete vytvořit aplikaci ve Blazor Windows, použijte následující doprovodné materiály:

  • 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 Webová aplikace: Vytvoří webovou Blazor aplikaci, která podporuje interaktivní vykreslování na straně serveru (interaktivní SSR) a vykreslování na straně klienta (CSR). Šablona Blazor webové aplikace 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ší.
  • Zadejte název projektu a ověřte správnost umístění.

Poznámka:

Výrazy a koncepty vykreslování používané v následujících doprovodných materiálech jsou uvedeny v následujících částech článku s přehledem základy:

Podrobné pokyny k režimům vykreslování poskytuje článek o režimech vykreslování ASP.NET CoreBlazor.

  • Pro webovou Blazor aplikaci v dialogovém okně Další informace :

    • Rozevírací seznam interaktivního režimu vykreslování

      • Interaktivní vykreslování na straně serveru (interaktivní SSR) je ve výchozím nastavení povolené pomocí možnosti Server .
      • Pokud chcete povolit interaktivitu pouze s vykreslováním na straně klienta (CSR), vyberte možnost WebAssembly .
      • Pokud chcete povolit interaktivní režimy vykreslování i možnost mezi nimi automaticky přepínat za běhu, vyberte možnost automatického režimu vykreslování (Server a WebAssembly).
      • Pokud je interaktivita nastavená na None, vygenerovaná aplikace nemá žádnou interaktivitu. Aplikace je nakonfigurovaná jenom pro statické vykreslování na straně serveru.

      Režim interaktivního automatického vykreslování zpočátku používá interaktivní SSR, zatímco sada aplikací .NET a modul runtime se stáhnutí do prohlížeče. Po aktivaci modulu runtime .NET WebAssembly se režim vykreslování přepne na interaktivní vykreslování WebAssembly.

      Ve výchozím nastavení Blazor šablona webové aplikace umožňuje statickou i interaktivní službu SSR pomocí jednoho projektu. Pokud také povolíte CSR, projekt obsahuje další klientský projekt (.Client) pro komponenty založené na WebAssembly. Vytvořený výstup z klientského projektu se stáhne do prohlížeče a spustí se na klientovi. Všechny komponenty používající režimy webAssembly nebo automatického vykreslení musí být sestaveny z klientského projektu.

      Další informace najdete v tématu ASP.NET režimy vykreslování coreBlazor.

    • Rozevírací seznam umístění interaktivity

      • Na stránku nebo komponentu: Výchozí nastavení interaktivity pro jednotlivé stránky nebo jednotlivé součásti.
      • Globální: Výběrem této možnosti nastavíte interaktivitu globálně pro celou aplikaci.

      Umístění interaktivity se dá nastavit jenom v případě, že není režim None interaktivního vykreslování povolený a ověřování není povolené.

    • Pokud chcete zahrnout ukázkové stránky a rozložení založené na stylu Bootstrap, zaškrtněte políčko Zahrnout ukázkové stránky . Tuto možnost pro projekt zakažte bez ukázkových stránek a stylů Bootstrap.

    Další informace najdete v tématu ASP.NET režimy vykreslování coreBlazor.

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

  • Vyberte Vytvořit.

  • Stisknutím kláves Ctrl+F5 (Windows) nebo ⌘+F5 (macOS) spusťte aplikaci.

Při spuštění hostovaného Blazor WebAssemblyřešení v sadě Visual Studio je Server projektem po spuštění řešení.

Další informace o důvěryhodnosti vývojového certifikátu ASP.NET Core HTTPS najdete v tématu Vynucení HTTPS v ASP.NET Core.

Důležité

Při spouštění hostované Blazor WebAssembly aplikace spusťte aplikaci z projektu řešení Server .

Při spuštění aplikace se použije jenom Properties/launchSettings.json soubor v Server projektu.

Pokud chcete vytvořit aplikaci v Linuxu Blazor nebo macOS, postupujte podle následujících pokynů:

Pomocí rozhraní příkazového řádku .NET (CLI) spusťte příkazy v příkazovém prostředí.

Nainstalujte nejnovější verzi sady .NET Core SDK. Pokud jste dříve nainstalovali sadu SDK, můžete zjistit nainstalovanou verzi spuštěním následujícího příkazu:

dotnet --version

Nainstalujte nejnovější verzi editoru Visual Studio Code pro vaši platformu.

Nainstalujte sadu C# Dev Kit pro Visual Studio Code. Další informace najdete v tématu Ladění aplikací ASP.NET CoreBlazor.

Vytvořte nový projekt:

  • Blazor Pro prostředí webové aplikace s výchozím interaktivním vykreslováním na straně serveru spusťte v příkazovém prostředí následující příkaz, který používá blazor šablonu projektu:

    dotnet new blazor -o BlazorApp

    Pokud chcete povolit pouze vykreslování na straně klienta, použijte možnost nastavenou -int|--interactivity na WebAssembly:

    dotnet new blazor -o BlazorApp -int WebAssembly

    Pokud chcete povolit interaktivní vykreslování na straně serveru následované vykreslováním na straně klienta, použijte možnost nastavenou -int|--interactivity na Auto:

    dotnet new blazor -o BlazorApp -int Auto

    Pokud je interaktivita zakázána nastavením -int|--interactivity možnosti None, vygenerovaná aplikace nemá žádnou interaktivitu. Aplikace je nakonfigurovaná pouze pro statické vykreslování na straně serveru:

    dotnet new blazor -o BlazorApp -int None

    Režim interaktivního automatického vykreslování zpočátku používá interaktivní vykreslování na straně serveru (interaktivní SSR) během stahování sady aplikací .NET a modulu runtime do prohlížeče. Po aktivaci modulu runtime .NET WebAssembly se režim vykreslování přepne do režimu vykreslování Interactive WebAssembly.

    Ve výchozím nastavení Blazor šablona webové aplikace umožňuje statické i interaktivní vykreslování na straně serveru pomocí jednoho projektu. Pokud také povolíte režim vykreslování Interactive WebAssembly, projekt obsahuje další klientský projekt (.Client) pro komponenty založené na WebAssembly. Vytvořený výstup z klientského projektu se stáhne do prohlížeče a spustí se na klientovi. Všechny komponenty používající režimy Interaktivní webAssembly nebo Interaktivní automatické vykreslování musí být sestaveny z klientského projektu.

    Další informace najdete v tématu ASP.NET režimy vykreslování coreBlazor.

    Aplikace ve výchozím nastavení nastaví umístění interaktivity na jednotlivých součástech nebo stránkách. Pokud chcete navázat interaktivitu v celé aplikaci, použijte tuto -ai|--all-interactive možnost:

    dotnet new blazor -o BlazorApp -ai

    Výběrem této možnosti nastavíte interaktivitu pro celou aplikaci v komponentě App zadáním režimu vykreslování pro nejvyšší úroveň HeadOutlet a Routes komponenty. Nastavení interaktivity na těchto komponentách rozšíří interaktivitu do všech podřízených komponent v aplikaci.

    Umístění interaktivity se dá nastavit jenom v případě, že interaktivní režim vykreslování (-int|--interactivity) není None povolený a ověřování není povolené.

    Pokud chcete vytvořit aplikaci bez ukázkových stránek a stylů, použijte tuto -e|--empty možnost:

    dotnet new blazor -o BlazorApp -e

  • 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

    Pokud chcete vytvořit samostatnou Blazor WebAssembly aplikaci bez ukázkových stránek a stylů, použijte tuto -e|--empty možnost:

    dotnet new blazorwasm -o BlazorApp -e

Vytvořte nový projekt:

  • 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

  • Případně vytvořte aplikaci bez ukázkového Blazor Server kódu a bootstrap pomocí blazorserver-empty šablony projektu:

    dotnet new blazorserver-empty -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

  • Alternativně vytvořte samostatnou Blazor WebAssembly aplikaci bez ukázkového kódu a bootstrap pomocí blazorwasm-empty šablony projektu:

    dotnet new blazorwasm-empty -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

  • Případně vytvořte hostované Blazor WebAssembly aplikace bez ukázkového kódu a bootstrap pomocí blazorwasm-empty šablony s hostovanými možnostmi:

    dotnet new blazorwasm-empty -o BlazorApp -ho

Vytvořte nový projekt:

  • 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

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

    dotnet new blazorserver -o BlazorApp

Otevřete složku v editoru BlazorApp Visual Studio Code.

Když Visual Studio Code požádá o přidání prostředků pro sestavení a ladění projektu, vyberte Ano.

Pokud Visual Studio Code nenabízí automatické přidání prostředků sestavení a ladění (.vscodesložka se launch.jsontasks.json soubory), vyberte Zobrazit>paletu příkazů a do vyhledávacího pole zadejte ".NET". V seznamu příkazů vyberte příkaz ".NET: Generate Assets for Build and Debug".

Poznámka:

Další informace o konfiguraci a použití editoru Visual Studio Code najdete v dokumentaci k editoru Visual Studio Code.

Soubor projektu Properties/launchSettings.json obsahuje inspectUri vlastnost pro ladění proxy pro všechny profily v profiles části souboru:

"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",

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.

Důležité

Při spouštění hostované Blazor WebAssembly aplikace spusťte aplikaci z projektu řešení Server .

Při spuštění aplikace se použije jenom Properties/launchSettings.json soubor v 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 BlazorHostedServer 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"
    }
  ]
}

Stisknutím kláves Ctrl+F5 (Windows) nebo ⌘+F5 (macOS) spusťte aplikaci.

Poznámka:

V tuto chvíli se podporuje pouze ladění prohlížeče.

Během ladění nemůžete automaticky znovu sestavit back-endovou Server aplikaci hostovaného Blazor WebAssembly řešení, například spuštěním aplikace s dotnet watch run.

.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",
    ...
],
...

Stisknutím kláves Ctrl+F5 (Windows) nebo ⌘+F5 (macOS) spusťte aplikaci.

Důvěřovat vývojovému certifikátu

Další informace najdete v tématu Vynucení HTTPS v ASP.NET Core.

Soubor řešení sady Visual Studio (.sln)

Řešení je kontejner pro uspořádání jednoho nebo více souvisejících projektů kódu. Visual Studio k ukládání nastavení pro řešení používá soubor řešení (.sln). Soubory řešení používají jedinečný formát a nemají být přímo upravovány.

Nástroje mimo Visual Studio můžou pracovat se soubory řešení:

  • Rozhraní příkazového řádku .NET cli může vytvářet soubory řešení a vypisovat nebo upravovat projekty v souborech řešení pomocí dotnet sln příkazu. Další příkazy rozhraní příkazového řádku .NET používají cestu k souboru řešení pro různé příkazy publikování, testování a balení.
  • Visual Studio Code může příkaz a další příkazy rozhraní příkazového řádku .NET spustit dotnet sln prostřednictvím integrovaného terminálu, ale nepoužívá nastavení přímo v souboru řešení.

V rámci Blazor dokumentace se řešení používá k popisu aplikací vytvořených ze Blazor WebAssembly šablony projektu s povolenou možností hostované ASP.NET Core nebo ze Blazor Hybridšablony projektu. Aplikace vytvořené z těchto šablon projektů ve výchozím nastavení obsahují soubor řešení (.sln). U hostovaných Blazor WebAssembly aplikací, ve kterých vývojář nepoužívá Visual Studio, je možné soubor řešení ignorovat nebo odstranit, pokud se nepoužívá s příkazy rozhraní příkazového řádku .NET.

Další informace najdete v následující části dokumentace k sadě Visual Studio:

Použití editoru Visual Studio Code pro vývoj pro různé platformy Blazor

Visual Studio Code je opensourcové integrované vývojové prostředí (IDE) pro různé platformy, které lze použít k vývoji Blazor aplikací. Pomocí .NET CLI vytvořte novou Blazor aplikaci pro vývoj pomocí editoru Visual Studio Code. Další informace najdete ve verzi tohoto článku pro Linux nebo macOS.

Další informace o konfiguraci a použití editoru Visual Studio Code najdete v dokumentaci k editoru Visual Studio Code.

Blazor možnosti šablony

Architektura Blazor poskytuje šablony pro vytváření nových aplikací. Šablony se používají k vytváření nových Blazor projektů a řešení bez ohledu na nástroje, které vyberete pro Blazor vývoj (Visual Studio, Visual Studio Code nebo rozhraní příkazového řádku .NET (CLI)):

  • Blazor Šablona projektu webové aplikace: blazor
  • Blazor WebAssembly Šablona samostatného projektu aplikace: blazorwasm
  • Blazor Server šablony projektů: blazorserver, blazorserver-empty
  • Blazor WebAssembly šablony projektů: blazorwasm, blazorwasm-empty
  • Blazor Server šablona projektu: blazorserver
  • Blazor WebAssembly šablona projektu: blazorwasm

Další informace o Blazor šablonách projektů najdete v tématu ASP.NET Blazor Základní struktura projektu.

Další informace o možnostech šablon najdete v následujících zdrojích informací:

  • Výchozí šablony .NET pro nový článek dotnet v dokumentaci k .NET Core:
  • Předání možnosti nápovědy (-h nebo --help) do příkazu rozhraní příkazového dotnet new řádku v příkazovém prostředí:
    • dotnet new blazor -h
    • dotnet new blazorwasm -h
  • Výchozí šablony .NET pro nový článek dotnet v dokumentaci k .NET Core:
  • Předání možnosti nápovědy (-h nebo --help) do příkazu rozhraní příkazového dotnet new řádku v příkazovém prostředí:
    • dotnet new blazorserver -h
    • dotnet new blazorserver-empty -h
    • dotnet new blazorwasm -h
    • dotnet new blazorwasm-empty -h
  • Výchozí šablony .NET pro nový článek dotnet v dokumentaci k .NET Core:
  • Předání možnosti nápovědy (-h nebo --help) do příkazu rozhraní příkazového dotnet new řádku v příkazovém prostředí:
    • dotnet new blazorserver -h
    • dotnet new blazorwasm -h

Další materiály