Splitting Razor Components in Blazor Application

Splitting Razor Components in Blazor Application

In this and in a few upcoming articles, I am going to discuss Splitting Razor Components in Blazor Application. Please read our previous article, where we discussed ASP.NET Core Blazor Components in detail. As part of this article, we are going to discuss the following pointers.

  1. How to Split the Razor Component in Blazor Application?
  2. Single file or Mixed file approach
  3. Partial Files Approach
  4. Base Class Approach
How to Split the Razor Component in Blazor Application?

In the previous article, we discussed the Razor components in detail. As part of Razor components, we also discussed that a Razor component is a combination of two things i.e. HTML code and C# code. For example, please have a look at the following Counter.razor file i.e. the Counter Component.

How to Split Razor Component in Blazor Application?

This is fine when our component code is very less. But it is a good practice to separate the HTML code and C# code into their own files. It is not only good from a maintenance point of view, but it is also good for unit testing. Now let us proceed further and understand how to split a component in blazor application. 

In ASP.NET Core Blazor Framework, in two ways we can split the component into their respective HTML and C# files.

  1. Partial files approach
  2. Base class approach

Before understanding the above two approaches let us first understand what is the Single file or Mixed file approach.

Single file or Mixed file approach

In this case, both the HTML markup and C# code are present in a single file. The example is the Counter.razor component which is created by default when we created a Blazor Server App a shown below.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}
Partial files approach

In this case, the Components HTML remains in the component file itself. Let us understand this with an example. Please modify the Counter.razor file code as shown below. Here, you can see the file only contains the HTML Markup.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

As we already discussed in our previous articles, when the component has compiled a class with the same name as the component file is generated. Here, the component name is Counter.razor. So, when we compiled this component a class file will be generated with the name as Counter.cs. And moreover, this generated class is a partial class.

As we are splitting the component code, so we need to move the C# code to a class with the same as i.e. Counter. So, create a class file with the name Counter.razor.cs within the Pages folder and then copy and paste the following code in it.

namespace BlazorServerApp.Pages
{
    public partial class Counter
    {
        private int currentCount = 0;
        private void IncrementCount()
        {
            currentCount++;
        }
    }
}

Once you created this, now if you look at the Pages folder, then you will see that this class is nested inside the Counter.razor component as shown below.

nesting class files inside the razor components

This is because, by default, the File nesting is enabled in Blazor application. If you don’t want this, then you can disable this by clicking on the following button.

unnesting class files inside the razor components

Once you disable to file nesting, then the Counter.razor.cs class file is no longer nesting inside the Counter.razor component as shown below.

Splitting Razor Components using Partial files approach

With the above changes in place, now run the application and you should get the output as expected in the browser.

Base Class Approach

In order to understand the Base Class Approach, first the delete the Partial Counter class (Counter.razor.cs file) that we just created in the Pages folder. In this case, also, the HTML Markup will remain in the component file itself. Let us understand this with an example.

Create a separate class file

First, create a class file with the name CounterBase within the Pages folder and then copy and paste the following code in it. You can name the class anything you want, but it is a common convention to have the same name as the component but suffixed with the word Base. 

using Microsoft.AspNetCore.Components;
namespace BlazorServerApp.Pages
{
    public class CounterBase : ComponentBase
    {
        private int currentCount = 0;
        private void IncrementCount()
        {
            currentCount++;
        }
    }
}

Note: In this example, the component name is Counter. So, the class that contains the C# code is named as CounterBase. The class has inherited from the built-in ComponentBase class. This class is present in Microsoft.AspNetCore.Components namespace.

Modifying the Counter.razor component:

Modify the Counter.razor component file as shown below. Here, we need to include the CounterBase derived class. Once the component is compiled, the Counter component will become a derived class of the CounterBase base class.

@page "/counter"
@inherits CounterBase
<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

At this point, if you build the solution, then you will get the following error.

Splitting Razor Components using Base Class approach

This is because we have declared the method and variable as private in CounterBase class and we know that private members are not accessible to the derived classes. In order to resolve this issue, either we need to convert them into protected or public members. So, let’s modify the CounterBase class as shown below.

using Microsoft.AspNetCore.Components;
namespace BlazorServerApp.Pages
{
    public class CounterBase : ComponentBase
    {
        public int currentCount = 0;
        public void IncrementCount()
        {
            currentCount++;
        }
    }
}

Now, with the above changes in place and run the application and you should get the output as expected.

In the next article, I am going to discuss Creating Model in Blazor Application. Here, in this article, I try to explain how to split component in Blazor application. I hope you enjoy this article.

Leave a Reply

Your email address will not be published. Required fields are marked *