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

ASP.NET Core Blazor projektstruktúra

Jegyzet

Ez nem a cikk legújabb verziója. Az aktuális kiadásról a cikk .NET 10-es verziójában olvashat.

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. A jelenlegi kiadáshoz tekintse meg a .NET 9 verziójú változatot ebben a cikkben.

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 kiszolgálóoldali és Blazor Server ügyféloldali Blazor WebAssembly renderelés, a streamelt renderelés, a továbbfejlesztett navigáció és űrlapkezelés erősségeit, valamint az interaktivitás összetevőnkénti Blazor Server vagy Blazor WebAssembly akár összetevőnkénti 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.
  • Ez a MainLayout.razor.css az alkalmazás fő elrendezéséhez tartozó, az összetevő közvetlen közelében lévő stíluslap.
  • 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.
  • Ez NavMenu.razor.css az alkalmazás navigációs menüjének csoportosított stíluslapja.
  • Az ReconnectModal összetevő a felhasználói felületen a kiszolgálóoldali kapcsolat állapotát tükrözi, és akkor jelenik meg, ha az alkalmazás interaktív renderelési módja interaktív kiszolgáló vagy interaktív automatikus. További információ: ASP.NET Core BlazorSignalR útmutató.
  • Ez a ReconnectModal.razor.css az ReconnectModal összetevőhöz tartozó stíluslap.
  • Ez ReconnectModal.razor.js az összetevő kapcsolt JavaScript-fájlja ReconnectModal.
  • A MainLayout összetevő (MainLayout.razor) az alkalmazás elrendezési összetevője.
  • Ez a MainLayout.razor.css az alkalmazás fő elrendezéséhez tartozó, az összetevő közvetlen közelében lévő stíluslap.
  • 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.
  • Ez NavMenu.razor.css az alkalmazás navigációs menüjének csoportosított 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 _Imports.razor projektek .Client 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 -lp https (vagy --launch-profile https) parancsnak nem kell átadnia a dotnet watch vagy dotnet run 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 appsettings.Development.json projektben található alkalmazás beállítási fájljai (appsettings.json, .Client) 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ó projekt .Client 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 projektsablonjai: 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 WeatherForecastWeatherForecastService 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 Razor alkalmazás gyökér Blazor Server 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. 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 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 WeatherForecastWeatherForecastService 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 Razor alkalmazás gyökér Blazor Server 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).
    • _Layout.cshtml: Az alkalmazás _Host.cshtml gyökérlapjának elrendezési oldala.
    • 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. 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 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 WeatherForecastWeatherForecastService 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 Razor alkalmazás gyökér Blazor Server 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 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 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.
    • 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 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. 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 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 WeatherForecastWeatherForecastService 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 Razor alkalmazás gyökér Blazor Server 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 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 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 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.
    • 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 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. 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.

Ö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 frontend 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 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 -lp https (vagy --launch-profile https) parancsnak nem kell átadnia a dotnet watch vagy dotnet run 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ő azdivgyökérösszetevő-gyűjteményhez tartozik, és id DOM-elemként van megadva, egy app<div id="app">Loading...</div> ( wwwroot/index.htmlbuilder.RootComponents.Add<App>("#app") ) 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 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 WebAssembly

Blazor WebAssembly projektsablonjai: 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 eszközkészlet.
  • 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: 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.
    • 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.
    • 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>).

  • _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ő azdivgyökérösszetevő-gyűjteményhez tartozik, és id DOM-elemként van megadva, egy app<div id="app">Loading...</div> ( wwwroot/index.htmlbuilder.RootComponents.Add<App>("#app") ) 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 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.

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 -ho|--hosted parancsával a dotnet new blazorwasm beállítással. További információ: Eszközkészlet az ASP.NET Core számára 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.

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

  • _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ő azdivgyökérösszetevő-gyűjteményhez tartozik, és id DOM-elemként van megadva, egy app<div id="app">Loading...</div> ( wwwroot/index.htmlbuilder.RootComponents.Add<App>("#app") ) 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 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.

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 -ho|--hosted parancsával a dotnet new blazorwasm beállítással. További információ: Eszközkészlet az ASP.NET Core számára 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.

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

  • _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ő azdivgyökérösszetevő-gyűjteményhez tartozik, és id DOM-elemként van megadva, egy app<div id="app">Loading...</div> ( wwwroot/index.htmlbuilder.RootComponents.Add<App>("#app") ) 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 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.

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 -ho|--hosted parancsával a dotnet new blazorwasm beállítással. További információ: Eszközkészlet az ASP.NET Core számára 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.

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: 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.
    • 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 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.
    • A lap megadja, hogy hol jelenik meg a gyökér App komponens. 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 (app) részére <app>Loading...</app> DOM-elemként van megadva (wwwroot/index.html-ban a builder.RootComponents.Add<App>("app")-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 alkalmazás létrehozása további eszközöket is 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 -ho|--hosted parancsával a dotnet new blazorwasm beállítással. További információ: Eszközkészlet az ASP.NET Core számára 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ókért lásd: ASP.NET Core Blazor statikus fájlok.

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

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

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

A Blazor Web App szkript a Blazor fájlban található egy Components/App.razor-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>

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

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

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

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

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

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

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

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 Web App vagy egy Blazor Server alkalmazás esetében a projektnek tartalmaznia kell legalább egy Razor összetevőfájlt (.razor) annak érdekében, hogy a Blazor szkript automatikusan szerepeljen az alkalmazás közzétételekor. Ha a projekt nem tartalmaz legalább egy Razor összetevőt, állítsa az RequiresAspNetWebAssets MSBuild tulajdonságot true az alkalmazás projektfájljában úgy, hogy tartalmazza a szkriptet Blazor :

<RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

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

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

A(z) alkalmazás közzétételekor a rendszer automatikusan lecseréli a {fingerprint} helyőrzőt egy egyedi kivonatra a gyorsítótár frissítésének kikényszerítése érdekében.

<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

  • Last updated on