Blazor Component Split

This article explains how we can divide the component into HTML and C# file respectively.

In this article, we are going to see how the Blazor component can be divided into separate files. Please refer to my below articles on Blazor

1. Blazor Overview
2. Project Structure
3. Razor Components

For this tutorial, I’m using VS 2022 Community Edition (17.1.5)

The below two approaches can be leveraged to split the blazor component into HTML and C# files respectively.

1. Partial File
2. Base Class

If we look at the sample razor component – Counter.razor, both HTML and C# code are in a single file.

@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;
    private void IncrementCount()
    {
        currentCount++;
    }
}

Let us start component split.

Partial File Approach

In this approach, HTML will remain in the Counter.razor file.

@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Now, we are going to create a partial Counter class with name “Counter.razor.cs”

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

Using File nesting button, we can see the newly created partial class

Note
When a component is compiled, a class will be created with same name as the component.

Base Class Approach

Even with this approach, HTML will remain in Counter.razor file.

@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Now let us go ahead and create a separate class file and move the C# code into it. Here there is no restriction on class name. You can name the class as you like. However, it is always nice to have the same name as the component, but suffix with the word “Base”.

Here I’m going to name the class as “CounterBase” since the component name is Counter.

A few things need to be kept in mind.

1. This class has to inherit from a built-in class – ComponentBase - which is available in the namespace - Microsoft.AspNetCore.Components
2. In order access the class members from the HTML, the access modifier must be at least protected.
3. Ensure that we are including the ComponentBase in Counter.razor file using the directive @inherits

C # file looks like below,

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

HTML markup looks like the below,

@page "/counter"
@inherits CounterBase
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Please refer to the Microsoft documentation on razor components for more details.

In this article, we have learned two component split approaches. Thank you for reading my article. Please leave your comments in the below comments box.