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.