Hello!

I want to show you how you can organize code in BlazorServer.

Code in client

The first option is to store the code on the client (in a razor file). Take the Counter.razor file which combines html and c# code.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

This page has a private currentCount variable and an IncrementCount method that increments this variable. On the html side, there is a Click me button that calls the c# IncrementCount method and display the currentCount variable value on the page. This option should only be used if the amount of code is not significant at all.

Inheritance

Another option is to create a new class that will be inherited by razor page. This class must inherit from ComponentBase.

using Microsoft.AspNetCore.Components;

namespace BlazorLearn.Pages
{
    public class CounterBase : ComponentBase
    {
        protected int currentCount = 0;

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

I moved the code from Counter.razor to the new class CounterBase. In this case it is necessary to change the access modifier from private to protected. In Counter.razor you need to add @inherits CounterBase.

@page "/counter"
@inherits CounterBase

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

To add a logger or other component, the constructor cannot be used. But there is another way, property with the modifier Inject can be used for DI.

using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Logging;

namespace BlazorLearn.Pages
{
    public class CounterBase : ComponentBase
    {
        [Inject]
        public ILogger<CounterBase> logger { get; set; }

        protected int currentCount = 0;

        protected void IncrementCount()
        {
            logger.LogInformation("CounterExecuted");
            currentCount++;
        }
    }
}

Inheritance

Partial class

The third option si to use partial classes. To do this, I will create a new partial class with the same name as the razor page.

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

Access modifiers can remain private, and you don’t need to change anything on the razor page itself. Just moved all code from there to corresponding class.

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

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

Logger or other components can be added in the same way as in the second version. Using properties with the Inject attribute.

        [Inject]
        public ILogger<Counter> Logger { get; set; }