Events
Mar 31, 11 PM - Apr 2, 11 PM
The ultimate Microsoft Fabric, Power BI, SQL, and AI community-led event. March 31 to April 2, 2025.
Register todayThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Note
This isn't the latest version of this article. For the current release, see the .NET 9 version of this article.
Warning
This version of ASP.NET Core is no longer supported. For more information, see the .NET and .NET Core Support Policy. For the current release, see the .NET 9 version of this article.
Important
This information relates to a pre-release product that may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
For the current release, see the .NET 9 version of this article.
This article describes the files and folders that make up a Blazor app generated from a Blazor project template.
Blazor Web App project template: blazor
The Blazor Web App project template provides a single starting point for using Razor components (.razor
) to build any style of web UI, both server-side rendered and client-side rendered. It combines the strengths of the existing Blazor Server and Blazor WebAssembly hosting models with server-side rendering, streaming rendering, enhanced navigation and form handling, and the ability to add interactivity using either Blazor Server or Blazor WebAssembly on a per-component basis.
If both client-side rendering (CSR) and interactive server-side rendering (interactive SSR) are selected on app creation, the project template uses the Interactive Auto render mode. The automatic rendering mode initially uses interactive SSR while the .NET app bundle and runtime are downloaded to the browser. After the .NET WebAssembly runtime is activated, rendering switches to CSR.
The Blazor Web App template enables both static and interactive server-side rendering using a single project. If you also enable Interactive WebAssembly rendering, the project includes an additional client project (.Client
) for your WebAssembly-based components. The built output from the client project is downloaded to the browser and executed on the client. Components using the Interactive WebAssembly or Interactive Auto render modes must be located in the .Client
project.
The component folder structure of the .Client
project differs from the Blazor Web App's main project folder structure because the main project is a standard ASP.NET Core project. The main project must take into account other assets for ASP.NET Core projects that are unrelated to Blazor. You're welcome to use whatever component folder structure you wish in the .Client
project. You're free to mirror the component folder layout of the main project in the .Client
project if you wish. Note that namespaces might require adjustments for such assets as layout files if you move components into different folders than the project template uses.
More information on components and render modes is found in the ASP.NET Core Razor components and ASP.NET Core Blazor render modes articles.
Based on the interactive render mode selected at app creation, the Layout
folder is either in the server project in the Components
folder or at the root of the .Client
project. The folder contains the following layout components and stylesheets:
MainLayout
component (MainLayout.razor
) is the app's layout component.MainLayout.razor.css
is the stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
) implements sidebar navigation. The component includes NavLink
components (NavLink), which render navigation links to other Razor components. The NavLink component indicates to the user which component is currently displayed.NavMenu.razor.css
is the stylesheet for the app's navigation menu.The Routes
component (Routes.razor
) is either in the server project or the .Client
project and sets up routing using the Router component. For client-side interactive components, the Router component intercepts browser navigation and renders the page that matches the requested address.
The Components
folder of the server project holds the app's server-side Razor components. Shared components are often placed at the root of the Components
folder, while layout and page components are usually placed in folders within the Components
folder.
The Components/Pages
folder of the server project contains the app's routable server-side Razor components. The route for each page is specified using the @page
directive.
The App
component (App.razor
) is the root component of the app with HTML <head>
markup, the Routes
component, and the Blazor <script>
tag. The root component is the first component that the app loads.
An _Imports.razor
file in each of the server and .Client
projects includes common Razor directives for Razor components of either project, such as @using
directives for namespaces.
The Properties
folder of the server project holds development environment configuration in the launchSettings.json
file.
Note
The http
profile precedes the https
profile in the launchSettings.json
file. When an app is run with the .NET CLI, the app runs at an HTTP endpoint because the first profile found is http
. The profile order eases the transition of adopting HTTPS for Linux and macOS users. If you prefer to start the app with the .NET CLI without having to pass the -lp https
or --launch-profile https
option to the dotnet watch
(or dotnet run
) command, simply place the https
profile above the http
profile in the file.
The wwwroot
folder of the server project is the Web Root folder for the server project that holds the app's public static assets.
The Program.cs
file of the server project is the project's entry point that sets up the ASP.NET Core web application host and contains the app's startup logic, including service registrations, configuration, logging, and request processing pipeline:
App
component (App.razor
). AddInteractiveServerRenderMode configures interactive server-side rendering (interactive SSR) for the app. AddInteractiveWebAssemblyRenderMode configures the Interactive WebAssembly render mode for the app.The app settings files (appsettings.Development.json
, appsettings.json
) in either the server or .Client
project provide configuration settings. In the server project, settings files are at the root of the project. In the .Client
project, settings files are consumed from the Web Root folder, wwwroot
.
In the .Client
project:
The Pages
folder contains routable client-side Razor components. The route for each page is specified using the @page
directive.
The wwwroot
folder is the Web Root folder for the .Client
project that holds the app's public static assets.
The Program.cs
file is the project's entry point that sets up the WebAssembly host and contains the project's startup logic, including service registrations, configuration, logging, and request processing pipeline.
Additional files and folders may appear in an app produced from a Blazor Web App project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
Blazor Server project templates: blazorserver
, blazorserver-empty
The Blazor Server templates create the initial files and directory structure for a Blazor Server app:
blazorserver
template is used, the app is populated with the following:
FetchData
component that loads data from a weather forecast service (WeatherForecastService
) and user interaction with a Counter
component.blazorserver-empty
template is used, the app is created without demonstration code and Bootstrap.Project structure:
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 Blazor app's routable Razor components (.razor
) 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:
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.Properties
folder: Holds development environment configuration in the launchSettings.json
file.
Shared
folder: Contains the following shared components and stylesheets:
MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes the NavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.wwwroot
folder: The Web Root folder for the app containing the app's public static assets.
_Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as @using
directives for namespaces.
App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.
appsettings.json
and environmental app settings files: Provide configuration settings for the app.
Program.cs
: The app's entry point that sets up the ASP.NET Core host and contains the app's startup logic, including service registrations and request processing pipeline configuration:
WeatherForecastService
is added to the service container for use by the example FetchData
component.MapFallbackToPage("/_Host")
is called to set up the root page of the app (Pages/_Host.cshtml
) and enable navigation.Additional files and folders may appear in an app produced from a Blazor Server project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
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 Blazor app's routable Razor components (.razor
) 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:
App
component (App.razor
) is rendered._Layout.cshtml
: The layout page for the _Host.cshtml
root page of the app.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.Properties
folder: Holds development environment configuration in the launchSettings.json
file.
Shared
folder: Contains the following shared components and stylesheets:
MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes the NavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.wwwroot
folder: The Web Root folder for the app containing the app's public static assets.
_Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as @using
directives for namespaces.
App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.
appsettings.json
and environmental app settings files: Provide configuration settings for the app.
Program.cs
: The app's entry point that sets up the ASP.NET Core host and contains the app's startup logic, including service registrations and request processing pipeline configuration:
WeatherForecastService
is added to the service container for use by the example FetchData
component.MapFallbackToPage("/_Host")
is called to set up the root page of the app (Pages/_Host.cshtml
) and enable navigation.Additional files and folders may appear in an app produced from a Blazor Server project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
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 Blazor app's routable Razor components (.razor
) 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:
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.Properties
folder: Holds development environment configuration in the launchSettings.json
file.
Shared
folder: Contains the following shared components and stylesheets:
MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes the NavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.wwwroot
folder: The Web Root folder for the app containing the app's public static assets.
_Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as @using
directives for namespaces.
App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.
appsettings.json
and environmental app settings files: Provide configuration settings for the app.
Program.cs
: The app's entry point that sets up the ASP.NET Core host.
Startup.cs
: Contains the app's startup logic. The Startup
class defines two methods:
ConfigureServices
: Configures the app's dependency injection (DI) services. Services are added by calling AddServerSideBlazor, and the WeatherForecastService
is added to the service container for use by the example FetchData
component.Configure
: Configures the app's request handling pipeline:
MapFallbackToPage("/_Host")
is called to set up the root page of the app (Pages/_Host.cshtml
) and enable navigation.Additional files and folders may appear in an app produced from a Blazor Server project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
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 Blazor app's routable Razor components (.razor
) 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:
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.Properties
folder: Holds development environment configuration in the launchSettings.json
file.
Shared
folder: Contains the following shared components:
MainLayout
component (MainLayout.razor
): The app's layout component.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes the NavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.wwwroot
folder: The Web Root folder for the app containing the app's public static assets.
_Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as @using
directives for namespaces.
App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.
appsettings.json
and environmental app settings files: Provide configuration settings for the app.
Program.cs
: The app's entry point that sets up the ASP.NET Core host.
Startup.cs
: Contains the app's startup logic. The Startup
class defines two methods:
ConfigureServices
: Configures the app's dependency injection (DI) services. Services are added by calling AddServerSideBlazor, and the WeatherForecastService
is added to the service container for use by the example FetchData
component.Configure
: Configures the app's request handling pipeline:
MapFallbackToPage("/_Host")
is called to set up the root page of the app (Pages/_Host.cshtml
) and enable navigation.Additional files and folders may appear in an app produced from a Blazor Server project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
Standalone Blazor WebAssembly project template: blazorwasm
The Blazor WebAssembly template creates the initial files and directory structure for a standalone Blazor WebAssembly app:
blazorwasm
template is used, the app is populated with the following:
Weather
component that loads data from a static asset (weather.json
) and user interaction with a Counter
component.blazorwasm
template can also be generated without sample pages and styling.Project structure:
Layout
folder: Contains the following layout components and stylesheets:
MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes the NavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.Pages
folder: Contains the Blazor app's routable Razor components (.razor
). 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.Index
component (Index.razor
): Implements the Home page.Weather
component (Weather.razor
): Implements the Weather page._Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as @using
directives for namespaces.
App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.
Properties
folder: Holds development environment configuration in the launchSettings.json
file.
Note
The http
profile precedes the https
profile in the launchSettings.json
file. When an app is run with the .NET CLI, the app runs at an HTTP endpoint because the first profile found is http
. The profile order eases the transition of adopting HTTPS for Linux and macOS users. If you prefer to start the app with the .NET CLI without having to pass the -lp https
or --launch-profile https
option to the dotnet watch
(or dotnet run
) command, simply place the https
profile above the http
profile in the file.
wwwroot
folder: 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 and sample weather data (sample-data/weather.json
). The index.html
webpage is the root page of the app implemented as an HTML page:
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>
).Program.cs
: The app's entry point that sets up the WebAssembly host:
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")
).builder.Services.AddSingleton<IMyDependency, MyDependency>()
).Additional files and folders may appear in an app produced from a Blazor WebAssembly project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
Blazor WebAssembly project templates: blazorwasm
, blazorwasm-empty
The Blazor WebAssembly templates create the initial files and directory structure for a Blazor WebAssembly app:
blazorwasm
template is used, the app is populated with the following:
FetchData
component that loads data from a static asset (weather.json
) and user interaction with a Counter
component.blazorwasm-empty
template is used, the app is created without demonstration code and Bootstrap.Project structure:
Pages
folder: Contains the Blazor app's routable Razor components (.razor
). 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
folder: Holds development environment configuration in the launchSettings.json
file.
Shared
folder: Contains the following shared components and stylesheets:
MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes the NavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
) (ASP.NET Core in .NET 7 or earlier): Blazor survey component.wwwroot
folder: 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:
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>
)._Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as @using
directives for namespaces.
App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.
Program.cs
: The app's entry point that sets up the WebAssembly host:
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")
).builder.Services.AddSingleton<IMyDependency, MyDependency>()
).Additional files and folders may appear in an app produced from a Blazor WebAssembly project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
A hosted Blazor WebAssembly solution includes the following ASP.NET Core projects:
The solution is generated from the Blazor WebAssembly project template in Visual Studio with the ASP.NET Core Hosted checkbox selected or with the -ho|--hosted
option using the .NET CLI's dotnet new blazorwasm
command. For more information, see Tooling for ASP.NET Core Blazor.
The project structure of the client-side app in a hosted Blazor Webassembly solution ("Client" project) is the same as the project structure for a standalone Blazor WebAssembly app. Additional files in a hosted Blazor WebAssembly solution:
Controllers/WeatherForecastController.cs
that returns weather data to the "Client" project's FetchData
component.WeatherForecast.cs
that represents weather data for the "Client" and "Server" projects.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 Blazor app's routable Razor components (.razor
). 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
folder: Holds development environment configuration in the launchSettings.json
file.
Shared
folder: Contains the following shared components and stylesheets:
MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes the NavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.wwwroot
folder: 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:
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>
)._Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as @using
directives for namespaces.
App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.
Program.cs
: The app's entry point that sets up the WebAssembly host:
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")
).builder.Services.AddSingleton<IMyDependency, MyDependency>()
).Additional files and folders may appear in an app produced from a Blazor WebAssembly project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
A hosted Blazor WebAssembly solution includes the following ASP.NET Core projects:
The solution is generated from the Blazor WebAssembly project template in Visual Studio with the ASP.NET Core Hosted checkbox selected or with the -ho|--hosted
option using the .NET CLI's dotnet new blazorwasm
command. For more information, see Tooling for ASP.NET Core Blazor.
The project structure of the client-side app in a hosted Blazor Webassembly solution ("Client" project) is the same as the project structure for a standalone Blazor WebAssembly app. Additional files in a hosted Blazor WebAssembly solution:
Controllers/WeatherForecastController.cs
that returns weather data to the "Client" project's FetchData
component.WeatherForecast.cs
that represents weather data for the "Client" and "Server" projects.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 Blazor app's routable Razor components (.razor
). 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
folder: Holds development environment configuration in the launchSettings.json
file.
Shared
folder: Contains the following shared components and stylesheets:
MainLayout
component (MainLayout.razor
): The app's layout component.MainLayout.razor.css
: Stylesheet for the app's main layout.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes the NavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.NavMenu.razor.css
: Stylesheet for the app's navigation menu.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.wwwroot
folder: 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:
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>
)._Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as @using
directives for namespaces.
App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.
Program.cs
: The app's entry point that sets up the WebAssembly host:
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")
).builder.Services.AddSingleton<IMyDependency, MyDependency>()
).Additional files and folders may appear in an app produced from a Blazor WebAssembly project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
A hosted Blazor WebAssembly solution includes the following ASP.NET Core projects:
The solution is generated from the Blazor WebAssembly project template in Visual Studio with the ASP.NET Core Hosted checkbox selected or with the -ho|--hosted
option using the .NET CLI's dotnet new blazorwasm
command. For more information, see Tooling for ASP.NET Core Blazor.
The project structure of the client-side app in a hosted Blazor Webassembly solution ("Client" project) is the same as the project structure for a standalone Blazor WebAssembly app. Additional files in a hosted Blazor WebAssembly solution:
Controllers/WeatherForecastController.cs
that returns weather data to the "Client" project's FetchData
component.WeatherForecast.cs
that represents weather data for the "Client" and "Server" projects.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 Blazor app's routable Razor components (.razor
). 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
folder: Holds development environment configuration in the launchSettings.json
file.
Shared
folder: Contains the following shared components:
MainLayout
component (MainLayout.razor
): The app's layout component.NavMenu
component (NavMenu.razor
): Implements sidebar navigation. Includes the NavLink
component (NavLink), which renders navigation links to other Razor components. The NavLink component automatically indicates a selected state when its component is loaded, which helps the user understand which component is currently displayed.SurveyPrompt
component (SurveyPrompt.razor
): Blazor survey component.wwwroot
folder: 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:
App
component is rendered. The component is rendered at the location of the app
DOM element (<app>Loading...</app>
)._Imports.razor
: Includes common Razor directives to include in the app's components (.razor
), such as @using
directives for namespaces.
App.razor
: The root component of the app that sets up client-side routing using the Router component. The Router component intercepts browser navigation and renders the page that matches the requested address.
Program.cs
: The app's entry point that sets up the WebAssembly host:
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")
).builder.Services.AddSingleton<IMyDependency, MyDependency>()
).Additional files and folders may appear in an app produced from a Blazor WebAssembly project template when additional options are configured. For example, generating an app with ASP.NET Core Identity includes additional assets for authentication and authorization features.
A hosted Blazor WebAssembly solution includes the following ASP.NET Core projects:
The solution is generated from the Blazor WebAssembly project template in Visual Studio with the ASP.NET Core Hosted checkbox selected or with the -ho|--hosted
option using the .NET CLI's dotnet new blazorwasm
command. For more information, see Tooling for ASP.NET Core Blazor.
The project structure of the client-side app in a hosted Blazor Webassembly solution ("Client" project) is the same as the project structure for a standalone Blazor WebAssembly app. Additional files in a hosted Blazor WebAssembly solution:
Controllers/WeatherForecastController.cs
that returns weather data to the "Client" project's FetchData
component.WeatherForecast.cs
that represents weather data for the "Client" and "Server" projects.The Blazor script is served from an embedded resource in the ASP.NET Core shared framework.
In a Blazor Web App, the Blazor script is located in the Components/App.razor
file:
<script src="_framework/blazor.web.js"></script>
In a Blazor Server app, the Blazor script is located in the Pages/_Host.cshtml
file:
<script src="_framework/blazor.server.js"></script>
In a Blazor Server app, the Blazor script is located in the Pages/_Host.cshtml
file:
<script src="_framework/blazor.server.js"></script>
In a Blazor Server app, the Blazor script is located in the Pages/_Layout.cshtml
file:
<script src="_framework/blazor.server.js"></script>
In a Blazor Server app, the Blazor script is located in the Pages/_Host.cshtml
file:
<script src="_framework/blazor.server.js"></script>
In a Blazor WebAssembly app, the Blazor script content is located in the wwwroot/index.html
file:
<script src="_framework/blazor.webassembly.js"></script>
In a Blazor Web App, <head>
and <body>
content is located in the Components/App.razor
file.
In a Blazor Server app, <head>
and <body>
content is located in the Pages/_Host.cshtml
file.
In a Blazor Server app, <head>
and <body>
content is located in the Pages/_Layout.cshtml
file.
In a Blazor Server app, <head>
and <body>
content is located in the Pages/_Host.cshtml
file.
In a Blazor WebAssembly app, <head>
and <body>
content is located in the wwwroot/index.html
file.
To create an app that can run as either a Blazor Server app or a Blazor WebAssembly app, one approach is to place all of the app logic and components into a Razor class library (RCL) and reference the RCL from separate Blazor Server and Blazor WebAssembly projects. For common services whose implementations differ based on the hosting model, define the service interfaces in the RCL and implement the services in the Blazor Server and Blazor WebAssembly projects.
ASP.NET Core feedback
ASP.NET Core is an open source project. Select a link to provide feedback:
Events
Mar 31, 11 PM - Apr 2, 11 PM
The ultimate Microsoft Fabric, Power BI, SQL, and AI community-led event. March 31 to April 2, 2025.
Register todayTraining
Module
Build rich interactive components with Blazor web apps - Training
Learn how to interoperate Blazor apps with JavaScript code, use templated components, and handle component lifecycle events.