Change layout in Blazor page based on URL

Question

We are exploring whether we can slowly migrate an old WinForms application to be a blazor web application.

Until the entire application would be migrated, we will expose each forms functionality as a blazor page one at a time. If the web application is missing (not yet implemented) functionality, the users can open the full WinFroms app to get what they need done.

To make this work, I would like to have one page that has different layouts depending on what UI client is accessing the page. So if you are accessing via the web, it should display the nav menu, header footer, etc... If it's being accessed as an embedded WebControl2 view within the Winforms app (I don't want to duplicate code across the 2 platforms) then all the navbar/header/footer stuff should be gone because the Winforms app assumes that functionality.

My initial idea was to do have 2 URLs that go to the same page and have the page apply a different layout depending on whether the web app was used (the navLinks would use the 'employees' url) or whether the Winforms app was accessing it (the winforms app would load the '/winforms/employees' url) like this:

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


@inject NavigationManager MyNavigationManager

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

However this does not work because you can only have ONE layout directive per page.

Is there a better and/or blazor-specific way to achieve my desired outcome?

Bitfiddler Bitfiddler · Accepted Answer · 2020-09-03T00:36:22

I wish I spent a few more minutes thinking about this. The solution is rather simple.

Put the logic of which layout you want in the MainLayout.razor file:

@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>
}

Then you just have both page directives in your Page.razor file:

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

Works like a charm!

Change layout in Blazor page based on URL

1 Answers