How do I convert a razor page with an injection to a code-behind?

Question

I'm modifying a blazor example from [Blazor Tips and Tricks][1]

[1]: https://www.youtube.com/watch?v=3duXMxwnkXI starting at the 17 minute mark.

If you create a new Blazor App named BlazorCounter in Visual Studio, and modify the generated Counter.razor to look like this:

@page "/counter"
@inject Data.CounterState State

<h1>Counter</h1>

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

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

@code {

    void IncrementCount()
    {
        State.CurrentCount++;
    }
}

Then add the following c# class to the Data folder namespace BlazorCounter.Data { public class CounterState { public int CurrentCount { get; set; } } } Finally add this line at the end of the ConfigureServices method of Startup class:

            services.AddScoped<CounterState>();

Then you have a counter which preserves its state and doesn't start at zero every time you navigate to the Counter page.

My question is: How do I convert this to 'code-behind' and separate the C# code? I've converted other razor pages to 'code-behind', but don't see how to handle the @inject line.

Answer 1

Create a Base class and inject the service with an [InjectAttribute]:

public class MyCounterComponent : ComponentBase
{

    [Inject]
    public virtual CounterState State { get; set; }

    protected void IncrementCount()
    {
        State.CurrentCount++;
    }
}

I also move your IncrementCount() method from the view file to this class file.

And now you can use it with a @inherits directive:

@page "/counter"
@inherits BlazorApp1.Pages.MyCounterComponent

<h1>Counter</h1>

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

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

For more details, see Request a service in a component and Use DI in services