ASP.NET Core Blazor project structure

Blazor Web App

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 Blazor Server and Blazor WebAssembly with server-side and client-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:

• The MainLayout component (MainLayout.razor) is the app's layout component.
• The MainLayout.razor.css is the collocated (next to the component) stylesheet for the app's main layout.
• The 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.
• The NavMenu.razor.css is the collocated stylesheet for the app's navigation menu.
• The ReconnectModal component reflects the server-side connection state in the UI and is included when the app's interactive render mode is either Interactive Server or Interactive Auto. For more information, see ASP.NET Core Blazor SignalR guidance.
• The ReconnectModal.razor.css is the collocated stylesheet for the ReconnectModal component.
• The ReconnectModal.razor.js is the collocated JavaScript file for the ReconnectModal component.

• The MainLayout component (MainLayout.razor) is the app's layout component.
• The MainLayout.razor.css is the collocated (next to the component) stylesheet for the app's main layout.
• The 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.
• The NavMenu.razor.css is the collocated 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.