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

Question

我们正在探索是否可以将旧的 WinForms 应用程序慢慢迁移为 blazor Web 应用程序。
在迁移整个应用程序之前，我们将每次将每个表单功能公开为一个 blazor 页面。如果 Web 应用程序缺少(尚未实现)功能，用户可以打开完整的 WinFroms 应用程序来完成他们需要的工作。
为了完成这项工作，我想让一个页面根据访问页面的 UI 客户端具有不同的布局。因此，如果您通过网络访问，它应该显示导航菜单、页眉页脚等...如果它作为 Winforms 应用程序中的嵌入式 WebControl2 View 访问(我不想在 2 个平台上重复代码)那么所有导航栏/页眉/页脚的东西都应该消失，因为 Winforms 应用程序假定了该功能。
我最初的想法是让 2 个 URL 转到同一页面，并根据是否使用网络应用程序(navLinks 将使用“员工”网址)或 Winforms 应用程序是否正在访问它来应用不同的布局(winforms 应用程序将加载“/winforms/employees”网址)，如下所示:

@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://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

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

然后你的 Page.razor 文件中有两个页面指令:

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

奇迹般有效!