Knowledge Base

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Create Code Behind File for Razor Page In Blazor Application ======

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

Default Counter.razor page contains this:

<file csharp 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++;
    }
}
</file>

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

<file csharp Counter.razor.cs>
namespace BlazorCodeBehind.Pages
{
    public partial class Counter
    {
        
    }
}
</file>

(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:

<file csharp Counter.razor.cs>
namespace BlazorCodeBehind.Pages
{
	public partial class Counter
	{
		private int currentCount = 0;

		private void IncrementCount()
		{
			currentCount++;
		}
	}
}
</file>

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

<file html 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>
</file>

{{tag>dotnet}}