Blazor中如何将类值绑定到NavMenu.razor并实现实时更新？

步骤1：修改静态类，添加更新通知事件 #

把原有静态类改成带事件触发的版本，确保字段值变化时能通知组件：

public static class ClassNumber
{
    private static int _txtnumber;
    public static int txtnumber
    {
        get => _txtnumber;
        set
        {
            _txtnumber = value;
            NumberChanged?.Invoke();
        }
    }

    // 定义字段更新事件
    public static event Action? NumberChanged;
}

步骤2：修改Counter.razor，赋值时自动触发事件 #

按钮点击逻辑里直接赋值即可，属性的setter会自动触发更新事件：

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

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

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

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
        ClassNumber.txtnumber = currentCount;
    }
}

步骤3：修改NavMenu.razor，订阅事件并刷新组件 #

在NavMenu中订阅静态类的更新事件，事件触发时手动刷新组件以显示最新值：

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorApp1</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
        <!-- 显示静态类的最新计数 -->
        <div class="nav-item px-3 mt-3">
            Current Count: @ClassNumber.txtnumber
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    protected override void OnInitialized()
    {
        // 订阅字段更新事件，触发组件刷新
        ClassNumber.NumberChanged += () => StateHasChanged();
    }

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

核心逻辑说明 #

Blazor组件只会在自身状态（如绑定参数、组件内属性）变化时自动刷新，静态字段的变更无法被组件感知。通过给静态类添加更新事件，让NavMenu组件订阅该事件，在字段值改变时手动调用StateHasChanged()触发组件重新渲染，就能实现实时更新显示。

内容的提问来源于stack exchange，提问作者Xuân Cao