从 Blazor 组件 (.razor) 重定向到 Razor 页面 (.cshtml) [服务器端]

Question

这是我的用例。我有一个持有全局站点状态的单例对象。我的网站上有一个按钮，单击该按钮会在全局站点状态对象上触发一个事件。我有一个正在侦听此事件的 Blazor 组件（剃刀）。它通过这样做来响应事件

var path = "siteupdate".AddInitialQueryStringArg("returnUrl", _navManager.Uri);
_navManager.NavigateTo(path,true);

这个想法是将所有在线用户重定向到 Razor 页面 (.cshtml)，其中显示“网站正在更新，稍后再回来”的消息。当服务器因更新而暂时停机并失去与 SignalR 集线器的连接时，这是提供良好用户体验的必要条件。

在执行之后，它看起来好像导航器试图导航到 siteupdate 页面，但它最终被拒绝并重置回我拨打电话时所在的任何组件。类似于您尝试手动更新浏览器中的 url 并且 navmanager 将其重置。在我的 Razor 页面中放置断点我可以看出 OnGet 方法大部分时间都会被调用，但它的响应似乎不是被确认或什么？我尝试了以下方法：

尝试通过 javascript 设置窗口位置

var path = "/update".AddInitialQueryStringArg("returnUrl", _navManager.Uri);
JSRuntime.InvokeVoidAsync("BlazorHelpers.RedirectTo", path);

尝试不使用强制重新加载，这会导致 404

var path = "/siteupdate".AddInitialQueryStringArg("returnUrl", _navManager.Uri);
_navManager.NavigateTo(path);

作为参考，我在下面有 Razor 页面 Pages/SiteUpdate/UpdateLandingPage.cshtml 我尝试将它放在 Pages 文件夹下，但正如我之前所说，OnGet 方法被调用，因此路由器似乎正在找到它，但似乎框架以某种方式覆盖了 URL。

谢谢

Answer 1

您的问题有两个部分：所有用户都可以看到的通用更新服务，以及用户在更新发生时设置重定向时所在的单个页面。这些将分别需要 Singleton 和 Scoped 上下文。

我通过创建两个服务对此进行了测试：

UpdateService.cs

    /// <summary>
    /// A singleton service that alerts users about updates
    /// </summary>
    public class UpdateService
    {
        /// <summary>
        /// Event raised when an update starts
        /// </summary>
        public event Action OnUpdate;

        public void TriggerUpdate()
        {
            // trigger the event
            OnUpdate?.Invoke();
        }
    }

这有一个事件OnUpdate，消费者可以在更新发生时订阅该事件。

RedirectService.cs

    /// <summary>
    /// Redirect service (user-scoped)
    /// </summary>
    public class RedirectService : IDisposable
    {
        private readonly NavigationManager navigationManager;
        private readonly UpdateService updateService;

        public RedirectService(NavigationManager navigationManager, 
                               UpdateService updateService)
        {
            this.navigationManager = navigationManager;
            this.updateService = updateService;
            // register for updates
            this.updateService.OnUpdate += HandleUpdate;
        }

        private void HandleUpdate()
        {
            // get user's current URL
            var uri = new Uri(navigationManager.Uri);

            if (!uri.PathAndQuery.StartsWith("/siteupdate", StringComparison.CurrentCultureIgnoreCase))
            {
                // redirect
                navigationManager.NavigateTo($"/siteupdate?redirectUrl={uri.PathAndQuery}");
            }
        }

        // Cleanup
        public void Dispose()
        {
            updateService.OnUpdate -= HandleUpdate;
        }
    }

此服务使用 UpdateService 并侦听 OnUpdate 事件。如果当前 URL 还不是“/siteupdate”，它会重定向用户。

在Startup.cs你注册这两个服务

// a singleton service - all users share this
services.AddSingleton<UpdateService>();
// scoped service for the redirect
services.AddScoped<RedirectService>();

顺序很重要，因为RedirectService 需要UpdateService。

为了触发它，我刚刚在MainLayout.razor 中注入了服务：

@inherits LayoutComponentBase
@inject Data.RedirectService redirectService

为了测试这一点，我在Index.razor 上放置了一个按钮，当点击该用户时，不同页面/浏览器上的所有其他用户都重定向到新页面。

这意味着任何页面上的任何用户除了 /siteupdate 将被重定向。如果这不是您的用例（例如，只有一些页面/用户应该重定向），您可以相应地进行调整。