Sdílet prostřednictvím

struktura projektu ASP.NET Core Blazor

  • Článek

Poznámka:

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

Upozorňující

Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v zásadách podpory .NET a .NET Core. Aktuální verzi najdete v tomto článku ve verzi .NET 9.

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 v tomto článku ve verzi .NET 9.

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 stávajících Blazor Server a Blazor WebAssembly hostitelských modelů s vykreslováním na straně serveru, vykreslováním streamování, vylepšenou navigaci a zpracováním formulářů a možností 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 Blazor Web Appstruktury složek hlavního .Client 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 režimech vykreslování ASP.NET CoreBlazor.

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 MainLayout.razor.css o šablonu stylů 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.
  • Jedná se NavMenu.razor.css o šablonu stylů pro navigační nabídku aplikace.

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 dotnet watch --launch-profile https (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ů:

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.

Blazor Server

Blazor Server šablony projektů: blazorserver, blazorserver-empty

Šablony Blazor Server vytvoří počáteční soubory a adresářovou strukturu pro Blazor Server aplikaci:

  • blazorserver Pokud se šablona použije, aplikace se vyplní následujícím kódem:
    • Ukázkový kód pro komponentu FetchData , která načítá data ze služby předpovědi počasí (WeatherForecastService) a interakce uživatele s komponentou Counter .
    • Front-endová sada nástrojů Bootstrap
  • blazorserver-empty Pokud se šablona použije, aplikace se vytvoří bez ukázkového kódu a bootstrapu.

Struktura projektu:

  • Data folder: Obsahuje WeatherForecast třídu a implementaci WeatherForecastService , která poskytuje ukázková data o počasí pro komponentu aplikace FetchData .

  • Pages složka: Obsahuje Blazor směrovatelné Razor komponenty aplikace (.razor) a kořenovou Razor stránku Blazor Server aplikace. Trasa pro každou stránku je určena pomocí direktivy @page . Šablona obsahuje následující:

    • _Host.cshtml: Kořenová stránka aplikace implementovaná jako Razor stránka:
      • 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 Hostitel určuje, kde se vykresluje kořenová App komponenta (App.razor).
    • Counter component (Counter.razor): Implementuje stránku Čítač.
    • Error component (Error.razor): Vykresleno, když v aplikaci dojde k neošetřené výjimce.
    • FetchData component (FetchData.razor): Implementuje datovou stránku Fetch.
    • Index component (Index.razor): Implementuje Home stránku.

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

  • Shared složka: Obsahuje následující sdílené komponenty 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 komponentu NavLink (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.
    • SurveyPrompt komponenta (SurveyPrompt.razor): Blazor součást průzkumu.

  • wwwroot složka: Webová kořenová složka aplikace obsahující veřejné statické prostředky aplikace.

  • _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.

  • appsettings.json a soubory nastavení aplikace v prostředí: Zadejte nastavení konfigurace pro aplikaci.

  • Program.cs: Vstupní bod aplikace, který nastaví hostitele ASP.NET Core a obsahuje logiku spuštění aplikace, včetně registrace služeb a konfigurace kanálu zpracování požadavků:

    • Určuje služby injektáže závislostí aplikace (DI ). Služby jsou přidány voláním AddServerSideBlazora je přidán do WeatherForecastService kontejneru služby pro použití ukázkovou FetchData komponentou.
    • Konfiguruje kanál zpracování požadavků aplikace:
      • MapBlazorHub je volána k nastavení koncového bodu pro připojení v reálném čase k prohlížeči. Připojení se vytvoří pomocí SignalRrozhraní pro přidání webových funkcí v reálném čase do aplikací.
      • MapFallbackToPage("/_Host") je volána k nastavení kořenové stránky aplikace (Pages/_Host.cshtml) a povolení navigace.

Při konfiguraci dalších možností se můžou v aplikaci vytvořené ze Blazor Server š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 Server šablona projektu: blazorserver

Šablona Blazor Server vytvoří počáteční soubory a adresářovou strukturu pro Blazor Server aplikaci. Aplikace se naplní ukázkovým kódem pro komponentu FetchData , která načítá data z registrované služby WeatherForecastService, a interakci uživatele s komponentou Counter .

  • Data folder: Obsahuje WeatherForecast třídu a implementaci WeatherForecastService , která poskytuje ukázková data o počasí pro komponentu aplikace FetchData .

  • Pages složka: Obsahuje Blazor směrovatelné Razor komponenty aplikace (.razor) a kořenovou Razor stránku Blazor Server aplikace. Trasa pro každou stránku je určena pomocí direktivy @page . Šablona obsahuje následující:

    • _Host.cshtml: Kořenová stránka aplikace implementovaná jako Razor stránka:
      • 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 Hostitel určuje, kde se vykresluje kořenová App komponenta (App.razor).
    • _Layout.cshtml: Stránka _Host.cshtml rozložení kořenové stránky aplikace.
    • Counter component (Counter.razor): Implementuje stránku Čítač.
    • Error component (Error.razor): Vykresleno, když v aplikaci dojde k neošetřené výjimce.
    • FetchData component (FetchData.razor): Implementuje datovou stránku Fetch.
    • Index component (Index.razor): Implementuje Home stránku.

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

  • Shared složka: Obsahuje následující sdílené komponenty 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 komponentu NavLink (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.
    • SurveyPrompt komponenta (SurveyPrompt.razor): Blazor součást průzkumu.

  • wwwroot složka: Webová kořenová složka aplikace obsahující veřejné statické prostředky aplikace.

  • _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.

  • appsettings.json a soubory nastavení aplikace v prostředí: Zadejte nastavení konfigurace pro aplikaci.

  • Program.cs: Vstupní bod aplikace, který nastaví hostitele ASP.NET Core a obsahuje logiku spuštění aplikace, včetně registrace služeb a konfigurace kanálu zpracování požadavků:

    • Určuje služby injektáže závislostí aplikace (DI ). Služby jsou přidány voláním AddServerSideBlazora je přidán do WeatherForecastService kontejneru služby pro použití ukázkovou FetchData komponentou.
    • Konfiguruje kanál zpracování požadavků aplikace:
      • MapBlazorHub je volána k nastavení koncového bodu pro připojení v reálném čase k prohlížeči. Připojení se vytvoří pomocí SignalRrozhraní pro přidání webových funkcí v reálném čase do aplikací.
      • MapFallbackToPage("/_Host") je volána k nastavení kořenové stránky aplikace (Pages/_Host.cshtml) a povolení navigace.

Při konfiguraci dalších možností se můžou v aplikaci vytvořené ze Blazor Server š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 Server šablona projektu: blazorserver

Šablona Blazor Server vytvoří počáteční soubory a adresářovou strukturu pro Blazor Server aplikaci. Aplikace se naplní ukázkovým kódem pro komponentu FetchData , která načítá data z registrované služby WeatherForecastService, a interakci uživatele s komponentou Counter .

  • Data folder: Obsahuje WeatherForecast třídu a implementaci WeatherForecastService , která poskytuje ukázková data o počasí pro komponentu aplikace FetchData .

  • Pages složka: Obsahuje Blazor směrovatelné Razor komponenty aplikace (.razor) a kořenovou Razor stránku Blazor Server aplikace. Trasa pro každou stránku je určena pomocí direktivy @page . Šablona obsahuje následující:

    • _Host.cshtml: Kořenová stránka aplikace implementovaná jako Razor stránka:
      • 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 Hostitel určuje, kde se vykresluje kořenová App komponenta (App.razor).
    • Counter component (Counter.razor): Implementuje stránku Čítač.
    • Error component (Error.razor): Vykresleno, když v aplikaci dojde k neošetřené výjimce.
    • FetchData component (FetchData.razor): Implementuje datovou stránku Fetch.
    • Index component (Index.razor): Implementuje Home stránku.

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

  • Shared složka: Obsahuje následující sdílené komponenty 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 komponentu NavLink (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.
    • SurveyPrompt komponenta (SurveyPrompt.razor): Blazor součást průzkumu.

  • wwwroot složka: Webová kořenová složka aplikace obsahující veřejné statické prostředky aplikace.

  • _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.

  • appsettings.json a soubory nastavení aplikace v prostředí: Zadejte nastavení konfigurace pro aplikaci.

  • Program.cs: Vstupní bod aplikace, který nastaví hostitele ASP.NET Core.

  • Startup.cs: Obsahuje logiku spuštění aplikace. Třída Startup definuje dvě metody:

    • ConfigureServices: Konfiguruje služby injektáže závislostí (DI) aplikace. Služby jsou přidány voláním AddServerSideBlazora je přidán do WeatherForecastService kontejneru služby pro použití ukázkovou FetchData komponentou.
    • Configure: Nakonfiguruje kanál zpracování požadavků aplikace:
      • MapBlazorHub je volána k nastavení koncového bodu pro připojení v reálném čase k prohlížeči. Připojení se vytvoří pomocí SignalRrozhraní pro přidání webových funkcí v reálném čase do aplikací.
      • MapFallbackToPage("/_Host") je volána k nastavení kořenové stránky aplikace (Pages/_Host.cshtml) a povolení navigace.

Při konfiguraci dalších možností se můžou v aplikaci vytvořené ze Blazor Server š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 Server šablona projektu: blazorserver

Šablona Blazor Server vytvoří počáteční soubory a adresářovou strukturu pro Blazor Server aplikaci. Aplikace se naplní ukázkovým kódem pro komponentu FetchData , která načítá data z registrované služby WeatherForecastService, a interakci uživatele s komponentou Counter .

  • Data folder: Obsahuje WeatherForecast třídu a implementaci WeatherForecastService , která poskytuje ukázková data o počasí pro komponentu aplikace FetchData .

  • Pages složka: Obsahuje Blazor směrovatelné Razor komponenty aplikace (.razor) a kořenovou Razor stránku Blazor Server aplikace. Trasa pro každou stránku je určena pomocí direktivy @page . Šablona obsahuje následující:

    • _Host.cshtml: Kořenová stránka aplikace implementovaná jako Razor stránka:
      • 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 Hostitel určuje, kde se vykresluje kořenová App komponenta (App.razor).
    • Counter component (Counter.razor): Implementuje stránku Čítač.
    • Error component (Error.razor): Vykresleno, když v aplikaci dojde k neošetřené výjimce.
    • FetchData component (FetchData.razor): Implementuje datovou stránku Fetch.
    • Index component (Index.razor): Implementuje Home stránku.

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

  • Shared složka: Obsahuje následující sdílené komponenty:

    • MainLayoutcomponent (MainLayout.razor): Komponenta rozložení aplikace.
    • NavMenu component (NavMenu.razor): Implementuje navigaci na bočním panelu. Obsahuje komponentu NavLink (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.
    • SurveyPrompt komponenta (SurveyPrompt.razor): Blazor součást průzkumu.

  • wwwroot složka: Webová kořenová složka aplikace obsahující veřejné statické prostředky aplikace.

  • _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.

  • appsettings.json a soubory nastavení aplikace v prostředí: Zadejte nastavení konfigurace pro aplikaci.

  • Program.cs: Vstupní bod aplikace, který nastaví hostitele ASP.NET Core.

  • Startup.cs: Obsahuje logiku spuštění aplikace. Třída Startup definuje dvě metody:

    • ConfigureServices: Konfiguruje služby injektáže závislostí (DI) aplikace. Služby jsou přidány voláním AddServerSideBlazora je přidán do WeatherForecastService kontejneru služby pro použití ukázkovou FetchData komponentou.
    • Configure: Nakonfiguruje kanál zpracování požadavků aplikace:
      • MapBlazorHub je volána k nastavení koncového bodu pro připojení v reálném čase k prohlížeči. Připojení se vytvoří pomocí SignalRrozhraní pro přidání webových funkcí v reálném čase do aplikací.
      • MapFallbackToPage("/_Host") je volána k nastavení kořenové stránky aplikace (Pages/_Host.cshtml) a povolení navigace.

Při konfiguraci dalších možností se můžou v aplikaci vytvořené ze Blazor Server š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:
  • Š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 komponentu NavLink (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 dotnet watch --launch-profile https (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 id app (<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 id app (<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 WebAssembly

Blazor WebAssembly šablony projektů: blazorwasm, blazorwasm-empty

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

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

Struktura projektu:

  • 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č.
    • FetchData component (FetchData.razor): Implementuje datovou stránku Fetch.
    • Index component (Index.razor): Implementuje Home stránku.

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

  • Shared složka: Obsahuje následující sdílené komponenty 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 komponentu NavLink (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.
    • SurveyPromptcomponent () (SurveyPrompt.razorASP.NET Core v .NET 7 nebo starší): Blazor součást průzkumu.

  • wwwroot folder: Webová kořenová složka aplikace obsahující veřejné statické prostředky aplikace, včetně appsettings.json souborů nastavení aplikace prostředí pro nastavení konfigurace. 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 id app (<div id="app">Loading...</div>).

  • _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.

  • 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 id app (<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.

Hostované Blazor WebAssembly řešení zahrnuje následující projekty ASP.NET Core:

  • "Client": Aplikace Blazor WebAssembly .
  • "Server": Aplikace, která klientům obsluhuje Blazor WebAssembly data aplikace a počasí.
  • "Shared": Projekt, který udržuje běžné třídy, metody a zdroje.

Řešení se vygeneruje ze Blazor WebAssembly šablony projektu v sadě Visual Studio se zaškrtnutým zaškrtávacím polem ASP.NET Core Hostovaným nebo s -ho|--hosted možností pomocí příkazu .NET CLI dotnet new blazorwasm . Další informace naleznete v tématu Nástroje pro ASP.NET Core Blazor.

Struktura projektu aplikace na straně klienta v hostovaném Blazor řešení Webassembly (Client"projekt") je stejná jako struktura projektu pro samostatnou Blazor WebAssembly aplikaci. Další soubory v hostovaném Blazor WebAssembly řešení:

  • Projekt "Server" zahrnuje kontroler předpovědi počasí, který Controllers/WeatherForecastController.cs vrací data o počasí do komponenty projektu FetchData "Client".
  • Projekt "Shared" zahrnuje třídu předpovědi počasí, která WeatherForecast.cs představuje data o počasí pro projekty "Client" a "Server".

Blazor WebAssembly

Blazor WebAssembly šablona projektu: blazorwasm

Šablona Blazor WebAssembly vytvoří počáteční soubory a adresářovou strukturu pro Blazor WebAssembly aplikaci. Aplikace se naplní ukázkovým kódem pro komponentu FetchData , která načítá data ze statického prostředku weather.jsona interakce uživatele s komponentou Counter .

  • 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č.
    • FetchData component (FetchData.razor): Implementuje datovou stránku Fetch.
    • Index component (Index.razor): Implementuje Home stránku.

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

  • Shared složka: Obsahuje následující sdílené komponenty 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 komponentu NavLink (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.
    • SurveyPrompt komponenta (SurveyPrompt.razor): Blazor součást průzkumu.

  • wwwroot folder: Webová kořenová složka aplikace obsahující veřejné statické prostředky aplikace, včetně appsettings.json souborů nastavení aplikace prostředí pro nastavení konfigurace. 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 id app (<div id="app">Loading...</div>).

  • _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.

  • 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 id app (<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.

Hostované Blazor WebAssembly řešení zahrnuje následující projekty ASP.NET Core:

  • "Client": Aplikace Blazor WebAssembly .
  • "Server": Aplikace, která klientům obsluhuje Blazor WebAssembly data aplikace a počasí.
  • "Shared": Projekt, který udržuje běžné třídy, metody a zdroje.

Řešení se vygeneruje ze Blazor WebAssembly šablony projektu v sadě Visual Studio se zaškrtnutým zaškrtávacím polem ASP.NET Core Hostovaným nebo s -ho|--hosted možností pomocí příkazu .NET CLI dotnet new blazorwasm . Další informace naleznete v tématu Nástroje pro ASP.NET Core Blazor.

Struktura projektu aplikace na straně klienta v hostovaném Blazor řešení Webassembly (Client"projekt") je stejná jako struktura projektu pro samostatnou Blazor WebAssembly aplikaci. Další soubory v hostovaném Blazor WebAssembly řešení:

  • Projekt "Server" zahrnuje kontroler předpovědi počasí, který Controllers/WeatherForecastController.cs vrací data o počasí do komponenty projektu FetchData "Client".
  • Projekt "Shared" zahrnuje třídu předpovědi počasí, která WeatherForecast.cs představuje data o počasí pro projekty "Client" a "Server".

Blazor WebAssembly

Blazor WebAssembly šablona projektu: blazorwasm

Šablona Blazor WebAssembly vytvoří počáteční soubory a adresářovou strukturu pro Blazor WebAssembly aplikaci. Aplikace se naplní ukázkovým kódem pro komponentu FetchData , která načítá data ze statického prostředku weather.jsona interakce uživatele s komponentou Counter .

  • 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č.
    • FetchData component (FetchData.razor): Implementuje datovou stránku Fetch.
    • Index component (Index.razor): Implementuje Home stránku.

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

  • Shared složka: Obsahuje následující sdílené komponenty 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 komponentu NavLink (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.
    • SurveyPrompt komponenta (SurveyPrompt.razor): Blazor součást průzkumu.

  • wwwroot folder: Webová kořenová složka aplikace obsahující veřejné statické prostředky aplikace, včetně appsettings.json souborů nastavení aplikace prostředí pro nastavení konfigurace. 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 id app (<div id="app">Loading...</div>).

  • _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.

  • 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 id app (<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.

Hostované Blazor WebAssembly řešení zahrnuje následující projekty ASP.NET Core:

  • "Client": Aplikace Blazor WebAssembly .
  • "Server": Aplikace, která klientům obsluhuje Blazor WebAssembly data aplikace a počasí.
  • "Shared": Projekt, který udržuje běžné třídy, metody a zdroje.

Řešení se vygeneruje ze Blazor WebAssembly šablony projektu v sadě Visual Studio se zaškrtnutým zaškrtávacím polem ASP.NET Core Hostovaným nebo s -ho|--hosted možností pomocí příkazu .NET CLI dotnet new blazorwasm . Další informace naleznete v tématu Nástroje pro ASP.NET Core Blazor.

Struktura projektu aplikace na straně klienta v hostovaném Blazor řešení Webassembly (Client"projekt") je stejná jako struktura projektu pro samostatnou Blazor WebAssembly aplikaci. Další soubory v hostovaném Blazor WebAssembly řešení:

  • Projekt "Server" zahrnuje kontroler předpovědi počasí, který Controllers/WeatherForecastController.cs vrací data o počasí do komponenty projektu FetchData "Client".
  • Projekt "Shared" zahrnuje třídu předpovědi počasí, která WeatherForecast.cs představuje data o počasí pro projekty "Client" a "Server".

Blazor WebAssembly

Blazor WebAssembly šablona projektu: blazorwasm

Šablona Blazor WebAssembly vytvoří počáteční soubory a adresářovou strukturu pro Blazor WebAssembly aplikaci. Aplikace se naplní ukázkovým kódem pro komponentu FetchData , která načítá data ze statického prostředku weather.jsona interakce uživatele s komponentou Counter .

  • 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č.
    • FetchData component (FetchData.razor): Implementuje datovou stránku Fetch.
    • Index component (Index.razor): Implementuje Home stránku.

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

  • Shared složka: Obsahuje následující sdílené komponenty:

    • MainLayoutcomponent (MainLayout.razor): Komponenta rozložení aplikace.
    • NavMenu component (NavMenu.razor): Implementuje navigaci na bočním panelu. Obsahuje komponentu NavLink (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.
    • SurveyPrompt komponenta (SurveyPrompt.razor): Blazor součást průzkumu.

  • wwwroot folder: Webová kořenová složka aplikace obsahující veřejné statické prostředky aplikace, včetně appsettings.json souborů nastavení aplikace prostředí pro nastavení konfigurace. 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í elementu app DOM (<app>Loading...</app>).

  • _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.

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

    • Komponenta App je kořenovou komponentou aplikace. Komponenta App je určena jako app prvek DOM (<app>Loading...</app> 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.

Hostované Blazor WebAssembly řešení zahrnuje následující projekty ASP.NET Core:

  • "Client": Aplikace Blazor WebAssembly .
  • "Server": Aplikace, která klientům obsluhuje Blazor WebAssembly data aplikace a počasí.
  • "Shared": Projekt, který udržuje běžné třídy, metody a zdroje.

Řešení se vygeneruje ze Blazor WebAssembly šablony projektu v sadě Visual Studio se zaškrtnutým zaškrtávacím polem ASP.NET Core Hostovaným nebo s -ho|--hosted možností pomocí příkazu .NET CLI dotnet new blazorwasm . Další informace naleznete v tématu Nástroje pro ASP.NET Core Blazor.

Struktura projektu aplikace na straně klienta v hostovaném Blazor řešení Webassembly (Client"projekt") je stejná jako struktura projektu pro samostatnou Blazor WebAssembly aplikaci. Další soubory v hostovaném Blazor WebAssembly řešení:

  • Projekt "Server" zahrnuje kontroler předpovědi počasí, který Controllers/WeatherForecastController.cs vrací data o počasí do komponenty projektu FetchData "Client".
  • Projekt "Shared" zahrnuje třídu předpovědi počasí, která WeatherForecast.cs představuje data o počasí pro projekty "Client" a "Server".

Blazor Umístění skriptu

Skript Blazor se obsluhuje z vloženého prostředku ve sdíleném rozhraní ASP.NET Core.

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

<script src="_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>

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

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

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

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

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

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

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

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

<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 Server V aplikaci <head> a <body> obsah se nachází v Pages/_Host.cshtml souboru.

Blazor Server V aplikaci <head> a <body> obsah se nachází v Pages/_Layout.cshtml souboru.

Blazor Server V aplikaci <head> a <body> obsah se nachází v Pages/_Host.cshtml souboru.

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

Duální Blazor Server/Blazor WebAssembly aplikace

Pokud chcete vytvořit aplikaci, která se dá spustit jako Blazor Server aplikace nebo Blazor WebAssembly aplikace, je jedním z přístupů umístit všechny aplikační logiky a komponenty doRazor knihovny tříd (RCL) a odkazovat na seznam RCL ze samostatných Blazor Server a Blazor WebAssembly projektů. Pro běžné služby, jejichž implementace se liší na základě modelu hostování, definujte rozhraní služby v seznamu RCL a implementujte služby v projektechBlazor Server.Blazor WebAssembly

Další materiály