This example will use the Counter.razor page in the default Blazor WebAssembly App project.

Default Counter.razor page contains this:

Counter.razor

@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++;
    }
}

In the same directory, create a new class file named “Counter.razor.cs” with this content:

Counter.razor.cs

namespace BlazorCodeBehind.Pages
{
    public partial class Counter
    {
 
    }
}

(Change BlazorCodeBehind.Pages to match the namespace for your project)

Copy and paste the contents of the @code block from Counter.razor into the class file so that it looks like this:

Counter.razor.cs

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

Remove the code block from Counter.razor so that it looks like this:

Counter.razor

@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>