Simple Counter

The following example is included in the templates Microsoft provides. We will go through line by line to explain how it works.

Counter.razor

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

@page tells us this component is located at /counter

On the button, we can assign a callback function of IncrementCount to the onclick event.

When the button is pressed, IncrementCount() is called causing currentCount to be incremented.

It will automatically re-render the new value on the page.