Delen via

projectstructuur ASP.NET Core Blazor

  • Artikel

Notitie

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

In dit artikel worden de bestanden en mappen beschreven waaruit een Blazor app bestaat die is gegenereerd op basis van een Blazor projectsjabloon.

Blazor Web App

Blazor Web App project template: blazor

De Blazor Web App projectsjabloon biedt één uitgangspunt voor het gebruik van Razor componenten (.razor) om elke stijl van een webgebruikersinterface te maken, zowel server-side als client-side gerenderd. Het combineert de sterke punten van de bestaande Blazor Server en Blazor WebAssembly hostingmodellen met rendering aan de serverzijde, streaming-rendering, verbeterde navigatie- en formulierafhandeling en de mogelijkheid om interactiviteit toe te voegen met behulp van Blazor Server of Blazor WebAssembly per onderdeel.

Als zowel client-side rendering (CSR) als interactieve server-side rendering (interactieve SSR) zijn geselecteerd bij het maken van apps, gebruikt de projectsjabloon de interactieve modus voor automatisch renderen. De automatische renderingmodus maakt in eerste instantie gebruik van interactieve SSR terwijl de .NET-app-bundel en -runtime worden gedownload naar de browser. Nadat de .NET WebAssembly-runtime is geactiveerd, schakelt de rendering over naar CSR.

Met de Blazor Web App-sjabloon kunt u zowel statische als interactieve rendering aan de serverzijde inschakelen met één project. Als u interactieve WebAssembly-rendering ook inschakelt, bevat het project een extra clientproject (.Client) voor uw webassembly-onderdelen. De ingebouwde uitvoer van het clientproject wordt gedownload naar de browser en uitgevoerd op de client. Onderdelen die de modi Interactive WebAssembly of Interactive Auto Render gebruiken, moeten zich in het .Client project bevinden.

De structuur van de onderdeelmap van het .Client project verschilt van de hoofdmapstructuur van het Blazor Web Appomdat het hoofdproject een standaard ASP.NET Core-project is. Het hoofdproject moet rekening houden met andere activa voor ASP.NET Kernprojecten die niet gerelateerd zijn aan Blazor. U kunt in het .Client project de gewenste onderdeelmapstructuur gebruiken. U kunt desgewenst de indeling van de onderdeelmap van het hoofdproject in het .Client project spiegelen. Houd er rekening mee dat voor naamruimten mogelijk aanpassingen vereist zijn voor assets zoals indelingsbestanden als u onderdelen naar andere mappen verplaatst dan de projectsjabloon gebruikt.

Meer informatie over onderdelen en rendermodi vindt u in de ASP.NET Core Razor-onderdelen en ASP.NET Core Blazor weergavemodi artikelen.

Op basis van de interactieve weergavemodus die is geselecteerd bij het maken van apps, bevindt de map Layout zich in het serverproject in de Components map of in de hoofdmap van het .Client-project. De map bevat de volgende indelingsonderdelen en opmaakmodellen:

  • Het MainLayout-onderdeel (MainLayout.razor) is het indelingsonderdeel van de app.
  • De MainLayout.razor.css is het stijlblad voor de hoofdlay-out van de app.
  • Het NavMenu-onderdeel (NavMenu.razor) implementeert zijbalknavigatie. Het onderdeel bevat NavLink onderdelen (NavLink), waarmee navigatiekoppelingen naar andere Razor onderdelen worden weergegeven. Het NavLink-onderdeel geeft aan de gebruiker aan welk onderdeel momenteel wordt weergegeven.
  • Het NavMenu.razor.css is het opmaakmodel voor het navigatiemenu van de app.

Het Routes-onderdeel (Routes.razor) bevindt zich in het serverproject of het .Client-project en stelt routering in met behulp van het Router-onderdeel. Voor interactieve onderdelen aan de clientzijde onderschept het Router-onderdeel browsernavigatie en geeft de pagina weer die overeenkomt met het aangevraagde adres.

De Components map van het serverproject bevat de onderdelen van de serverzijde van de app Razor. Gedeelde onderdelen worden vaak in de hoofdmap van de Components map geplaatst, terwijl indelings- en paginaonderdelen meestal in mappen in de Components map worden geplaatst.

De Components/Pages map van het serverproject bevat de routeerbare Razor onderdelen van de app. De route voor elke pagina wordt opgegeven met behulp van de @page instructie.

Het App-onderdeel (App.razor) is het hoofdonderdeel van de app met HTML-<head> markeringen, het Routes-onderdeel en de Blazor<script>-tag. Het hoofdonderdeel is het eerste onderdeel dat door de app wordt geladen.

Een _Imports.razor-bestand in elk van de server- en .Client projecten bevat algemene Razor richtlijnen voor Razor onderdelen van beide projecten, zoals @using richtlijnen voor naamruimten.

De Properties map van het serverproject bevat configuratie van de ontwikkelomgeving in het launchSettings.json-bestand.

Notitie

Het http-profiel gaat vooraf aan het https-profiel in het launchSettings.json-bestand. Wanneer een app wordt uitgevoerd met de .NET CLI, wordt de app uitgevoerd op een HTTP-eindpunt omdat het eerste gevonden profiel is http. De profielvolgorde vereenvoudigt de overgang van het overstappen op HTTPS voor Linux- en macOS-gebruikers. Als u de app liever start met de .NET CLI zonder de optie -lp https of --launch-profile https door te geven aan de opdracht dotnet watch (of dotnet run), plaatst u het https profiel boven het http-profiel in het bestand.

De wwwroot map van het serverproject is de map "Web Root" voor het serverproject, met de openbare statische middelen van de app.

Het Program.cs-bestand van het serverproject is het toegangspunt van het project dat de ASP.NET Core-webtoepassing -host opzet en de opstartlogica van de app bevat, inclusief serviceregistraties, configuratie, logging en verwerking van aanvraagpijplijnen.

De app-instellingenbestanden (appsettings.Development.json, appsettings.json) op de server of in het .Client-project bieden configuratie-instellingen. In het serverproject bevinden instellingenbestanden zich in de hoofdmap van het project. In het .Client project worden instellingenbestanden gebruikt uit de map Web Root, wwwroot.

In het .Client project:

  • De map Pages bevat routeerbare Razor onderdelen aan de clientzijde. De route voor elke pagina wordt opgegeven met behulp van de @page instructie.

  • De wwwroot map is de map Web Root voor het .Client project dat de openbare statische assets van de app bevat.

  • Het Program.cs-bestand is het toegangspunt van het project waarmee de WebAssembly-host wordt ingesteld en de opstartlogica van het project bevat, waaronder serviceregistraties, configuratie, logboekregistratie en aanvraagverwerkingspijplijn.

Extra bestanden en mappen kunnen worden weergegeven in een app die is geproduceerd op basis van een Blazor Web App projectsjabloon wanneer er extra opties zijn geconfigureerd. Het genereren van een app met ASP.NET Core Identity bevat bijvoorbeeld extra assets voor verificatie- en autorisatiefuncties.

Blazor Server

Blazor Server projectsjablonen: blazorserver, blazorserver-empty

De Blazor Server-sjablonen maken de oorspronkelijke bestanden en mapstructuur voor een Blazor Server-app:

  • Als de blazorserver-sjabloon wordt gebruikt, wordt de app gevuld met het volgende:
    • Demonstratiecode voor een FetchData-onderdeel waarmee gegevens worden geladen uit een weersvoorspellingsservice (WeatherForecastService) en gebruikersinteractie met een Counter onderdeel.
    • Bootstrap front-end-toolkit.
  • Als de blazorserver-empty-sjabloon wordt gebruikt, wordt de app gemaakt zonder demonstratiecode en Bootstrap.

Projectstructuur:

  • Data map: bevat de WeatherForecast-klasse en implementatie van de WeatherForecastService die voorbeeldweergegevens levert aan de FetchData-component van de app.

  • Pages map: bevat de routeerbare Razor onderdelen van de Blazor app (.razor) en de hoofdpagina Razor van een Blazor Server-app. De route voor elke pagina wordt opgegeven met behulp van de @page instructie. De sjabloon bevat het volgende:

    • _Host.cshtml: de hoofdpagina van de app die is geïmplementeerd als een Razor-pagina:
      • Wanneer een pagina van de app in eerste instantie wordt aangevraagd, wordt deze pagina weergegeven en geretourneerd in het antwoord.
      • De hostpagina geeft aan waar het hoofdonderdeel App (App.razor) wordt weergegeven.
    • Counter onderdeel (Counter.razor): implementeert de tellerpagina.
    • Error onderdeel (Error.razor): Wordt weergegeven wanneer er een niet-verwerkte uitzondering optreedt in de app.
    • FetchData onderdeel (FetchData.razor): implementeert de pagina Gegevens ophalen.
    • Index onderdeel (Index.razor): implementeert de pagina Home.

  • Properties map: bevat de configuratie van de ontwikkelomgeving in het launchSettings.json bestand.

  • Shared map: Bevat de volgende gedeelde componenten en opmaakmodellen:

    • MainLayout onderdeel (MainLayout.razor): het indelingsonderdeel van de app.
    • MainLayout.razor.css: Opmaakmodel voor de hoofdindeling van de app.
    • NavMenu onderdeel (NavMenu.razor): hiermee wordt navigatie op de zijbalk geïmplementeerd. Bevat het NavLink onderdeel (NavLink), waarmee navigatiekoppelingen naar andere Razor onderdelen worden weergegeven. Het NavLink onderdeel geeft automatisch een geselecteerde status aan wanneer het onderdeel wordt geladen, zodat de gebruiker weet welk onderdeel momenteel wordt weergegeven.
    • NavMenu.razor.css: Opmaakmodel voor het navigatiemenu van de app.
    • SurveyPrompt component (SurveyPrompt.razor): Blazor enquêteonderdeel.

  • wwwroot map: de webrootmap voor de app met de openbare statische bestanden van de app.

  • _Imports.razor: bevat algemene Razor richtlijnen die moeten worden opgenomen in de onderdelen van de app (.razor), zoals @using instructies voor naamruimten.

  • App.razor: het hoofdonderdeel van de app waarmee routering aan de clientzijde wordt ingesteld met behulp van het Router-onderdeel. Het Router onderdeel onderschept browsernavigatie en geeft de pagina weer die overeenkomt met het aangevraagde adres.

  • appsettings.json en omgevingsinstellingen van de app: Bied configuratie-instellingen voor de app.

  • Program.cs: het toegangspunt van de app waarmee de ASP.NET Core -host wordt ingesteld en de opstartlogica van de app bevat, inclusief serviceregistraties en configuratie van de aanvraagverwerkingspijplijn:

    • Specificeert de services voor afhankelijkheidsinjectie (DI) van de app. Services worden toegevoegd door AddServerSideBlazoraan te roepen en de WeatherForecastService wordt toegevoegd aan de servicecontainer voor gebruik door het voorbeeldonderdeel FetchData.
    • Hiermee configureert u de aanvraagafhandelingspijplijn van de app:
      • MapBlazorHub wordt aangeroepen om een eindpunt in te stellen voor de realtime-verbinding met de browser. De verbinding wordt gemaakt met SignalR. Dit is een framework voor het toevoegen van realtime webfunctionaliteit aan apps.
      • MapFallbackToPage("/_Host") wordt aangeroepen om de hoofdpagina van de app (Pages/_Host.cshtml) in te stellen en navigatie in te schakelen.

Extra bestanden en mappen kunnen worden weergegeven in een app die is geproduceerd op basis van een Blazor Server projectsjabloon wanneer er extra opties zijn geconfigureerd. Het genereren van een app met ASP.NET Core Identity bevat bijvoorbeeld extra assets voor verificatie- en autorisatiefuncties.

Blazor Server projecten template: blazorserver

De Blazor Server-sjabloon maakt de oorspronkelijke bestanden en mapstructuur voor een Blazor Server-app. De app wordt gevuld met demonstratiecode voor een FetchData-onderdeel waarmee gegevens uit een geregistreerde service, WeatherForecastServiceen interactie van gebruikers met een Counter onderdeel worden geladen.

  • Data map: bevat de WeatherForecast klasse en implementatie van de WeatherForecastService die voorbeeldgegevens bevat voor het FetchData-onderdeel van de app.

  • Pages map: bevat de routeerbare Razor onderdelen van de Blazor app (.razor) en de hoofdpagina Razor van een Blazor Server-app. De route voor elke pagina wordt opgegeven met behulp van de @page instructie. De sjabloon bevat het volgende:

    • _Host.cshtml: de hoofdpagina van de app die is geïmplementeerd als een Razor-pagina:
      • Wanneer een pagina van de app in eerste instantie wordt aangevraagd, wordt deze pagina weergegeven en geretourneerd in het antwoord.
      • De hostpagina geeft aan waar het hoofdonderdeel App (App.razor) wordt weergegeven.
    • _Layout.cshtml: de indelingspagina voor de _Host.cshtml hoofdpagina van de app.
    • Counter onderdeel (Counter.razor): implementeert de tellerpagina.
    • Error onderdeel (Error.razor): Wordt weergegeven wanneer er een niet-verwerkte uitzondering optreedt in de app.
    • FetchData onderdeel (FetchData.razor): implementeert de pagina Gegevens ophalen.
    • Index onderdeel (Index.razor): implementeert de pagina Home.

  • Properties map: bevat de configuratie van de ontwikkelomgeving in het bestandlaunchSettings.json.

  • Shared-folder: Bevat de volgende gedeelde onderdelen en opmaakmodellen:

    • MainLayout onderdeel (MainLayout.razor): het indelingsonderdeel van de app.
    • MainLayout.razor.css: Opmaakmodel voor de hoofdindeling van de app.
    • NavMenu onderdeel (NavMenu.razor): hiermee wordt navigatie op de zijbalk geïmplementeerd. Bevat het NavLink onderdeel (NavLink), waarmee navigatiekoppelingen naar andere Razor onderdelen worden weergegeven. Het NavLink onderdeel geeft automatisch een geselecteerde status aan wanneer het onderdeel wordt geladen, zodat de gebruiker weet welk onderdeel momenteel wordt weergegeven.
    • NavMenu.razor.css: Opmaakmodel voor het navigatiemenu van de app.
    • SurveyPrompt component (SurveyPrompt.razor): Blazor onderzoekscomponent.

  • wwwroot map: de map webhoofdmap voor de app met de openbare statische assets van de app.

  • _Imports.razor: bevat algemene Razor richtlijnen die moeten worden opgenomen in de onderdelen van de app (.razor), zoals @using instructies voor naamruimten.

  • App.razor: het hoofdonderdeel van de app waarmee routering aan de clientzijde wordt ingesteld met behulp van het Router-onderdeel. Het Router onderdeel onderschept browsernavigatie en geeft de pagina weer die overeenkomt met het aangevraagde adres.

  • appsettings.json en omgevingsapp-instellingenbestanden: bieden configuratie-instellingen voor de app.

  • Program.cs: het toegangspunt van de app waarmee de ASP.NET Core -host wordt ingesteld en de opstartlogica van de app bevat, inclusief serviceregistraties en configuratie van de aanvraagverwerkingspijplijn:

    • Hiermee geeft u de afhankelijkheidsinjectie (DI) van de app services. Services worden toegevoegd door AddServerSideBlazoraan te roepen en de WeatherForecastService wordt toegevoegd aan de servicecontainer voor gebruik door het voorbeeldonderdeel FetchData.
    • Hiermee configureert u de aanvraagafhandelingspijplijn van de app:
      • MapBlazorHub wordt aangeroepen om een eindpunt in te stellen voor de realtime-verbinding met de browser. De verbinding wordt gemaakt met SignalR. Dit is een framework voor het toevoegen van realtime webfunctionaliteit aan apps.
      • MapFallbackToPage("/_Host") wordt aangeroepen om de hoofdpagina van de app (Pages/_Host.cshtml) in te stellen en navigatie in te schakelen.

Extra bestanden en mappen kunnen worden weergegeven in een app die is geproduceerd op basis van een Blazor Server projectsjabloon wanneer er extra opties zijn geconfigureerd. Het genereren van een app met ASP.NET Core Identity bevat bijvoorbeeld extra assets voor verificatie- en autorisatiefuncties.

Blazor Server projectsjabloon: blazorserver

De Blazor Server-sjabloon maakt de oorspronkelijke bestanden en mapstructuur voor een Blazor Server-app. De app wordt gevuld met demonstratiecode voor een FetchData-onderdeel waarmee gegevens uit een geregistreerde service, WeatherForecastServiceen interactie van gebruikers met een Counter onderdeel worden geladen.

  • Data map: bevat de WeatherForecast-klasse en implementatie van de WeatherForecastService die voorbeeldgegevens bevat voor het FetchData-component van de app.

  • Pages map: bevat de routeerbare Razor onderdelen van de Blazor app (.razor) en de hoofdpagina Razor van een Blazor Server-app. De route voor elke pagina wordt opgegeven met behulp van de @page instructie. De sjabloon bevat het volgende:

    • _Host.cshtml: de hoofdpagina van de app die is geïmplementeerd als een Razor-pagina:
      • Wanneer een pagina van de app in eerste instantie wordt aangevraagd, wordt deze pagina weergegeven en geretourneerd in het antwoord.
      • De hostpagina geeft aan waar het hoofdonderdeel App (App.razor) wordt weergegeven.
    • Counter onderdeel (Counter.razor): implementeert de tellerpagina.
    • Error onderdeel (Error.razor): Wordt weergegeven wanneer er een niet-verwerkte uitzondering optreedt in de app.
    • FetchData onderdeel (FetchData.razor): implementeert de pagina Gegevens ophalen.
    • Index onderdeel (Index.razor): implementeert de pagina Home.

  • Properties map: bevat configuratie van de ontwikkelomgeving in het bestand launchSettings.json.

  • Shared map: Bevat de volgende gedeelde onderdelen en stijlbladen:

    • MainLayout onderdeel (MainLayout.razor): het indelingsonderdeel van de app.
    • MainLayout.razor.css: Opmaakmodel voor de hoofdindeling van de app.
    • NavMenu onderdeel (NavMenu.razor): hiermee wordt navigatie op de zijbalk geïmplementeerd. Bevat het NavLink onderdeel (NavLink), waarmee navigatiekoppelingen naar andere Razor onderdelen worden weergegeven. Het NavLink onderdeel geeft automatisch een geselecteerde status aan wanneer het onderdeel wordt geladen, zodat de gebruiker weet welk onderdeel momenteel wordt weergegeven.
    • NavMenu.razor.css: Opmaakmodel voor het navigatiemenu van de app.
    • SurveyPrompt onderdeel (SurveyPrompt.razor): Blazor enquête-onderdeel.

  • wwwroot map: de map webhoofdmap voor de app met de openbare statische assets van de app.

  • _Imports.razor: bevat algemene Razor richtlijnen die moeten worden opgenomen in de onderdelen van de app (.razor), zoals @using instructies voor naamruimten.

  • App.razor: het hoofdonderdeel van de app waarmee routering aan de clientzijde wordt ingesteld met behulp van het Router-onderdeel. Het Router onderdeel onderschept browsernavigatie en geeft de pagina weer die overeenkomt met het aangevraagde adres.

  • appsettings.json en bestanden met omgevings-app-instellingen: geef configuratie-instellingen op voor de app.

  • Program.cs: het toegangspunt van de app waarmee de ASP.NET Core -host wordt ingesteld.

  • Startup.cs: bevat de opstartlogica van de app. De klasse Startup definieert twee methoden:

    • ConfigureServices: configureert de afhankelijkheidsinjectie (DI) services van de app. Services worden toegevoegd door AddServerSideBlazoraan te roepen en de WeatherForecastService wordt toegevoegd aan de servicecontainer voor gebruik door het voorbeeldonderdeel FetchData.
    • Configure: configureert de aanvraagafhandelingspijplijn van de app:
      • MapBlazorHub wordt aangeroepen om een eindpunt in te stellen voor de realtime-verbinding met de browser. De verbinding wordt gemaakt met SignalR. Dit is een framework voor het toevoegen van realtime webfunctionaliteit aan apps.
      • MapFallbackToPage("/_Host") wordt aangeroepen om de hoofdpagina van de app (Pages/_Host.cshtml) in te stellen en navigatie in te schakelen.

Extra bestanden en mappen kunnen worden weergegeven in een app die is geproduceerd op basis van een Blazor Server projectsjabloon wanneer er extra opties zijn geconfigureerd. Het genereren van een app met ASP.NET Core Identity bevat bijvoorbeeld extra assets voor verificatie- en autorisatiefuncties.

Blazor Server projectsjabloon: blazorserver

De Blazor Server-sjabloon maakt de oorspronkelijke bestanden en mapstructuur voor een Blazor Server-app. De app wordt gevuld met demonstratiecode voor een FetchData-onderdeel waarmee gegevens uit een geregistreerde service, WeatherForecastServiceen interactie van gebruikers met een Counter onderdeel worden geladen.

  • Data map. Bevat de WeatherForecast klasse en de implementatie van de WeatherForecastService die voorbeeldweergegevens aan het FetchData-onderdeel van de app levert.

  • Pages map: bevat de routeerbare Razor onderdelen van de Blazor app (.razor) en de hoofdpagina Razor van een Blazor Server-app. De route voor elke pagina wordt opgegeven met behulp van de @page instructie. De sjabloon bevat het volgende:

    • _Host.cshtml: de hoofdpagina van de app die is geïmplementeerd als een Razor-pagina:
      • Wanneer een pagina van de app in eerste instantie wordt aangevraagd, wordt deze pagina weergegeven en geretourneerd in het antwoord.
      • De hostpagina geeft aan waar het hoofdonderdeel App (App.razor) wordt weergegeven.
    • Counter onderdeel (Counter.razor): implementeert de tellerpagina.
    • Error onderdeel (Error.razor): Wordt weergegeven wanneer er een niet-verwerkte uitzondering optreedt in de app.
    • FetchData onderdeel (FetchData.razor): implementeert de pagina Gegevens ophalen.
    • Index onderdeel (Index.razor): implementeert de pagina Home.

  • Properties map: bevat configuratie van de ontwikkelomgeving in het bestand launchSettings.json.

  • Shared map: Bevat de volgende gedeelde onderdelen:

    • MainLayout onderdeel (MainLayout.razor): het indelingsonderdeel van de app.
    • NavMenu onderdeel (NavMenu.razor): hiermee wordt navigatie op de zijbalk geïmplementeerd. Bevat het NavLink onderdeel (NavLink), waarmee navigatiekoppelingen naar andere Razor onderdelen worden weergegeven. Het NavLink onderdeel geeft automatisch een geselecteerde status aan wanneer het onderdeel wordt geladen, zodat de gebruiker weet welk onderdeel momenteel wordt weergegeven.
    • SurveyPrompt component (SurveyPrompt.razor): Blazor onderdeel van de enquête.

  • wwwroot map: de webrootmap voor de app die de openbare statische assets van de app bevat.

  • _Imports.razor: bevat algemene Razor richtlijnen die moeten worden opgenomen in de onderdelen van de app (.razor), zoals @using instructies voor naamruimten.

  • App.razor: het hoofdonderdeel van de app waarmee routering aan de clientzijde wordt ingesteld met behulp van het Router-onderdeel. Het Router onderdeel onderschept browsernavigatie en geeft de pagina weer die overeenkomt met het aangevraagde adres.

  • appsettings.json en bestanden met app-omgevinginstellingen: bieden configuratie-instellingen voor de app.

  • Program.cs: het toegangspunt van de app waarmee de ASP.NET Core -host wordt ingesteld.

  • Startup.cs: bevat de opstartlogica van de app. De klasse Startup definieert twee methoden:

    • ConfigureServices: hiermee configureert u de afhankelijkheidsinjectie (DI) voor de appdiensten. Services worden toegevoegd door AddServerSideBlazoraan te roepen en de WeatherForecastService wordt toegevoegd aan de servicecontainer voor gebruik door het voorbeeldonderdeel FetchData.
    • Configure: configureert de aanvraagafhandelingspijplijn van de app:
      • MapBlazorHub wordt aangeroepen om een eindpunt in te stellen voor de realtime-verbinding met de browser. De verbinding wordt gemaakt met SignalR. Dit is een framework voor het toevoegen van realtime webfunctionaliteit aan apps.
      • MapFallbackToPage("/_Host") wordt aangeroepen om de hoofdpagina van de app (Pages/_Host.cshtml) in te stellen en navigatie in te schakelen.

Extra bestanden en mappen kunnen worden weergegeven in een app die is geproduceerd op basis van een Blazor Server projectsjabloon wanneer er extra opties zijn geconfigureerd. Het genereren van een app met ASP.NET Core Identity bevat bijvoorbeeld extra assets voor verificatie- en autorisatiefuncties.

Zelfstandige Blazor WebAssembly

Zelfstandige Blazor WebAssembly projecttemplate: blazorwasm

De Blazor WebAssembly-sjabloon maakt de eerste bestanden en mapstructuur voor een zelfstandige Blazor WebAssembly-app:

  • Als de blazorwasm-sjabloon wordt gebruikt, wordt de app gevuld met het volgende:
    • Demonstratiecode voor een Weather-onderdeel waarmee gegevens uit een statische asset (weather.json) en gebruikersinteractie met een Counter-onderdeel worden geladen.
    • Bootstrap frontend-toolkit.
  • De blazorwasm-sjabloon kan ook worden gegenereerd zonder voorbeeldpagina's en stijl.

Projectstructuur:

  • Layout map: Bevat de volgende lay-outelementen en stijlen:

    • MainLayout onderdeel (MainLayout.razor): het indelingsonderdeelvan de app.
    • MainLayout.razor.css: Opmaakmodel voor de hoofdindeling van de app.
    • NavMenu onderdeel (NavMenu.razor): hiermee wordt navigatie op de zijbalk geïmplementeerd. Bevat het NavLink onderdeel (NavLink), waarmee navigatiekoppelingen naar andere Razor onderdelen worden weergegeven. Het NavLink onderdeel geeft automatisch een geselecteerde status aan wanneer het onderdeel wordt geladen, zodat de gebruiker weet welk onderdeel momenteel wordt weergegeven.
    • NavMenu.razor.css: Opmaakmodel voor het navigatiemenu van de app.

  • Pages map: bevat de routeerbare Razor onderdelen van de Blazor app (.razor). De route voor elke pagina wordt opgegeven met behulp van de @page instructie. De sjabloon bevat de volgende onderdelen:

    • Counter onderdeel (Counter.razor): implementeert de tellerpagina.
    • Index onderdeel (Index.razor): implementeert de pagina Home.
    • Weather onderdeel (Weather.razor): implementeert de pagina Weer.

  • _Imports.razor: bevat algemene Razor richtlijnen die moeten worden opgenomen in de onderdelen van de app (.razor), zoals @using instructies voor naamruimten.

  • App.razor: het hoofdonderdeel van de app waarmee routering aan de clientzijde wordt ingesteld met behulp van het Router-onderdeel. Het Router onderdeel onderschept browsernavigatie en geeft de pagina weer die overeenkomt met het aangevraagde adres.

  • De map Properties bevat de configuratie van de ontwikkelomgeving in het bestandlaunchSettings.json.

    Notitie

    Het http-profiel gaat vooraf aan het https-profiel in het launchSettings.json-bestand. Wanneer een app wordt uitgevoerd met de .NET CLI, wordt de app uitgevoerd op een HTTP-eindpunt omdat het eerste gevonden profiel is http. De profielvolgorde vereenvoudigt de overgang van het overstappen op HTTPS voor Linux- en macOS-gebruikers. Als u de app liever start met de .NET CLI zonder de optie -lp https of --launch-profile https door te geven aan de opdracht dotnet watch (of dotnet run), plaatst u het https profiel boven het http-profiel in het bestand.

  • wwwroot map: de webhoofdmap voor de app, die de openbare statische assets van de app bevat, inclusief appsettings.json en omgevingsspecifieke app-instellingen voor configuratie-instellingen en voorbeeldweerdata (sample-data/weather.json). De index.html webpagina is de hoofdpagina van de app die is geïmplementeerd als een HTML-pagina:

    • Wanneer een pagina van de app in eerste instantie wordt aangevraagd, wordt deze pagina weergegeven en geretourneerd in het antwoord.
    • De pagina geeft aan waar het hoofdonderdeel App wordt weergegeven. Het onderdeel wordt weergegeven op de locatie van het div DOM-element met een id van app (<div id="app">Loading...</div>).

  • Program.cs: het toegangspunt van de app waarmee de WebAssembly-host wordt ingesteld:

    • Het App-onderdeel is het hoofdonderdeel van de app. Het App onderdeel wordt opgegeven als het div DOM-element met een id van app (<div id="app">Loading...</div> in wwwroot/index.html) aan de rootcomponentenverzameling (builder.RootComponents.Add<App>("#app")).
    • Services worden toegevoegd en geconfigureerd (bijvoorbeeld builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Extra bestanden en mappen kunnen worden weergegeven in een app die is geproduceerd op basis van een Blazor WebAssembly projectsjabloon wanneer er extra opties zijn geconfigureerd. Het genereren van een app met ASP.NET Core Identity bevat bijvoorbeeld extra assets voor verificatie- en autorisatiefuncties.

Blazor WebAssembly

Blazor WebAssembly projectsjablonen: blazorwasm, blazorwasm-empty

De Blazor WebAssembly-sjablonen maken de oorspronkelijke bestanden en mapstructuur voor een Blazor WebAssembly-app:

  • Als de blazorwasm-sjabloon wordt gebruikt, wordt de app gevuld met het volgende:
    • Demonstratiecode voor een FetchData-onderdeel waarmee gegevens uit een statische asset (weather.json) en gebruikersinteractie met een Counter-onderdeel worden geladen.
    • Bootstrap frontendhulpmiddelenset.
  • Als de blazorwasm-empty-sjabloon wordt gebruikt, wordt de app gemaakt zonder demonstratiecode en Bootstrap.

Projectstructuur:

  • Pages map: bevat de routeerbare Razor onderdelen van de Blazor app (.razor). De route voor elke pagina wordt opgegeven met behulp van de @page instructie. De sjabloon bevat de volgende onderdelen:

    • Counter onderdeel (Counter.razor): implementeert de tellerpagina.
    • FetchData onderdeel (FetchData.razor): implementeert de pagina Gegevens ophalen.
    • Index onderdeel (Index.razor): implementeert de pagina Home.

  • Properties map: bevat de configuratie van de ontwikkelomgeving in het bestandlaunchSettings.json.

  • Shared map: Bevat de volgende gedeelde componenten en opmaakmodellen:

    • -onderdeel (): het indelingsonderdeelvan de app .
    • MainLayout.razor.css: Opmaakmodel voor de hoofdindeling van de app.
    • NavMenu onderdeel (NavMenu.razor): hiermee wordt navigatie op de zijbalk geïmplementeerd. Bevat het NavLink onderdeel (NavLink), waarmee navigatiekoppelingen naar andere Razor onderdelen worden weergegeven. Het NavLink onderdeel geeft automatisch een geselecteerde status aan wanneer het onderdeel wordt geladen, zodat de gebruiker weet welk onderdeel momenteel wordt weergegeven.
    • NavMenu.razor.css: Opmaakmodel voor het navigatiemenu van de app.
    • SurveyPrompt onderdeel (SurveyPrompt.razor) (ASP.NET Core in .NET 7 of eerder): Blazor enquêteonderdeel.

  • wwwroot map: de map Web Root voor de app met de openbare statische assets van de app, waaronder bestanden met appsettings.json en omgevings-app-instellingen voor configuratie-instellingen. De index.html webpagina is de hoofdpagina van de app die is geïmplementeerd als een HTML-pagina:

    • Wanneer een pagina van de app in eerste instantie wordt aangevraagd, wordt deze pagina weergegeven en geretourneerd in het antwoord.
    • De pagina geeft aan waar het hoofdonderdeel App wordt weergegeven. Het onderdeel wordt weergegeven op de locatie van het div DOM-element met een id van app (<div id="app">Loading...</div>).

  • _Imports.razor: bevat algemene Razor richtlijnen die moeten worden opgenomen in de onderdelen van de app (.razor), zoals @using instructies voor naamruimten.

  • App.razor: het hoofdonderdeel van de app waarmee routering aan de clientzijde wordt ingesteld met behulp van het Router-onderdeel. Het Router onderdeel onderschept browsernavigatie en geeft de pagina weer die overeenkomt met het aangevraagde adres.

  • Program.cs: het toegangspunt van de app waarmee de WebAssembly-host wordt ingesteld:

    • Het App-onderdeel is het hoofdonderdeel van de app. Het App onderdeel wordt opgegeven als het div DOM-element met een id van app (<div id="app">Loading...</div> in wwwroot/index.html) voor de hoofdonderdeelverzameling (builder.RootComponents.Add<App>("#app")).
    • Services worden toegevoegd en geconfigureerd (bijvoorbeeld builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Extra bestanden en mappen kunnen worden weergegeven in een app die is geproduceerd op basis van een Blazor WebAssembly projectsjabloon wanneer er extra opties zijn geconfigureerd. Het genereren van een app met ASP.NET Core Identity bevat bijvoorbeeld extra assets voor verificatie- en autorisatiefuncties.

Een gehoste Blazor WebAssembly-oplossing bevat de volgende ASP.NET Core-projecten:

  • "Client": De Blazor WebAssembly-app.
  • "Server": Een app die de Blazor WebAssembly app en weersgegevens aan klanten levert.
  • "Shared": Een project dat algemene klassen, methoden en resources onderhoudt.

De oplossing wordt gegenereerd op basis van de Blazor WebAssembly projectsjabloon in Visual Studio met het selectievakje ASP.NET Core hosted ingeschakeld of met de optie -ho|--hosted met behulp van de opdracht dotnet new blazorwasm van de .NET CLI. Zie Hulpprogramma's voor ASP.NET Core Blazorvoor meer informatie.

De projectstructuur van de app aan de clientzijde in een gehoste Blazor Webassembly-oplossing ('Client'-project) is hetzelfde als de projectstructuur voor een zelfstandige Blazor WebAssembly-app. Aanvullende bestanden in een gehoste Blazor WebAssembly oplossing:

  • Het project 'Server' bevat een weersvoorspellingscontroller op Controllers/WeatherForecastController.cs die weergegevens retourneert naar het FetchData-onderdeel van het projectClient.
  • Het project 'Shared' omvat een klasse voor weersvoorspellingen bij WeatherForecast.cs die weergegevens vertegenwoordigt voor de projecten 'Client' en 'Server'.

Blazor WebAssembly

Blazor WebAssembly projectsjabloon: blazorwasm

De Blazor WebAssembly-sjabloon maakt de oorspronkelijke bestanden en mapstructuur voor een Blazor WebAssembly-app. De app wordt gevuld met demonstratiecode voor een FetchData-onderdeel waarmee gegevens uit een statische asset, weather.jsonen gebruikersinteractie met een Counter onderdeel worden geladen.

  • Pages map: bevat de routeerbare Razor onderdelen van de Blazor app (.razor). De route voor elke pagina wordt opgegeven met behulp van de @page instructie. De sjabloon bevat de volgende onderdelen:

    • Counter onderdeel (Counter.razor): implementeert de tellerpagina.
    • FetchData onderdeel (FetchData.razor): implementeert de pagina Gegevens ophalen.
    • Index onderdeel (Index.razor): implementeert de pagina Home.

  • Properties mapje: bevat de configuratie van de ontwikkelomgeving in het bestandlaunchSettings.json.

  • Shared bestandsmap: Bevat de volgende gedeelde onderdelen en stijlbladen:

    • MainLayout onderdeel (MainLayout.razor): het indelingsonderdeel van de app.
    • MainLayout.razor.css: Opmaakmodel voor de hoofdindeling van de app.
    • NavMenu onderdeel (NavMenu.razor): hiermee wordt navigatie op de zijbalk geïmplementeerd. Bevat het NavLink onderdeel (NavLink), waarmee navigatiekoppelingen naar andere Razor onderdelen worden weergegeven. Het NavLink onderdeel geeft automatisch een geselecteerde status aan wanneer het onderdeel wordt geladen, zodat de gebruiker weet welk onderdeel momenteel wordt weergegeven.
    • NavMenu.razor.css: Opmaakmodel voor het navigatiemenu van de app.
    • SurveyPrompt component (SurveyPrompt.razor): Blazor enquêteonderdeel.

  • wwwroot map: de Web Root map voor de app met de openbare statische assets van de app, waaronder appsettings.json en omgevings-appinstellingenbestanden voor de configuratie-instellingen. De index.html webpagina is de hoofdpagina van de app die is geïmplementeerd als een HTML-pagina:

    • Wanneer een pagina van de app in eerste instantie wordt aangevraagd, wordt deze pagina weergegeven en geretourneerd in het antwoord.
    • De pagina geeft aan waar het hoofdonderdeel App wordt weergegeven. Het onderdeel wordt weergegeven op de locatie van het div DOM-element met een id van app (<div id="app">Loading...</div>).

  • _Imports.razor: bevat algemene Razor richtlijnen die moeten worden opgenomen in de onderdelen van de app (.razor), zoals @using instructies voor naamruimten.

  • App.razor: het hoofdonderdeel van de app waarmee routering aan de clientzijde wordt ingesteld met behulp van het Router-onderdeel. Het Router onderdeel onderschept browsernavigatie en geeft de pagina weer die overeenkomt met het aangevraagde adres.

  • Program.cs: het toegangspunt van de app waarmee de WebAssembly-host wordt ingesteld:

    • Het App-onderdeel is het hoofdonderdeel van de app. Het App onderdeel wordt opgegeven als het div DOM-element met een id van app (<div id="app">Loading...</div> in wwwroot/index.html) aan de hoofdonderdeelverzameling (builder.RootComponents.Add<App>("#app")).
    • Services worden toegevoegd en geconfigureerd (bijvoorbeeld builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Extra bestanden en mappen kunnen worden weergegeven in een app die is geproduceerd op basis van een Blazor WebAssembly projectsjabloon wanneer er extra opties zijn geconfigureerd. Het genereren van een app met ASP.NET Core Identity bevat bijvoorbeeld extra assets voor verificatie- en autorisatiefuncties.

Een gehoste Blazor WebAssembly-oplossing bevat de volgende ASP.NET Core-projecten:

  • "Client": De Blazor WebAssembly-app.
  • "Server": Een app die de Blazor WebAssembly app en weergegevens aan clients bedient.
  • "Shared": Een project dat algemene klassen, methoden en resources onderhoudt.

De oplossing wordt gegenereerd op basis van de Blazor WebAssembly projectsjabloon in Visual Studio met het selectievakje ASP.NET Core hosted ingeschakeld of met de optie -ho|--hosted met behulp van de opdracht dotnet new blazorwasm van de .NET CLI. Zie Hulpprogramma's voor ASP.NET Core Blazorvoor meer informatie.

De projectstructuur van de app aan de clientzijde in een gehoste Blazor Webassembly-oplossing ('Client'-project) is hetzelfde als de projectstructuur voor een zelfstandige Blazor WebAssembly-app. Aanvullende bestanden in een gehoste Blazor WebAssembly oplossing:

  • Het project 'Server' bevat een weersvoorspellingscontroller op Controllers/WeatherForecastController.cs die weergegevens retourneert naar het FetchData-onderdeel van het projectClient.
  • Het project 'Shared' bevat een weerprognoseclass op WeatherForecast.cs die de weergegevens vertegenwoordigt voor de projecten 'Client' en 'Server'.

Blazor WebAssembly

Blazor WebAssembly projectsjabloon: blazorwasm

De Blazor WebAssembly-sjabloon maakt de oorspronkelijke bestanden en mapstructuur voor een Blazor WebAssembly-app. De app wordt gevuld met demonstratiecode voor een FetchData-onderdeel waarmee gegevens uit een statische asset, weather.jsonen gebruikersinteractie met een Counter onderdeel worden geladen.

  • Pages map: bevat de routeerbare Razor onderdelen van de Blazor app (.razor). De route voor elke pagina wordt opgegeven met behulp van de @page instructie. De sjabloon bevat de volgende onderdelen:

    • Counter onderdeel (Counter.razor): implementeert de Counter-pagina.
    • FetchData onderdeel (FetchData.razor): implementeert de pagina Gegevens ophalen.
    • Index onderdeel (Index.razor): implementeert de pagina Home.

  • Properties mapje: houdt de configuratie van de ontwikkelomgeving in het launchSettings.json bestand.

  • Shared map: Bevat de volgende gedeelde componenten en opmaakmodellen:

    • MainLayout onderdeel (MainLayout.razor): het indelingsonderdeel van de app.
    • MainLayout.razor.css: Opmaakmodel voor de hoofdindeling van de app.
    • NavMenu onderdeel (NavMenu.razor): hiermee wordt navigatie op de zijbalk geïmplementeerd. Bevat het NavLink onderdeel (NavLink), waarmee navigatiekoppelingen naar andere Razor onderdelen worden weergegeven. Het NavLink onderdeel geeft automatisch een geselecteerde status aan wanneer het onderdeel wordt geladen, zodat de gebruiker weet welk onderdeel momenteel wordt weergegeven.
    • NavMenu.razor.css: Opmaakmodel voor het navigatiemenu van de app.
    • SurveyPrompt onderdeel (SurveyPrompt.razor): Blazor onderdeel van de enquête.

  • wwwroot map: de map Web Root voor de app met de publieke statische resources van de app, waaronder appsettings.json-bestanden en bestanden met omgevingsinstellingen voor de app voor -configuratie-instellingen. De index.html webpagina is de hoofdpagina van de app die is geïmplementeerd als een HTML-pagina:

    • Wanneer een pagina van de app in eerste instantie wordt aangevraagd, wordt deze pagina weergegeven en geretourneerd in het antwoord.
    • De pagina geeft aan waar het hoofdonderdeel App wordt weergegeven. Het onderdeel wordt op de locatie van het div DOM-element weergegeven met een id van app (<div id="app">Loading...</div>).

  • _Imports.razor: bevat algemene Razor richtlijnen die moeten worden opgenomen in de onderdelen van de app (.razor), zoals @using instructies voor naamruimten.

  • App.razor: het hoofdonderdeel van de app waarmee routering aan de clientzijde wordt ingesteld met behulp van het Router-onderdeel. Het Router onderdeel onderschept browsernavigatie en geeft de pagina weer die overeenkomt met het aangevraagde adres.

  • Program.cs: het toegangspunt van de app waarmee de WebAssembly-host wordt ingesteld:

    • Het App-onderdeel is het hoofdonderdeel van de app. Het App-component is gespecificeerd als het div DOM-element met een id van app (<div id="app">Loading...</div> in wwwroot/index.html) in de hoofdcomponentcollectie (builder.RootComponents.Add<App>("#app")).
    • Services worden toegevoegd en geconfigureerd (bijvoorbeeld builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Extra bestanden en mappen kunnen worden weergegeven in een app die is geproduceerd op basis van een Blazor WebAssembly projectsjabloon wanneer er extra opties zijn geconfigureerd. Het genereren van een app met ASP.NET Core Identity bevat bijvoorbeeld extra assets voor verificatie- en autorisatiefuncties.

Een gehoste Blazor WebAssembly-oplossing bevat de volgende ASP.NET Core-projecten:

  • "Client": De Blazor WebAssembly-app.
  • "Server": Een app die de Blazor WebAssembly app en weergegevens aan klanten levert.
  • "Shared": Een project dat algemene klassen, methoden en resources onderhoudt.

De oplossing wordt gegenereerd op basis van de Blazor WebAssembly projectsjabloon in Visual Studio met het selectievakje ASP.NET Core hosted ingeschakeld of met de optie -ho|--hosted met behulp van de opdracht dotnet new blazorwasm van de .NET CLI. Zie Hulpprogramma's voor ASP.NET Core Blazorvoor meer informatie.

De projectstructuur van de app aan de clientzijde in een gehoste Blazor Webassembly-oplossing ('Client'-project) is hetzelfde als de projectstructuur voor een zelfstandige Blazor WebAssembly-app. Aanvullende bestanden in een gehoste Blazor WebAssembly oplossing:

  • Het project 'Server' bevat een weersvoorspellingscontroller op Controllers/WeatherForecastController.cs die weergegevens retourneert naar het FetchData-onderdeel van het projectClient.
  • Het project 'Shared' bevat een weersverwachtingsklasse bij WeatherForecast.cs die weergegevens vertegenwoordigt voor de projecten 'Client' en 'Server'.

Blazor WebAssembly

Blazor WebAssembly projectsjabloon: blazorwasm

De Blazor WebAssembly-sjabloon maakt de oorspronkelijke bestanden en mapstructuur voor een Blazor WebAssembly-app. De app wordt gevuld met demonstratiecode voor een FetchData-onderdeel waarmee gegevens uit een statische asset, weather.jsonen gebruikersinteractie met een Counter onderdeel worden geladen.

  • Pages map: bevat de routeerbare Razor onderdelen van de Blazor app (.razor). De route voor elke pagina wordt opgegeven met behulp van de @page instructie. De sjabloon bevat de volgende onderdelen:

    • Counter onderdeel (Counter.razor): implementeert de tellerpagina.
    • FetchData onderdeel (FetchData.razor): implementeert de pagina Gegevens ophalen.
    • Index onderdeel (Index.razor): implementeert de pagina Home.

  • Properties map: bevat configuratie van de ontwikkelomgeving in het bestand launchSettings.json.

  • Shared map: Bevat de volgende gedeelde onderdelen:

    • MainLayout onderdeel (MainLayout.razor): het indelingsonderdeel van de app.
    • NavMenu onderdeel (NavMenu.razor): hiermee wordt navigatie op de zijbalk geïmplementeerd. Bevat het NavLink onderdeel (NavLink), waarmee navigatiekoppelingen naar andere Razor onderdelen worden weergegeven. Het NavLink onderdeel geeft automatisch een geselecteerde status aan wanneer het onderdeel wordt geladen, zodat de gebruiker weet welk onderdeel momenteel wordt weergegeven.
    • SurveyPrompt component (SurveyPrompt.razor): Blazor enquêteonderdeel.

  • wwwroot map: de map Web Root voor de app met de openbare statische assets van de app, waaronder bestanden met appsettings.json en omgevings-app-instellingen voor configuratie-instellingen. De index.html webpagina is de hoofdpagina van de app die is geïmplementeerd als een HTML-pagina:

    • Wanneer een pagina van de app in eerste instantie wordt aangevraagd, wordt deze pagina weergegeven en geretourneerd in het antwoord.
    • De pagina geeft aan waar het hoofdonderdeel App wordt weergegeven. Het onderdeel wordt weergegeven op de locatie van het app DOM-element (<app>Loading...</app>).

  • _Imports.razor: bevat algemene Razor richtlijnen die moeten worden opgenomen in de onderdelen van de app (.razor), zoals @using instructies voor naamruimten.

  • App.razor: het hoofdonderdeel van de app waarmee routering aan de clientzijde wordt ingesteld met behulp van het Router-onderdeel. Het Router onderdeel onderschept browsernavigatie en geeft de pagina weer die overeenkomt met het aangevraagde adres.

  • Program.cs: het toegangspunt van de app waarmee de WebAssembly-host wordt ingesteld:

    • Het App-onderdeel is het hoofdonderdeel van de app. Het App onderdeel wordt opgegeven als het app DOM-element (<app>Loading...</app> in wwwroot/index.html) aan de hoofdonderdeelverzameling (builder.RootComponents.Add<App>("app")).
    • Services worden toegevoegd en geconfigureerd (bijvoorbeeld builder.Services.AddSingleton<IMyDependency, MyDependency>()).

Extra bestanden en mappen kunnen worden weergegeven in een app die is geproduceerd op basis van een Blazor WebAssembly projectsjabloon wanneer er extra opties zijn geconfigureerd. Het genereren van een app met ASP.NET Core Identity bevat bijvoorbeeld extra assets voor verificatie- en autorisatiefuncties.

Een gehoste Blazor WebAssembly-oplossing bevat de volgende ASP.NET Core-projecten:

  • "Client": De Blazor WebAssembly-app.
  • "Server": Een app die de Blazor WebAssembly app en weergegevens aan klanten levert.
  • "Shared": Een project dat algemene klassen, methoden en resources onderhoudt.

De oplossing wordt gegenereerd op basis van de Blazor WebAssembly projectsjabloon in Visual Studio met het selectievakje ASP.NET Core hosted ingeschakeld of met de optie -ho|--hosted met behulp van de opdracht dotnet new blazorwasm van de .NET CLI. Zie Hulpprogramma's voor ASP.NET Core Blazorvoor meer informatie.

De projectstructuur van de app aan de clientzijde in een gehoste Blazor Webassembly-oplossing ('Client'-project) is hetzelfde als de projectstructuur voor een zelfstandige Blazor WebAssembly-app. Aanvullende bestanden in een gehoste Blazor WebAssembly oplossing:

  • Het project 'Server' bevat een weersvoorspellingscontroller op Controllers/WeatherForecastController.cs die weergegevens retourneert naar het FetchData-onderdeel van het projectClient.
  • Het project 'Shared' bevat een weersvoorspellingsklasse bij WeatherForecast.cs die weergegevens voor de projecten 'Client' en 'Server' vertegenwoordigt.

Locatie van het Blazor-script

Het Blazor script wordt geleverd als een statische webasset met automatische compressie en vingerafdruk. Zie ASP.NET Core Blazor statische bestandenvoor meer informatie.

Het Blazor script wordt geleverd vanuit een ingesloten resource in het gedeelde ASP.NET Core-framework.

In een Blazor Web Appbevindt het Blazor script zich in het bestand Components/App.razor:

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

In een Blazor Server-app bevindt het Blazor script zich in het Pages/_Host.cshtml-bestand:

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

In een Blazor Server-app bevindt het Blazor script zich in het Pages/_Host.cshtml-bestand:

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

In een Blazor Server-app bevindt het Blazor script zich in het Pages/_Layout.cshtml-bestand:

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

In een Blazor Server-app bevindt het Blazor script zich in het Pages/_Host.cshtml-bestand:

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

In een Blazor WebAssembly-app bevindt de inhoud van het Blazor script zich in het bestand wwwroot/index.html:

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

Locatie van de inhoud van <head> en <body>

In een Blazor Web Appis de inhoud van <head> en <body> te vinden in het bestand Components/App.razor.

In een Blazor Server-app bevindt <head> en <body> inhoud zich in het Pages/_Host.cshtml bestand.

In een Blazor Server-app bevindt <head> en <body> inhoud zich in het Pages/_Layout.cshtml bestand.

In een Blazor Server-app bevindt <head> en <body> inhoud zich in het Pages/_Host.cshtml bestand.

In een Blazor WebAssembly-app bevindt <head> en <body> inhoud zich in het wwwroot/index.html bestand.

Dual Blazor Server/Blazor WebAssembly-app

Als u een app wilt maken die kan worden uitgevoerd als een Blazor Server-app of een Blazor WebAssembly-app, moet u alle app-logica en onderdelen in een Razor klassebibliotheek (RCL) plaatsen en verwijzen naar de RCL van afzonderlijke Blazor Server en Blazor WebAssembly projecten. Voor algemene services waarvan de implementaties verschillen op basis van het hostingmodel, definieert u de serviceinterfaces in de RCL en implementeert u de services in de Blazor Server- en Blazor WebAssembly projecten.

Aanvullende informatiebronnen