Nástroje pro ASP.NET Core Blazor
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:
- Koncepty vykreslování klientů a serverů
- Koncepty statického a interaktivního vykreslování
- Režimy vykreslování
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.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í.
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
naWebAssembly
: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
naAuto
:dotnet new blazor -o BlazorApp -int Auto
Pokud je interaktivita zakázána nastavením
-int|--interactivity
možnostiNone
, 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
aRoutes
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í (.vscode
složka se launch.json
tasks.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 zeProperties/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 aplikaceProperties/launchSettings.json
veapplicationUrl
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.json
pole 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"
}
]
}
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.Server
projektu:
...
"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éhodotnet 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:
blazorserver
(včetněblazorserver-empty
možností)blazorwasm
(včetněblazorwasm-empty
možností)
- Předání možnosti nápovědy (
-h
nebo--help
) do příkazu rozhraní příkazovéhodotnet 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éhodotnet new
řádku v příkazovém prostředí:dotnet new blazorserver -h
dotnet new blazorwasm -h
Další materiály
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu:Odeslat a zobrazit názory pro