Blazor Tutorial Layout

Typically, modern web applications contain more than one page with certain layout elements such as menus, logos, copyright messages, etc. which are present on all pages.

• Reusing the code of these layout elements onto all pages would not be a good solution.
• It becomes hard to maintain and probably inconsistent over time.
• Blazor Layouts solve this problem. Every part of the application in Blazor is a component, so Layout is also considered as a component in Blazor applications.

Blazor Layout

A Blazor layout is just another Blazor component which is also defined in a Razor template or in C# code, it can contain everything just like Blazor component such as data binding, dependency injection is supported, etc. but Blazor layout includes two additional aspects:

Inherit from BlazorLayoutComponent

• The layout component inherits from BlazorLayoutComponent.
• It adds a property Body to the component which contains the content to be rendered inside the layout.

Body Keyword

• The layout component contains the Razor keyword @Body.
• During rendering, it is replaced by the content of the layout.

The default template of Blazor contains MainLayout.cshtml under the shared folder. It works as Layout page.

@inherits BlazorLayoutComponent

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
    </div>

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

The above code sample shows the Razor template of a layout component.

Load Blazor Component

To load any Blazor component into a layout, you will need to use @layout directive.

@layout MyLayout

@page "/my-data"

<h2>My Data</h2>
...

• When the component is requested its content is loaded into the layout component at the point the @Body tag is defined.
• The compiler converts this directive into a LayoutAttribute, which is applied to the component class.

If you are writing a component in pure C# and want to to use a layout component. Then you can decorate it with the [LayoutAttribute]

// Using pure C#

[Layout(typeof(MyLayout))]
public class MyClass : BlazorComponent
{
    ...
}

This is ultimately what the compiler will convert the @layout directive to anyway.

Global/Centralized Layout

In ASP.net MVC, the _ViewImports.cshtml file was introduced to provide a mechanism to make directives available to Razor pages globally without adding them to each page.

• You can also use this file to define Layout page in Blazor.
• Layout is automatically applied to all the Blazor pages in the folder hierarchy if you Layout page in this file.

The default _ViewImports.cshtml file looks like this when a new Blazor application is created.

@layout MainLayout

Nested Layout

In Blazor, you can also use nested layouts; i.e., Blazor component can reference a layout which references another layout.

• Nesting layouts can be used to reflect a multi-level menu structure.

Here is the MyLayout.cshtml.

@inherits BlazorLayoutComponent

<div class="main">
    <div class="top-row px-4">
        <h3>My Layout</h3>
    </div>

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

Here is the CustomLayout.cshtml, which is referencing MyLayout.cshtml.

@layout MyLayout
@inherits BlazorLayoutComponent

<div class="main">
    <div class="row">
        <div class="col-sm-12">
            <h2>Nested Layout Example</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            @Body
        </div>
    </div>
</div>

Here is the Nestedlayout.cshtml which is referencing CustomLayout.cshtml.

@layout CustomLayout
@page "/nestedlayout"

<h3>@Title</h3>

@functions {
string Title = "This is child page using Nested Layout";
}

Layout page reduces duplicate code in your application and make the look and feel consistent throughout the application.