CODEWITHSUNDEEP
blazorblazor-webassembly.net-8.0
user2648685
user2648685

Reputation: 55

Referencing different layouts in Blazor auto mode

Using an ASP.NET Core 8.0 Blazor web app with auto interactive render mode. I cannot figure out how to set a different layout page to certain razor pages that are located in the wasm client project. I see the main layout located in the server project and the wasm components hit that via routes.razor in server.

Tried adding another routes on wasm side, tried adding layouts wasm side, just confused on how to change the layout for certain pages wasm side. For example my login uses blanklayout on server side, but my user pages use userlayout on wasm side.

Thanks for any assistance and where to start.

Upvotes: 1

Views: 86

Answers (1)

user2648685
user2648685

Reputation: 55

So you have to alter the Routes.razor page in the server project. I added a razor page on the wasm side with @page "/users/sample". Then I added a new layout page on the server side under the Layout folder, named "BlankLayout". The below code works.

@inject NavigationManager navmanager
<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Client._Imports).Assembly }">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout=@GetLayoutType()/>
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

@code {
    private Type GetLayoutType()
    {
        var relativePath = navmanager.ToBaseRelativePath(navmanager.Uri);

        if (relativePath.StartsWith("users"))
        {
            return typeof(Layout.BlankLayout);
        }
        else
        {
            return typeof(Layout.MainLayout);
        }
    }
}

Upvotes: 1

Related Questions