Blazor is a fantastic framework to build web applications. It comes in two flavors: Server or Web Assembly. When creating a new project (not EMPTY), the .NET template spits out a simple application that you can then build off of. Both templates feature a Pages directory with Razor Pages (.razor) in them. The Razor Pages feature a blend of HTML and C# all in one file. This is very convenient, centralizing everything in one file. But as a project grows, having everything tied to one file can be hard to manage.

One option that helps with this issue is to implement a code behind file. A code behind file is, well, exactly what it sounds like. It’s a class file that is behind the Razor Page. This allows you to keep all of your C# logic in the code behind file and all of your HTML in the Razor Page. You then invoke variables from the code behind file in your Razor Page. In this post I am going to show you how to do this by detaching your Razor Page’s logic and putting it in a newly created code behind file.

Creating the Code Behind File

For my example, I will be doing this in .NET 7. This does work in .NET 6 as well so if you are creating an LTS project, you are good to go. I will also just be using the base template that features the Counter Razor Page.

With the fresh template, add a new C# Class file to the Pages directory. The first step is to properly name it so that it can be interpreted as a code behind file. The file needs to have the full name of the Razor Page file plus the C# extension (.cs). For example, the code behind file for the Counter.razor page, will be named Counter.razor.cs.

NOTE: If you are using Visual Studio, the new file will be placed in the Pages directory just below the Razor Page. It will also be indented compared to the other files in the directory.

From here all you need to do is add the partial access modifier to the class and make sure that the class is named the same as the Razor Page but without the Razor extension. For example, here is the class for the Counter.razor code behind file:

public partial class Counter
{
}

Migrating the Logic

Now that the file setup is complete, we will want to copy all of the C# code from the Razor Page over to the code behind file. All of the C# code will be located within the @code { } block. Once it is copied over, you can delete the @code { } block completely. From here, you can build your project and will be good to go! Below is the code for what both files should look like after creating the code behind file. If you would like to run this project yourself you can clone my repo. Until next time!

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>

Counter.razor.cs

namespace BlazorCodeBehind.Pages;

public partial class Counter
{
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}