Nowadays Blazor is a great alternative for frameworks like Angular, React, and Vue. Blazor is an open-source, free HTML framework that works solely in C# in place of JavaScript. Blazor is used to render .NET on the client-side. Thanks to Web Assembly Blazor is supported by all the servers and modern-day browsers like Chrome, Opera, Firefox, Edge, etc.
Like any other framework, components are the building blocks of designing an application using a Blazor. Among all the components Blazor layouts are the master component.
What are Blazor layouts?
Blazor layouts are defined in Razor template or C# code and use dependency injection or data binding functionality.
Common elements like header, navigation, footer, copyright messages, the logo of companies, etc. are to be present on all the pages of the site. What we generally do is copy the codes of these elements and paste them into all the components of the application. This is a lengthy and tiresome process. This is where Layouts come into use!
They allow us to avoid repetition of codes and use the maximum amount of pages by editing only those parts that differ from page to page.
Note: Layouts apply to only routable Razor components that have @page directives.
What is the main layout component?
In any application based on the Blazor layout template, the mainlayout.razor is located in the application’s shared folder.
Default Layout
You can specify the default app layout in the Router component in the application’s App. razor file. Default Blazor templates provide the Router component that sets the default layout to the MainLayout component.
Always use the router to set the app’s default layout as then it can be overridden on a per-component or per-folder basis.
Here is an example of how to provide a default layout for NotFound content.
You need to specify a LayoutView for NotFound content:
razor Copy <Router AppAssembly="@typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <h1>Page not found</h1> <p>Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router> Note
How to create a Blazor layout?
To create a new Blazor layout, we need to add a new cshtml file to the Blazor application pages folder.
Next, you need to remove all the directives and HTML and replace contents with the following:
- @inheritance
- any HTML that precedes the content from individual Blazor views
- @body statement
- any HTML code to follow the content from your individual Blazor views.
How to use any Blazor component as a layout?
We need to inherit the layout component base.
If you add any component base with this inheritance component, it will become a layout page.
You can also create a Blazor layout using visual studio.
Visual Studio provides a template that has the main layout as an only layout.
How to specify a Layout in a component?
We can use the @layout razor command to assign a layout to a routable Razor component that has a @page directive. The compiler will convert @layout into a LayoutAttribute, which will be further applied to the component class.
Here is an example of how to insert the content of the following MasterList component into the MasterLayout at the position of @Body:
razor Copy @layout MasterLayout @page "/masterlist" <h1>Master Episode List</h1>
If you specify the layout directly in a component it will override the default layout set in the router or any @layout directive imported from _Imports. razor.
What is the Nested Layout?
You must have come across a lot of sites that were made of multiple subsites. For such types of sites, there is a hierarchy of layouts. A layout for the site as a whole is created at the top that has information like company name, copyright information, etc.
In the middle, there are multiple layouts, one for every subsite.
The last of the hierarchy component that displays basic text is present.
What is a Navigation Menu?
Under the razor component, there is a navigation or nav menu that contains different links, routes, components.
Nav Menu components render navigation links to other components to facilitate seamless navigation.
It ensures that the other Blazor components are wrapped around the main layout.
How to convert a component into a layout?
First, you need to inherit the component you want to convert from the layout component base.
The layout component base defines the body property for the center content inside the layout.
Use razor Syntax @body to specify the location in the layout markup where the content has to be provided.
