Working With Layout Page In Blazor

Introduction

 

Some part of the page remains as is throughout the application such as header, navigation, footer etc. ASP.NET application introduced MasterPage and ASP.net MVC introduced layout page that contains common UI parts, so we don't need to write duplicate code in every page. Blazor also has Layouts that resolved the duplicate code problem.

 

Basically, every part of the application in Blazor is a component, so Layout is also considered as a component in Blazor applications. The component may contain Razor syntax, C# code, data binding etc. The layout implements Microsoft.AspNetCore.Blazor.Layouts.ILayoutComponent interface. This interface adds "Body" Property to the Layout so the content of the page is rendered inside the layout. It is very similar to Razor Layout view except for server side property implementation.

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

 

Example

@implements ILayoutComponent

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3">
            <NavMenu />
        </div>
        <div class="col-sm-9">
            @Body
        </div>
    </div>
</div>

@functions {
    public RenderFragment Body { get; set; }
}

There are mainly two ways to render component with Layouts

1. Using @layout directive or Layout attribute
2. Define layout globally 

Using @layout directive or Layout Attribute

 

We can define the layout for Blazor component by using @layout directive. At the time of compilation, @layout directive converted into Layout attribute which applied to the Blazor component class. Either way, if our component is class based, we can use Layout attribute directly in class.

 

Example

Using @Layout directive

@layout MainLayout
@page "/usingdirective"

<h2>@Title</h2>

@functions {
    string Title = "Layout page defined using @layout directive";
}

Using Layout attribute

using BlazorDemoApp.Shared;
using Microsoft.AspNetCore.Blazor.Components;
using Microsoft.AspNetCore.Blazor.Layouts;
using Microsoft.AspNetCore.Blazor.RenderTree;

namespace BlazorDemoApp.Pages
{
    [Route("/usingattribute")]
    [Layout(typeof(MainLayout))]
    public class LayoutdefinedUsingattribute : BlazorComponent
    {
        public string Title { get; set; } = "Layout page defined using layout Attribute";
        protected override void BuildRenderTree(RenderTreeBuilder builder)
        {
            builder.OpenElement(1, "h2");
            builder.AddContent(2, Title);
            builder.CloseElement();
        }
    }
}

Define layout globally

 

The _ViewImports.cshtml file was introduced in ASP.net MVC and it provides a mechanism to make directives available to Razor pages globally so that we aren't required to add them to pages individually. We can also use this file to define Layout page in Blazor. If we define Layout page in this file, Layout is automatically applied to all the Blazor pages in the folder heirarchy.

 

_ViewImports.cshtml 

@layout MainLayout

Note that, we can also define the namespaces that are used in all the views in a folder to _viewImports.cshtml file. 

Nested layouts

 

Blazor component also supports the nested layouts; i.e., Blazor component can reference a layout which references another layout.

 

Example

 

In the following example, I have created a nested layout. The Master layout page contains a header (MainLayout.cshtml) and the other layout has the header and it refers to the MasterLayout component as a Layout.

 

 

 

MainLayout.cshtml

@implements ILayoutComponent

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3">
            <NavMenu />
        </div>
        <div class="col-sm-9">
            @Body
        </div>
    </div>
</div>

@functions {
    public RenderFragment Body { get; set; }
}

OtherLayout.cshtml

@layout MainLayout
@implements ILayoutComponent

<div class="container-fluid">
    <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>

@functions {
    public RenderFragment Body { get; set; }
}

nestestedLayout.cshtml

@layout OtherLayout
@page "/nestedlayout"

<h3>@Title</h3>

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

Summary

 

Layout page helps us to reduce duplicate code in our application and helps us to make the look and feel consistent throughout the application. It is very similar to Layout in ASP.net MVC application. Blazor also supports nested layout.

You can view or download the source code from the GitHub link here.