Blazor WASM: Programmatically set layout for a page or component

[zachion]

We have a Blazor WASM project with two layouts a) LoginLayout, b) MainLayout. On the LoginLayout we display a minimum set of components (i.e. login component) for code simplification purposes. The LoginLayout is intended for not authorized users and the MainLayout is used for authenticated users instead. We also have areas where both authorized and not authorized users have access, such as terms of use and privacy policy. Currently we are setting the layouts for the unrestricted areas using one of the two layouts (LoginLayout) but ideally we would need different layouts depending on the authentication state for each user. The only way to achieve this we've found is have multiple pages / components and on different paths so we can explicitly set them to use our two different layouts. But this created duplicated code and we had to remove to keep our codebase clean and we just manually defining layouts on the top of each page instead and by picking only one of the two available layouts.

Describe the solution you'd like

Ideally we would need the ability to specify layouts for each component or page programmatically, like the following example:

if (condition)
        {
            @layout MainLayout
        }
        else
        {
            @layout LoginLayout
        }

or

<AuthorizeView>
    <Authorized>
        @layout MainLayout
    </Authorized>
    <NotAuthorized>
          @layout LoginLayout
    </NotAuthorized>
</AuthorizeView>

Additional context

Currently if we try this we get syntax highlight error and we are unable to do so:

Project does not build either:

[boukenka]

@zachion I am confronted with a similar scenario. It would be nice if there was an easy way to assign the layout programmatically.

[BruceHunter]

Being able to control which layout seems to be at the "page" component level. It does not seem, nor have I found a way to have a child component of the page component be able to change the layout.

I have kinda solved this problem by doing the following.

Create a MainLayout.razor

@inherits LayoutComponentBase

<AuthorizeView>
    <NotAuthorized>        
        <SubLayoutUnsecured Body="@Body"></SubLayoutUnsecured>
    </NotAuthorized>
    <Authorized>
        <SubLayoutSecured Body="@Body"></SubLayoutSecured>
    </Authorized>
</AuthorizeView>
@code {
}

Obviously, you will need to add more logic here, but you get the idea. Anonymous for example or a specific route being loaded etc.

Then move the markup into Sub components like such.

SubLayoutSecured.razor

<div>
@body
</div>
@code {
    [Parameter]
    public RenderFragment Body { get; set; }
}

SubLayoutUnsecured.razor

<div>
@body
</div>
@code {
    [Parameter]
    public RenderFragment Body { get; set; }
}

[SteveSandersonMS]

You can use the <LayoutView> component to render an arbitrary block of content (such as a @page component, or any other component, or any other block of Razor markup) within an arbitrary layout.

This is independent of which layout (if any) is nominated on your page.

[BruceHunter]

Well, I'm glad I know that now.

So to build on what @SteveSandersonMS stated above. Please correct me if I'm wrong, but I just tested this.

• MainLayout.razor (default)
• AnotherLayout.razor

In your component, wrap markup with LayoutView like such.

<LayoutView Layout="@typeof(AnotherLayout)">
<div></div>
</LayoutView>

[BruceHunter]

So... it looks like I wasn't to far off from my first post with the SubLayout components.

If you need to switch out an entire page layout, I had to do the following.

MainLayout.razor - Don't put any markup here, only @Body

@inherits LayoutComponentBase

@Body

@code {
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
    }
}

PrimaryLayout.razor - Put Markup you were going to put in MainLayout.razor here.
Wrap components with:

<LayoutView Layout="@typeof(PrimaryLayoutLayout)">
<div></div>
</LayoutView>

Wrap components with:
SecondaryLayout.razor - Secondary markup etc.

<LayoutView Layout="@typeof(SecondaryLayout)">
<div></div>
</LayoutView>

If you don't do it like this, then when you put markup in MainLayout and then want to swap out to SecondaryLayout it will be a merge of the two. I'm sure that is fine if you want this, but I want to be able to swap out the default layout completely.

[zachion]

Hello, I appreciate your help but I am struggling to implement this fully, unfortunately, the LayoutView is somewhat not fully documented as of yet. All examples I see on the web are for the App.razor file with something like this:

 <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>

Can you elaborate a bit further with a full example of how to use this and assuming that all layouts I am intending to use will have their own @Body fragments. I tried the above but I was unable to add the individual @Body fragments. Maybe I am doing something wrong?

[SteveSandersonMS]

@zachion It sounds to me like what you want is an alternative to the normal RouteView. The normal built-in RouteView looks for a layout given by a compile-time attribute on the target page. Instead, you want to use different logic for choosing a layout.

You can do this fairly straightforwardly by creating your own alternative to RouteView. For example, add a file called CustomRouteView.razor to your project, containing:

@using Microsoft.AspNetCore.Components.Rendering

<AuthorizeView>
    <Authorized>
        <LayoutView Layout="typeof(MainLayout)" ChildContent="(RenderFragment)RenderPageWithParameters" />
    </Authorized>
    <NotAuthorized>
        <LayoutView Layout="typeof(OtherLayout)" ChildContent="(RenderFragment)RenderPageWithParameters" />
    </NotAuthorized>
</AuthorizeView>

@code {
    [Parameter] public RouteData RouteData { get; set; }

    private void RenderPageWithParameters(RenderTreeBuilder builder)
    {
        builder.OpenComponent(0, RouteData.PageType);
        foreach (var kvp in RouteData.RouteValues)
        {
            builder.AddAttribute(1, kvp.Key, kvp.Value);
        }
        builder.CloseComponent();
    }
}

... then in App.razor, replace <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> (or AuthorizeRouteView with <CustomRouteView RouteData="@routeData" />.

The logic I've shown here will pick between two layouts MainLayout and OtherLayout depending on whether the user is authorized. If you want more complex logic, you could replace all its markup with:

<LayoutView Layout="ChooseLayout()" ChildContent="(RenderFragment)RenderPageWithParameters" />

... and then in your @code block add a method called ChooseLayout that returns the Type corresponding to whichever layout you want to use.