MainLayout.razor
@inherits LayoutComponentBase
<PageTitle>BlazorApp1</PageTitle>
<div class="page">
<div class="sidebar">
<NavMenu/>
</div>
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
<CascadingValue Value="@Color">
@Body
</CascadingValue>
</article>
</main>
</div>
@code
{
private string Color = "Red";
}
Index.razor
@page "/"
<div style="color: @Color">Hello World</div>
@code
{
[CascadingParameter]
public string? Color { get; set; }
}
Cascade multiple values
MainLayout.razor
@inherits LayoutComponentBase
<PageTitle>BlazorApp1</PageTitle>
<div class="page">
<div class="sidebar">
<NavMenu/>
</div>
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
<CascadingValue Value="@Color" Name="Value">
<CascadingValue Value="@Size" Name="Size">
@Body
</CascadingValue>
</CascadingValue>
</article>
</main>
</div>
@code
{
private string Color = "Red";
private string Size = "12px";
}
Index.razor
@page "/"
<div style="color: @Color;font-size: @Size">Hello World</div>
@code
{
[CascadingParameter(Name = "Color")]
public string? Color { get; set; }
[CascadingParameter(Name = "Size")]
public string? Size { get; set; }
}
Cascade multiple values using Class
MainLayout.razor
@inherits LayoutComponentBase
<PageTitle>BlazorApp1</PageTitle>
<div class="page">
<div class="sidebar">
<NavMenu/>
</div>
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
<CascadingValue Value="@appState">
@Body
</CascadingValue>
</article>
</main>
</div>
@code
{
private AppState appState = new AppState();
public class AppState
{
public string Color = "Red";
public string Size = "16px";
}
}
Index.razor
@page "/"
<div style="color: @AppState.Color;font-size: @AppState.Size">Hello World</div>
@code
{
[CascadingParameter]
public MainLayout.AppState? AppState { get; set; }
}
Pass data across a component hierarchy
MainLayout.razor
@inherits LayoutComponentBase
<PageTitle>BlazorApp1</PageTitle>
<div class="page">
<div class="sidebar">
<NavMenu/>
</div>
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
<CascadingValue Value="@appState">
@Body
</CascadingValue>
</article>
</main>
</div>
@code
{
private AppState appState = new AppState();
public class AppState
{
public string Color = "red";
public string Size = "16px";
}
}
Counter.razor
@page "/counter"
<div class="d-flex align-items-center">
<label>Color</label>
<div style="width: 150px;padding-right: 10px;">
<select @bind="@AppState.Color" class="form-control">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<label>Size</label>
<div style="width: 150px;">
<select @bind="@AppState.Size" class="form-control">
<option value="16px">16px</option>
<option value="20px">20px</option>
<option value="30px">30px</option>
</select>
</div>
</div>
@code
{
[CascadingParameter]
public MainLayout.AppState AppState { get; set; }
}
Index.razor
@page "/"
<div style="color: @AppState.Color;font-size: @AppState.Size">Hello World</div>
@code
{
[CascadingParameter]
public MainLayout.AppState? AppState { get; set; }
}
References
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-6.0