struktura projektu ASP.NET Core Blazor

Tento článek popisuje soubory a složky, které tvoří Blazor aplikaci vygenerovanou ze Blazor šablony projektu.

Blazor Web App

Blazor Web App šablona projektu: blazor

Šablona Blazor Web App projektu poskytuje jediný výchozí bod pro použití Razor komponent (.razor) k sestavení libovolného stylu webového uživatelského rozhraní, vykresleného na straně serveru i vykreslení na straně klienta. Kombinuje silné stránky Blazor Server vykreslování Blazor WebAssembly na straně serveru a vykreslování na straně klienta, vykreslování streamování, vylepšenou navigaci a zpracování formulářů a schopnost přidávat interaktivitu pomocí jednotlivých Blazor Server komponent.Blazor WebAssembly

Pokud při vytváření aplikace vyberete vykreslování na straně klienta (CSR) i interaktivní vykreslování na straně serveru (interaktivní SSR), šablona projektu použije režim interaktivního automatického vykreslování. Režim automatického vykreslování zpočátku používá interaktivní SSR, zatímco se sada aplikací .NET a modul runtime stáhnou do prohlížeče. Po aktivaci modulu runtime .NET WebAssembly se vykreslování přepne na CSR.

Šablona Blazor Web App umožňuje statické i interaktivní vykreslování na straně serveru pomocí jednoho projektu. Pokud povolíte také interaktivní vykreslování 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. Součásti používající režimy interaktivního webAssembly nebo interaktivního automatického .Client vykreslování musí být umístěny v projektu.

Struktura složek součástí projektu se liší od .Clientstruktury složek hlavního Blazor Web App projektu, protože hlavní projekt je standardní projekt ASP.NET Core. Hlavní projekt musí vzít v úvahu další prostředky pro ASP.NET základní projekty, které nesouvisejí s Blazor. Vítá vás použití jakékoli struktury složek součástí, kterou chcete v .Client projektu použít. Pokud chcete, můžete zrcadlit rozložení složky součástí hlavního .Client projektu v projektu. Upozorňujeme, že obory názvů můžou vyžadovat úpravy takových prostředků, jako jsou soubory rozložení, pokud přesunete komponenty do různých složek, než používá šablona projektu.

Další informace o součástech a režimech vykreslování najdete v článcích o ASP.NET základních Razor komponentách a Blazor vykreslování ASP.NET Core.

Na základě interaktivního režimu vykreslování vybraného při vytváření Layout aplikace se složka nachází v projektu serveru ve Components složce nebo v kořenovém adresáři .Client projektu. Složka obsahuje následující součásti rozložení a šablony stylů:

• Komponenta MainLayout (MainLayout.razor) je komponenta rozložení aplikace.
• Jedná se o stylopis umístěný vedle komponenty pro hlavní rozložení aplikace.
• Komponenta NavMenu (NavMenu.razor) implementuje navigaci na bočním panelu. Komponenta obsahuje NavLink komponenty (NavLink), které vykreslují navigační odkazy na jiné Razor součásti. Komponenta NavLink označuje uživatele, který komponenta je aktuálně zobrazena.
• NavMenu.razor.css je umístěná šablona stylů pro navigační nabídku aplikace.
• Komponenta ReconnectModal odráží stav připojení na straně serveru v uživatelském rozhraní a je zahrnuta, pokud je interaktivní režim vykreslování aplikace nastaven na Interaktivní server nebo Interaktivní automaticky. Další informace najdete v pokynech k ASP.NET Core BlazorSignalR.
• Jedná se o přidruženou šablonu stylů pro komponentu ReconnectModal.razor.css.
• Toto je ReconnectModal.razor.js umístěný JavaScriptový soubor pro komponentu ReconnectModal.

Komponenta Routes (Routes.razor) je buď v serverovém projektu, nebo .Client v projektu a nastavuje směrování pomocí Router komponenty. U interaktivních komponent Router na straně klienta zachytí komponenta navigaci v prohlížeči a vykreslí stránku, která odpovídá požadované adrese.

Složka Components projektu serveru obsahuje součásti na straně Razor serveru aplikace. Sdílené komponenty jsou často umístěny v kořenové složce Components složky, zatímco rozložení a součásti stránky jsou obvykle umístěny do složek v rámci Components složky.

Složka Components/Pages projektu serveru obsahuje směrovatelné součásti na straně Razor serveru aplikace. Trasa pro každou stránku je určena pomocí direktivy @page .

Komponenta App (App.razor) je kořenová komponenta aplikace s kódem HTML <head> , komponentou Routes a značkou Blazor<script> . Kořenová komponenta je první komponenta, kterou aplikace načte.

Soubor _Imports.razor v každém ze serverů a .Client projektů obsahuje společné Razor direktivy pro Razor součásti každého projektu, například @using direktivy pro obory názvů.

Složka Properties projektu serveru obsahuje v souboru konfiguraci vývojového launchSettings.json prostředí.

Poznámka:

Profil http předchází https profilu v launchSettings.json souboru. Když se aplikace spustí pomocí rozhraní .NET CLI, aplikace se spustí na koncovém bodu HTTP, protože první nalezený profil je http. Pořadí profilů usnadňuje přechod https pro uživatele s Linuxem a macOS. Pokud dáváte přednost spuštění aplikace pomocí rozhraní příkazového řádku .NET, aniž byste museli předat -lp https příkaz (nebo) příkazu --launch-profile httpsdotnet watch (nebodotnet run), jednoduše umístěte https profil nad http profil do souboru.

Složka wwwroot projektu serveru je webová kořenová složka pro serverový projekt, která obsahuje veřejné statické prostředky aplikace.

Soubor Program.cs projektu serveru je vstupní bod projektu, který nastaví hostitele webové aplikace ASP.NET Core a obsahuje logiku spuštění aplikace, včetně registrací služeb, konfigurace, protokolování a kanálu zpracování požadavků:

• Služby pro Razor komponenty se přidávají voláním AddRazorComponents. AddInteractiveServerComponents přidává služby pro podporu vykreslování komponent Interactive Serveru. AddInteractiveWebAssemblyComponents přidává služby pro podporu vykreslování interaktivních komponent WebAssembly.
• MapRazorComponents zjistí dostupné komponenty a určuje kořenovou komponentu aplikace, což je ve výchozím nastavení první načtená komponenta App (App.razor). AddInteractiveServerRenderMode nakonfiguruje interaktivní vykreslování na straně serveru (interaktivní SSR) pro aplikaci. AddInteractiveWebAssemblyRenderMode nakonfiguruje režim interaktivního vykreslování WebAssembly pro aplikaci.

Soubory nastavení aplikace (appsettings.Development.json, appsettings.json) v serveru nebo .Client projektu poskytují nastavení konfigurace. V projektu serveru jsou soubory nastavení v kořenovém adresáři projektu. .Client V projektu se soubory nastavení spotřebovávají z kořenové složky wwwrootwebu .

.Client V projektu:

• Složka Pages obsahuje směrovatelné komponenty na straně Razor klienta. Trasa pro každou stránku je určena pomocí direktivy @page .

• Složka wwwroot je kořenová složka webu pro .Client projekt, který obsahuje veřejné statické prostředky aplikace.

• Soubor Program.cs je vstupní bod projektu, který nastaví hostitele WebAssembly a obsahuje logiku spuštění projektu, včetně registrací služeb, konfigurace, protokolování a kanálu zpracování požadavků.

Při konfiguraci dalších možností se můžou v aplikaci vytvořené ze Blazor Web App šablony projektu objevit další soubory a složky. Například generování aplikace s ASP.NET Core Identity zahrnuje další prostředky pro funkce ověřování a autorizace.

Samostatný Blazor WebAssembly

Šablona samostatného Blazor WebAssembly projektu: blazorwasm

Šablona Blazor WebAssembly vytvoří počáteční soubory a adresářovou strukturu pro samostatnou Blazor WebAssembly aplikaci:

• blazorwasm Pokud se šablona použije, aplikace se vyplní následujícím kódem:
  • Ukázkový kód pro komponentu Weather , která načítá data ze statického prostředku (weather.json) a interakce uživatele s komponentou Counter .
  • Front-endová sada nástrojů Bootstrap
• Šablonu blazorwasm lze také vygenerovat bez ukázkových stránek a stylů.

Struktura projektu:

• Layout složka: Obsahuje následující součásti rozložení a šablony stylů:
  • MainLayoutcomponent (MainLayout.razor): Komponenta rozložení aplikace.
  • MainLayout.razor.css: Šablona stylů pro hlavní rozložení aplikace.
  • NavMenu component (NavMenu.razor): Implementuje navigaci na bočním panelu. Obsahuje komponentuNavLink (NavLink), která vykresluje navigační odkazy na jiné Razor součásti. Komponenta NavLink automaticky označuje vybraný stav při načtení jeho komponenty, což uživateli pomáhá pochopit, která komponenta je aktuálně zobrazena.
  • NavMenu.razor.css: Šablona stylů pro navigační nabídku aplikace.

• Pages složka: Obsahuje Blazor směrovatelné Razor komponenty aplikace (.razor). Trasa pro každou stránku je určena pomocí direktivy @page . Šablona obsahuje následující komponenty:
  • Counter component (Counter.razor): Implementuje stránku Čítač.
  • Index component (Index.razor): Implementuje Home stránku.
  • Weather component (Weather.razor): Implementuje stránku Počasí.

• _Imports.razor: Zahrnuje běžné Razor direktivy pro zahrnutí do komponent aplikace (.razor), jako @using jsou direktivy pro obory názvů.

• App.razor: Kořenová komponenta aplikace, která nastavuje směrování na straně klienta pomocí Router této komponenty. Komponenta Router zachytí navigaci v prohlížeči a vykreslí stránku, která odpovídá požadované adrese.

• Properties složka: Obsahuje konfiguraci vývojového launchSettings.json prostředí v souboru.

  Poznámka:

  Profil http předchází https profilu v launchSettings.json souboru. Když se aplikace spustí pomocí rozhraní .NET CLI, aplikace se spustí na koncovém bodu HTTP, protože první nalezený profil je http. Pořadí profilů usnadňuje přechod https pro uživatele s Linuxem a macOS. Pokud dáváte přednost spuštění aplikace pomocí rozhraní příkazového řádku .NET, aniž byste museli předat -lp https příkaz (nebo) příkazu --launch-profile httpsdotnet watch (nebodotnet run), jednoduše umístěte https profil nad http profil do souboru.

• wwwroot složka: Webová kořenová složka aplikace obsahující veřejné statické prostředky aplikace, včetně appsettings.json souborů nastavení aplikace a nastavení prostředí pro nastavení konfigurace a ukázková data o počasí (sample-data/weather.json). Webová index.html stránka je kořenová stránka aplikace implementovaná jako stránka HTML:

  • Když se na začátku vyžádá jakákoli stránka aplikace, zobrazí se tato stránka a vrátí se v odpovědi.
  • Stránka určuje, kde se kořenová App komponenta vykresluje. Komponenta se vykreslí v umístění div prvku DOM pomocí znaku idapp (<div id="app">Loading...</div>).

• Program.cs: Vstupní bod aplikace, který nastaví hostitele WebAssembly:

  • Komponenta App je kořenovou komponentou aplikace. Komponenta App je určena jako div prvek DOM s hodnotou idapp (<div id="app">Loading...</div> in wwwroot/index.html) do kořenové kolekce komponent (builder.RootComponents.Add<App>("#app")).
  • Služby se přidávají a konfigurují (například builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Při konfiguraci dalších možností se můžou v aplikaci vytvořené ze Blazor WebAssembly šablony projektu objevit další soubory a složky. Například generování aplikace s ASP.NET Core Identity zahrnuje další prostředky pro funkce ověřování a autorizace.

Blazor Umístění skriptu

Skript Blazor slouží jako statický webový prostředek s automatickou kompresí a otiskem prstu. Další informace najdete v tématu ASP.NET Core Blazor statických souborů.

V souboru Blazor Web AppBlazor se skript nachází:Components/App.razor

<script src="@Assets["_framework/blazor.web.js"]"></script>

Blazor Server V aplikaci Blazor se skript nachází v Pages/_Host.cshtml souboru:

<script src="_framework/blazor.server.js"></script>

Pro aplikaci Blazor Web App nebo Blazor Server aplikaci musí projekt obsahovat alespoň jeden Razor soubor komponenty (.razor), aby při publikování aplikace automaticky zahrnoval Blazor skript. Pokud projekt neobsahuje aspoň jednu Razor komponentu, nastavte RequiresAspNetWebAssets vlastnost MSBuild do souboru projektu aplikace tak, aby true zahrnovala Blazor skript:

<RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

Blazor WebAssembly V aplikaci Blazor se obsah skriptu nachází v wwwroot/index.html souboru:

<script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>

Když je aplikace publikována, zástupný symbol {fingerprint} se automaticky nahradí jedinečnou hodnotou hash pro obnovení cache.

<head> Umístění obsahu a <body> umístění

Blazor Web App <head> V souboru a <body> obsah se nachází v Components/App.razor souboru.

Blazor WebAssembly V aplikaci <head> a <body> obsah se nachází v wwwroot/index.html souboru.

Dodatečné zdroje

• Nástroje pro ASP.NET Core Blazor
• Modely hostování ASP.NET Core Blazor
• Přehled rozhraní API
• Blazor (dotnet/blazor-samplespostup stažení)