Blazor Server页面中Layout级联参数始终为null问题求助

在使用InteractiveServer渲染模式的页面中，若未同步设置布局组件的渲染模式，会导致布局与页面处于不同的渲染上下文，级联参数无法正常传递，最终页面中的Layout实例为null，触发空引用异常。

以下是两种可行的解决方法：

方案一：同步布局组件的渲染模式 #

修改MainLayout.razor，添加@rendermode InteractiveServer，确保布局与页面共用同一交互式渲染上下文：

@inherits LayoutComponentBase
@rendermode InteractiveServer

<CascadingValue Value="this">
    @Body
    Your Text is: @this.SomeText
</CascadingValue>

@code {
    public string SomeText { get; set; }
}

修改后，页面中的级联参数将正确接收MainLayout实例，点击按钮即可正常更新SomeText值。

方案二：使用状态服务共享数据（推荐） #

直接传递Layout实例会增加组件间耦合，更符合Blazor设计原则的方式是通过独立状态服务共享数据：

1. 创建状态服务类：

public class LayoutState
{
    public string SomeText { get; set; }
    public event Action OnStateChanged;

    public void UpdateText(string newText)
    {
        SomeText = newText;
        OnStateChanged?.Invoke();
    }
}

2. 在Program.cs中注册为Scoped服务：

builder.Services.AddScoped<LayoutState>();

3. 更新MainLayout.razor，注入状态服务并监听状态变化：

@inherits LayoutComponentBase
@inject LayoutState LayoutState
@implements IDisposable

@Body
Your Text is: @LayoutState.SomeText

@code {
    protected override void OnInitialized()
    {
        LayoutState.OnStateChanged += StateHasChanged;
    }

    public void Dispose()
    {
        LayoutState.OnStateChanged -= StateHasChanged;
    }
}

4. 更新Home.razor，通过状态服务修改文本：

@page "/"
@layout MainLayout
@rendermode InteractiveServer
@inject LayoutState LayoutState

<button @onclick="ClickMe">click me</button>

@code {
    public void ClickMe()
    {
        LayoutState.UpdateText("Some Text");
    }
}

内容的提问来源于stack exchange，提问作者Ahmed H. Sharafeldin