Blazor 6.0+EF Core列表页跳转详情页后返回如何保持列表状态？

方案一：本地存储保存滚动与查询状态 #

通过SessionStorage或LocalStorage持久化列表的滚动位置、筛选条件、分页参数等状态，返回时恢复：

• 在列表页组件中注入IJSRuntime和ISessionStorageService，监听列表容器的滚动事件，实时将滚动位置存入存储。
• 组件初始化时读取存储的状态，恢复查询条件并加载对应数据，再通过JS互操作将容器滚动到记录位置。
• 跳转详情页前，主动保存当前的筛选、分页参数。

示例代码片段：

[Inject] private IJSRuntime JsRuntime { get; set; }
[Inject] private ISessionStorageService SessionStorage { get; set; }
[Inject] private NavigationManager NavManager { get; set; }

private int _scrollTop;
private string _currentFilter = string.Empty;
private List<ItemModel> _listData;

protected override async Task OnInitializedAsync()
{
    // 读取保存的状态
    _scrollTop = await SessionStorage.GetItemAsync<int>("ListScrollPos");
    _currentFilter = await SessionStorage.GetItemAsync<string>("ListFilter") ?? string.Empty;
    
    // 加载对应数据（避免重复查询：可判断当前数据是否匹配缓存条件）
    _listData = await LoadListData(_currentFilter);
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (!firstRender)
    {
        // 恢复滚动位置
        await JsRuntime.InvokeVoidAsync("scrollToElementPos", "list-container", _scrollTop);
    }
    // 注册滚动监听
    await JsRuntime.InvokeVoidAsync("registerScrollListener", "list-container", DotNetObjectReference.Create(this));
}

[JSInvokable]
public async Task UpdateScrollPos(int pos)
{
    _scrollTop = pos;
    await SessionStorage.SetItemAsync("ListScrollPos", pos);
}

// 跳转详情页时保存筛选状态
private async Task GoToDetail(int itemId)
{
    await SessionStorage.SetItemAsync("ListFilter", _currentFilter);
    NavManager.NavigateTo($"/detail/{itemId}");
}

配套JS代码（放在wwwroot/js/list-utils.js）：

function registerScrollListener(elementId, dotNetRef) {
    const container = document.getElementById(elementId);
    container.addEventListener('scroll', () => {
        dotNetRef.invokeMethodAsync('UpdateScrollPos', container.scrollTop);
    });
}

function scrollToElementPos(elementId, pos) {
    const container = document.getElementById(elementId);
    container.scrollTop = pos;
}

方案二：组件状态自动持久化 #

Blazor 6.0支持交互式服务器端组件的状态保留，无需手动处理存储：

1. 在Program.cs中配置组件状态持久化：

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddComponentStatePersistence();

2. 在列表页组件顶部添加@persist指令：

@persist
@page "/items"

该方式会自动保留组件的私有字段状态，返回时组件不会重新初始化，直接恢复之前的状态（包括已加载的数据、滚动位置等）。

方案三：避免强制页面重载 #

检查跳转代码，确保未设置forceLoad: true——该参数会强制浏览器重载页面，导致所有状态丢失：

// 正确写法
NavManager.NavigateTo($"/detail/{itemId}");

// 禁止写法（会触发页面重载）
// NavManager.NavigateTo($"/detail/{itemId}", forceLoad: true);

额外优化建议 #

• 用MemoryCache缓存EF Core查询结果，恢复状态时直接读取缓存，避免重复访问数据库。
• 分页列表需额外保存当前页码、每页条数，恢复时先加载对应页数据再调整滚动位置。

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