如何在Blazor应用中刷新NavMenu组件并正常显示提示？

方案一：仅刷新NavMenu组件（推荐） #

通过事件通知机制让NavMenu主动刷新，无需整页加载，同时保留Toastr提示和正常导航。

步骤1：创建导航更新服务 #

public class NavigationUpdateService
{
    // 定义刷新事件
    public event Action OnNavigationUpdated;

    // 触发刷新通知
    public void NotifyNavigationUpdated()
    {
        OnNavigationUpdated?.Invoke();
    }
}

步骤2：注册服务 #

在Program.cs中添加Scoped服务注册：

builder.Services.AddScoped<NavigationUpdateService>();

步骤3：修改NavMenu组件订阅事件 #

@inject NavigationUpdateService NavigationUpdateService
@implements IDisposable

<!-- 你的NavMenu原有内容 -->

@code {
    protected override void OnInitialized()
    {
        // 订阅刷新事件
        NavigationUpdateService.OnNavigationUpdated += RefreshMenuItems;
    }

    private void RefreshMenuItems()
    {
        // 重新获取最新的菜单数据（比如从分类仓库拉取）
        // 示例：Categories = await _categoriesRepository.GetAllAsync();
        StateHasChanged(); // 通知组件刷新UI
    }

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

步骤4：在创建分类的逻辑中调用 #

// 保存分类
_categoriesRepository.Create(Category);
// 显示成功提示
await _jsRuntime.ToastrSuccess("Category Created");
// 通知NavMenu刷新
_navigationUpdateService.NotifyNavigationUpdated();
// 导航到目标页面（无需强制刷新）
_navigationManager.NavigateTo($"/category/{fileType}/{fileRoot}");

方案二：整页刷新同时保留Toastr提示 #

如果必须整页刷新，可通过本地存储暂存提示信息，页面加载后自动显示。

步骤1：创建分类时存储提示 #

_categoriesRepository.Create(Category);
// 将提示信息存入sessionStorage
await _jsRuntime.InvokeVoidAsync("sessionStorage.setItem", "toastrSuccessMsg", "Category Created");
// 强制刷新并导航到目标页面
_navigationManager.NavigateTo($"/category/{fileType}/{fileRoot}", true);

步骤2：在布局组件中读取并显示提示 #

在MainLayout.razor中添加以下代码：

@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 读取sessionStorage中的提示信息
            var msg = await JSRuntime.InvokeAsync<string>("sessionStorage.getItem", "toastrSuccessMsg");
            if (!string.IsNullOrEmpty(msg))
            {
                // 显示提示
                await JSRuntime.ToastrSuccess(msg);
                // 清除存储的信息，避免重复显示
                await JSRuntime.InvokeVoidAsync("sessionStorage.removeItem", "toastrSuccessMsg");
            }
        }
    }
}

原方法失效原因说明 #

• 第一种方法：NavigateTo的第二个参数设为true会触发整页刷新，客户端的Toastr提示会随着页面重载被清空，所以看不到提示。
• 第二种方法：强制刷新当前页面的操作会中断后续代码执行，ToastrSuccess和目标页面导航的代码根本不会运行，因此页面停留在当前页。

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