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 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 soubory a složky, které tvoří Blazor aplikaci vygenerovanou ze Blazor šablony projektu.

Blazor Webová aplikace

Blazor Šablona projektu webové aplikace: blazor

Šablona Blazor projektu Webové aplikace poskytuje jediný výchozí bod pro použití Razor komponent 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.

Ve výchozím nastavení Blazor šablona webové aplikace 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.

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

  • Serverový projekt:

    • Components Složky:

      • 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 označuje uživatele, který komponenta je aktuálně zobrazena.
        • NavMenu.razor.css: Šablona stylů pro navigační nabídku aplikace.

      • Pages složka: Obsahuje směrovatelné součásti aplikace na straně Razor serveru (.razor). Trasa pro každou stránku je určena pomocí direktivy @page . Šablona obsahuje následující:

        • Counter component (Counter.razor): Implementuje stránku Čítač .
        • Errorcomponent (Error.razor): Implementuje chybovoustránku.
        • Home component (Home.razor): Implementuje Home stránku.
        • Weather component (Weather.razor): Implementuje stránku předpověď počasí.

      • App component (App.razor): 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.

      • Routes component (Routes.razor): Nastaví 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.

      • _Imports.razor: Zahrnuje běžné Razor direktivy, které se mají zahrnout do komponent aplikace vykreslených serverem (.razor), jako @using jsou direktivy pro obory názvů.

    • 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 --launch-profile https možnost dotnet run příkazu, jednoduše umístěte https profil nad http profil do souboru.

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

    • Program.cssoubor: Vstupní bod projektu serveru, 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): Zadejte nastavení konfigurace pro serverový projekt.

  • Projekt klienta (.Client):

    • Pages složka: Obsahuje směrovatelné komponenty aplikace na straně Razor klienta (.razor). Trasa pro každou stránku je určena pomocí direktivy @page . Šablona obsahuje Counter součást (Counter.razor), která implementuje stránku Čítač .

      Struktura .Client složek součástí projektu se liší od Blazor struktury složek hlavního projektu webové aplikace, 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.

      Projekt .Client je čistě Blazor projekt, který není nutný k integraci s nepodporovými funkcemi a specifikacemi ASP.NET CoreBlazor , takže používá méně složitou strukturu složek komponent. Můžete ale použít libovolnou strukturu 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.

    • Webová kořenová složka pro projekt na straně klienta obsahující veřejné statické prostředky aplikace, včetně souborů nastavení aplikace (appsettings.Development.json, appsettings.json), které poskytují nastavení konfigurace pro projekt na straně klienta.

    • Program.cssoubor: Vstupní bod projektu na straně klienta, 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ů.

    • _Imports.razor: Zahrnuje běžné Razor direktivy, které se mají zahrnout do komponent aplikace vykreslených webAssembly (.razor), jako @using jsou direktivy pro obory názvů.

Při konfiguraci dalších možností se můžou v aplikaci vytvořené ze Blazor šablony projektu webové aplikace 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 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.
    • 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 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.
    • 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 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.
    • 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 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.
    • 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 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 --launch-profile https možnost dotnet run příkazu, 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 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 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.
    • 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 idapp (<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 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.

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 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.
    • 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 idapp (<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 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.

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 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.
    • 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 idapp (<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 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.

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

Blazor Ve webové aplikaci Blazor se skript nachází v Components/App.razor souboru:

<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 Ve webové aplikaci <head> 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 doRazorknihovny 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