Disable layout for page under Blazor

Question

In Razor syntax, to disable the layout for a specific page we can do this:

  @{
    Layout = null
  }

In Blazor, the convention for it is defined by @layout. However, I cannot see how we can set it as null / disable. I wish to apply it to only the index.razor page.

How can this be achieved in Blazor?

Answer 1

In my Blazor-server-side project, i resolved this issue with following two steps.

Step 1: First create a new empty razor component named EmptyLayout.

EmptyLayout.razor

@inherits LayoutComponentBase

<div class="main">    
    <div class="content px-4">
        @Body
    </div>
</div>

Step 2, To set Layout=null, I use the below code in the top of all required pages

@layout EmptyLayout