Dela via

ASP.NET Core Blazor projektstruktur

  • Artikel

Not

Det här är inte den senaste versionen av den här artikeln. Den aktuella versionen finns i .NET 9-versionen av den här artikeln.

Varning

Den här versionen av ASP.NET Core stöds inte längre. Mer information finns i .NET och .NET Core Support Policy. Den aktuella versionen finns i den .NET 9-versionen av den här artikeln.

Viktig

Den här informationen gäller en förhandsversionsprodukt som kan ändras avsevärt innan den släpps kommersiellt. Microsoft lämnar inga garantier, uttryckliga eller underförstådda, med avseende på den information som tillhandahålls här.

För den aktuella utgåvan, se .NET 9-versionen av den här artikeln.

I den här artikeln beskrivs de filer och mappar som utgör en Blazor app som genererats från en Blazor projektmall.

Blazor Web App

Blazor Web App projektmall: blazor

Projektmallen Blazor Web App innehåller en enda startpunkt för att använda Razor komponenter (.razor) för att skapa alla typer av webbgränssnitt, både renderade på serversidan och renderade på klientsidan. Den kombinerar fördelarna med befintliga Blazor Server och Blazor WebAssembly värdmodeller med återgivning på serversidan, återgivning av direktuppspelning, förbättrad navigering och formulärhantering samt möjligheten att lägga till interaktivitet med hjälp av antingen Blazor Server eller Blazor WebAssembly per komponent.

Om både återgivning på klientsidan (CSR) och interaktiv återgivning på serversidan (interaktiv SSR) väljs när appen skapas använder projektmallen läget Interaktiv automatisk återgivning. Det automatiska återgivningsläget använder inledningsvis interaktiv SSR medan .NET-apppaketet och körningen laddas ned till webbläsaren. När .NET WebAssembly-miljön har aktiverats växlar återgivningen till CSR (Client-Side Rendering).

Mallen Blazor Web App möjliggör både statisk och interaktiv återgivning på serversidan med hjälp av ett enda projekt. Om du även aktiverar interaktiv WebAssembly-återgivning innehåller projektet ytterligare ett klientprojekt (.Client) för dina WebAssembly-baserade komponenter. De inbyggda utdata från klientprojektet laddas ned till webbläsaren och körs på klienten. Komponenter som använder interaktiva webassembly- eller interaktiva autoåtergivningslägen måste finnas i .Client projektet.

Komponentmappstrukturen för .Client-projektet skiljer sig från Blazor Web Apphuvudmappstrukturen för projektet eftersom huvudprojektet är ett standardprojekt ASP.NET Core. Huvudprojektet måste ta hänsyn till andra tillgångar för ASP.NET Core-projekt som inte är relaterade till Blazor. Du är välkommen att använda vilken komponentmappstruktur du vill i .Client projektet. Du kan spegla komponentmapplayouten för huvudprojektet i .Client projekt om du vill. Observera att namnområden kan kräva justeringar för till exempel layoutfiler om du flyttar komponenter till andra mappar än vad som används i projektmallen.

Mer information om komponenter och återgivningslägen finns i ASP.NET Core Razor-komponenter och ASP.NET Core Blazor återgivningslägen artiklar.

Baserat på det interaktiva återgivningsläge som valts när appen skapades finns mappen Layout antingen i serverprojektet i mappen Components eller i roten för .Client-projektet. Mappen innehåller följande layoutkomponenter och formatmallar:

  • Komponenten MainLayout (MainLayout.razor) är appens layoutkomponent.
  • MainLayout.razor.css är formatmallen för appens huvudlayout.
  • Komponenten NavMenu (NavMenu.razor) implementerar sidofältsnavigering. Komponenten innehåller NavLink komponenter (NavLink), som renderar navigeringslänkar till andra Razor komponenter. Komponenten NavLink anger för användaren vilken komponent som visas för närvarande.
  • NavMenu.razor.css är formatmallen för appens navigeringsmeny.

Komponenten Routes (Routes.razor) finns antingen i serverprojektet eller i .Client-projektet och konfigurerar routning med hjälp av komponenten Router. För interaktiva komponenter på klientsidan fångar den Router komponenten upp webbläsarnavigering och återger sidan som matchar den begärda adressen.

Den Components mappen för serverprojektet innehåller appens Razor komponenter på serversidan. Delade komponenter placeras ofta i roten i mappen Components, medan layout- och sidkomponenter vanligtvis placeras i mappar i mappen Components.

Mappen Components/Pages för serverprojektet innehåller appens dirigerbara Razor komponenter på serversidan. Vägen för varje sida anges med hjälp av @page-direktivet.

Komponenten App (App.razor) är rotkomponenten i appen med HTML-<head>-markering, Routes-komponenten och taggen Blazor<script>. Rotkomponenten är den första komponenten som appen läser in.

En _Imports.razor fil i vart och ett av server- och .Client projekt innehåller gemensamma Razor direktiv för Razor komponenter i något av projekten, till exempel @using direktiv för namnområden.

Den Properties mappen för serverprojektet innehåller konfiguration av utvecklingsmiljön i filen launchSettings.json.

Not

Profilen http föregår profilen https i launchSettings.json-filen. När en app körs med .NET CLI körs appen på en HTTP-slutpunkt eftersom den första profilen som hittas är http. Profilordningen underlättar övergången av https för Linux- och macOS-användare. Om du föredrar att starta appen med .NET CLI utan att behöva skicka alternativet -lp https eller --launch-profile https till kommandot dotnet watch (eller dotnet run) placerar du helt enkelt https profilen ovanför http profilen i filen.

Den wwwroot mappen för serverprojektet är mappen Web Root för serverprojektet som innehåller appens offentliga statiska tillgångar.

Den Program.cs filen för serverprojektet är projektets startpunkt som konfigurerar ASP.NET Core-webbprogrammet värd och innehåller appens startlogik, inklusive tjänstregistreringar, konfiguration, loggning och pipeline för bearbetning av begäranden:

Appinställningsfilerna (appsettings.Development.json, appsettings.json) i antingen servern eller .Client-projektet tillhandahåller konfigurationsinställningar. Inställningsfilerna ligger i roten av serverprojektet. I .Client-projektet används inställningsfiler från mappen Web Root, wwwroot.

I .Client projektet:

  • Mappen Pages innehåller dirigerbara komponenter på klientsidan Razor. Vägen för varje sida anges med hjälp av @page-direktivet.

  • Mappen wwwroot är mappen Web Root för .Client-projektet som innehåller appens offentliga statiska tillgångar.

  • Den Program.cs filen är projektets startpunkt som konfigurerar WebAssembly-värd och innehåller projektets startlogik, inklusive tjänstregistreringar, konfiguration, loggning och pipeline för bearbetning av begäranden.

Ytterligare filer och mappar kan visas i en app som skapats från en Blazor Web App projektmall när ytterligare alternativ har konfigurerats. Om du till exempel genererar en app med ASP.NET Core Identity ingår ytterligare resurser för autentiserings- och auktoriseringsfunktioner.

Blazor Server

Blazor Server projektmallar: blazorserver, blazorserver-empty

De Blazor Server mallarna skapar de första filerna och katalogstrukturen för en Blazor Server app:

  • Om blazorserver mallen används fylls appen i med följande:
    • Demonstrationskod för en FetchData komponent som läser in data från en väderprognostjänst (WeatherForecastService) och användarinteraktion med en Counter komponent.
    • Bootstrap frontend-verktyg.
  • Om blazorserver-empty mallen används skapas appen utan demonstrationskod och Bootstrap.

Projektstruktur:

  • Data mapp: Innehåller WeatherForecast-klassen och implementeringen av WeatherForecastService som ger exempel på väderdata till appens FetchData komponent.

  • Pages mapp: Innehåller Blazor-appens dirigerbara Razor komponenter (.razor) och rotsidan Razor i en Blazor Server app. Vägen för varje sida anges med hjälp av @page-direktivet. Mallen innehåller följande:

    • _Host.cshtml: Rotsidan för appen som implementeras som en Razor sida:
      • När någon sida i appen ursprungligen begärs återges den här sidan och returneras i svaret.
      • Sidan Host anger var rotkomponenten App (App.razor) återges.
    • Counter komponent (Counter.razor): Implementerar sidan Räknar.
    • Error komponent (Error.razor): Renderas när ett ohanterat undantag inträffar i appen.
    • FetchData komponent (FetchData.razor): Implementerar sidan Hämta data.
    • Index komponent (Index.razor): Implementerar sidan Home.

  • Properties mapp: Innehåller konfiguration av utvecklingsmiljön i filen launchSettings.json.

  • Shared mapp: Innehåller följande delade komponenter och formatmallar:

    • MainLayout-komponent (MainLayout.razor): Appens -layoutkomponent.
    • MainLayout.razor.css: Formatmall för appens huvudlayout.
    • NavMenu komponent (NavMenu.razor): Implementerar navigering i sidofältet. Innehåller NavLink komponenten (NavLink), som återger navigeringslänkar till andra Razor komponenter. Komponenten NavLink anger automatiskt ett valt tillstånd när komponenten läses in, vilket hjälper användaren att förstå vilken komponent som visas för närvarande.
    • NavMenu.razor.css: Formatmall för appens navigeringsmeny.
    • SurveyPrompt-komponent (SurveyPrompt.razor): Blazor-undersökningskomponent.

  • wwwroot mapp: mappen Web Root för appen som innehåller appens offentliga statiska tillgångar.

  • _Imports.razor: Innehåller vanliga Razor direktiv som ska ingå i appens komponenter (.razor), till exempel @using direktiv för namnområden.

  • App.razor: Rotkomponenten i appen som konfigurerar routning på klientsidan med hjälp av komponenten Router. Komponenten Router fångar upp webbläsarnavigering och återger sidan som matchar den begärda adressen.

  • appsettings.json och miljöinställningsfiler för appar: Tillhandahåll konfigurationsinställningar för appen.

  • Program.cs: Appens startpunkt som konfigurerar ASP.NET Core -värd och innehåller appens startlogik, inklusive tjänstregistreringar och pipelinekonfiguration för bearbetning av begäranden:

    • Anger appens beroendeinmatning (DI) tjänster. Tjänster läggs till genom att anropa AddServerSideBlazoroch WeatherForecastService läggs till i tjänstbehållaren för användning av exempelkomponenten FetchData.
    • Konfigurerar appens pipeline för hantering av begäranden:
      • MapBlazorHub anropas för att konfigurera en slutpunkt för realtidsanslutningen till webbläsaren. Anslutningen skapas med SignalR, vilket är ett ramverk för att lägga till webbfunktioner i realtid i appar.
      • MapFallbackToPage("/_Host") anropas för att konfigurera rotsidan för appen (Pages/_Host.cshtml) och aktivera navigering.

Ytterligare filer och mappar kan visas i en app som skapats från en Blazor Server projektmall när ytterligare alternativ har konfigurerats. Om du till exempel genererar en app med ASP.NET Core Identity, ingår ytterligare resurser för funktioner som autentisering och auktorisering.

Blazor Server projektmall: blazorserver

Mallen Blazor Server skapar de första filerna och katalogstrukturen för en Blazor Server app. Appen fylls i med demonstrationskod för en FetchData komponent som läser in data från en registrerad tjänst, WeatherForecastServiceoch användarinteraktion med en Counter komponent.

  • Data mapp: Innehåller WeatherForecast-klassen och implementeringen av WeatherForecastService som ger exempel på väderdata till appens FetchData komponent.

  • Pages mapp: Innehåller Blazor-appens dirigerbara Razor komponenter (.razor) och rotsidan Razor i en Blazor Server app. Vägen för varje sida anges med hjälp av @page-direktivet. Mallen innehåller följande:

    • _Host.cshtml: Rotsidan för appen som implementeras som en Razor sida:
      • När någon sida i appen ursprungligen begärs återges den här sidan och returneras i svaret.
      • Värdsidan anger var rotkomponenten App (App.razor) renderas.
    • _Layout.cshtml: Layoutsidan för appens _Host.cshtml rotsida.
    • Counter-komponent (Counter.razor): Implementerar sidan räknare.
    • Error komponent (Error.razor): Renderas när ett ohanterat undantag inträffar i appen.
    • FetchData komponent (FetchData.razor): Implementerar sidan Hämta data.
    • Index komponent (Index.razor): Implementerar sidan Home.

  • Properties mapp: Filen launchSettings.json innehåller konfiguration av utvecklingsmiljön .

  • Shared mapp: Innehåller följande delade komponenter och formatmallar:

    • MainLayout komponent (MainLayout.razor): Appens layoutkomponent.
    • MainLayout.razor.css: Formatmall för appens huvudlayout.
    • NavMenu komponent (NavMenu.razor): Implementerar navigering i sidofältet. Innehåller NavLink komponenten (NavLink), som återger navigeringslänkar till andra Razor komponenter. Komponenten NavLink anger automatiskt ett valt tillstånd när komponenten läses in, vilket hjälper användaren att förstå vilken komponent som visas för närvarande.
    • NavMenu.razor.css: Formatmall för appens navigeringsmeny.
    • SurveyPrompt komponent (SurveyPrompt.razor): Blazor undersökningskomponent.

  • wwwroot mapp: mappen Web Root för appen som innehåller appens offentliga statiska tillgångar.

  • _Imports.razor: Innehåller vanliga Razor direktiv som ska ingå i appens komponenter (.razor), till exempel @using direktiv för namnområden.

  • App.razor: Rotkomponenten i appen som konfigurerar routning på klientsidan med hjälp av komponenten Router. Komponenten Router fångar upp webbläsarnavigering och återger sidan som matchar den begärda adressen.

  • appsettings.json- och miljöappsinställningar: Ange konfigurationsinställningar för appen.

  • Program.cs: Appens startpunkt som konfigurerar ASP.NET Core -värd och innehåller appens startlogik, inklusive tjänstregistreringar och pipelinekonfiguration för bearbetning av begäranden:

    • Anger appens beroendeinmatning (DI) tjänster. Tjänster läggs till genom att anropa AddServerSideBlazoroch WeatherForecastService läggs till i tjänstcontainern för användning med FetchData-komponenten som exempel.
    • Konfigurerar appens pipeline för hantering av begäranden:
      • MapBlazorHub anropas för att konfigurera en slutpunkt för realtidsanslutningen till webbläsaren. Anslutningen skapas med SignalR, vilket är ett ramverk för att lägga till webbfunktioner i realtid i appar.
      • MapFallbackToPage("/_Host") anropas för att konfigurera rotsidan för appen (Pages/_Host.cshtml) och aktivera navigering.

Ytterligare filer och mappar kan visas i en app som skapats från en Blazor Server projektmall när ytterligare alternativ har konfigurerats. Om du till exempel genererar en app med ASP.NET Core Identity inkluderar den ytterligare resurser för autentiserings- och auktoriseringsfunktioner.

Blazor Server projektmall: blazorserver

Mallen Blazor Server skapar de första filerna och katalogstrukturen för en Blazor Server app. Appen fylls i med demonstrationskod för en FetchData komponent som läser in data från en registrerad tjänst, WeatherForecastServiceoch användarinteraktion med en Counter komponent.

  • Data mapp: Innehåller WeatherForecast-klassen och implementeringen av WeatherForecastService som ger exempel på väderdata till appens FetchData komponent.

  • Pages mapp: Innehåller Blazor-appens dirigerbara Razor komponenter (.razor) och rotsidan Razor i en Blazor Server app. Vägen för varje sida anges med hjälp av @page-direktivet. Mallen innehåller följande:

    • _Host.cshtml: Rotsidan för appen som implementeras som en Razor sida:
      • När någon sida i appen ursprungligen begärs återges den här sidan och returneras i svaret.
      • Värdsidan anger var rotkomponenten App (App.razor) renderas.
    • Counter komponent (Counter.razor): Implementerar Räknarsidan.
    • Error komponent (Error.razor): Renderas när ett ohanterat undantag inträffar i appen.
    • FetchData komponent (FetchData.razor): Implementerar sidan Hämta data.
    • Index komponent (Index.razor): Implementerar sidan Home.

  • Properties mapp: Innehåller konfiguration av utvecklingsmiljön i filen launchSettings.json.

  • Shared mapp: Innehåller följande delade komponenter och formatmallar:

    • MainLayout-komponent (MainLayout.razor): Appens -layoutkomponent.
    • MainLayout.razor.css: Formatmall för appens huvudlayout.
    • NavMenu komponent (NavMenu.razor): Implementerar navigering i sidofältet. Innehåller NavLink komponenten (NavLink), som återger navigeringslänkar till andra Razor komponenter. Komponenten NavLink anger automatiskt ett valt tillstånd när komponenten läses in, vilket hjälper användaren att förstå vilken komponent som visas för närvarande.
    • NavMenu.razor.css: Formatmall för appens navigeringsmeny.
    • SurveyPrompt komponent (SurveyPrompt.razor): Blazor undersökningskomponent.

  • wwwroot mapp: mappen Web Root för appen som innehåller appens offentliga statiska tillgångar.

  • _Imports.razor: Innehåller vanliga Razor direktiv som ska ingå i appens komponenter (.razor), till exempel @using direktiv för namnområden.

  • App.razor: Rotkomponenten i appen som konfigurerar routning på klientsidan med hjälp av komponenten Router. Komponenten Router fångar upp webbläsarnavigering och återger sidan som matchar den begärda adressen.

  • appsettings.json och miljöinställningsfiler för appar: Ange konfigurationsinställningar för appen.

  • Program.cs: Appens startpunkt som konfigurerar ASP.NET Core -värd.

  • Startup.cs: Innehåller appens startlogik. Klassen Startup definierar två metoder:

    • ConfigureServices: Konfigurerar appens beroendeinmatning (DI) tjänster. Tjänster läggs till genom att anropa AddServerSideBlazor, och WeatherForecastService läggs till i tjänstcontainern för användning i exemplet FetchData-komponenten.
    • Configure: Konfigurerar appens pipeline för hantering av begäranden:
      • MapBlazorHub anropas för att konfigurera en slutpunkt för realtidsanslutningen till webbläsaren. Anslutningen skapas med SignalR, vilket är ett ramverk för att lägga till webbfunktioner i realtid i appar.
      • MapFallbackToPage("/_Host") anropas för att konfigurera rotsidan för appen (Pages/_Host.cshtml) och aktivera navigering.

Ytterligare filer och mappar kan visas i en app som skapats från en Blazor Server projektmall när ytterligare alternativ har konfigurerats. Om du till exempel genererar en app med ASP.NET Core Identity innehåller appen ytterligare resurser för autentiserings- och auktoriseringsfunktioner.

Blazor Server projektmall: blazorserver

Mallen Blazor Server skapar de första filerna och katalogstrukturen för en Blazor Server app. Appen fylls i med demonstrationskod för en FetchData komponent som läser in data från en registrerad tjänst, WeatherForecastServiceoch användarinteraktion med en Counter komponent.

  • Data mapp: Innehåller WeatherForecast-klassen och implementeringen av WeatherForecastService som ger exempel på väderdata till appens FetchData komponent.

  • Pages mapp: Innehåller Blazor-appens dirigerbara Razor komponenter (.razor) och rotsidan Razor i en Blazor Server app. Vägen för varje sida anges med hjälp av @page-direktivet. Mallen innehåller följande:

    • _Host.cshtml: Rotsidan för appen som implementeras som en Razor sida:
      • När någon sida i appen ursprungligen begärs återges den här sidan och returneras i svaret.
      • Sidan Värd anger var rotkomponenten App (App.razor) återges.
    • Counter komponent (Counter.razor): Implementerar Räknarsidan.
    • Error komponent (Error.razor): Renderas när ett ohanterat undantag inträffar i appen.
    • FetchData komponent (FetchData.razor): Implementerar sidan Hämta data.
    • Index komponent (Index.razor): Implementerar sidan Home.

  • Properties mapp: Innehåller konfiguration av utvecklingsmiljön i filen launchSettings.json.

  • Shared mapp: Innehåller följande delade komponenter:

    • MainLayout-komponent (MainLayout.razor): Appens layoutkomponent.
    • NavMenu komponent (NavMenu.razor): Implementerar navigering i sidofältet. Innehåller NavLink komponenten (NavLink), som återger navigeringslänkar till andra Razor komponenter. Komponenten NavLink anger automatiskt ett valt tillstånd när komponenten läses in, vilket hjälper användaren att förstå vilken komponent som visas för närvarande.
    • SurveyPrompt komponent (SurveyPrompt.razor): Blazor undersökningskomponent.

  • wwwroot mapp: mappen Web Root för appen som innehåller appens offentliga statiska tillgångar.

  • _Imports.razor: Innehåller vanliga Razor direktiv som ska ingå i appens komponenter (.razor), till exempel @using direktiv för namnområden.

  • App.razor: Rotkomponenten i appen som konfigurerar routning på klientsidan med hjälp av komponenten Router. Komponenten Router fångar upp webbläsarnavigering och återger sidan som matchar den begärda adressen.

  • appsettings.json- och miljöappsinställningar: Ange konfigurationsinställningar för appen.

  • Program.cs: Appens startpunkt som konfigurerar ASP.NET Core -värd.

  • Startup.cs: Innehåller appens startlogik. Klassen Startup definierar två metoder:

    • ConfigureServices: Konfigurerar appens beroendeinmatning (DI) tjänster. Tjänster läggs till genom att anropa AddServerSideBlazor, och WeatherForecastService läggs till i tjänstcontainern så att den kan användas av komponenten FetchData i exemplet.
    • Configure: Konfigurerar appens pipeline för hantering av begäranden:
      • MapBlazorHub anropas för att konfigurera en slutpunkt för realtidsanslutningen till webbläsaren. Anslutningen skapas med SignalR, vilket är ett ramverk för att lägga till webbfunktioner i realtid i appar.
      • MapFallbackToPage("/_Host") anropas för att konfigurera rotsidan för appen (Pages/_Host.cshtml) och aktivera navigering.

Ytterligare filer och mappar kan visas i en app som skapats från en Blazor Server projektmall när ytterligare alternativ har konfigurerats. Om du genererar en app med ASP.NET Core Identity inkluderas till exempel ytterligare resurser för autentiserings- och auktoriseringsfunktioner.

Fristående Blazor WebAssembly

Fristående Blazor WebAssembly projektmall: blazorwasm

Mallen Blazor WebAssembly skapar de första filerna och katalogstrukturen för en fristående Blazor WebAssembly app:

  • Om blazorwasm mallen används fylls appen i med följande:
    • Demonstrationskod för en Weather komponent som läser in data från en statisk tillgång (weather.json) och användarinteraktion med en Counter komponent.
    • Bootstrap frontend-verktyg.
  • Den blazorwasm mallen kan också genereras utan exempelsidor och formatering.

Projektstruktur:

  • Layout mapp: Innehåller följande layoutkomponenter och formatmallar:

    • MainLayout komponent (MainLayout.razor): Appens layoutkomponent.
    • MainLayout.razor.css: Formatmall för appens huvudlayout.
    • NavMenu komponent (NavMenu.razor): Implementerar navigering i sidofältet. Innehåller NavLink komponenten (NavLink), som återger navigeringslänkar till andra Razor komponenter. Komponenten NavLink anger automatiskt ett valt tillstånd när komponenten läses in, vilket hjälper användaren att förstå vilken komponent som visas för närvarande.
    • NavMenu.razor.css: Formatmall för appens navigeringsmeny.

  • Pages mapp: Innehåller Blazor-appens dirigerbara Razor-komponenter (.razor). Vägen för varje sida anges med hjälp av @page-direktivet. Mallen innehåller följande komponenter:

    • Counter komponent (Counter.razor): Implementerar sidan Räknaren.
    • Index komponent (Index.razor): Implementerar sidan Home.
    • Weather komponent (Weather.razor): Implementerar sidan Väder.

  • _Imports.razor: Innehåller vanliga Razor direktiv som ska ingå i appens komponenter (.razor), till exempel @using direktiv för namnområden.

  • App.razor: Rotkomponenten i appen som konfigurerar routning på klientsidan med hjälp av komponenten Router. Komponenten Router fångar upp webbläsarnavigering och återger sidan som matchar den begärda adressen.

  • Properties mapp: Innehåller konfiguration för utvecklingsmiljön i filen launchSettings.json.

    Obs!

    Profilen http föregår profilen https i launchSettings.json-filen. När en app körs med .NET CLI körs appen på en HTTP-slutpunkt eftersom den första profilen som hittas är http. Profilordningen underlättar övergången av https för Linux- och macOS-användare. Om du föredrar att starta appen med .NET CLI utan att behöva skicka alternativet -lp https eller --launch-profile https till kommandot dotnet watch (eller dotnet run) placerar du helt enkelt https profilen ovanför http profilen i filen.

  • wwwroot mapp: Mappen Web Root för appen som innehåller appens offentliga statiska resurser, inklusive appsettings.json och appens miljöinställningar för konfigurationsinställningar och exempel på väderdata (sample-data/weather.json). Den index.html webbsidan är rotsidan för appen som implementeras som en HTML-sida:

    • När någon sida i appen ursprungligen begärs återges den här sidan och returneras i svaret.
    • Sidan anger var rotkomponenten App återges. Komponenten återges på platsen för div DOM-elementet med en id av app (<div id="app">Loading...</div>).

  • Program.cs: Appens startpunkt som konfigurerar WebAssembly-värd:

    • Komponenten App är appens rotkomponent. Komponenten App anges som div DOM-element med en id av app (<div id="app">Loading...</div> i wwwroot/index.html) till rotkomponentsamlingen (builder.RootComponents.Add<App>("#app")).
    • Services läggs till och konfigureras (till exempel builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Ytterligare filer och mappar kan visas i en app som skapats från en Blazor WebAssembly projektmall när ytterligare alternativ har konfigurerats. Om du till exempel genererar en app med ASP.NET Core Identity, innehåller den ytterligare resurser för autentiserings- och auktoriseringsfunktioner.

Blazor WebAssembly

Blazor WebAssembly projektmallar: blazorwasm, blazorwasm-empty

De Blazor WebAssembly mallarna skapar de första filerna och katalogstrukturen för en Blazor WebAssembly app:

  • Om blazorwasm mallen används fylls appen i med följande:
    • Demonstrationskod för en FetchData komponent som läser in data från en statisk tillgång (weather.json) och användarinteraktion med en Counter komponent.
    • Bootstrap frontend-verktyg.
  • Om blazorwasm-empty mallen används skapas appen utan demonstrationskod och Bootstrap.

Projektstruktur:

  • Pages mapp: Innehåller Blazor-appens dirigerbara Razor-komponenter (.razor). Vägen för varje sida anges med hjälp av @page-direktivet. Mallen innehåller följande komponenter:

    • Counter komponent (Counter.razor): Implementerar räknarsidan.
    • FetchData komponent (FetchData.razor): Implementerar sidan Hämta data.
    • Index komponent (Index.razor): Implementerar sidan Home.

  • mapp: I filen innehåller utvecklingsmiljökonfigurationen .

  • Shared mapp: Innehåller följande delade komponenter och formatmallar:

    • MainLayout komponent (MainLayout.razor): Appens layoutkomponent.
    • MainLayout.razor.css: Formatmall för appens huvudlayout.
    • NavMenu komponent (NavMenu.razor): Implementerar navigering i sidofältet. Innehåller NavLink komponenten (NavLink), som återger navigeringslänkar till andra Razor komponenter. Komponenten NavLink anger automatiskt ett valt tillstånd när komponenten läses in, vilket hjälper användaren att förstå vilken komponent som visas för närvarande.
    • NavMenu.razor.css: Formatmall för appens navigeringsmeny.
    • SurveyPrompt komponent (SurveyPrompt.razor) (ASP.NET Core i .NET 7 eller tidigare): Blazor undersökningskomponent.

  • wwwroot mapp: Mappen Web Root för appen som innehåller appens offentliga statiska resurser, inklusive appsettings.json och inställningsfiler för miljöappar för konfigurationsinställningar. Den index.html webbsidan är rotsidan för appen som implementeras som en HTML-sida:

    • När någon sida i appen ursprungligen begärs återges den här sidan och returneras i svaret.
    • Sidan anger var rotkomponenten App återges. Komponenten återges på platsen för div DOM-elementet med en id av app (<div id="app">Loading...</div>).

  • _Imports.razor: Innehåller vanliga Razor direktiv som ska ingå i appens komponenter (.razor), till exempel @using direktiv för namnområden.

  • App.razor: Rotkomponenten i appen som konfigurerar routning på klientsidan med hjälp av komponenten Router. Komponenten Router fångar upp webbläsarnavigering och återger sidan som matchar den begärda adressen.

  • Program.cs: Appens startpunkt som konfigurerar WebAssembly-värd:

    • Komponenten App är appens rotkomponent. Komponenten App anges som div DOM-element med en id av app (<div id="app">Loading...</div> i wwwroot/index.html) till rotkomponentsamlingen (builder.RootComponents.Add<App>("#app")).
    • Services läggs till och konfigureras (till exempel builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Ytterligare filer och mappar kan visas i en app som skapats från en Blazor WebAssembly projektmall när ytterligare alternativ har konfigurerats. Om du till exempel genererar en app med ASP.NET Core Identity, inkluderas ytterligare resurser för autentiserings- och auktoriseringsfunktioner.

En värdbaserad Blazor WebAssembly lösning innehåller följande ASP.NET Core-projekt:

  • "Client": Appen Blazor WebAssembly.
  • "Server": En app som hanterar Blazor WebAssembly-appen och väderdata till klienter.
  • "Shared": Ett projekt som underhåller vanliga klasser, metoder och resurser.

Lösningen genereras från Blazor WebAssembly-projektmallen i Visual Studio med kryssrutan ASP.NET Core Hosted markerad eller med alternativet -ho|--hosted med kommandot .NET CLI:s dotnet new blazorwasm. Mer information finns i Tooling for ASP.NET Core Blazor.

Projektstrukturen för appen på klientsidan i en värdbaserad Blazor Webassembly-lösning ("Client" projekt) är samma som projektstrukturen för en fristående Blazor WebAssembly app. Ytterligare filer i en värdbaserad Blazor WebAssembly lösning:

  • Projektet "Server" innehåller en väderprognoskontrollant på Controllers/WeatherForecastController.cs som returnerar väderdata till projektets FetchData komponent "Client".
  • Projektet "Shared" innehåller en väderprognosklass på WeatherForecast.cs som representerar väderdata för projekten "Client" och "Server".

Blazor WebAssembly

Blazor WebAssembly projektmall: blazorwasm

Mallen Blazor WebAssembly skapar de första filerna och katalogstrukturen för en Blazor WebAssembly app. Appen fylls i med demonstrationskod för en FetchData komponent som läser in data från en statisk tillgång, weather.jsonoch användarinteraktion med en Counter komponent.

  • Pages mapp: Innehåller Blazor-appens dirigerbara Razor-komponenter (.razor). Vägen för varje sida anges med hjälp av @page-direktivet. Mallen innehåller följande komponenter:

    • Counter komponent (Counter.razor): Implementerar räknarsidan.
    • FetchData komponent (FetchData.razor): Implementerar sidan Hämta data.
    • Index komponent (Index.razor): Implementerar sidan Home.

  • Properties mapp: Innehåller konfiguration av utvecklingsmiljön i filen launchSettings.json.

  • Shared mapp: Innehåller följande delade komponenter och formatmallar:

    • MainLayout komponent (MainLayout.razor): Appens layoutkomponent.
    • MainLayout.razor.css: Formatmall för appens huvudlayout.
    • NavMenu komponent (NavMenu.razor): Implementerar navigering i sidofältet. Innehåller NavLink komponenten (NavLink), som återger navigeringslänkar till andra Razor komponenter. Komponenten NavLink anger automatiskt ett valt tillstånd när komponenten läses in, vilket hjälper användaren att förstå vilken komponent som visas för närvarande.
    • NavMenu.razor.css: Formatmall för appens navigeringsmeny.
    • SurveyPrompt-komponenten (SurveyPrompt.razor): Blazor-undersökningskomponent.

  • wwwroot: Mappen Web Root för appen innehåller appens offentliga statiska tillgångar, inklusive appsettings.json och miljöappsinställningar för konfigurationsinställningar. Den index.html webbsidan är rotsidan för appen som implementeras som en HTML-sida:

    • När någon sida i appen ursprungligen begärs återges den här sidan och returneras i svaret.
    • Sidan anger var rotkomponenten App återges. Komponenten återges på platsen för div DOM-elementet med en id av app (<div id="app">Loading...</div>).

  • _Imports.razor: Innehåller vanliga Razor direktiv som ska ingå i appens komponenter (.razor), till exempel @using direktiv för namnområden.

  • App.razor: Rotkomponenten i appen som konfigurerar routning på klientsidan med hjälp av komponenten Router. Komponenten Router fångar upp webbläsarnavigering och återger sidan som matchar den begärda adressen.

  • Program.cs: Appens startpunkt som konfigurerar WebAssembly-värden:

    • Komponenten App är appens rotkomponent. Komponenten App anges som div DOM-element med en id av app (<div id="app">Loading...</div> i wwwroot/index.html) till rotkomponentsamlingen (builder.RootComponents.Add<App>("#app")).
    • Services läggs till och konfigureras (till exempel builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Ytterligare filer och mappar kan visas i en app som skapats från en Blazor WebAssembly projektmall när ytterligare alternativ har konfigurerats. Om du till exempel genererar en app med ASP.NET Core Identity, innehåller det ytterligare resurser för autentiserings- och auktoriseringsfunktioner.

En värdbaserad Blazor WebAssembly lösning innehåller följande ASP.NET Core-projekt:

  • "Client": Appen Blazor WebAssembly.
  • "Server": En app som hanterar Blazor WebAssembly-appen och väderdata till klienter.
  • "Shared": Ett projekt som underhåller vanliga klasser, metoder och resurser.

Lösningen genereras från Blazor WebAssembly-projektmallen i Visual Studio med kryssrutan ASP.NET Core Hosted markerad eller med alternativet -ho|--hosted med kommandot .NET CLI:s dotnet new blazorwasm. Mer information finns i Tooling for ASP.NET Core Blazor.

Projektstrukturen för appen på klientsidan i en värdbaserad Blazor Webassembly-lösning ("Client" projekt) är samma som projektstrukturen för en fristående Blazor WebAssembly app. Ytterligare filer i en värdbaserad Blazor WebAssembly lösning:

  • Projektet "Server" innehåller en väderprognoskontrollant på Controllers/WeatherForecastController.cs som returnerar väderdata till projektets FetchData komponent "Client".
  • Projektet "Shared" innehåller en väderprognosklass på WeatherForecast.cs som representerar väderdata för projekten "Client" och "Server".

Blazor WebAssembly

Blazor WebAssembly projektmall: blazorwasm

Mallen Blazor WebAssembly skapar de första filerna och katalogstrukturen för en Blazor WebAssembly app. Appen fylls i med demonstrationskod för en FetchData komponent som läser in data från en statisk tillgång, weather.jsonoch användarinteraktion med en Counter komponent.

  • Pages mapp: Innehåller Blazor-appens dirigerbara Razor-komponenter (.razor). Vägen för varje sida anges med hjälp av @page-direktivet. Mallen innehåller följande komponenter:

    • Counter komponent (Counter.razor): Implementerar Räknarsidan.
    • FetchData komponent (FetchData.razor): Implementerar sidan Hämta data.
    • Index komponent (Index.razor): Implementerar sidan Home.

  • Properties mapp: Innehåller utvecklingsmiljöns konfiguration i filen launchSettings.json.

  • Shared mapp: Innehåller följande delade komponenter och formatmallar:

    • MainLayout komponent (MainLayout.razor): Appens layoutkomponent.
    • MainLayout.razor.css: Formatmall för appens huvudlayout.
    • NavMenu komponent (NavMenu.razor): Implementerar navigering i sidofältet. Innehåller NavLink komponenten (NavLink), som återger navigeringslänkar till andra Razor komponenter. Komponenten NavLink anger automatiskt ett valt tillstånd när komponenten läses in, vilket hjälper användaren att förstå vilken komponent som visas för närvarande.
    • NavMenu.razor.css: Formatmall för appens navigeringsmeny.
    • SurveyPrompt komponent (SurveyPrompt.razor): Blazor undersökningskomponent.

  • wwwroot mapp: Mappen Web Root för appen innehåller appens offentliga statiska resurser, inklusive appsettings.json och miljöinställningsfiler för konfigurationsinställningar. Den index.html webbsidan är rotsidan för appen som implementeras som en HTML-sida:

    • När någon sida i appen ursprungligen begärs återges den här sidan och returneras i svaret.
    • Sidan anger var rotkomponenten App återges. Komponenten återges på platsen för div DOM-elementet med en id av app (<div id="app">Loading...</div>).

  • _Imports.razor: Innehåller vanliga Razor direktiv som ska ingå i appens komponenter (.razor), till exempel @using direktiv för namnområden.

  • App.razor: Rotkomponenten i appen som konfigurerar routning på klientsidan med hjälp av komponenten Router. Komponenten Router fångar upp webbläsarnavigering och återger sidan som matchar den begärda adressen.

  • Program.cs: Appens startpunkt som konfigurerar WebAssembly-värden:

    • Komponenten App är appens rotkomponent. Komponenten App anges som div DOM-element med en id av app (<div id="app">Loading...</div> i wwwroot/index.html) till rotkomponentsamlingen (builder.RootComponents.Add<App>("#app")).
    • Services läggs till och konfigureras (till exempel builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Ytterligare filer och mappar kan visas i en app som skapats från en Blazor WebAssembly projektmall när ytterligare alternativ har konfigurerats. Ett exempel är att generera en app med ASP.NET Core Identity, vilket inkluderar ytterligare resurser för autentiserings- och auktoriseringsfunktioner.

En värdbaserad Blazor WebAssembly lösning innehåller följande ASP.NET Core-projekt:

  • "Client": Den Blazor WebAssembly-appen.
  • "Server": En app som hanterar Blazor WebAssembly-appen och väderdata till klienter.
  • "Shared": Ett projekt som underhåller vanliga klasser, metoder och resurser.

Lösningen genereras från Blazor WebAssembly-projektmallen i Visual Studio med kryssrutan ASP.NET Core Hosted markerad eller med alternativet -ho|--hosted med kommandot .NET CLI:s dotnet new blazorwasm. Mer information finns i Tooling for ASP.NET Core Blazor.

Projektstrukturen för appen på klientsidan i en värdbaserad Blazor Webassembly-lösning ("Client" projekt) är samma som projektstrukturen för en fristående Blazor WebAssembly app. Ytterligare filer i en värdbaserad Blazor WebAssembly lösning:

  • Projektet "Server" innehåller en väderprognoskontrollant på Controllers/WeatherForecastController.cs som returnerar väderdata till projektets FetchData komponent "Client".
  • Projektet "Shared" innehåller en väderprognosklass på WeatherForecast.cs som representerar väderdata för projekten "Client" och "Server".

Blazor WebAssembly

Blazor WebAssembly projektmall: blazorwasm

Mallen Blazor WebAssembly skapar de första filerna och katalogstrukturen för en Blazor WebAssembly app. Appen fylls i med demonstrationskod för en FetchData komponent som läser in data från en statisk tillgång, weather.jsonoch användarinteraktion med en Counter komponent.

  • Pages mapp: Innehåller Blazor-appens dirigerbara Razor-komponenter (.razor). Vägen för varje sida anges med hjälp av @page-direktivet. Mallen innehåller följande komponenter:

    • Counter komponent (Counter.razor): Implementerar Räknarsidan.
    • FetchData komponent (FetchData.razor): Implementerar sidan Hämta data.
    • Index komponent (Index.razor): Implementerar sidan Home.

  • Properties mapp: Innehåller konfiguration av utvecklingsmiljön i filen launchSettings.json.

  • Shared mapp: Innehåller följande delade komponenter:

    • MainLayout komponent (MainLayout.razor): Appens layoutkomponent.
    • NavMenu komponent (NavMenu.razor): Implementerar navigering i sidofältet. Innehåller NavLink komponenten (NavLink), som återger navigeringslänkar till andra Razor komponenter. Komponenten NavLink anger automatiskt ett valt tillstånd när komponenten läses in, vilket hjälper användaren att förstå vilken komponent som visas för närvarande.
    • SurveyPrompt-komponent (SurveyPrompt.razor): Blazor-undersökningskomponent.

  • wwwroot mapp: Mappen Web Root för appen som innehåller appens offentliga statiska resurser, inklusive appsettings.json och konfigurationsfiler för miljöappinställningar för konfigurationsinställningar. Den index.html webbsidan är rotsidan för appen som implementeras som en HTML-sida:

    • När någon sida i appen ursprungligen begärs återges den här sidan och returneras i svaret.
    • Sidan anger var rotkomponenten App återges. Komponenten återges på platsen för app DOM-elementet (<app>Loading...</app>).

  • _Imports.razor: Innehåller vanliga Razor direktiv som ska ingå i appens komponenter (.razor), till exempel @using direktiv för namnområden.

  • App.razor: Rotkomponenten i appen som konfigurerar routning på klientsidan med hjälp av komponenten Router. Komponenten Router fångar upp webbläsarnavigering och återger sidan som matchar den begärda adressen.

  • Program.cs: Appens startpunkt som konfigurerar WebAssembly-värdmiljön:

    • Komponenten App är appens rotkomponent. Komponenten App anges som app DOM-element (<app>Loading...</app> i wwwroot/index.html) till rotkomponentsamlingen (builder.RootComponents.Add<App>("app")).
    • Services läggs till och konfigureras (till exempel builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Ytterligare filer och mappar kan visas i en app som skapats från en Blazor WebAssembly projektmall när ytterligare alternativ har konfigurerats. Om du till exempel genererar en app med ASP.NET Core Identity ingår ytterligare resurser för autentiserings- och auktoriseringsfunktioner.

En värdbaserad Blazor WebAssembly lösning innehåller följande ASP.NET Core-projekt:

  • "Client": Appen Blazor WebAssembly.
  • "Server": En app som hanterar Blazor WebAssembly-appen och väderdata till klienter.
  • "Shared": Ett projekt som underhåller vanliga klasser, metoder och resurser.

Lösningen genereras från Blazor WebAssembly-projektmallen i Visual Studio med kryssrutan ASP.NET Core Hosted markerad eller med alternativet -ho|--hosted med kommandot .NET CLI:s dotnet new blazorwasm. Mer information finns i Tooling for ASP.NET Core Blazor.

Projektstrukturen för appen på klientsidan i en värdbaserad Blazor Webassembly-lösning ("Client" projekt) är samma som projektstrukturen för en fristående Blazor WebAssembly app. Ytterligare filer i en värdbaserad Blazor WebAssembly lösning:

  • Projektet "Server" innehåller en väderprognoskontrollant på Controllers/WeatherForecastController.cs som returnerar väderdata till projektets FetchData komponent "Client".
  • Projektet "Shared" innehåller en väderprognosklass på WeatherForecast.cs som representerar väderdata för projekten "Client" och "Server".

Platsen för Blazor-skriptet

Skriptet Blazor hanteras som en statisk webbtillgång med automatisk komprimering och fingeravtryck. Mer information finns i ASP.NET Core Blazor statiska filer.

Skriptet Blazor hanteras från en inbäddad resurs i det delade ASP.NET Core-ramverket.

I en Blazor Web Appfinns skriptet Blazor i filen Components/App.razor:

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

I en Blazor Server app finns Blazor-skriptet i Pages/_Host.cshtml-filen:

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

I en Blazor Server app finns Blazor-skriptet i Pages/_Host.cshtml-filen:

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

I en Blazor Server app finns Blazor-skriptet i Pages/_Layout.cshtml-filen:

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

I en Blazor Server app finns Blazor-skriptet i Pages/_Host.cshtml-filen:

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

I en Blazor WebAssembly app finns det Blazor skriptinnehållet i filen wwwroot/index.html:

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

Plats för <head> och <body> innehåll

I en Blazor Web Appfinns innehåll från <head> och <body> i filen Components/App.razor.

I en Blazor Server app finns <head> och <body> innehåll i filen Pages/_Host.cshtml.

Innehållet <head> och <body> i en Blazor Server app finns i filen Pages/_Layout.cshtml.

I en Blazor Server app finns <head> och <body> innehåll i filen Pages/_Host.cshtml.

I en Blazor WebAssembly-app finns innehållet <head> och <body> i wwwroot/index.html-filen.

Dubbel Blazor Server/Blazor WebAssembly applikation

För att skapa en app som kan köras som antingen en Blazor Server app eller en Blazor WebAssembly app är en metod att placera all applogik och alla komponenter i ett Razor klassbibliotek (RCL) och referera till RCL från separata Blazor Server och Blazor WebAssembly projekt. För vanliga tjänster vars implementeringar skiljer sig åt baserat på värdmodellen definierar du tjänstgränssnitten i RCL och implementerar tjänsterna i projekten Blazor Server och Blazor WebAssembly.

Ytterligare resurser