根据 URL 更改 Blazor 页面中的布局

Question

我们正在探索是否可以慢慢地将旧的 WinForms 应用程序迁移为 blazor Web 应用程序。

在迁移整个应用程序之前，我们将一次将每个表单功能公开为一个 blazor 页面。如果 Web 应用程序缺少（尚未实现）功能，用户可以打开完整的 WinFroms 应用程序来完成他们需要的操作。

为了完成这项工作，我希望有一个页面具有不同的布局，具体取决于访问该页面的 UI 客户端。因此，如果您通过网络访问，它应该显示导航菜单、页眉页脚等...如果它是作为 Winforms 应用程序中的嵌入式 WebControl2 视图访问的（我不想在两个平台上重复代码）那么所有导航栏/页眉/页脚内容都应该消失，因为 Winforms 应用程序假定该功能。

我最初的想法是有 2 个 URL 转到同一页面，并让页面应用不同的布局，具体取决于是否使用 Web 应用程序（navLinks 将使用“员工”url）或 Winforms 应用程序是否正在访问它（winforms 应用程序将加载“/winforms/employees”url），如下所示：

@page "/employees"
@page "/winforms/employees"


@inject NavigationManager MyNavigationManager

@if (MyNavigationManager.Uri.Contains("winforms"))
{
    @layout AppHostLayout
}
else
{
    @layout MainLayout
}

然而，这不起作用，因为每页只能有一个布局指令。

是否有更好的和/或特定于 blazor 的方法来实现我期望的结果？

Answer 1

我希望我能多花几分钟思考这个问题。解决方案相当简单。

将所需布局的逻辑放入 MainLayout.razor 文件中：

@inherits LayoutComponentBase
@inject NavigationManager _navManager

@if (_navManager.Uri.Contains("winforms"))
{
    <div class="main">
        <div class="content px-4">
            @Body
        </div>
    </div>
}
else
{
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4 auth">
            <LoginDisplay />
            <a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
}

然后，您的 Page.razor 文件中就只有两个页面指令：

@page "/employees"
@page "/winforms/employees"

奇迹般有效！