If else function for active or deactive @layout blazor

Question

i want to make if else function, for active or deactive @layout. but its not working the @layout always actived.

@if (showTable == true)
{
    @layout TransactionLayout
}

Answer 1

According to Blazor's docs , the layout is defined as an attribute at compile time :

Use the Razor directive @layout to apply a layout to a component. The compiler converts @layout into a LayoutAttribute, which is applied to the component class.

Since the layout is applied as a class attribute, I doubt you can change it at runtime.

I would suggest you define your component once without the layout, then use it in another component with the layout - and decide at runtime which component to render.

For example:

//MyComponent.razor
<!-- your component here, without the layout -->

then:

//MyComponentWithLayout.razor
@layout TransactionLayout

<MyComponent />

and finally, in your main component or page, you can do:

@if(showTable)
{
    <MyComponentWithLayout />
}
else
{
    <MyComponent />
}

Answer 2

This is not the way how Blazor handle layouts currently...

Please, open the App.razor component and locate the RouteView element. This class has an attribute property named DefaultLayout where the default layout of your app (MainLayout) is set.

Now, you should derive from the RouteView class, add two properties to represent the active or deactive layouts. Do something like this:

MyRouteView.cs

public class MyRouteView : RouteView
{
   // Define necessary properties
        [Parameter]
        public Type ActivatedLayout { get; set; }

        [Parameter]
        public Type DeactivatedLayout { get; set; }

      // Add more code to do the work of activating and deactivating the layout
}

Hope this helps...