Blazor预渲染时注入服务数据正常，二次加载及Server模式下丢失

核心问题根源 #

Server Prerender模式下，预渲染阶段和后续Blazor Server会话属于两个独立的作用域，预渲染时存入作用域服务的数据，在组件二次初始化时会丢失；纯Server模式下，Blazor启动时会重建作用域，导致原Post请求的数据无法被组件获取。

解决方案1：单例临时存储+Guid关联传递（兼容预渲染） #

步骤说明 #

1. 用单例服务临时存储Post数据，通过唯一Guid关联数据与会话
2. 在_Host.cshtml的Post处理逻辑里生成Guid，存入数据并传递给组件
3. Blazor组件通过Guid取出数据，使用后及时清理避免内存泄漏

代码示例 #

1. 定义单例数据存储服务

public class PostDataStore
{
    private readonly Dictionary<Guid, object> _tempStore = new();
    private readonly object _lockObj = new();

    public void Save(Guid key, object data)
    {
        lock (_lockObj)
        {
            _tempStore[key] = data;
        }
    }

    public T? Fetch<T>(Guid key)
    {
        lock (_lockObj)
        {
            _tempStore.TryGetValue(key, out var data);
            return data as T;
        }
    }

    public void CleanUp(Guid key)
    {
        lock (_lockObj)
        {
            _tempStore.Remove(key);
        }
    }
}

2. 注册单例服务

在Program.cs中添加：

builder.Services.AddSingleton<PostDataStore>();

3. _Host.cshtml处理Post请求

public class HostModel : PageModel
{
    private readonly PostDataStore _dataStore;

    public HostModel(PostDataStore dataStore)
    {
        _dataStore = dataStore;
    }

    [BindProperty]
    public YourFormModel FormData { get; set; } = new();

    public IActionResult OnPostAsync()
    {
        var formGuid = Guid.NewGuid();
        _dataStore.Save(formGuid, FormData);
        ViewData["FormGuid"] = formGuid.ToString();
        return Page();
    }
}

4. 传递Guid到Blazor组件

在_Host.cshtml的component标签中加参数：

<component type="typeof(App)" render-mode="ServerPrerendered" param-FormGuid="@ViewData["FormGuid"]" />

5. App.razor接收并级联传递Guid

@inject PostDataStore DataStore

<CascadingValue Name="FormGuid" Value="@FormGuid">
    @Body
</CascadingValue>

@code {
    [Parameter]
    public string? FormGuid { get; set; }

    protected override void OnInitialized()
    {
        if (Guid.TryParse(FormGuid, out var guid))
        {
            var formData = DataStore.Fetch<YourFormModel>(guid);
            // 这里处理表单数据
            DataStore.CleanUp(guid);
        }
    }
}

6. 子组件接收级联参数

@code {
    [CascadingParameter(Name = "FormGuid")]
    public string? FormGuid { get; set; }

    protected override void OnInitialized()
    {
        // 此处可正常获取FormGuid
    }
}

解决方案2：禁用预渲染直接传递参数（适合无需SEO场景） #

如果不需要预渲染的SEO效果，直接设置render-mode="Server"，并将Post数据直接通过组件参数传递：

<component type="typeof(App)" render-mode="Server" param-FormData="@Model.FormData" />

注意：传递的FormData需是可序列化的类型。

常见问题排查 #

• 子组件级联参数为空：确保父组件CascadingValue的Name与子组件CascadingParameter的Name完全一致；若未指定Name，两端都不要加Name属性。
• 作用域服务数据丢失：牢记Server Prerendered模式存在两个独立作用域，跨作用域传递数据不能用作用域服务。

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