Post
Ask Question

Partial Classes and Layouts in Blazor

Introduction

 
In this particular article we will be learning how to use,
  • Partial Classes
  • Layout

Partial Classes

 
It is possible to separate the C# code and the HTML through the use of partial classes. With partial classes we can declare the same class in different classes. In this way they can share members. The reason why this works is that the components are compiled to partial classes. The following is an example of how to use a partial class,
 
Step 1
 
We want to separate C# code and the HTML code in the counter component hence we have to make a new C# class under pages and call it counter.razor.cs.
 
Step 2
 
Then cut and paste the code inside the @tags and put it in the new C# class.
 
Step 3
 
Normally when you put the class it is declared as a public class counter but change it to public partial class counter which would then identify it as a partial, as in figure 1 below.
  1. public partial class Counter {  
  2.     private int currentCount = 0;  
  3.     private void IncrementCount() {  
  4.         currentCount++;  
  5.     }  
  6. }  
Step 4
 
Press ctrl+f5 to run the application.
 
Result
 
Final code on the counter.razor file is shown on figure 3 below.
  1. @page "/counter"  
  2. <h1>Counter</h1>  
  3. <p>Current count: @currentCount</p>  
  4. <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>  
  5. <input type="number" @bind="currentCount " />  
  6. @code {  
  7. }  
Final code on the counter.razor.cs file is shown on figure 3 below.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Threading.Tasks;  
  5. namespace HMS.Client.Pages {  
  6.     public partial class Counter {  
  7.         private int currentCount = 0;  
  8.         private void IncrementCount() {  
  9.             currentCount++;  
  10.         }  
  11.     }  
  12. }  

Layout

 
Some times we would want some of the code which shows some elements to appear on every page of the application. One way to do this is through the use of layouts.
 
A layout is an ideal place to put headers, menus, colors or links. A layout is a special component which can render other components. In our application we have the main layout located in our shared folder.
 
We have been building the previous tutorials, and the menus are always visible and it does not matter on which menu I have clicked --  the layout still remains the same. Click the link at the bottom of this tutorial to view the source code. The following steps describe how you can alter the layout of the project.
 
Step 1
 
Go to Visual Studio.
 
Step 2
 
Go to the shared folder.
 
Step 3
 
Open the file MainLayout.razor. As you can see the layout has the extension .razor which shows that it is also a component but it is a special component since it is inheriting from the LayoutComponentBase.
 
Step 4
 
If you go down, we have div tags which enclose the NavMenu component. The NavMenu component contains all the menus within the layout so now open the NavMenu.razor file.
 
Step 5
 
To create a new menu add the code below in figure 5 on the list of menus.
  1. <li class="nav-item px-3">  
  2.    <NavLink class="nav-link" href="sample">  
  3.       <span class="oi oi-list-rich" aria-hidden="true"></span> Samlpe  
  4.    </NavLink>  
  5. </li>  
Step 6
 
Create a new component in the pages folder and copy and paste in figure 6 below.
  1. @page "/sample"  
  2. <h3>sample</h3>  
  3. @code {  
  4. }  
Step 7
 
Press ctrl+f5 to run the application and go to the sample menu.
 
Result
 
If you want to display common code in every page you would do the following,
 
Step 1
 
Go to the MainLayout component.
 
Step 2
 
Under the render fragment @Body in the last div tag put the following code as shown on figure 8 below.
 
Step 3
 
Press ctrl+f5 to run the application and go to every menu on the application.
 
Result
 
On every page there is a red text as shown in figure 9 below.
 
To download the whole source code go to here.
 

Summary

 
This article showed  us how to use partial classes and in events where we would like C# code to be separated from the HTML code. Also, it has shown us how to alter and modify the layout of a Blazor application.


Similar Articles