Create new layout page for Blazor Wasm #8839

Spospisil created 25 days ago

ABP Framework version: v7.3.0
UI Type: Blazor WASM
Database System: EF Core (PostgreSQL) / MongoDB
Tiered (for MVC) or Auth Server Separated (for Angular): yes

We are using Blazor WASM and for our application we have unique layout requirements for some of our application pages that are not in line with the 3 layouts available(Account, Application, Empty) in LeptonX. I have tried creating a new layout page in the Blazor WASM app and then setting the @Layout NewDefaultLayout at the top of the page I want to use that layout, but I am experiencing an issue with all the css loading several times as I navigate through my side including going to pages of ABP created modules.

What is the best/only way to create new base layouts that I can utilize ABP components in (<MainMenu>, <PageAlert>, <UiNotificationAlert>, etc) that gives me the flexibility to create unique base layouts that differ from LeptonX but that utilizes all the underlying functionality that an LeptonX layout give me, such as localizations.

Can you give me a practical example of how this can be done?

enisn created 25 days ago

Support Team .NET Developer

Hi,

After creating a new razor component and implement it correctly, you'll need to configure LeptonXThemeBlazorOptions to define your custom layout instead defining the layout in the pages.

YourCustomLayout.razor

@inherits LayoutComponentBase

@*...*@

@Body

@*...*@

YourProjectBlazorModule.cs

Configure<LeptonXThemeBlazorOptions>(options =>
{
    options.Layout = typeof(YourCustomLayout);
});

With that way, whenever ApplicationLayout is requested, your custom YourCustomLayout type will be used

Spospisil created 25 days ago

This does not allow me to have some pages in my site to use the new application layout and the rest use the standard leptonx application layout. This globally replaces one layout with another and that’s not what I want to do. I need to define a new layout and have a couple of pages use the new layout and the rest the standard one