Sdílet prostřednictvím

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í pomocí několika nástrojů:

  • Visual Studio (VS):: Nejkomplexnější integrované vývojové prostředí (IDE) pro vývojáře v .NET ve Windows. Zahrnuje řadu nástrojů a funkcí, které zvyšují a vylepšují každou fázi vývoje softwaru.
  • Visual Studio Code (VS Code) je opensourcový editor kódu pro různé platformy, který se dá použít k vývoji Blazor aplikací.
  • .NET CLI: Rozhraní příkazového řádku .NET (CLI) je sada nástrojů pro různé platformy pro vývoj, vytváření, spouštění a publikování aplikací .NET. Rozhraní .NET CLI je součástí sady .NET SDK a běží na libovolné platformě podporované sadou SDK.

Vyberte pivot tohoto článku, který odpovídá vaší volbě nástrojů.

K vytvoření Blazor aplikace v sadě Visual Studio 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ší.
  • U hostovanéBlazor WebAssembly aplikace zaškrtněte políčko ASP.NET Hostované jádro v dialogovém okně Další informace.
  • Vyberte Vytvořit.

Visual Studio Code je opensourcové integrované vývojové prostředí (IDE) pro různé platformy, které lze použít k vývoji Blazor aplikací.

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.

Pokud s VS Code začínáte, prohlédni si dokumentace k VS Code. Pokud s sadou .NET SDK začínáte, přečtěte si téma Co je sada .NET SDK? a související články v dokumentaci k sadě .NET SDK.

Vytvořte nový projekt:

  • Otevřete VS Code.

  • Přejděte do zobrazení Průzkumníka a vyberte tlačítko Vytvořit projekt .NET. Případně můžete zobrazit paletu příkazů pomocí kombinace kláves Ctrl+Shift+P a pak zadat ".NET" a najít a vybrat příkaz .NET: Nový projekt.

  • Blazor Ze seznamu vyberte šablonu projektu.

  • V dialogovém okně Umístění projektu vytvořte nebo vyberte složku projektu.

  • Na paletě příkazů zadejte název projektu nebo přijměte výchozí název.

  • Výběrem možnosti Vytvořit projekt vytvořte projekt nebo upravte možnosti projektu výběrem možnosti Zobrazit všechny možnosti šablony. Další informace o šablonách a možnostech najdete v Blazor části Šablony projektů a možnosti šablon.

  • Stisknutím klávesy F5 na klávesnici spusťte aplikaci pomocí ladicího programu nebo Ctrl+F5 a spusťte aplikaci bez ladicího programu.

    Paleta příkazů vás vyzve k výběru ladicího programu. V seznamu vyberte jazyk C# .

    Dále vyberte konfiguraci spuštění https .

  • Pokud chcete aplikaci zastavit, stiskněte klávesu Shift+F5 na klávesnici.

Pokyny editoru Visual Studio Code (VS Code) pro vývoj pro ASP.NET Core v některých částech Blazor dokumentace používají rozhraní příkazového řádku .NET, které je součástí sady .NET SDK. Příkazy rozhraní příkazového řádku .NET se vydávají v integrovaném terminálu VS Code, který ve výchozím nastavení používá příkazové prostředí PowerShellu. Terminál se otevře tak, že v nabídce Terminál v řádku nabídek vyberete Nový terminál.

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

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

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

Sada .NET SDK je sada knihoven a nástrojů, které vývojáři používají k vytváření aplikací a knihoven .NET.

Nainstalujte sadu .NET SDK. Příkazy se vydávají v příkazovém prostředí pomocí rozhraní příkazového řádku .NET CLI.

Pokud jste dříve nainstalovali jednu nebo více sad .NET SDK a chcete zobrazit aktivní verzi, spusťte v příkazovém prostředí následující příkaz:

dotnet --version

Pokud s sadou .NET SDK začínáte, přečtěte si téma Co je sada .NET SDK? a související články v dokumentaci k sadě .NET SDK.

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 V případě prostředí webové aplikace 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

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

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

    dotnet new blazorserver -o BlazorApp

Další informace o šablonách a možnostech najdete v Blazor části Šablony projektů a možnosti šablon.

Spustit aplikaci

Důležité

Při spouštění Blazor webové aplikace spusťte aplikaci ze serverového projektu řešení, což je projekt s názvem, který nekončí .Client.

Důležité

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

Stisknutím kláves Ctrl+F5 na klávesnici spusťte aplikaci bez ladicího programu.

Visual Studio zobrazí následující dialogové okno, pokud projekt není nakonfigurovaný tak, aby používal PROTOKOL SSL:

Dialogové okno Důvěřovat certifikátu podepsanému svým držitelem

Pokud důvěřujete certifikátu ASP.NET Core SSL, vyberte Ano.

Zobrazí se následující dialogové okno:

Dialogové okno upozornění zabezpečení

Výběrem možnosti Ano potvrďte riziko a nainstalujte certifikát.

Informace o důvěryhodnosti vývojového certifikátu HTTPS pro prohlížeč Firefox naleznete v tématu Vynucení HTTPS v ASP.NET Core.

Visual Studio:

  • Zkompiluje a spustí aplikaci.
  • Spustí výchozí prohlížeč, ve https://localhost:{PORT}kterém se zobrazí uživatelské rozhraní aplikace. Zástupný {PORT} symbol je náhodný port přiřazený při vytváření aplikace. Pokud potřebujete port změnit kvůli konfliktu místního portu, změňte port v souboru projektu Properties/launchSettings.json .

Informace o důvěryhodnosti vývojového certifikátu HTTPS pro jiné prohlížeče než Firefox najdete v doprovodných materiálech k důvěryhodnosti vývojových certifikátů HTTPS. Pokud používáte prohlížeč Firefox, přečtěte si pokyny k důvěryhodnosti certifikátů pro Firefox.

Ve VS Code stiskněte Ctrl+F5 (Windows) nebo ⌘+F5 (macOS) a spusťte aplikaci bez ladění.

Na příkazovém řádku Vybrat ladicí program v paletě příkazů v horní části uživatelského rozhraní VS Code vyberte C#. V další výzvě vyberte profil HTTPS ([https]).

Ve výchozím prohlížeči se spustí https://localhost:{PORT}, ve kterém se zobrazí uživatelské rozhraní aplikace. Zástupný {PORT} symbol je náhodný port přiřazený při vytváření aplikace. Pokud potřebujete port změnit kvůli konfliktu místního portu, změňte port v souboru projektu Properties/launchSettings.json .

Informace o důvěryhodnosti vývojového certifikátu HTTPS pro jiné prohlížeče než Firefox najdete v doprovodných materiálech k důvěryhodnosti vývojových certifikátů HTTPS. Pokud používáte prohlížeč Firefox, přečtěte si pokyny k důvěryhodnosti certifikátů pro firefox oddíl tohoto článku.

V příkazovém prostředí otevřeném v kořenové složce projektu spusťte dotnet watch příkaz, který zkompiluje a spustí aplikaci:

dotnet watch

Ve výchozím prohlížeči se spustí https://localhost:{PORT}, ve kterém se zobrazí uživatelské rozhraní aplikace. Zástupný {PORT} symbol je náhodný port přiřazený při vytváření aplikace. Pokud potřebujete port změnit kvůli konfliktu místního portu, změňte port v souboru projektu Properties/launchSettings.json .

Když se aplikace vytvořená ze Blazor šablony projektu webové aplikace spustí pomocí rozhraní příkazového řádku .NET, aplikace se spustí na koncovém bodu HTTP (nezabezpečené), protože první profil nalezený v souboru nastavení spuštění aplikace (Properties/launchSettings.json) je profil HTTP (nezabezpečený), který má název http. Profil HTTP byl umístěn na první pozici, aby se usnadnil přechod přechodu zabezpečení SSL/HTTPS pro uživatele, kteří nejsou windows.

Jedním z přístupů ke spuštění aplikace s protokolem SSL/HTTPS je předání |--launch-profile-lpmožnosti s https názvem profilu do dotnet watch příkazu:

dotnet watch -lp https

Alternativním přístupem je přesunout https profil nad http profil v Properties/launchSettings.json souboru a uložit změnu. Po změně pořadí profilu v souboru dotnet watch příkaz ve výchozím nastavení vždy použije https profil.

Zastavení aplikace

Zastavte aplikaci některým z následujících přístupů:

  • Zavřete okno prohlížeče.
  • V sadě Visual Studio:

    • Použijte tlačítko Zastavit v řádku nabídek sady Visual Studio:

      Tlačítko Zastavit v řádku nabídek sady Visual Studio

    • Stiskněte klávesu Shift+F5 na klávesnici.

Aplikaci zastavte následujícím způsobem:

  1. Zavřete okno prohlížeče.
  2. V editoru VS Code:
    • V nabídce Spustit vyberte Zastavit ladění.
    • Stiskněte klávesu Shift+F5 na klávesnici.

Aplikaci zastavte následujícím způsobem:

  1. Zavřete okno prohlížeče.
  2. V příkazovém prostředí stiskněte Ctrl+C (Windows) nebo ⌘+C (macOS).

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. Soubory řešení používají jedinečný formát a nemají být přímo upravovány.

Visual Studio a Visual Studio Code (VS Code) používají k ukládání nastavení řešení soubor řešení (.sln). .NET CLI neuspořádá projekty pomocí souboru řešení, ale 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í.

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 naleznete v následujících zdrojích:

Blazor šablony projektů a možnosti šablon

Architektura Blazor poskytuje šablony projektů 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
  • Šablona samostatného Blazor WebAssembly 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.

Výrazy a koncepty vykreslování používané v následujících pododdí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.

Interaktivní režim 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), použijte možnost WebAssembly .
  • Pokud chcete povolit interaktivní režimy vykreslování i možnost mezi nimi automaticky přepínat za běhu, použijte 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.

Důležité

Při použití Blazor webové aplikace vyžaduje většina ukázkových Blazor komponent dokumentace interaktivitu k fungování a předvedení konceptů popsaných v článcích. Při testování ukázkové komponenty poskytované článkem se ujistěte, že aplikace přijme globální interaktivitu nebo komponenta přijme interaktivní režim vykreslování.

Umístění interaktivity

Možnosti umístění interaktivity:

  • Na stránku nebo komponentu: Výchozí nastavení interaktivity pro jednotlivé stránky nebo jednotlivé součásti.
  • Globální: Použití této možnosti nastaví 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é.

Ukázkové stránky

Pokud chcete zahrnout ukázkové stránky a rozložení založené na stylu bootstrap, použijte možnost Zahrnout ukázkové stránky . Tuto možnost pro projekt zakažte bez ukázkových stránek a stylů Bootstrap.

Další pokyny k možnostem šablony

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

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 blazorserver -h
    • dotnet new blazorwasm -h

Další materiály