Cascading Values and Parameters in Blazor

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