Blazor QuickGrid：切换新数据源时重置虚拟化网格滚动位置

核心结论 #

目前QuickGrid预览版没有直接提供重置滚动位置的官方API，但可以通过两种符合Blazor设计风格的方案解决，无需依赖JavaScript或hack式重绘。

方案一：利用内置Virtualize组件的原生方法 #

QuickGrid的虚拟化功能基于Blazor内置的Virtualize组件实现，可通过捕获其引用来重置滚动状态：

1. 声明Virtualize组件引用：

private Virtualize<Order>? _virtualizeRef;

2. 修改QuickGrid模板，指定内部Virtualize组件并绑定引用：

<QuickGrid @ref="OrdersQuickGrid" ItemsProvider="@ordersProvider" 
           Virtualize="true" ItemSize="@itemHeight">
    <ChildContent>
        <Virtualize @ref="_virtualizeRef" ItemsProvider="@ordersProvider" ItemSize="@itemHeight">
            @context
        </Virtualize>
    </ChildContent>
</QuickGrid>

3. 搜索完成后调用重置方法：

public async Task SearchOrders(SearchOrdersCriteria criteria)
{
    SearchOrdersCriteria currentSearch = new SearchOrdersCriteria
    {
        SmartSearchString = criteria.SmartSearchString
    };

    ordersProvider = async providerRequest =>
    {
        var result = await RunSearch(providerRequest, currentSearch);
        return result;
    };

    // 重置虚拟化状态（包含滚动位置）
    _virtualizeRef?.ResetVirtualizationState();
    StateHasChanged();
}

方案二：通过Key控制组件生命周期 #

使用Blazor官方推荐的Key属性触发组件重新初始化，自然重置滚动位置：

1. 添加Key控制字段：

private Guid _gridRenderKey = Guid.NewGuid();

2. 给QuickGrid绑定动态Key：

<QuickGrid @ref="OrdersQuickGrid" ItemsProvider="@ordersProvider" 
           Virtualize="true" ItemSize="@itemHeight" Key="@_gridRenderKey">

3. 搜索时更新Key：

public async Task SearchOrders(SearchOrdersCriteria criteria)
{
    // ... 原有创建ordersProvider的逻辑 ...

    // 更新Key触发组件重新初始化
    _gridRenderKey = Guid.NewGuid();
    StateHasChanged();
}

方案说明 #

• 方案一直接调用Virtualize组件的原生方法，完全符合Blazor组件设计思路，是最贴合官方逻辑的解决方案。
• 方案二的Key方式并非hack，而是Blazor官方文档明确推荐的控制组件实例生命周期的标准手段，用于在数据源完全切换时重置组件状态。
• 由于QuickGrid仍处于预览阶段，后续官方可能会直接提供重置滚动位置的API，建议关注版本更新。

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