C# Blazor服务端如何将Index.razor的数据传递到其他Razor文件

根据两个目标Razor文件和Index.razor的组件层级关系、使用场景，你可以选择以下4种官方原生支持的实现方案，不需要引入任何第三方库：

1. 组件参数传值（最适合直接子组件场景） #

如果两个Razor组件是直接嵌入在Index.razor中使用的子组件，这是最简单、最易维护的方案：

• 第一步：在两个目标组件中定义接收数据的参数属性

<!-- 比如第一个组件叫 DataPanelA.razor -->
@code {
    // 声明参数，类型替换成你实际的数据库返回模型类
    [Parameter]
    public IEnumerable<YourDbModel> FetchedData { get; set; } = Enumerable.Empty<YourDbModel>();
}

第二个组件DataPanelB.razor做完全相同的参数定义即可。

• 第二步：Index.razor中从数据库拿到数据后，直接通过组件属性绑定传值

@page "/"
<!-- 页面其他内容 -->
<DataPanelA FetchedData="dbResult" />
<DataPanelB FetchedData="dbResult" />

@code {
    private IEnumerable<YourDbModel> dbResult = Enumerable.Empty<YourDbModel>();

    protected override async Task OnInitializedAsync()
    {
        // 你原有写在Index里的数据库查询逻辑
        dbResult = await _dbService.GetDataFromDbAsync();
    }
}

如果后续数据库查询结果会动态更新，子组件可以重写OnParametersSetAsync生命周期方法，处理数据变更后的逻辑，不需要额外写刷新代码。

2. 级联参数传值（适合多层嵌套子组件场景） #

如果两个目标组件不是Index的直接子组件，中间嵌套了3层以上的其他组件，一层层写参数传递太繁琐，就用级联参数：

• 第一步：Index.razor中拿到数据后，用CascadingValue组件包裹所有需要用到这份数据的组件区域

@page "/"
<CascadingValue Value="dbResult" IsFixed="true">
    <!-- 这里面不管嵌套多少层组件，都能直接拿到这份数据 -->
    <LayoutWrapper>
        <DataPanelA />
        <SectionContent>
            <DataPanelB />
        </SectionContent>
    </LayoutWrapper>
</CascadingValue>

注意：如果这份数据在Index页面加载完成后不会再修改，一定要加IsFixed="true"，可以大幅减少不必要的组件渲染，提升性能；如果数据会动态更新，就去掉这个属性。

• 第二步：两个目标组件中不需要父组件手动绑定属性，直接声明级联参数即可接收

@code {
    [CascadingParameter]
    public IEnumerable<YourDbModel> FetchedData { get; set; } = Enumerable.Empty<YourDbModel>();
}

3. 作用域状态容器传值（适合独立路由页面/跨层级场景） #

如果两个目标Razor文件是独立的路由页面（比如有自己的@page路由，通过导航跳转访问，不是嵌在Index里的子组件），前面两种传参方式都不适用，这时候用Blazor Server特有的Scoped作用域服务做状态容器是最稳妥的：

• 第一步：创建一个简单的状态容器类

public class SharedDataContainer
{
    public IEnumerable<YourDbModel> CachedDbData { get; private set; } = Enumerable.Empty<YourDbModel>();
    // 提供事件供组件订阅数据更新通知
    public event Action? OnDataUpdated;

    public void SetData(IEnumerable<YourDbModel> data)
    {
        CachedDbData = data;
        OnDataUpdated?.Invoke();
    }
}

• 第二步：在Program.cs中注册这个服务为Scoped生命周期

builder.Services.AddScoped<SharedDataContainer>();

Blazor Server中Scoped生命周期的服务和用户电路（Circuit）绑定，同一个用户打开的页面中，所有组件注入拿到的都是同一个实例，不会和其他用户的数据串。

• 第三步：Index.razor中注入服务，拿到数据库数据后存入容器

@inject SharedDataContainer DataContainer
@code {
    protected override async Task OnInitializedAsync()
    {
        var dbResult = await _dbService.GetDataFromDbAsync();
        DataContainer.SetData(dbResult);
    }
}

• 第四步：两个目标Razor文件中同样注入这个容器，就可以直接读取数据，也可以订阅更新事件刷新UI

@inject SharedDataContainer DataContainer
@implements IDisposable

<!-- 直接用@DataContainer.CachedDbData绑定渲染数据 -->

@code {
    protected override void OnInitialized()
    {
        DataContainer.OnDataUpdated += RefreshState;
    }

    private void RefreshState()
    {
        InvokeAsync(StateHasChanged);
    }

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

4. 路由/查询字符串传值（仅适合简单小数据场景） #

如果只是跳转页面时传递简单的筛选条件、数据ID这类小尺寸值，也可以直接通过路由参数或者URL查询字符串传递，但不适合传完整的数据库查询结果：一来URL有长度限制，二来复杂对象序列化/反序列化会增加额外开销，拿到ID后重复查库的性能不如直接用状态容器传已拿到的数据。

选型参考 #

• 子组件、层级少：优先选组件参数，调试成本最低
• 子组件、嵌套层级深：选级联参数，少写冗余传参代码
• 独立路由页面、多组件共享数据：选作用域状态容器，灵活性最高
• 仅传简单标识类参数：选路由/查询字符串

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