根据URL更改Blazor页面的布局

Question

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

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

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

我最初的想法是，有两个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"

工作起来很有魅力！