Blazor Server同页带参数导航禁止滚动及模态框跳转实现咨询

问题根源 #

你遇到的滚动重置问题是因为Blazor的NavigateTo方法即使不强制重载页面，也会触发路由匹配逻辑和组件重渲染，同时触发浏览器默认的导航滚动重置行为。使用JS操作浏览器History API完全可以满足你的需求，且不会触发页面重载和滚动重置。

实现步骤 #

1. 新增JS工具方法 #

在_Host.cshtml（Blazor Server）中加入以下JS代码，用于修改URL不触发页面导航：

// 新增URL到历史记录，不触发重载
window.pushUrlWithoutReload = (targetUrl) => {
  history.pushState({}, '', targetUrl);
};
// 替换当前URL，不触发重载
window.replaceUrlWithoutReload = (targetUrl) => {
  history.replaceState({}, '', targetUrl);
};
// 可选：获取当前滚动位置（用于独立页面方案）
window.saveScrollPosition = (key) => {
  sessionStorage.setItem(key, window.scrollY);
};
// 可选：恢复滚动位置（用于独立页面方案）
window.restoreScrollPosition = (key) => {
  const pos = sessionStorage.getItem(key);
  if (pos) {
    window.scrollTo(0, parseInt(pos));
    sessionStorage.removeItem(key);
  }
};

2. 修改Blazor页面代码 #

调整你的Documents页面代码如下：

@page "/Documents"
@page "/Documents/{ID:int}"
@inject NavigationManager navManager
@inject IJSRuntime JSRuntime
@implements IDisposable

...
@if (ID > 0)
{
    <DocumentForm OnClose="CloseModal" ID="@ID"></DocumentForm>
}

<table>
    <!-- 你的文档列表表格，点击行触发SelectDocument -->
</table>

@code {
    [Parameter]
    public int ID { get; set; }

    protected override void OnInitialized()
    {
        // 监听浏览器前进后退事件，同步模态框状态
        navManager.LocationChanged += OnLocationChanged;
    }

    private async Task SelectDocument(Document doc)
    {
        // 仅修改URL，不触发Blazor导航
        await JSRuntime.InvokeVoidAsync("pushUrlWithoutReload", $"/Documents/{doc.ID}");
        // 手动更新ID，触发模态框显示
        ID = doc.ID;
    }

    private async Task CloseModal()
    {
        // 改回列表页URL，不触发导航
        await JSRuntime.InvokeVoidAsync("replaceUrlWithoutReload", "/Documents");
        // 关闭模态框
        ID = 0;
    }

    private void OnLocationChanged(object sender, LocationChangedEventArgs e)
    {
        // 解析当前URL的ID参数，同步状态
        var uri = new Uri(e.Location);
        var segments = uri.Segments;
        if (segments.Length >=3 && int.TryParse(segments[2], out int newId))
        {
            ID = newId;
        }
        else
        {
            ID = 0;
        }
        StateHasChanged();
    }

    public void Dispose()
    {
        navManager.LocationChanged -= OnLocationChanged;
    }
}

替代方案：独立编辑页保留滚动位置 #

如果你改用独立编辑页，可按以下逻辑实现滚动位置恢复：

• 导航到编辑页前，调用saveScrollPosition("document-list-scroll")保存当前滚动位置
• 列表页OnAfterRenderAsync生命周期中，调用restoreScrollPosition("document-list-scroll")恢复滚动位置
• 如果做了分页，可将当前页码也存在sessionStorage中，回到列表页时直接跳转对应分页即可

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