Blazor Tutorial Create Component from Code Behind

You can create view markup and C# code logic in separate files when creating a Blazor component.

• Using @inherits directive to tell the Blazor compiler to derive the class generated from the Razor view from class specified with this directive.
• The class specified with @inherits directive must be inherited from BlazorComponent class and it provides all base functionality for the component.

Let's move the C# code logic from Counter.cshtml file to seperate code behind class.

using Microsoft.AspNetCore.Blazor.Components;

namespace BlazorApplication
{
    public class CounterClass : BlazorComponent
    {
        public int CurrentCount { get; set; }

        public void IncrementCount()
        {
            CurrentCount += 5;
        }
    }
}

The Counter.cshtml file will use the properties and methods from the code behind class just by adding  @inherits CounterClass.

@page "/counter"
@inherits CounterClass

<h1>Counter</h1>

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

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

Blazor compiler generates class for all the view pages with the same class name as the page name, so here, a specified base class cannot have the same name as Razor View, otherwise, it would cause a compile-time error.

Now when the Click me button is pressed, the counter is incremented by 5.