Skip to content

[10.0] Blazor project structure article updates #36334

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 12, 2025
Merged

[10.0] Blazor project structure article updates #36334

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
40440c2
[10.0] Blazor project structure article updates
guardrex Nov 12, 2025
9890f62
Updates
guardrex Nov 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 70 additions & 2 deletions aspnetcore/blazor/project-structure.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,52 @@ More information on components and render modes is found in the <xref:blazor/com

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:

:::moniker-end

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

* The `MainLayout` component (`MainLayout.razor`) is the app's [layout component](xref:blazor/components/layouts).
* 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](xref:blazor/fundamentals/routing#navlink-component) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), which render navigation links to other Razor components. The <xref:Microsoft.AspNetCore.Components.Routing.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 <xref:blazor/fundamentals/signalr#reflect-the-server-side-connection-state-in-the-ui>.
* The `ReconnectModal.razor.css` is the collocated stylesheet for the `ReconnectModal` component.
* The `ReconnectModal.razor.css` is the collocated JavaScript file for the `ReconnectModal` component.

:::moniker-end

:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0"

* The `MainLayout` component (`MainLayout.razor`) is the app's [layout component](xref:blazor/components/layouts).
* The `MainLayout.razor.css` is the stylesheet for the app's main layout.
* 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](xref:blazor/fundamentals/routing#navlink-component) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), which render navigation links to other Razor components. The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component indicates to the user which component is currently displayed.
* The `NavMenu.razor.css` is the stylesheet for the app's navigation menu.
* The `NavMenu.razor.css` is the collocated stylesheet for the app's navigation menu.

:::moniker-end

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

The `Routes` component (`Routes.razor`) is either in the server project or the `.Client` project and sets up routing using the <xref:Microsoft.AspNetCore.Components.Routing.Router> component. For client-side interactive components, the <xref:Microsoft.AspNetCore.Components.Routing.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`](xref:mvc/views/razor#page) directive.

<!-- UPDATE 10.0 - HOLD until after
https://github.com/dotnet/AspNetCore.Docs/pull/36145
is merged.

Add the angle brackets around the cross-link when
activating.

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

The `NotFound` component (`NotFound.razor`) implements a Not Found page to display when content isn't found for a request path. For more information, see xref:blazor/fundamentals/navigation#not-found-responses.

:::moniker-end

-->

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`](xref:mvc/views/razor#using) directives for namespaces.
Expand Down Expand Up @@ -290,11 +325,44 @@ Project structure:
* `NavMenu` component (`NavMenu.razor`): Implements sidebar navigation. Includes the [`NavLink` component](xref:blazor/fundamentals/routing#navlink-component) (<xref:Microsoft.AspNetCore.Components.Routing.NavLink>), which renders navigation links to other Razor components. The <xref:Microsoft.AspNetCore.Components.Routing.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.

<!-- UPDATE 10.0 - HOLD until after
https://github.com/dotnet/AspNetCore.Docs/pull/36145
is merged.

Add the angle brackets around the cross-link when
activating.

:::moniker-end

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

* `Pages` folder: Contains the Blazor app's routable Razor components (`.razor`). The route for each page is specified using the [`@page`](xref:mvc/views/razor#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.
* `NotFound` component (`NotFound.razor`) Implements a Not Found page to display when content isn't found for a request path. For more information, see xref:blazor/fundamentals/navigation#not-found-responses.

:::moniker-end

:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0"

-->

* `Pages` folder: Contains the Blazor app's routable Razor components (`.razor`). The route for each page is specified using the [`@page`](xref:mvc/views/razor#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.

<!-- UPDATE 10.0 - HOLD until after
https://github.com/dotnet/AspNetCore.Docs/pull/36145
is merged.

:::moniker-end

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

-->

* `_Imports.razor`: Includes common Razor directives to include in the app's components (`.razor`), such as [`@using`](xref:mvc/views/razor#using) directives for namespaces.

* `App.razor`: The root component of the app that sets up client-side routing using the <xref:Microsoft.AspNetCore.Components.Routing.Router> component. The <xref:Microsoft.AspNetCore.Components.Routing.Router> component intercepts browser navigation and renders the page that matches the requested address.
Expand Down