如何从查询字符串设置Blazor QuickGrid的虚拟化滚动位置

你已经实现了将GridState序列化到查询字符串的逻辑，现在要解决的是从查询字符串恢复滚动位置的问题，以下是可行的实现方案：

核心实现步骤 #

1. 优化状态保存逻辑（可选但推荐） #

先对序列化后的JSON进行URL编码，避免特殊字符导致的解析异常：

private async Task OnGridItemsProvided()
{
    var stateJson = JsonSerializer.Serialize(Provider.GridState);
    var encodedState = Uri.EscapeDataString(stateJson);
    var fullUri = new Uri(Nav.Uri);
    var baseUri = fullUri.GetLeftPart(UriPartial.Path);
    // 使用replace: true避免添加过多历史记录
    Nav.NavigateTo($"{baseUri}?state={encodedState}", replace: true);
}

2. 实现滚动位置恢复逻辑 #

通过QuickGrid的Virtualize组件内置的ScrollToItem方法来定位到指定索引，需要在组件渲染完成后执行：

@inject NavigationManager Nav
@using System.Web
@using System.Text.Json
@using Microsoft.AspNetCore.Components.QuickGrid
@using Microsoft.AspNetCore.Components.Web.Virtualization

<QuickGrid @ref="grid" ItemsProvider="@Provider.GetItemsAsync" Virtualize="true">
    <!-- 你的列定义 -->
    <PropertyColumn Property="@item => item.Id" Title="ID" />
    <PropertyColumn Property="@item => item.Name" Title="名称" />
</QuickGrid>

@code {
    private QuickGrid<YourDataType>? grid;
    private YourItemProvider Provider { get; set; } = new();

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            RestoreScrollPosition();
        }
    }

    private void RestoreScrollPosition()
    {
        var queryParams = HttpUtility.ParseQueryString(new Uri(Nav.Uri).Query);
        var encodedState = queryParams.Get("state");
        if (string.IsNullOrWhiteSpace(encodedState)) return;

        try
        {
            var stateJson = Uri.UnescapeDataString(encodedState);
            var gridState = JsonSerializer.Deserialize<GridState>(stateJson);
            
            if (gridState != null && grid?.VirtualizeElement is Virtualize<YourDataType> virtualizeComponent)
            {
                // 滚动到指定起始索引
                virtualizeComponent.ScrollToItem(gridState.StartIndex);
            }
        }
        catch (JsonException ex)
        {
            Console.WriteLine($"解析网格状态失败: {ex.Message}");
        }
    }

    // 你的GridState类（需与序列化时结构一致）
    public class GridState
    {
        public int StartIndex { get; set; }
        public int Count { get; set; }
        // 可添加排序、筛选等其他状态字段
    }
}

关键说明 #

• 组件生命周期时机：必须在OnAfterRender中执行恢复逻辑，确保QuickGrid和内部的Virtualize组件已经完成渲染，否则无法获取到Virtualize实例。
• URL编解码：序列化后的JSON必须经过URL编码，恢复时再解码，避免特殊字符破坏查询字符串结构。
• 分页与虚拟化互斥：QuickGrid的分页功能与虚拟化是互斥的，启用其中一个就会自动禁用另一个，所以保持虚拟化模式下不要开启分页。
• 错误处理：添加反序列化异常捕获，避免无效的查询字符串导致页面报错。

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