Skip to content

Commit 40440c2

Browse files
committed
[10.0] Blazor project structure article updates
1 parent 2045836 commit 40440c2

File tree

1 file changed

+64
-2
lines changed

1 file changed

+64
-2
lines changed

aspnetcore/blazor/project-structure.md

Lines changed: 64 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,49 @@ More information on components and render modes is found in the <xref:blazor/com
3232

3333
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:
3434

35+
:::moniker-end
36+
37+
:::moniker range=">= aspnetcore-10.0"
38+
39+
* The `MainLayout` component (`MainLayout.razor`) is the app's [layout component](xref:blazor/components/layouts).
40+
* The `MainLayout.razor.css` is the collocated (next to the component) stylesheet for the app's main layout.
41+
* 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.
42+
* The `NavMenu.razor.css` is the collocated stylesheet for the app's navigation menu.
43+
* 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>.
44+
* The `ReconnectModal.razor.css` is the collocated stylesheet for the `ReconnectModal` component.
45+
* The `ReconnectModal.razor.css` is the collocated JavaScript file for the `ReconnectModal` component.
46+
47+
:::moniker-end
48+
49+
:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0"
50+
3551
* The `MainLayout` component (`MainLayout.razor`) is the app's [layout component](xref:blazor/components/layouts).
36-
* The `MainLayout.razor.css` is the stylesheet for the app's main layout.
52+
* The `MainLayout.razor.css` is the collocated (next to the component) stylesheet for the app's main layout.
3753
* 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.
38-
* The `NavMenu.razor.css` is the stylesheet for the app's navigation menu.
54+
* The `NavMenu.razor.css` is the collocated stylesheet for the app's navigation menu.
55+
56+
:::moniker-end
57+
58+
:::moniker range=">= aspnetcore-8.0"
3959

4060
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.
4161

4262
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.
4363

4464
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.
4565

66+
<!-- UPDATE 10.0 - HOLD until after
67+
https://github.com/dotnet/AspNetCore.Docs/pull/36145
68+
is merged.
69+
70+
:::moniker range=">= aspnetcore-10.0"
71+
72+
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>.
73+
74+
:::moniker-end
75+
76+
-->
77+
4678
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.
4779

4880
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.
@@ -290,10 +322,40 @@ Project structure:
290322
* `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.
291323
* `NavMenu.razor.css`: Stylesheet for the app's navigation menu.
292324

325+
<!-- UPDATE 10.0 - HOLD until after
326+
https://github.com/dotnet/AspNetCore.Docs/pull/36145
327+
is merged.
328+
329+
:::moniker-end
330+
331+
:::moniker range=">= aspnetcore-10.0"
332+
293333
* `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:
294334
* `Counter` component (`Counter.razor`): Implements the Counter page.
295335
* `Index` component (`Index.razor`): Implements the Home page.
296336
* `Weather` component (`Weather.razor`): Implements the Weather page.
337+
* `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>.
338+
339+
:::moniker-end
340+
341+
:::moniker range=">= aspnetcore-8.0 < aspnetcore-10.0"
342+
343+
-->
344+
345+
* `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:
346+
* `Counter` component (`Counter.razor`): Implements the Counter page.
347+
* `Index` component (`Index.razor`): Implements the Home page.
348+
* `Weather` component (`Weather.razor`): Implements the Weather page.
349+
350+
<!-- UPDATE 10.0 - HOLD until after
351+
https://github.com/dotnet/AspNetCore.Docs/pull/36145
352+
is merged.
353+
354+
:::moniker-end
355+
356+
:::moniker range=">= aspnetcore-8.0"
357+
358+
-->
297359

298360
* `_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.
299361

0 commit comments

Comments
 (0)