Blazor Server跨Razor页面数据绑定变更后无法实时同步问题

你当前的实现存在两个核心问题，导致Header无法实时更新：

• 缺少跨组件状态变更通知机制：Blazor组件仅在自身参数变更、绑定事件触发、父组件渲染，或主动调用StateHasChanged()方法时才会重绘。你直接修改Page1的静态属性时，Header组件完全感知不到值的变化，不会触发重渲染，只有整页刷新重建组件树时才会读取最新值。
• 下拉框选项配置错误：所有<option>的value属性都设置为空字符串，即使用户触发选择事件，也无法拿到正确的机器标识值。

Blazor跨组件共享状态的标准实现是使用作用域状态服务搭配事件通知，不要用页面静态属性存储共享数据，静态属性会在所有用户连接间共享，容易出现数据串号问题。

1. 编写全局状态服务 #

创建独立的状态类存储共享数据，在值变更时向所有订阅组件发送通知：

public class AppSharedState
{
    private string _selectedMachine = string.Empty;
    public string SelectedMachine
    {
        get => _selectedMachine;
        set
        {
            _selectedMachine = value;
            StateChanged?.Invoke();
        }
    }

    // 状态变更事件
    public event Action? StateChanged;
}

在Program.cs中注册服务，Blazor Server场景使用Scoped生命周期即可，保证每个用户连接拥有独立的状态实例，不会串数据：

builder.Services.AddScoped<AppSharedState>();

2. 修改Page1选择页代码 #

移除静态属性，注入状态服务，同时修复下拉选项的value配置，选择变更时更新服务内的状态值：

@page "/Selection"
@inject AppSharedState SharedState
<select value="@SharedState.SelectedMachine" class="MAE" @onchange="OnMachineSelected">
    <option value="">-- Select Machine --</option>
    <option value="Machine-1">-- Machine-1 --</option>
    <option value="Machine-2">-- Machine-2 --</option>
    <option value="Machine-3">-- Machine-3 --</option>    
</select>

@code {
    void OnMachineSelected(ChangeEventArgs e)
    {          
        SharedState.SelectedMachine = e.Value?.ToString() ?? string.Empty;
    }
}

3. 修改Header组件代码 #

注入状态服务，订阅状态变更事件，收到通知时主动触发自身重渲染，组件销毁时记得取消订阅避免内存泄漏：

@inject AppSharedState SharedState
@implements IDisposable

<p>Selected Machine: @SharedState.SelectedMachine</p>

@code {
    protected override void OnInitialized()
    {
        // 订阅状态变更通知
        SharedState.StateChanged += StateHasChanged;
    }

    public void Dispose()
    {
        // 组件销毁时取消订阅，防止内存泄漏
        SharedState.StateChanged -= StateHasChanged;
    }
}

你用页面静态属性存储用户选择值的写法存在多用户数据串扰问题：Blazor Server是服务端运行的，静态字段属于应用全局，所有在线用户访问的都是同一个静态属性，一个用户修改值会导致所有用户的Header都显示这个值，完全不符合业务预期。

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