Megosztás a következőn keresztül:

ASP.NET Core Blazor projektstruktúra

  • Cikk

Jegyzet

Ez nem a cikk legújabb verziója. A jelenlegi kiadáshoz tekintse meg a .NET 9 verziójú változatot ebben a cikkben.

Figyelmeztetés

A ASP.NET Core ezen verziója már nem támogatott. További információ: .NET és .NET Core támogatási szabályzat. Az aktuális kiadást a cikk .NET 9-es verziójában találja meg.

Fontos

Ezek az információk egy olyan előzetes termékre vonatkoznak, amelyet a kereskedelmi forgalomba kerülés előtt jelentősen módosíthatnak. A Microsoft nem vállal kifejezett vagy hallgatólagos szavatosságot az itt megadott információkra vonatkozóan.

Kérjük, tekintse meg a jelen cikk .NET 9-es verziójátaz aktuális kiadásért.

Ez a cikk azokat a fájlokat és mappákat ismerteti, amelyek egy Blazor projektsablonból létrehozott Blazor alkalmazást alkotnak.

Blazor Web App

Blazor Web App projektsablon: blazor

A Blazor Web App projektsablon egyetlen kiindulópontot biztosít Razor összetevők (.razor) használatával bármilyen webes felhasználói felület létrehozásához, kiszolgálóoldali renderelt és ügyféloldali renderelt módon. Egyesíti a meglévő Blazor Server és Blazor WebAssembly üzemeltetési modellek erősségeit kiszolgálóoldali rendereléssel, streamleképezéssel, továbbfejlesztett navigációval és űrlapkezeléssel, valamint a Blazor Server vagy Blazor WebAssembly összetevőnkénti használatával történő interaktivitás hozzáadásának képességét.

Ha az alkalmazás létrehozásakor az ügyféloldali renderelés (CSR) és az interaktív kiszolgálóoldali renderelés (interaktív SSR) is ki van választva, a projektsablon interaktív automatikus renderelési módot használ. Az automatikus renderelési mód kezdetben interaktív SSR-t használ, míg a .NET-alkalmazáscsomag és a futtatókörnyezet letöltődik a böngészőbe. A .NET WebAssembly futtatókörnyezet aktiválása után a renderelés CSR-re vált.

A Blazor Web App sablon statikus és interaktív kiszolgálóoldali renderelést is lehetővé tesz egyetlen projekt használatával. Ha az Interaktív WebAssembly renderelést is engedélyezi, a projekt egy további ügyfélprojektet (.Client) tartalmaz a WebAssembly-alapú összetevőkhöz. A kliensprojekt létrehozott kimenete letöltődik a böngészőbe, és az ügyfélen kerül végrehajtásra. Az Interaktív WebAssembly vagy az Interaktív automatikus renderelési módot használó összetevőknek a .Client projektben kell lenniük.

A .Client projekt összetevőmappa-struktúrája eltér a Blazor Web Appfő projektmappájának szerkezetétől, mivel a fő projekt egy standard ASP.NET Core-projekt. A fő projektnek figyelembe kell vennie ASP.NET alapprojektek egyéb olyan eszközeit, amelyek nem kapcsolódnak Blazor. A .Client projektben bármilyen összetevőmappa-struktúrát használhat. Igény szerint tükrözheti a fő projekt összetevőmappájának elrendezését a .Client projektben. Vegye figyelembe, hogy a névterek módosításokat igényelhetnek az ilyen objektumok, például az elrendezésfájlok esetében, ha az összetevőket a projektsablon által használt különböző mappákba helyezi át.

Az összetevőkről és a renderelési módokról további információt a ASP.NET Core Razor-összetevők és ASP.NET Core Blazor renderelési módokról cikkekben talál.

Az alkalmazás létrehozásakor kiválasztott interaktív renderelési mód alapján a Layout mappa vagy a kiszolgálóprojektben található a Components mappában, vagy a .Client projekt gyökerénél. A mappa a következő elrendezési összetevőket és stíluslapokat tartalmazza:

  • A MainLayout összetevő (MainLayout.razor) az alkalmazás elrendezési összetevője.
  • A MainLayout.razor.css az alkalmazás fő elrendezésének stíluslapja.
  • A NavMenu összetevő (NavMenu.razor) oldalsávos navigációt valósít meg. Az összetevő tartalmazza a NavLink elemeket (NavLink), amelyek más Razor összetevőkre mutató navigációs hivatkozásokat jelenítenek meg. A NavLink összetevő jelzi a felhasználónak, hogy melyik összetevő jelenik meg jelenleg.
  • A NavMenu.razor.css az alkalmazás navigációs menüjének stíluslapja.

A Routes összetevő (Routes.razor) a kiszolgálóprojektben vagy a .Client projektben található, és beállítja az útválasztást a Router összetevő használatával. Ügyféloldali interaktív összetevők esetén a Router összetevő elfogja a böngésző navigációt, és megjeleníti a kért címnek megfelelő lapot.

A kiszolgálóprojekt Components mappája tartalmazza az alkalmazás kiszolgálóoldali Razor összetevőit. A megosztott összetevők gyakran a Components mappa gyökerébe kerülnek, míg az elrendezés és az oldalösszetevők általában a Components mappában lévő mappákba kerülnek.

A szerver projekt Components/Pages mappája tartalmazza az alkalmazás útvonalazható kiszolgálóoldali Razor összetevőit. Az egyes oldalak útvonala a @page irányelvvel van megadva.

A App összetevő (App.razor) az alkalmazás fő összetevője HTML-<head> korrektúrával, a Routes összetevővel és a Blazor<script> címkével. A gyökérösszetevő az első összetevő, amelyet az alkalmazás betölt.

A kiszolgáló és .Client projektek _Imports.razor fájljai a projekt Razor összetevőire vonatkozó általános Razor irányelveket tartalmazzák, például @using névterekre vonatkozó irányelveket.

A kiszolgálóprojekt Properties mappája tartalmazza fejlesztési környezet konfigurációs a launchSettings.json fájlban.

Jegyzet

A http profil megelőzi a https profilt a launchSettings.json fájlban. Amikor egy alkalmazást a .NET parancssori felülettel futtat, az alkalmazás HTTP-végponton fut, mert az első talált profil http. A profil beállítási sorrendje megkönnyíti a HTTPS használatára való átállást Linux- és macOS-felhasználók számára. Ha úgy szeretné elindítani az alkalmazást a .NET CLI-vel, hogy a dotnet watch (vagy dotnet run) parancsnak nem kell átadnia a -lp https vagy --launch-profile https lehetőséget, egyszerűen helyezze a https profilt a http profil fölé a fájlban.

A szerverprojekt wwwroot mappája az alkalmazás nyilvános statikus elemeit tartalmazó szerverprojekt Web Root mappa.

A kiszolgálóprojekt Program.cs fájlja a projekt belépési pontja, amely beállítja a ASP.NET Core webalkalmazást gazdagép, és tartalmazza az alkalmazás indítási logikáját, beleértve a szolgáltatásregisztrációkat, a konfigurációt, a naplózást és a kérésfeldolgozási folyamatot:

A kiszolgálón vagy a .Client projektben található alkalmazás beállítási fájljai (appsettings.Development.json, appsettings.json) konfigurációs beállításokatbiztosítanak. A kiszolgálóprojektben a beállításfájlok a projekt gyökerében találhatók. A .Client projektben a beállításfájlokat a Webes gyökér mappából használják fel wwwroot.

A .Client projektben:

  • A Pages mappa irányítható ügyféloldali Razor összetevőket tartalmazza. Az egyes oldalak útvonala a @page irányelvvel van megadva.

  • A wwwroot mappa az alkalmazás nyilvános statikus eszközeit tartalmazó .Client projekt webes gyökér mappája.

  • A Program.cs fájl a projekt belépési pontja, amely beállítja a WebAssembly gazdagép, és tartalmazza a projekt indítási logikáját, beleértve a szolgáltatásregisztrációkat, a konfigurációt, a naplózást és a kérésfeldolgozási folyamatot.

További fájlok és mappák jelenhetnek meg egy Blazor Web App projektsablonból létrehozott alkalmazásban, ha további beállításokat konfigurál. Például az ASP.NET Core Identity alkalmazás létrehozása további eszközöket is tartalmaz a hitelesítési és engedélyezési funkciókhoz.

Blazor Server

Blazor Server projektsablonok: blazorserver, blazorserver-empty

A Blazor Server-sablonok létrehozzák az Blazor Server-alkalmazások kezdeti fájljait és könyvtárstruktúráját:

  • Ha a blazorserver sablont használja, az alkalmazás a következőkkel lesz feltöltve:
    • Bemutatókód egy FetchData összetevőhöz, amely adatokat tölt be egy időjárás-előrejelzési szolgáltatásból (WeatherForecastService) és egy Counter összetevővel való felhasználói interakcióhoz.
    • Bootstrap frontend eszközkészlet.
  • Ha a blazorserver-empty sablont használja, az alkalmazás bemutatókód és Bootstrap nélkül jön létre.

Projektstruktúra:

  • Data mappa: Az WeatherForecastServiceWeatherForecast osztályát és implementációját tartalmazza, amely példa időjárási adatokat biztosít az alkalmazás FetchData összetevőjére.

  • Pages mappa: Tartalmazza a Blazor alkalmazás útválasztható Razor összetevőit (.razor) és a Blazor Server alkalmazás gyökér Razor oldalát. Az egyes oldalak útvonala a @page irányelvvel van megadva. A sablon a következőket tartalmazza:

    • _Host.cshtml: Az alkalmazás gyökéroldala Razor-lapként implementálva:
      • Amikor az alkalmazás bármely lapját először kérik, a rendszer megjeleníti és visszaadja ezt a lapot a válaszban.
      • A Host oldal megadja, hogy hol jelenik meg a gyökér App összetevő (App.razor).
    • Counter összetevő (Counter.razor): Implementálja a Számláló lapot.
    • Error összetevő (Error.razor): Akkor jelenik meg, ha kezeletlen kivétel történik az alkalmazásban.
    • FetchData összetevő (FetchData.razor): Implementálja az Adatbeolvasás lapot.
    • Index összetevő (Index.razor): Implementálja a Home lapot.

  • Properties mappa: fejlesztési környezet konfigurációs tárolja a launchSettings.json fájlban.

  • Shared mappa: A következő megosztott összetevőket és stíluslapokat tartalmazza:

    • MainLayout összetevő (MainLayout.razor): Az alkalmazás elrendezési összetevő.
    • MainLayout.razor.css: Az alkalmazás fő elrendezésének stíluslapja.
    • NavMenu összetevő (NavMenu.razor): Oldalsávos navigációt valósít meg. Tartalmazza a NavLink összetevő (NavLink), amely más Razor összetevőkre mutató navigációs hivatkozásokat jelenít meg. A NavLink összetevő automatikusan jelzi a kijelölt állapotot az összetevő betöltésekor, ami segít a felhasználónak megérteni, hogy melyik összetevő jelenik meg jelenleg.
    • NavMenu.razor.css: Az alkalmazás navigációs menüjének stíluslapja.
    • SurveyPrompt összetevő (SurveyPrompt.razor): Blazor felmérési összetevő.

  • wwwroot mappa: Az alkalmazás nyilvános statikus eszközeit tartalmazó alkalmazás webes gyökérmappája.

  • _Imports.razor: Az alkalmazás összetevőibe belefoglalandó általános Razor irányelveket (.razor), például @using névterekre vonatkozó irányelveket tartalmaz.

  • App.razor: Az alkalmazás fő összetevője, amely az ügyféloldali útválasztást a Router összetevő használatával állítja be. A Router összetevő elfogja a böngésző navigációt, és megjeleníti a kért címnek megfelelő lapot.

  • appsettings.json és környezeti alkalmazásbeállítások fájljai: Adja meg konfigurációs beállításokat az alkalmazáshoz.

  • Program.cs: Az alkalmazás belépési pontja, amely beállítja a ASP.NET Core gazdagépet, és tartalmazza az alkalmazás indítási logikáját, beleértve a szolgáltatásregisztrációkat és a kérelemfeldolgozási folyamat konfigurációját:

    • Megadja az alkalmazás függőséginjektálási (DI) szolgáltatásait. A szolgáltatásokat a AddServerSideBlazormeghívásával adjuk hozzá, és a WeatherForecastService bekerül a szolgáltatási tárolóba a példa FetchData komponens által történő használathoz.
    • Konfigurálja az alkalmazás kéréskezelési folyamatát:
      • MapBlazorHub a rendszer arra kéri, hogy állítson be végpontot a böngészővel való valós idejű kapcsolathoz. A kapcsolatot a SignalRhozza létre, amely egy keretrendszer a valós idejű webes funkciók alkalmazásokhoz való hozzáadására.
      • MapFallbackToPage("/_Host") az alkalmazás gyökéroldalának (Pages/_Host.cshtml) beállítására és a navigáció engedélyezésére van meghívva.

További fájlok és mappák jelenhetnek meg egy Blazor Server projektsablonból létrehozott alkalmazásban, ha további beállításokat konfigurál. Egy alkalmazás ASP.NET Core Identity-val történő létrehozása például további eszközöket biztosít a hitelesítési és engedélyezési funkciókhoz.

Blazor Server projektsablon: blazorserver

A Blazor Server sablon létrehozza az Blazor Server-alkalmazások kezdeti fájljait és könyvtárstruktúráját. Az alkalmazás egy FetchData összetevőhöz tartozó bemutató kóddal van feltöltve, amely egy regisztrált szolgáltatásból, WeatherForecastServiceés egy Counter összetevővel való felhasználói interakcióból tölt be adatokat.

  • Data mappa: Az WeatherForecastServiceWeatherForecast osztályát és implementációját tartalmazza, amely példa időjárási adatokat biztosít az alkalmazás FetchData összetevőjére.

  • Pages mappa: A Blazor alkalmazás útvonalba állítható Razor összetevőit (.razor) és a Blazor Server alkalmazás gyökér Razor oldalát tartalmazza. Az egyes oldalak útvonala a @page irányelvvel van megadva. A sablon a következőket tartalmazza:

    • _Host.cshtml: Az alkalmazás gyökéroldala Razor-lapként implementálva:
      • Amikor az alkalmazás bármely lapját először kérik, a rendszer megjeleníti és visszaadja ezt a lapot a válaszban.
      • A Kiszolgáló oldal határozza meg, hogy hol jelenik meg a gyökér App összetevő (App.razor).
    • _Layout.cshtml: Az alkalmazás _Host.cshtml gyökérlapjának elrendezési oldala.
    • Counter összetevő (Counter.razor): Megvalósítja a számláló lapot.
    • Error összetevő (Error.razor): Akkor jelenik meg, ha kezeletlen kivétel történik az alkalmazásban.
    • FetchData összetevő (FetchData.razor): Implementálja az Adatbeolvasás lapot.
    • Index összetevő (Index.razor): Implementálja a Home lapot.

  • Properties mappa: fejlesztési környezet konfigurációs tárolja a launchSettings.json fájlban.

  • Shared mappa: A következő megosztott összetevőket és stíluslapokat tartalmazza:

    • MainLayout összetevő (MainLayout.razor): Az alkalmazás elrendezési összetevő.
    • MainLayout.razor.css: Az alkalmazás fő elrendezésének stíluslapja.
    • NavMenu összetevő (NavMenu.razor): Oldalsávos navigációt valósít meg. Tartalmazza a NavLink összetevő (NavLink), amely más Razor összetevőkre mutató navigációs hivatkozásokat jelenít meg. A NavLink összetevő automatikusan jelzi a kijelölt állapotot az összetevő betöltésekor, ami segít a felhasználónak megérteni, hogy melyik összetevő jelenik meg jelenleg.
    • NavMenu.razor.css: Az alkalmazás navigációs menüjének stíluslapja.
    • SurveyPrompt összetevő (SurveyPrompt.razor): Blazor felmérési összetevő.

  • wwwroot mappa: Az alkalmazás nyilvános statikus eszközeit tartalmazó alkalmazás webes gyökérmappája.

  • _Imports.razor: Az alkalmazás összetevőibe belefoglalandó általános Razor irányelveket (.razor), például @using névterekre vonatkozó irányelveket tartalmaz.

  • App.razor: Az alkalmazás fő összetevője, amely az ügyféloldali útválasztást a Router összetevő használatával állítja be. A Router összetevő elfogja a böngésző navigációt, és megjeleníti a kért címnek megfelelő lapot.

  • appsettings.json és környezeti alkalmazásbeállítások fájljai: Adja meg konfigurációs beállításokat az alkalmazáshoz.

  • Program.cs: Az alkalmazás belépési pontja, amely beállítja a ASP.NET Core gazdagépet, és tartalmazza az alkalmazás indítási logikáját, beleértve a szolgáltatásregisztrációkat és a kérelemfeldolgozási folyamat konfigurációját:

    • Megadja az alkalmazás függőséginjektálási (DI) szolgáltatásait. A szolgáltatások a AddServerSideBlazormeghívásával lesznek hozzáadva, és a WeatherForecastService hozzá lesz adva a szolgáltatástárolóhoz a példa FetchData összetevő általi használatra.
    • Konfigurálja az alkalmazás kéréskezelési folyamatát:
      • MapBlazorHub a rendszer arra kéri, hogy állítson be végpontot a böngészővel való valós idejű kapcsolathoz. A kapcsolat a SignalRáltal jön létre, amely egy keretrendszer a valós idejű webes funkciók alkalmazásokhoz való hozzáadásához.
      • MapFallbackToPage("/_Host") az alkalmazás gyökéroldalának (Pages/_Host.cshtml) beállítására és a navigáció engedélyezésére van meghívva.

További fájlok és mappák jelenhetnek meg egy Blazor Server projektsablonból létrehozott alkalmazásban, ha további beállításokat konfigurál. Például, ha egy alkalmazást hozunk létre az ASP.NET Core Identity-val, az további eszközöket tartalmaz a hitelesítési és engedélyezési funkciókhoz.

Blazor Server projektsablon: blazorserver

A Blazor Server sablon létrehozza az Blazor Server-alkalmazások kezdeti fájljait és könyvtárstruktúráját. Az alkalmazás egy FetchData összetevőhöz tartozó bemutató kóddal van feltöltve, amely egy regisztrált szolgáltatásból, WeatherForecastServiceés egy Counter összetevővel való felhasználói interakcióból tölt be adatokat.

  • Data mappa: Az WeatherForecastServiceWeatherForecast osztályát és implementációját tartalmazza, amely példa időjárási adatokat biztosít az alkalmazás FetchData összetevőjére.

  • Pages mappa: A Blazor alkalmazás Razor összetevőit (.razor) és a Blazor Server-alkalmazás gyökér Razor oldalát tartalmazza. Az egyes oldalak útvonala a @page irányelvvel van megadva. A sablon a következőket tartalmazza:

    • _Host.cshtml: Az alkalmazás gyökéroldala Razor-lapként implementálva:
      • Amikor az alkalmazás bármely lapját először kérik, a rendszer megjeleníti és visszaadja ezt a lapot a válaszban.
      • A Hoszt oldal megadja, hogy hol jelenik meg a gyökér App összetevő (App.razor).
    • Counter összetevő (Counter.razor): Megvalósítja a számláló lapot.
    • Error összetevő (Error.razor): Akkor jelenik meg, ha kezeletlen kivétel történik az alkalmazásban.
    • FetchData összetevő (FetchData.razor): Implementálja az Adatbeolvasás lapot.
    • Index összetevő (Index.razor): Implementálja a Home lapot.

  • Properties mappa: A fejlesztőkörnyezet konfigurációját a launchSettings.json fájlban található tartalmazza.

  • Shared mappa: A következő megosztott összetevőket és stíluslapokat tartalmazza:

    • MainLayout összetevő (MainLayout.razor): Az alkalmazás elrendezési összetevő.
    • MainLayout.razor.css: Az alkalmazás fő elrendezésének stíluslapja.
    • NavMenu összetevő (NavMenu.razor): Oldalsávos navigációt valósít meg. Tartalmazza a NavLink összetevő (NavLink), amely más Razor összetevőkre mutató navigációs hivatkozásokat jelenít meg. A NavLink összetevő automatikusan jelzi a kijelölt állapotot az összetevő betöltésekor, ami segít a felhasználónak megérteni, hogy melyik összetevő jelenik meg jelenleg.
    • NavMenu.razor.css: Az alkalmazás navigációs menüjének stíluslapja.
    • SurveyPrompt összetevő (SurveyPrompt.razor): Blazor felmérési összetevő.

  • wwwroot mappa: Az alkalmazás nyilvános statikus eszközeit tartalmazó alkalmazás webes gyökérmappája.

  • _Imports.razor: Az alkalmazás összetevőibe belefoglalandó általános Razor irányelveket (.razor), például @using névterekre vonatkozó irányelveket tartalmaz.

  • App.razor: Az alkalmazás fő összetevője, amely az ügyféloldali útválasztást a Router összetevő használatával állítja be. A Router összetevő elfogja a böngésző navigációt, és megjeleníti a kért címnek megfelelő lapot.

  • appsettings.json és környezeti alkalmazásbeállítások fájljai: Adja meg konfigurációs beállításokat az alkalmazáshoz.

  • Program.cs: Az alkalmazás belépési pontja, amely beállítja az ASP.NET Core gazdagépet.

  • Startup.cs: Az alkalmazás indítási logikáját tartalmazza. A Startup osztály két módszert határoz meg:

    • ConfigureServices: Konfigurálja az alkalmazás függőség-injektálási (DI) szolgáltatásait. A szolgáltatásokat a AddServerSideBlazormeghívásával adják hozzá, és a WeatherForecastService a szolgáltatástárolóhoz kerül hozzáadásra a példa FetchData összetevő általi használathoz.
    • Configure: Az alkalmazás kéréskezelési folyamatának konfigurálása:
      • MapBlazorHub a rendszer arra kéri, hogy állítson be végpontot a böngészővel való valós idejű kapcsolathoz. A kapcsolat a SignalRkeretrendszer segítségével jön létre, amely lehetővé teszi a valós idejű webes funkciók alkalmazásokhoz való hozzáadását.
      • MapFallbackToPage("/_Host") az alkalmazás gyökéroldalának (Pages/_Host.cshtml) beállítására és a navigáció engedélyezésére van meghívva.

További fájlok és mappák jelenhetnek meg egy Blazor Server projektsablonból létrehozott alkalmazásban, ha további beállításokat konfigurál. Például, amikor egy alkalmazást hozunk létre az ASP.NET Core Identity használatával, további erőforrások kerülnek hozzá a hitelesítési és engedélyezési funkciókhoz.

Blazor Server projektsablon: blazorserver

A Blazor Server sablon létrehozza az Blazor Server-alkalmazások kezdeti fájljait és könyvtárstruktúráját. Az alkalmazás egy FetchData összetevőhöz tartozó bemutató kóddal van feltöltve, amely egy regisztrált szolgáltatásból, WeatherForecastServiceés egy Counter összetevővel való felhasználói interakcióból tölt be adatokat.

  • Data mappa: Az WeatherForecastServiceWeatherForecast osztályát és implementációját tartalmazza, amely példa időjárási adatokat biztosít az alkalmazás FetchData összetevőjére.

  • Pages mappa: A Blazor alkalmazás Razor összetevőit (.razor) és a Blazor Server-alkalmazás gyökér Razor oldalát tartalmazza. Az egyes oldalak útvonala a @page irányelvvel van megadva. A sablon a következőket tartalmazza:

    • _Host.cshtml: Az alkalmazás gyökéroldala Razor-lapként implementálva:
      • Amikor az alkalmazás bármely lapját először kérik, a rendszer megjeleníti és visszaadja ezt a lapot a válaszban.
      • A Gazda oldal megadja, hogy hol van renderelve a gyökér App összetevő (App.razor).
    • Counter összetevő (Counter.razor): Implementálja a Számláló lapot.
    • Error összetevő (Error.razor): Akkor jelenik meg, ha kezeletlen kivétel történik az alkalmazásban.
    • FetchData összetevő (FetchData.razor): Implementálja az Adatbeolvasás lapot.
    • Index összetevő (Index.razor): Implementálja a Home lapot.

  • Properties mappa: fejlesztési környezet konfigurációs tárolja a launchSettings.json fájlban.

  • Shared mappa: A következő megosztott összetevőket tartalmazza:

    • MainLayout összetevő (MainLayout.razor): Az alkalmazás elrendezési összetevő.
    • NavMenu összetevő (NavMenu.razor): Oldalsávos navigációt valósít meg. Tartalmazza a NavLink összetevő (NavLink), amely más Razor összetevőkre mutató navigációs hivatkozásokat jelenít meg. A NavLink összetevő automatikusan jelzi a kijelölt állapotot az összetevő betöltésekor, ami segít a felhasználónak megérteni, hogy melyik összetevő jelenik meg jelenleg.
    • SurveyPrompt összetevő (SurveyPrompt.razor): Blazor felmérési összetevő.

  • wwwroot mappa: Az alkalmazás nyilvános statikus eszközeit tartalmazó alkalmazás webes gyökérmappája.

  • _Imports.razor: Az alkalmazás összetevőibe belefoglalandó általános Razor irányelveket (.razor), például @using névterekre vonatkozó irányelveket tartalmaz.

  • App.razor: Az alkalmazás fő összetevője, amely az ügyféloldali útválasztást a Router összetevő használatával állítja be. A Router összetevő elfogja a böngésző navigációt, és megjeleníti a kért címnek megfelelő lapot.

  • appsettings.json és környezeti alkalmazásbeállítások fájljai: Adja meg konfigurációs beállításokat az alkalmazáshoz.

  • Program.cs: Az alkalmazás belépési pontja, amely beállítja az ASP.NET Core kiszolgálóját.

  • Startup.cs: Az alkalmazás indítási logikáját tartalmazza. A Startup osztály két módszert határoz meg:

    • ConfigureServices: Konfigurálja az alkalmazás függőséginjektálási (DI) szolgáltatásait. A szolgáltatások a AddServerSideBlazormeghívásával lesznek hozzáadva, és a WeatherForecastService a szolgáltatástárolóhoz van hozzáadva, hogy a példa FetchData összetevő használhassa.
    • Configure: Az alkalmazás kéréskezelési folyamatának konfigurálása:
      • MapBlazorHub a rendszer arra kéri, hogy állítson be végpontot a böngészővel való valós idejű kapcsolathoz. A kapcsolat a SignalRkeretrendszerrel jön létre, amely valós idejű webes funkciók alkalmazásokhoz való hozzáadására szolgál.
      • MapFallbackToPage("/_Host") az alkalmazás gyökéroldalának (Pages/_Host.cshtml) beállítására és a navigáció engedélyezésére van meghívva.

További fájlok és mappák jelenhetnek meg egy Blazor Server projektsablonból létrehozott alkalmazásban, ha további beállításokat konfigurál. Például egy alkalmazás létrehozása ASP.NET Core Identity használatával további komponenseket tartalmaz a hitelesítési és engedélyezési funkciókhoz.

Önálló Blazor WebAssembly

Önálló Blazor WebAssembly projektsablon: blazorwasm

A Blazor WebAssembly-sablon létrehozza az önálló Blazor WebAssembly-alkalmazások kezdeti fájljait és könyvtárstruktúráját:

  • Ha a blazorwasm sablont használja, az alkalmazás a következőkkel lesz feltöltve:
    • Bemutatókód egy olyan Weather összetevőhöz, amely adatokat tölt be egy statikus objektumból (weather.json) és egy Counter-összetevővel való felhasználói interakcióhoz.
    • Bootstrap front-end eszközkészlet.
  • A blazorwasm sablon mintalapok és stílus nélkül is létrehozható.

Projektstruktúra:

  • Layout mappa: A következő elrendezési összetevőket és stíluslapokat tartalmazza:

    • MainLayout összetevő (MainLayout.razor): Az alkalmazás elrendezési összetevő.
    • MainLayout.razor.css: Az alkalmazás fő elrendezésének stíluslapja.
    • NavMenu összetevő (NavMenu.razor): Oldalsávos navigációt valósít meg. Tartalmazza a NavLink összetevő (NavLink), amely más Razor összetevőkre mutató navigációs hivatkozásokat jelenít meg. A NavLink összetevő automatikusan jelzi a kijelölt állapotot az összetevő betöltésekor, ami segít a felhasználónak megérteni, hogy melyik összetevő jelenik meg jelenleg.
    • NavMenu.razor.css: Az alkalmazás navigációs menüjének stíluslapja.

  • Pages mappa: Tartalmazza a Blazor alkalmazás útválasztható Razor összetevőit (.razor). Az egyes oldalak útvonala a @page irányelvvel van megadva. A sablon a következő összetevőket tartalmazza:

    • Counter összetevő (Counter.razor): Implementálja a Számláló lapot.
    • Index összetevő (Index.razor): Implementálja a Home lapot.
    • Weather összetevő (Weather.razor): Implementálja az Időjárás lapot.

  • _Imports.razor: Az alkalmazás összetevőibe belefoglalandó általános Razor irányelveket (.razor), például @using névterekre vonatkozó irányelveket tartalmaz.

  • App.razor: Az alkalmazás fő összetevője, amely az ügyféloldali útválasztást a Router összetevő használatával állítja be. A Router összetevő elfogja a böngésző navigációt, és megjeleníti a kért címnek megfelelő lapot.

  • Properties mappa: fejlesztési környezet konfigurációs tárolja a launchSettings.json fájlban.

    Jegyzet

    A http profil megelőzi a https profilt a launchSettings.json fájlban. Amikor egy alkalmazást a .NET parancssori felülettel futtat, az alkalmazás HTTP-végponton fut, mert az első talált profil http. A profilbeállítások megkönnyítik a HTTPS bevezetését Linux és macOS felhasználók számára. Ha úgy szeretné elindítani az alkalmazást a .NET CLI-vel, hogy a dotnet watch (vagy dotnet run) parancsnak nem kell átadnia a -lp https vagy --launch-profile https lehetőséget, egyszerűen helyezze a https profilt a http profil fölé a fájlban.

  • wwwroot mappa: Az alkalmazás nyilvános statikus eszközeit tartalmazó webgyökér mappája, beleértve appsettings.json és környezeti alkalmazásbeállítások fájljait konfigurációs beállítások és időjárási mintaadatokhoz (sample-data/weather.json). A index.html weblap az alkalmazás HTML-lapként implementált gyökéroldala:

    • Amikor az alkalmazás bármely lapját először kérik, a rendszer megjeleníti és visszaadja ezt a lapot a válaszban.
    • A lap megadja, hogy hol jelenik meg a gyökér App komponens. Az összetevő a div DOM elem helyén jelenik meg, idapp (<div id="app">Loading...</div>).

  • Program.cs: A WebAssembly-gazdagépet beállító alkalmazás belépési pontja:

    • A App összetevő az alkalmazás gyökérösszetevője. A App összetevő azbuilder.RootComponents.Add<App>("#app")gyökérösszetevő-gyűjteményhez tartozik, és div DOM-elemként van megadva, egy idapp ( wwwroot/index.html<div id="app">Loading...</div> ) formában.
    • Szolgáltatások vannak hozzáadva és konfigurálva (például builder.Services.AddSingleton<IMyDependency, MyDependency>()).

További fájlok és mappák jelenhetnek meg egy Blazor WebAssembly projektsablonból létrehozott alkalmazásban, ha további beállításokat konfigurál. Például egy alkalmazás létrehozása az ASP.NET Core Identity segítségével további eszközöket biztosít a hitelesítési és engedélyezési funkciókhoz.

Blazor WebAssembly

Blazor WebAssembly projektsablonok: blazorwasm, blazorwasm-empty

A Blazor WebAssembly-sablonok létrehozzák az Blazor WebAssembly-alkalmazások kezdeti fájljait és könyvtárstruktúráját:

  • Ha a blazorwasm sablont használja, az alkalmazás a következőkkel lesz feltöltve:
    • Bemutatókód egy olyan FetchData összetevőhöz, amely adatokat tölt be egy statikus objektumból (weather.json) és egy Counter-összetevővel való felhasználói interakcióhoz.
    • Bootstrap frontend keretrendszer.
  • Ha a blazorwasm-empty sablont használja, az alkalmazás bemutatókód és Bootstrap nélkül jön létre.

Projektstruktúra:

  • Pages mappa: A Blazor alkalmazás irányítható Razor összetevőit (.razor) tartalmazza. Az egyes oldalak útvonala a @page irányelvvel van megadva. A sablon a következő összetevőket tartalmazza:

    • Counter összetevő (Counter.razor): Implementálja a Számláló lapot.
    • FetchData összetevő (FetchData.razor): Implementálja az Adatbeolvasás lapot.
    • Index összetevő (Index.razor): Implementálja a Home lapot.

  • Properties mappa: fejlesztési környezet konfigurációs tárolja a launchSettings.json fájlban.

  • Shared mappa: A következő megosztott összetevőket és stíluslapokat tartalmazza:

    • MainLayout összetevő (MainLayout.razor): Az alkalmazás elrendezési összetevő.
    • MainLayout.razor.css: Az alkalmazás fő elrendezésének stíluslapja.
    • NavMenu összetevő (NavMenu.razor): Oldalsávos navigációt valósít meg. Tartalmazza a NavLink összetevő (NavLink), amely más Razor összetevőkre mutató navigációs hivatkozásokat jelenít meg. A NavLink összetevő automatikusan jelzi a kijelölt állapotot az összetevő betöltésekor, ami segít a felhasználónak megérteni, hogy melyik összetevő jelenik meg jelenleg.
    • NavMenu.razor.css: Az alkalmazás navigációs menüjének stíluslapja.
    • SurveyPrompt modul (SurveyPrompt.razor) (ASP.NET Core a .NET 7 vagy korábbi verziójában): Blazor felmérési modul.

  • wwwroot mappa: Az alkalmazás nyilvános statikus fájljait tartalmazó webgyökér mappa, beleértve a appsettings.json fájlokat és a környezeti alkalmazásbeállítások fájljait, valamint a konfigurációs beállításokfájljait. A index.html weblap az alkalmazás HTML-lapként implementált gyökéroldala:

    • Amikor az alkalmazás bármely lapját először kérik, a rendszer megjeleníti és visszaadja ezt a lapot a válaszban.
    • Az oldal meghatározza, hogy hol van megjelenítve a App gyökérkomponens. Az összetevő a div DOM elem helyén jelenik meg, idapp (<div id="app">Loading...</div>).

  • _Imports.razor: Az alkalmazás összetevőibe belefoglalandó általános Razor irányelveket (.razor), például @using névterekre vonatkozó irányelveket tartalmaz.

  • App.razor: Az alkalmazás fő összetevője, amely az ügyféloldali útválasztást a Router összetevő használatával állítja be. A Router összetevő elfogja a böngésző navigációt, és megjeleníti a kért címnek megfelelő lapot.

  • Program.cs: A WebAssembly-gazdagépet beállító alkalmazás belépési pontja:

    • A App összetevő az alkalmazás gyökérösszetevője. A App összetevő div DOM-elemként van megadva, idapp (wwwroot/index.html<div id="app">Loading...</div>), amely a gyökérösszetevő-gyűjteményhez (builder.RootComponents.Add<App>("#app")) tartozik.
    • Szolgáltatások vannak hozzáadva és konfigurálva (például builder.Services.AddSingleton<IMyDependency, MyDependency>()).

További fájlok és mappák jelenhetnek meg egy Blazor WebAssembly projektsablonból létrehozott alkalmazásban, ha további beállításokat konfigurál. Például, ha egy alkalmazást generálunk az ASP.NET Core Identity-val, az további eszközöket tartalmaz a hitelesítési és engedélyezési funkciókhoz.

Egy üzemeltetett Blazor WebAssembly megoldás a következő ASP.NET Core-projekteket tartalmazza:

  • "Client": A Blazor WebAssembly alkalmazás.
  • "Server": Az Blazor WebAssembly alkalmazást és az időjárási adatokat az ügyfeleknek kiszolgáló alkalmazás.
  • "Shared": Olyan projekt, amely közös osztályokat, metódusokat és erőforrásokat tart fenn.

A megoldás a Visual Studio Blazor WebAssembly projektsablonjából jön létre a ASP.NET Core Hosted jelölőnégyzet bejelölésével vagy a .NET CLI dotnet new blazorwasm parancsával a -ho|--hosted beállítással. További információért lásd: az ASP.NET Core Blazoreszközkészletet.

Az ügyféloldali alkalmazás projektstruktúrája egy üzemeltetett Blazor Webassembly-megoldásban ("Client" projekt) ugyanaz, mint az önálló Blazor WebAssembly-alkalmazások projektstruktúrája. További fájlok egy üzemeltetett Blazor WebAssembly megoldásban:

  • A "Server" projekt tartalmaz egy időjárás-előrejelzési vezérlőt Controllers/WeatherForecastController.cs, amely időjárási adatokat ad vissza a "Client" projekt FetchData összetevőjének.
  • A "Shared" projekt tartalmaz egy időjárás-előrejelzési osztályt WeatherForecast.cs, amely a "Client" és a "Server" projektek időjárási adatait jelöli.

Blazor WebAssembly

Blazor WebAssembly projektsablon: blazorwasm

A Blazor WebAssembly sablon létrehozza az Blazor WebAssembly-alkalmazások kezdeti fájljait és könyvtárstruktúráját. Az alkalmazás egy FetchData összetevőhöz tartozó bemutató kóddal van feltöltve, amely egy statikus objektumból, weather.jsonés egy Counter összetevővel való felhasználói interakcióból tölt be adatokat.

  • Pages mappa: Az Blazor alkalmazás irányítható Razor összetevőit (.razor) tartalmazza. Az egyes oldalak útvonala a @page irányelvvel van megadva. A sablon a következő összetevőket tartalmazza:

    • Counter összetevő (Counter.razor): Implementálja a Számláló lapot.
    • FetchData összetevő (FetchData.razor): Implementálja az Adatbeolvasás lapot.
    • Index összetevő (Index.razor): Implementálja a Home lapot.

  • Properties mappa: A fejlesztési környezet konfigurációját tárolja a launchSettings.json fájlban.

  • Shared mappa: A következő megosztott összetevőket és stíluslapokat tartalmazza:

    • MainLayout összetevő (MainLayout.razor): Az alkalmazás elrendezési összetevő.
    • MainLayout.razor.css: Az alkalmazás fő elrendezésének stíluslapja.
    • NavMenu összetevő (NavMenu.razor): Oldalsávos navigációt valósít meg. Tartalmazza a NavLink összetevő (NavLink), amely más Razor összetevőkre mutató navigációs hivatkozásokat jelenít meg. A NavLink összetevő automatikusan jelzi a kijelölt állapotot az összetevő betöltésekor, ami segít a felhasználónak megérteni, hogy melyik összetevő jelenik meg jelenleg.
    • NavMenu.razor.css: Az alkalmazás navigációs menüjének stíluslapja.
    • SurveyPrompt komponens (SurveyPrompt.razor): Blazor felmérési komponens.

  • wwwroot mappa: Az alkalmazás nyilvános statikus eszközeit tartalmazó webgyökér mappája, beleértve a appsettings.json fájlokat és a környezeti alkalmazásbeállítások fájljait a konfigurációs beállításokszámára. A index.html weblap az alkalmazás HTML-lapként implementált gyökéroldala:

    • Amikor az alkalmazás bármely lapját először kérik, a rendszer megjeleníti és visszaadja ezt a lapot a válaszban.
    • Az oldal specificálja, hogy hol kerül megjelenítésre a gyökér App komponens. Az összetevő a div DOM elem helyén jelenik meg, idapp (<div id="app">Loading...</div>).

  • _Imports.razor: Az alkalmazás összetevőibe belefoglalandó általános Razor irányelveket (.razor), például @using névterekre vonatkozó irányelveket tartalmaz.

  • App.razor: Az alkalmazás fő összetevője, amely az ügyféloldali útválasztást a Router összetevő használatával állítja be. A Router összetevő elfogja a böngésző navigációt, és megjeleníti a kért címnek megfelelő lapot.

  • Program.cs: A WebAssembly-gazdagépet beállító alkalmazás belépési pontja:

    • A App összetevő az alkalmazás gyökérösszetevője. A App összetevő a gyökérösszetevő-gyűjteményhez (builder.RootComponents.Add<App>("#app")) tartozó div DOM-elemként van megadva, ahol id értéke app (wwwroot/index.htmlszempontjából<div id="app">Loading...</div>).
    • Szolgáltatások vannak hozzáadva és konfigurálva (például builder.Services.AddSingleton<IMyDependency, MyDependency>()).

További fájlok és mappák jelenhetnek meg egy Blazor WebAssembly projektsablonból létrehozott alkalmazásban, ha további beállításokat konfigurál. Például az ASP.NET Core Identity-val történő alkalmazás generálása további eszközöket tartalmaz a hitelesítési és engedélyezési funkciókhoz.

Egy üzemeltetett Blazor WebAssembly megoldás a következő ASP.NET Core-projekteket tartalmazza:

  • "Client": A Blazor WebAssembly alkalmazás.
  • "Server": Az Blazor WebAssembly alkalmazást és az időjárási adatokat az ügyfeleknek kiszolgáló alkalmazás.
  • "Shared": Olyan projekt, amely közös osztályokat, metódusokat és erőforrásokat tart fenn.

A megoldás a Visual Studio Blazor WebAssembly projektsablonjából jön létre a ASP.NET Core Hosted jelölőnégyzet bejelölésével vagy a .NET CLI dotnet new blazorwasm parancsával a -ho|--hosted beállítással. További információ: ASP.NET Core Blazoreszközkészlete.

Az ügyféloldali alkalmazás projektstruktúrája egy üzemeltetett Blazor Webassembly-megoldásban ("Client" projekt) ugyanaz, mint az önálló Blazor WebAssembly-alkalmazások projektstruktúrája. További fájlok egy üzemeltetett Blazor WebAssembly megoldásban:

  • A "Server" projekt tartalmaz egy időjárás-előrejelzési vezérlőt Controllers/WeatherForecastController.cs, amely időjárási adatokat ad vissza a "Client" projekt FetchData összetevőjének.
  • A "Shared" projekt tartalmaz egy időjárás-előrejelzési osztályt WeatherForecast.cs, amely a "Client" és a "Server" projektek időjárási adatait jelöli.

Blazor WebAssembly

Blazor WebAssembly projektsablon: blazorwasm

A Blazor WebAssembly sablon létrehozza az Blazor WebAssembly-alkalmazások kezdeti fájljait és könyvtárstruktúráját. Az alkalmazás egy FetchData összetevőhöz tartozó bemutató kóddal van feltöltve, amely egy statikus objektumból, weather.jsonés egy Counter összetevővel való felhasználói interakcióból tölt be adatokat.

  • Pages mappa: A Blazor alkalmazás útvonalazható Razor összetevőit (.razor) tartalmazza. Az egyes oldalak útvonala a @page irányelvvel van megadva. A sablon a következő összetevőket tartalmazza:

    • Counter összetevő (Counter.razor): Implementálja a Számláló lapot.
    • FetchData összetevő (FetchData.razor): Implementálja az Adatbeolvasás lapot.
    • Index összetevő (Index.razor): Implementálja a Home lapot.

  • Properties mappa: a fejlesztési környezet konfigurációjának tárolása a launchSettings.json fájlban.

  • Shared mappa: A következő megosztott összetevőket és stíluslapokat tartalmazza:

    • MainLayout összetevő (MainLayout.razor): Az alkalmazás elrendezési összetevő.
    • MainLayout.razor.css: Az alkalmazás fő elrendezésének stíluslapja.
    • NavMenu összetevő (NavMenu.razor): Oldalsávos navigációt valósít meg. Tartalmazza a NavLink összetevő (NavLink), amely más Razor összetevőkre mutató navigációs hivatkozásokat jelenít meg. A NavLink összetevő automatikusan jelzi a kijelölt állapotot az összetevő betöltésekor, ami segít a felhasználónak megérteni, hogy melyik összetevő jelenik meg jelenleg.
    • NavMenu.razor.css: Az alkalmazás navigációs menüjének stíluslapja.
    • SurveyPrompt összetevő (SurveyPrompt.razor): Blazor felmérési összetevő.

  • wwwroot mappa: Az alkalmazásnak a webgyökér mappája, amely tartalmazza az alkalmazás nyilvános statikus erőforrásait, a konfigurációs beállításokfájljait, valamint a környezeti alkalmazásbeállítások appsettings.json fájljait. A index.html weblap az alkalmazás HTML-lapként implementált gyökéroldala:

    • Amikor az alkalmazás bármely lapját először kérik, a rendszer megjeleníti és visszaadja ezt a lapot a válaszban.
    • A lap megadja, hogy hol kerül megjelenítésre a gyökér App komponens. Az összetevő a div DOM elem helyén jelenik meg, idapp (<div id="app">Loading...</div>).

  • _Imports.razor: Az alkalmazás összetevőibe belefoglalandó általános Razor irányelveket (.razor), például @using névterekre vonatkozó irányelveket tartalmaz.

  • App.razor: Az alkalmazás fő összetevője, amely az ügyféloldali útválasztást a Router összetevő használatával állítja be. A Router összetevő elfogja a böngésző navigációt, és megjeleníti a kért címnek megfelelő lapot.

  • Program.cs: A WebAssembly-gazdagépet beállító alkalmazás belépési pontja:

    • A App összetevő az alkalmazás gyökérösszetevője. A App összetevőt a div DOM-elemként adják meg a gyökérösszetevő-gyűjtemény (builder.RootComponents.Add<App>("#app")) számára, idapp értékkel (<div id="app">Loading...</div> a wwwroot/index.html-ben).
    • Szolgáltatások vannak hozzáadva és konfigurálva (például builder.Services.AddSingleton<IMyDependency, MyDependency>()).

További fájlok és mappák jelenhetnek meg egy Blazor WebAssembly projektsablonból létrehozott alkalmazásban, ha további beállításokat konfigurál. Például egy ASP.NET Core Identity alkalmazás létrehozása további erőforrásokat tartalmaz a hitelesítési és engedélyezési funkciókhoz.

Egy üzemeltetett Blazor WebAssembly megoldás a következő ASP.NET Core-projekteket tartalmazza:

  • "Client": A Blazor WebAssembly alkalmazás.
  • "Server": Az Blazor WebAssembly alkalmazást és az időjárási adatokat az ügyfeleknek kiszolgáló alkalmazás.
  • "Shared": Olyan projekt, amely közös osztályokat, metódusokat és erőforrásokat tart fenn.

A megoldás a Visual Studio Blazor WebAssembly projektsablonjából jön létre a ASP.NET Core Hosted jelölőnégyzet bejelölésével vagy a .NET CLI dotnet new blazorwasm parancsával a -ho|--hosted beállítással. További információért lásd: ASP.NET Core Blazoreszközkészlete.

Az ügyféloldali alkalmazás projektstruktúrája egy üzemeltetett Blazor Webassembly-megoldásban ("Client" projekt) ugyanaz, mint az önálló Blazor WebAssembly-alkalmazások projektstruktúrája. További fájlok egy üzemeltetett Blazor WebAssembly megoldásban:

  • A "Server" projekt tartalmaz egy időjárás-előrejelzési vezérlőt Controllers/WeatherForecastController.cs, amely időjárási adatokat ad vissza a "Client" projekt FetchData összetevőjének.
  • A "Shared" projekt tartalmaz egy időjárás-előrejelzési osztályt WeatherForecast.cs, amely a "Client" és a "Server" projektek időjárási adatait jelöli.

Blazor WebAssembly

Blazor WebAssembly projektsablon: blazorwasm

A Blazor WebAssembly sablon létrehozza az Blazor WebAssembly-alkalmazások kezdeti fájljait és könyvtárstruktúráját. Az alkalmazás egy FetchData összetevőhöz tartozó bemutató kóddal van feltöltve, amely egy statikus objektumból, weather.jsonés egy Counter összetevővel való felhasználói interakcióból tölt be adatokat.

  • Pages mappa: A Blazor alkalmazás irányítható Razor összetevőit (.razor) tartalmazza. Az egyes oldalak útvonala a @page irányelvvel van megadva. A sablon a következő összetevőket tartalmazza:

    • Counter összetevő (Counter.razor): Implementálja a Számláló lapot.
    • FetchData összetevő (FetchData.razor): Implementálja az Adatbeolvasás lapot.
    • Index összetevő (Index.razor): Implementálja a Home lapot.

  • Properties mappa: fejlesztési környezet konfigurációs tárolja a launchSettings.json fájlban.

  • Shared mappa: A következő megosztott összetevőket tartalmazza:

    • MainLayout összetevő (MainLayout.razor): Az alkalmazás elrendezési összetevő.
    • NavMenu összetevő (NavMenu.razor): Oldalsávos navigációt valósít meg. Tartalmazza a NavLink összetevő (NavLink), amely más Razor összetevőkre mutató navigációs hivatkozásokat jelenít meg. A NavLink összetevő automatikusan jelzi a kijelölt állapotot az összetevő betöltésekor, ami segít a felhasználónak megérteni, hogy melyik összetevő jelenik meg jelenleg.
    • SurveyPrompt összetevő (SurveyPrompt.razor): Blazor felmérési összetevő.

  • wwwroot mappa: Az alkalmazás nyilvános statikus eszközeit tartalmazó webgyökér mappa, beleértve a appsettings.json fájlokat és a környezeti alkalmazásbeállításokat a konfigurációs beállításokszámára. A index.html weblap az alkalmazás HTML-lapként implementált gyökéroldala:

    • Amikor az alkalmazás bármely lapját először kérik, a rendszer megjeleníti és visszaadja ezt a lapot a válaszban.
    • Az oldal meghatározza, hogy hol van megjelenítve a gyökér App összetevő. Az összetevő a app DOM elem (<app>Loading...</app>) helyén jelenik meg.

  • _Imports.razor: Az alkalmazás összetevőibe belefoglalandó általános Razor irányelveket (.razor), például @using névterekre vonatkozó irányelveket tartalmaz.

  • App.razor: Az alkalmazás fő összetevője, amely az ügyféloldali útválasztást a Router összetevő használatával állítja be. A Router összetevő elfogja a böngésző navigációt, és megjeleníti a kért címnek megfelelő lapot.

  • Program.cs: A WebAssembly-gazdagépet beállító alkalmazás belépési pontja:

    • A App összetevő az alkalmazás gyökérösszetevője. A App összetevő a gyökérösszetevő-gyűjtemény (builder.RootComponents.Add<App>("app")) részére app DOM-elemként van megadva (<app>Loading...</app>-ban a wwwroot/index.html-ban).
    • Szolgáltatások vannak hozzáadva és konfigurálva (például builder.Services.AddSingleton<IMyDependency, MyDependency>()).

További fájlok és mappák jelenhetnek meg egy Blazor WebAssembly projektsablonból létrehozott alkalmazásban, ha további beállításokat konfigurál. Például az ASP.NET Core Identity segítségével létrehozott alkalmazás tartalmazza a hitelesítési és engedélyezési funkciókhoz szükséges további eszközöket.

Egy üzemeltetett Blazor WebAssembly megoldás a következő ASP.NET Core-projekteket tartalmazza:

  • "Client": A Blazor WebAssembly alkalmazás.
  • "Server": Az Blazor WebAssembly alkalmazást és az időjárási adatokat az ügyfeleknek kiszolgáló alkalmazás.
  • "Shared": Olyan projekt, amely közös osztályokat, metódusokat és erőforrásokat tart fenn.

A megoldás a Visual Studio Blazor WebAssembly projektsablonjából jön létre a ASP.NET Core Hosted jelölőnégyzet bejelölésével vagy a .NET CLI dotnet new blazorwasm parancsával a -ho|--hosted beállítással. További információért lásd: ASP.NET Core eszközkészlet Blazor.

Az ügyféloldali alkalmazás projektstruktúrája egy üzemeltetett Blazor Webassembly-megoldásban ("Client" projekt) ugyanaz, mint az önálló Blazor WebAssembly-alkalmazások projektstruktúrája. További fájlok egy üzemeltetett Blazor WebAssembly megoldásban:

  • A "Server" projekt tartalmaz egy időjárás-előrejelzési vezérlőt Controllers/WeatherForecastController.cs, amely időjárási adatokat ad vissza a "Client" projekt FetchData összetevőjének.
  • A "Shared" projekt tartalmaz egy időjárás-előrejelzési osztályt WeatherForecast.cs, amely a "Client" és a "Server" projektek időjárási adatait jelöli.

A Blazor szkript helye

A Blazor szkript statikus webes objektumként szolgál automatikus tömörítéssel és ujjlenyomattal. További információ: ASP.NET Core Blazor statikus fájlok.

A Blazor szkript egy beágyazott erőforrásból lesz kiszolgálva a ASP.NET Core megosztott keretrendszerében.

A Blazor szkript a Components/App.razor fájlban található egy Blazor Web App-ban.

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

Egy Blazor Server alkalmazásban a Blazor szkript a Pages/_Host.cshtml fájlban található:

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

Egy Blazor Server alkalmazásban a Blazor szkript a Pages/_Host.cshtml fájlban található:

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

Egy Blazor Server alkalmazásban a Blazor szkript a Pages/_Layout.cshtml fájlban található:

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

Egy Blazor Server alkalmazásban a Blazor szkript a Pages/_Host.cshtml fájlban található:

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

Egy Blazor WebAssembly alkalmazásban a Blazor szkript tartalma a wwwroot/index.html fájlban található:

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

A <head> és <body> tartalom helye

Blazor Web App, <head> és <body> tartalma a Components/App.razor fájlban található.

Egy Blazor Server alkalmazásban <head> és <body> tartalom található a Pages/_Host.cshtml fájlban.

Egy Blazor Server alkalmazásban <head> és <body> tartalom található a Pages/_Layout.cshtml fájlban.

Egy Blazor Server alkalmazásban <head> és <body> tartalom található a Pages/_Host.cshtml fájlban.

Egy Blazor WebAssembly alkalmazásban <head> és <body> tartalom található a wwwroot/index.html fájlban.

Kettős Blazor Server/Blazor WebAssembly alkalmazás

Ha Blazor Server vagy Blazor WebAssembly alkalmazásként futtatható alkalmazást szeretne létrehozni, az egyik módszer az, hogy az összes alkalmazáslogikát és összetevőt egy Razor osztálykódtárba (RCL) helyezi, és az RCL-ra hivatkozik a különálló Blazor Server és Blazor WebAssembly projektekből. Az olyan gyakori szolgáltatások esetében, amelyek implementációi az üzemeltetési modelltől függően eltérnek, határozza meg a szolgáltatási felületeket az RCL-ben, és implementálja a szolgáltatásokat a Blazor Server és Blazor WebAssembly projektekben.

További erőforrások