You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aspnetcore/blazor/components/layouts.md
+83-5Lines changed: 83 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,9 +20,7 @@ Some app elements, such as menus, copyright messages, and company logos, are usu
20
20
21
21
A Blazor layout is a Razor component that shares markup with components that reference it. Layouts can use [data binding](xref:blazor/components/data-binding), [dependency injection](xref:blazor/fundamentals/dependency-injection), and other features of components.
22
22
23
-
## Layout components
24
-
25
-
### Create a layout component
23
+
## Create a layout component
26
24
27
25
To create a layout component:
28
26
@@ -73,7 +71,7 @@ The following `DoctorWhoLayout` component shows the Razor template of a layout c
73
71
74
72
:::moniker-end
75
73
76
-
###`MainLayout` component
74
+
## `MainLayout` component
77
75
78
76
In an app created from a [Blazor project template](xref:blazor/project-structure), the `MainLayout` component is the app's [default layout](#apply-a-default-layout-to-an-app). Blazor's layout adopts the [:::no-loc text="Flexbox"::: layout model](https://developer.mozilla.org/docs/Glossary/Flexbox) ([W3C specification](https://www.w3.org/TR/css-flexbox-1/)).
79
77
@@ -94,6 +92,86 @@ In an app created from a [Blazor project template](xref:blazor/project-structure
94
92
95
93
:::moniker-end
96
94
95
+
:::moniker range=">= aspnetcore-8.0"
96
+
97
+
<!-- UPDATE 11.0 Is https://github.com/dotnet/aspnetcore/issues/52768 addressed
98
+
to resolve the following limitation? -->
99
+
100
+
## Statically-rendered layout components
101
+
102
+
When a Blazor Web App adopts per-page/component rendering (the `Routes` component doesn't specify an interactive render mode), layout components are rendered statically on the server. Applying an interactive render mode directly to a layout isn't supported because Blazor doesn't support serializing a <xref:Microsoft.AspNetCore.Components.RenderFragment> (`@Body` in this case) as a root component parameter. For example, placing `@rendermode InteractiveServer` at the top of the `MainLayout` component results in the following runtime exception:
103
+
104
+
> :::no-loc text="System.InvalidOperationException: Cannot pass the parameter 'Body' to component 'MainLayout' with rendermode 'InteractiveServerRenderMode'. This is because the parameter is of the delegate type 'Microsoft.AspNetCore.Components.RenderFragment', which is arbitrary code and cannot be serialized.":::
105
+
106
+
This applies to any layout component that inherits from <xref:Microsoft.AspNetCore.Components.LayoutComponentBase> in an app that adopts per-page/component rendering.
107
+
108
+
This scenario might be addressed in a future release of Blazor. For more information, see [[Blazor] Support serializing render fragments from SSR (`dotnet/aspnetcore`#52768)](https://github.com/dotnet/aspnetcore/issues/52768). In the meantime, you can adopt the following approach in a Blazor Web App that adopts per-page/component rendering.
109
+
110
+
Create a wrapper component that's capable of interactivity. In the following example, a wrapper component contains a [Blazor section](xref:blazor/components/sections) that can receive content from a child component.
111
+
112
+
In the `_Imports.razor` file, add an [`@using`](xref:mvc/views/razor#using) directive for sections (<xref:Microsoft.AspNetCore.Components.Sections?displayProperty=fullName>):
113
+
114
+
```razor
115
+
@using Microsoft.AspNetCore.Components.Sections
116
+
```
117
+
118
+
Create the following interactive wrapper component in the `Pages` folder.
119
+
120
+
`Pages/InteractiveWrapper.razor`:
121
+
122
+
```razor
123
+
@rendermode InteractiveServer
124
+
125
+
<div>
126
+
<SectionOutlet SectionName="top-bar" />
127
+
</div>
128
+
129
+
@ChildContent
130
+
131
+
@code {
132
+
[Parameter]
133
+
public RenderFragment? ChildContent { get; set; }
134
+
}
135
+
```
136
+
137
+
The `Counter` component can use the wrapper component and set interactive section content. In the following example, a counter button is placed in the section.
In the preceding example, the `{LAYOUT}` placeholder is the layout (for example, `DoctorWhoLayout` if the layout file name is `DoctorWhoLayout.razor`). You may need to idenfity the layout's namespace depending on the .NET version and type of Blazor app. For more information, see the [Make the layout namespace available](#make-the-layout-namespace-available) section.
301
+
In the preceding example, the `{LAYOUT}` placeholder is the layout (for example, `DoctorWhoLayout` if the layout file name is `DoctorWhoLayout.razor`). You may need to identify the layout's namespace depending on the .NET version and type of Blazor app. For more information, see the [Make the layout namespace available](#make-the-layout-namespace-available) section.
224
302
225
303
Specifying the layout as a default layout in the <xref:Microsoft.AspNetCore.Components.Routing.Router> component's <xref:Microsoft.AspNetCore.Components.RouteView> is a useful practice because you can override the layout on a per-component or per-folder basis, as described in the preceding sections of this article. We recommend using the <xref:Microsoft.AspNetCore.Components.Routing.Router> component to set the app's default layout because it's the most general and flexible approach for using layouts.
Copy file name to clipboardExpand all lines: aspnetcore/blazor/components/render-modes.md
+5Lines changed: 5 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -576,6 +576,11 @@ Non-serializable component parameters, such as child content or a render fragmen
576
576
577
577
> :::no-loc text="System.InvalidOperationException: Cannot pass the parameter 'ChildContent' to component 'SharedMessage' with rendermode 'InteractiveServerRenderMode'. This is because the parameter is of the delegate type 'Microsoft.AspNetCore.Components.RenderFragment', which is arbitrary code and cannot be serialized.":::
578
578
579
+
<!-- UPDATE 11.0 Is https://github.com/dotnet/aspnetcore/issues/52768 addressed
580
+
to resolve the following limitation? -->
581
+
582
+
The same thing happens if you attempt to adopt interactive rendering in a layout that inherits from <xref:Microsoft.AspNetCore.Components.LayoutComponentBase>, such as the app's `MainLayout` component, in an app that adopts per-page/component rendering. For more information, see <xref:blazor/components/layouts#statically-rendered-layout-components>.
583
+
579
584
To circumvent the preceding limitation, wrap the child component in another component that doesn't have the parameter. This is the approach taken in the Blazor Web App project template with the `Routes` component (`Components/Routes.razor`) to wrap the <xref:Microsoft.AspNetCore.Components.Routing.Router> component.
0 commit comments