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
+72-4Lines changed: 72 additions & 4 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,76 @@ 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
+
`Pages/InteractiveWrapper.razor`:
113
+
114
+
```razor
115
+
@rendermode InteractiveServer
116
+
117
+
<div>
118
+
<SectionOutlet SectionName="top-bar" />
119
+
</div>
120
+
121
+
@ChildContent
122
+
123
+
@code {
124
+
[Parameter]
125
+
public RenderFragment? ChildContent { get; set; }
126
+
}
127
+
```
128
+
129
+
The `Counter` component can use the wrapper component and set interactive section content. In the following example, an interactively-rendered counter button is placed in the section.
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