在它发生之前拦截 Blazor 服务器端路由/导航

Question

我正在开发 Blazor 服务器端应用程序。任何熟悉 Blazor 的人都在左侧的 NavBar 中填充了超链接，只是用特殊的 css 类装饰。我的问题是，如果已编辑任何内容，我正在尝试停止导航并在特定页面上显示弹出窗口。

我尝试使用 LocationChanged 中的处理程序来捕获它，但是直到 url 已经更改后，它才会触发该方法。我试过在 if 语句中使用 dbContext.ChangeTracker.HasChanges() 然后有一个模态弹出窗口，询问您是否要保存更改或导航离开，但我找不到在之前关闭它的方法网址变了。我尝试了一个名为 BlazorBeforeUnload 的 nuget 包来添加一个事件处理程序，在重定向或路由发生之前捕获它，但它是为 .net 标准 2.0 而不是 .net core 3.0 编写的。我可以体面地编写 C#，但我还不够好，无法弄清楚如何将它从一种转换为另一种，或者不知道在这种情况下是否可能。

我希望有一些方法可以在页面重新路由或刷新之前触发事件，但除了给我构建错误的 .net 标准 2.0 包之外，我似乎无法在 Visual Studio 或在线其他地方找到任何东西。

Answer 1

我认为这个答案可能是有意义的..\n您可能会在这里获得更多有关此类内容的信息：\n https://wellsb.com/csharp/aspnet/blazor-singleton-pass-data- Between-pages/

\n\n

应用程序数据.cs：

\n\n

namespace AppDataService.Services\n{\n    public class AppData\n    {\n        public string dangerfield { get; set; }\n    }\n}\n

\n\n

启动.cs：

\n\n

public void ConfigureServices(IServiceCollection services)\n    {\n        services.AddRazorPages();\n        services.AddServerSideBlazor();\n        services.AddSingleton<WeatherForecastService>();\n        services.AddScoped<...>();//singleton if\'d be client-side\n    }                       \xe2\x86\x91 \n                     your class here\n

\n\n

NavMenu.razor：

\n\n

<div class="top-row pl-4 navbar navbar-dark">\n<a class="navbar-brand" href="">TodoInBlazor</a>\n<button class="navbar-toggler" @onclick="ToggleNavMenu">\n    <span class="navbar-toggler-icon"></span>\n</button>\n</div>\n@inject NavigationManager NavigationManager\n@inject Services.AppData AppData\n<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">\n<ul class="nav flex-column">\n    <li class="nav-item px-3">\n        <NavLink class="nav-link" @onclick="Navigate" Match="NavLinkMatch.All">\n            <span class="oi oi-home" aria-hidden="true"></span> Home\n        </NavLink>\n    </li>\n    <li class="nav-item px-3">\n        <NavLink class="nav-link" @onclick="Navigate1">\n            <span class="oi oi-plus" aria-hidden="true"></span> Counter\n        </NavLink>\n    </li>\n    <li class="nav-item px-3">\n        <NavLink class="nav-link" @onclick="Navigate2">\n            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data\n        </NavLink>\n    </li>\n</ul>\n</div>\n\n@code {\nprivate bool collapseNavMenu = true;\n\nprivate string NavMenuCssClass => collapseNavMenu ? "collapse" : null;\n\nprivate void ToggleNavMenu()\n{\n    collapseNavMenu = !collapseNavMenu;\n}\nprivate void Navigate()\n{\n    // \xe2\x86\x93 Example\n    if(AppData.dangerfield != null)\n    NavigationManager.NavigateTo("");\n}\nprivate void Navigate1()\n{\n    NavigationManager.NavigateTo("counter");\n}\nprivate void Navigate2()\n{\n    NavigationManager.NavigateTo("fetchdata");\n}\n}\n

\n\n

索引.剃刀：

\n\n

@inject Services.AppData AppData\n<textarea @bind="AppData.dangerfield"></textarea>\n

\n\n

请投票，我在这方面做了很多工作。

\n