the Blazor Counter Component

The Counter page is a fundamental example in Blazor development that demonstrates how user interaction, state management, and rendering work together. Located in the BlazorWebApp.Client project (inside the Pages folder), this component showcases the power of running C# code directly in the browser.

Let’s break down the key elements of this component to understand how it functions.

1. Routing with Directives

At the very top of the file, we encounter the @page directive:

This directive defines the routing for the component. By appending /counter to the base URL of the application, the router knows to load this specific page. While routes can be configured to accept parameters for more dynamic navigation, this simple example uses a static route.

2. Optimizing Performance with Render Modes

Immediately following the routing, we define how the component should be rendered:

The InteractiveAuto mode is a powerful feature in modern Blazor applications. It employs a hybrid strategy:

1. Initial Load: The component first renders using Blazor Server (via a SignalR connection). This ensures the user sees the content immediately without waiting for large downloads.
2. Background Transition: While the user interacts with the server-side version, the browser downloads the WebAssembly resources in the background.
3. Subsequent Loads: The next time the page is visited, it runs entirely on the client side using the cached WebAssembly version, reducing server load and latency.

3. The Logic Block

Blazor allows developers to write standard C# code within the @code block to handle logic and state:

Here, currentCount acts as the state variable, initialized to 0. The IncrementCount() method is responsible for updating this state by increasing the value by 1.

4. The User Interface and Data Binding

The UI section combines standard HTML with Razor syntax (@) to display data and handle events dynamically.

Displaying State

To display the value of our variable, we use the @ symbol:

Razor's intelligence allows it to seamlessly distinguish between the C# variable @currentCount and the surrounding HTML tags, eliminating the need for explicit transition markers.

Event Handling

To make the page interactive, we connect a button to our logic:

The @onclick attribute binds the button's click event directly to the IncrementCount C# method. It is crucial to include the @ symbol; without it, the browser would interpret onclick as a standard JavaScript event, and the C# method would not execute.

Summary of the Flow

When a user clicks the button, the following sequence occurs:

1. The click event triggers the IncrementCount() method.
2. The method updates the currentCount variable.
3. Blazor detects the state change and automatically re-renders the UI to reflect the new number.