Blazor WASM LayoutComponentBase with #Body and more properties - asp.net-core

Question

My use case is I have the MainLayout.razor with this code
#inherits LayoutComponentBase
<header><nav ....></header>
<section><h1>Page Title</h1><section>
<main class="container">
<div class="row"><div class="col-12">#Body</div></div>
</main>
Now I want to set the page title from every #Body razor fragment (maybe by inheritance)
#page "/about"
<div>....</div>
#code {
Title = "About Title";
}
I want avoid to put <section> inside the #body fragment.
Also have the same problem with the title-element from head-element. What is best practices to do this (without js interop)?

Answer 1

There are a couple of ways to do that...
Using CascadingValue feature
Define a property in MainLayout to get the title from child components such as
the about component.
Add a CascadingValue component to MainLayout, and pass the MainLayout component
as the value of the Value attribute.
In the child component define a CascadingParameter property which stores the
MainLayout object, and assign a title to its Title property
Here's the full code:
MainLayout
<div class="main">
<div class="top-row px-4 auth">
<h1>#Title</h1>
<LoginDisplay />
About
</div>
<div class="content px-4">
<CascadingValue Value="this">
#Body
</CascadingValue>
</div>
</div>
#code
{
string title;
public string Title
{
get => title;
set
{
if(title != value)
{
title = value;
StateHasChanged();
}
}
}
}
About.razor
#page "/about"
<div>....</div>
#code {
[CascadingParameter]
public MainLayout MainLayout { get; set; }
protected override void OnInitialized()
{
MainLayout.Title = "About Title";
}
}
Create a service class that defines a Title property that can be set by
components into which the service is injected. This service class should also provide a way to pass the title supplied by child components to the MainLayout, which should refresh itself in order to display the provided title...
Hope this helps...