daohualiuxiang
/
AspNetCore.Docs
mirror of https://github.com/dotnet/AspNetCore.Docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
AspNetCore.Docs/aspnetcore/blazor/project-structure.md

12 KiB
Raw Blame History

title author description monikerRange ms.author ms.custom ms.date no-loc uid
ASP.NET Core Blazor project structure guardrex Learn about ASP.NET Core Blazor app project structure. >= aspnetcore-3.1 riande mvc 01/19/2021
Home
Privacy
Kestrel
appsettings.json
ASP.NET Core Identity
cookie
Cookie
Blazor
Blazor Server
Blazor WebAssembly
Identity
Let's Encrypt
Razor
SignalR
blazor/project-structure

ASP.NET Core Blazor project structure

This article describes the files and folders that make up a Blazor app generated from one of the Blazor framework's project templates. For information on how to use tooling to create a Blazor app from a Blazor project template, see xref:blazor/tooling. For information on Blazor's hosting models, Blazor WebAssembly and Blazor Server, see xref:blazor/hosting-models.

Blazor WebAssembly

Blazor WebAssembly project template: blazorwasm

The Blazor WebAssembly template creates the initial files and directory structure for a Blazor WebAssembly app. The app is populated with demonstration code for a FetchData component that loads data from a static asset, weather.json, and user interaction with a Counter component.

  • Pages folder: Contains the routable components/pages (.razor) that make up the Blazor app. The route for each page is specified using the @page directive. The template includes the following components:

    • Counter component (Counter.razor): Implements the Counter page.
    • FetchData component (FetchData.razor): Implements the Fetch data page.
    • Index component (Index.razor): Implements the Home page.

  • Properties/launchSettings.json: Holds development environment configuration.

::: moniker range=">= aspnetcore-5.0"

  • Shared folder: Contains the following shared components and stylesheets:

::: moniker-end

::: moniker range="< aspnetcore-5.0"

::: moniker-end

::: moniker range=">= aspnetcore-5.0"

  • wwwroot: The Web Root folder for the app containing the app's public static assets, including appsettings.json and environmental app settings files for configuration settings. The index.html webpage is the root page of the app implemented as an HTML page:
    • When any page of the app is initially requested, this page is rendered and returned in the response.
    • The page specifies where the root App component is rendered. The component is rendered at the location of the div DOM element with an id of app (<div id="app">Loading...</div>).

::: moniker-end

::: moniker range="< aspnetcore-5.0"

  • wwwroot: The Web Root folder for the app containing the app's public static assets, including appsettings.json and environmental app settings files for configuration settings. The index.html webpage is the root page of the app implemented as an HTML page:
    • When any page of the app is initially requested, this page is rendered and returned in the response.
    • The page specifies where the root App component is rendered. The component is rendered at the location of the app DOM element (<app>Loading...</app>).

::: moniker-end

[!NOTE] JavaScript (JS) files added to the wwwroot/index.html file should appear before the closing </body> tag. The order that custom JS code is loaded from JS files is important in some scenarios. For example, ensure that JS files with interop methods are included before Blazor framework JS files.

::: moniker range=">= aspnetcore-5.0"

  • Program.cs: The app's entry point that sets up the WebAssembly host:

    • The App component is the root component of the app. The App component is specified as the div DOM element with an id of app (<div id="app">Loading...</div> in wwwroot/index.html) to the root component collection (builder.RootComponents.Add<App>("#app")).
    • Services are added and configured (for example, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

::: moniker-end

::: moniker range="< aspnetcore-5.0"

  • Program.cs: The app's entry point that sets up the WebAssembly host:

    • The App component is the root component of the app. The App component is specified as the app DOM element (<app>Loading...</app> in wwwroot/index.html) to the root component collection (builder.RootComponents.Add<App>("app")).
    • Services are added and configured (for example, builder.Services.AddSingleton<IMyDependency, MyDependency>()).

::: moniker-end

Blazor Server

Blazor Server project template: blazorserver

The Blazor Server template creates the initial files and directory structure for a Blazor Server app. The app is populated with demonstration code for a FetchData component that loads data from a registered service, WeatherForecastService, and user interaction with a Counter component.

  • Data folder: Contains the WeatherForecast class and implementation of the WeatherForecastService that provides example weather data to the app's FetchData component.

  • Pages folder: Contains the routable components/pages (.razor) that make up the Blazor app and the root Razor page of a Blazor Server app. The route for each page is specified using the @page directive. The template includes the following:

    • _Host.cshtml: The root page of the app implemented as a Razor Page:
      • When any page of the app is initially requested, this page is rendered and returned in the response.
      • The Host page specifies where the root App component (App.razor) is rendered.
    • Counter component (Counter.razor): Implements the Counter page.
    • Error component (Error.razor): Rendered when an unhandled exception occurs in the app.
    • FetchData component (FetchData.razor): Implements the Fetch data page.
    • Index component (Index.razor): Implements the Home page.

[!NOTE] JavaScript (JS) files added to the Pages/_Host.cshtml file should appear before the closing </body> tag. The order that custom JS code is loaded from JS files is important in some scenarios. For example, ensure that JS files with interop methods are included before Blazor framework JS files.

::: moniker range=">= aspnetcore-5.0"

  • Shared folder: Contains the following shared components and stylesheets:

::: moniker-end

::: moniker range="< aspnetcore-5.0"

::: moniker-end

Additional resources