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

【问题标题】：Intercept Blazor Server-Side Routing/Navigation BEFORE it Happens在发生之前拦截 Blazor 服务器端路由/导航
【发布时间】：2019-10-10 20:00:09
【问题描述】：

我正在开发 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 或其他在线网站上找不到任何东西构建错误。

【问题讨论】：

不幸的是，window.onbeforeunload 只有在您离开整个站点时才会被触发 - 而不是在导航返回时。也许 window.popstate 可以提供帮助，但请确保不要杀死 Blazor 自己的事件处理程序。

标签： c# blazor-server-side

【解决方案1】：

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

AppData.cs：

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

Startup.cs：

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

NavMenu.razor：

<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">TodoInBlazor</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
    <span class="navbar-toggler-icon"></span>
</button>
</div>
@inject NavigationManager NavigationManager
@inject Services.AppData AppData
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
    <li class="nav-item px-3">
        <NavLink class="nav-link" @onclick="Navigate" Match="NavLinkMatch.All">
            <span class="oi oi-home" aria-hidden="true"></span> Home
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" @onclick="Navigate1">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" @onclick="Navigate2">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
        </NavLink>
    </li>
</ul>
</div>

@code {
private bool collapseNavMenu = true;

private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

private void ToggleNavMenu()
{
    collapseNavMenu = !collapseNavMenu;
}
private void Navigate()
{
    // ↓ Example
    if(AppData.dangerfield != null)
    NavigationManager.NavigateTo("");
}
private void Navigate1()
{
    NavigationManager.NavigateTo("counter");
}
private void Navigate2()
{
    NavigationManager.NavigateTo("fetchdata");
}
}

Index.razor：

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

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

【讨论】：