Blazor InteractiveServer模式下MOTD跨组件实时更新问题求助

你当前通过静态变量存储MOTD，当Settings组件更新静态变量后，MainLayout组件无法感知到这个变化——Blazor组件仅会在自身状态变更、参数更新或显式调用StateHasChanged时重新渲染，静态变量的变动不会自动通知组件，因此需要手动触发MainLayout的状态更新。

以下是两种可行解决方案，推荐使用方案一（依赖注入服务），更符合Blazor设计理念且适配多用户场景。

方案一：使用依赖注入的状态管理服务（推荐） #

通过创建一个Scoped服务管理MOTD，利用INotifyPropertyChanged接口实现属性变更通知，让MainLayout自动感知并更新UI。

1. 创建MOTD管理服务 #

在项目中新建MotdService.cs文件：

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class MotdService : INotifyPropertyChanged
{
    private string _motd = "Hello there, this is a sample MOTD!";

    public string Motd
    {
        get => _motd;
        set
        {
            if (_motd != value)
            {
                _motd = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 注册服务 #

在Program.cs中添加服务注册：

// Scoped模式：每个用户会话拥有独立实例，适合单用户专属配置
builder.Services.AddScoped<MotdService>();

// 若需要全局所有用户共享MOTD，替换为Singleton模式：
// builder.Services.AddSingleton<MotdService>();

3. 修改Settings.razor #

注入服务并替换静态变量逻辑：

@page "/settings"
@inject MotdService MotdService

<PageTitle>Settings</PageTitle>

<h1 class="text-center">Site Settings Page</h1>
<hr />

<div class="d-grid justify-content-center m-5">
    <label class="text-primary">Please enter the message of the day:</label>
    <input @bind="inputMOTD" placeholder="ie.. Today's message of the day..." type="text" />
    <button class="btn btn-primary" @onclick="SetMotd">Set MOTD</button>
</div>

@code
{
    private string inputMOTD { get; set; }

    private void SetMotd()
    {
        if (!string.IsNullOrEmpty(inputMOTD))
        {
            MotdService.Motd = inputMOTD;
        }
    }
}

4. 修改MainLayout.razor #

注入服务并订阅属性变更事件：

@using MistoSite.Components.Pages
@inherits LayoutComponentBase
@inject MotdService MotdService
@implements IDisposable

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

    <main>
        <div id="container" class="top-row px-4 d-flex flex-row align-items-end justify-content-between">
            <p id="box" class="text-white text-decoration-underline">@MotdService.Motd</p>

            <p class="text-white">
                <a class="text-white" href="/settings">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 18 18">
                        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
                        <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"/>
                    </svg>
                    Logged in: User1
                </a>
                | Date: @DateTime.Now
            </p>
        </div>

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

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

@code {
    protected override void OnInitialized()
    {
        MotdService.PropertyChanged += OnMotdChanged;
    }

    private void OnMotdChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == nameof(MotdService.Motd))
        {
            StateHasChanged();
        }
    }

    public void Dispose()
    {
        MotdService.PropertyChanged -= OnMotdChanged;
    }
}

方案二：静态事件通知（仅适合单用户/测试场景） #

如果不想引入服务，可以通过静态事件让Settings通知MainLayout更新状态，但该方案存在多用户共享数据的问题，不推荐用于生产环境。

1. 修改Settings.razor的@code部分 #

public static string inputMOTD { get; set; }
public static string motd { get; set; } = "Hello there, this is a sample MOTD!";
public static event Action OnMotdUpdated;

public void SetMotd()
{
    motd = inputMOTD;
    OnMotdUpdated?.Invoke();
    StateHasChanged();
}

2. 修改MainLayout.razor的@code部分 #

@implements IDisposable

@* 其余UI代码保持不变 *@

@code {
    protected override void OnInitialized()
    {
        Settings.OnMotdUpdated += OnMotdUpdated;
    }

    private void OnMotdUpdated()
    {
        StateHasChanged();
    }

    public void Dispose()
    {
        Settings.OnMotdUpdated -= OnMotdUpdated;
    }
}

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