如何在Blazor Server（.NET 6）的Counter页面修改MainLayout顶部栏颜色

我在Counter.razor页面中添加了一个按钮，点击会调用ChangeColor()方法，希望通过这个方法修改MainLayout.razor中top-row div的背景颜色。

Counter.razor 原代码

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="ChangeColor">Click me</button>

@code {
    private int currentCount = 0;

    private void ChangeColor()
    {
        *from_here_i_will_like_to_change_TOP_ROW_DIV*
    }
}

MainLayout.razor 原代码

@inherits LayoutComponentBase

<PageTitle>BlazorApp1</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4" style="background-color: @TopRowColor">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code {
    [Parameter]
    public string TopRowColor { get; set; } = "red";  
}

解决方案 #

方法一：使用共享状态容器（推荐，适配多组件共享状态场景）

这种方式通过全局可注入的状态类管理颜色，适合多个组件需要修改或读取顶部栏颜色的场景。

1. 创建状态服务类
   新建LayoutState.cs文件，用来保存颜色状态并在变更时通知组件更新：

public class LayoutState
{
    private string _topRowColor = "red";
    public string TopRowColor
    {
        get => _topRowColor;
        set
        {
            if (_topRowColor != value)
            {
                _topRowColor = value;
                OnColorChanged?.Invoke();
            }
        }
    }

    // 颜色变更事件，触发组件刷新
    public event Action? OnColorChanged;
}

2. 注册服务
   在Program.cs中把状态服务注册为Scoped实例：

builder.Services.AddScoped<LayoutState>();

3. 修改MainLayout.razor
   注入状态服务，订阅颜色变更事件更新UI：

@inherits LayoutComponentBase
@inject LayoutState LayoutState
@implements IDisposable

<PageTitle>BlazorApp1</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4" style="background-color: @LayoutState.TopRowColor">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code {
    protected override void OnInitialized()
    {
        // 订阅颜色变更事件，触发组件刷新
        LayoutState.OnColorChanged += StateHasChanged;
    }

    // 组件销毁时取消订阅，避免内存泄漏
    public void Dispose()
    {
        LayoutState.OnColorChanged -= StateHasChanged;
    }
}

4. 修改Counter.razor
   注入状态服务，在ChangeColor方法中直接修改颜色：

@page "/counter"
@inject LayoutState LayoutState

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="ChangeColor">Click me</button>

@code {
    private int currentCount = 0;

    private void ChangeColor()
    {
        // 示例：切换红/蓝颜色，可替换为任意颜色逻辑
        LayoutState.TopRowColor = LayoutState.TopRowColor == "red" ? "blue" : "red";
        currentCount++;
    }
}

方法二：使用级联参数 + 回调（适合简单父子组件通信）

如果只有单一组件需要修改布局颜色，用级联参数传递回调方法更直接。

1. 修改MainLayout.razor
   添加级联参数传递颜色变更回调，管理内部颜色状态：

@inherits LayoutComponentBase

<PageTitle>BlazorApp1</PageTitle>

<!-- 把颜色变更回调通过级联参数传给子组件 -->
<CascadingValue Value="UpdateTopRowColor">
    <div class="page">
        <div class="sidebar">
            <NavMenu />
        </div>

        <main>
            <div class="top-row px-4" style="background-color: _topRowColor">
                <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
            </div>

            <article class="content px-4">
                @Body
            </article>
        </main>
    </div>
</CascadingValue>

@code {
    private string _topRowColor = "red";

    // 处理颜色更新的方法
    private void UpdateTopRowColor(string newColor)
    {
        _topRowColor = newColor;
        StateHasChanged();
    }

    // 定义级联参数，子组件可接收此回调
    [CascadingParameter]
    public Action<string> UpdateTopRowColor { get; set; } = _ => { };
}

2. 修改Counter.razor
   接收级联参数的回调方法，点击按钮时触发颜色变更：

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="ChangeColor">Click me</button>

@code {
    private int currentCount = 0;

    // 接收级联传递的回调方法
    [CascadingParameter]
    public Action<string>? UpdateTopRowColor { get; set; }

    private void ChangeColor()
    {
        // 示例：根据计数切换绿/橙颜色
        UpdateTopRowColor?.Invoke(currentCount % 2 == 0 ? "green" : "orange");
        currentCount++;
    }
}

内容的提问来源于stack exchange，提问作者marcoqf73