How-To: Add Blazor Component Interactivity with One-Way Binding

Building a static HTML page with Blazor is pretty easy, but doesn’t make for an interesting application. To support basic interactivity, Blazor components/pages use databinding to show dynamic data and respond to events on the component and its elements. The simplest form of databinding is one-way binding. One-way binding renders the data from our code into the component’s markup. Whenever that property or member variable changes, the bound element is re-rendered. One-way binding is also used to respond to events on HTML elements, like a button’s onclick event.

For this article, we will crate a new Blazor page following the steps in the How-To: Create New Blazor Page article.

Then, we will re-create the simple counter page to show how one-way binding works:

@page "/page-1"

<h3>Counter</h3>
<p>The counter value is @counter!</p>

<button id="increment-button" class="btn btn-primary" @onclick=IncrementCounter>
    Increment
</button>

@code {
    private int counter = 1;

    private void IncrementCounter()
    {
        counter++;
    }
}

First, we define the @page directive with the route to this page (this is how we will navigate to the page in our Blazor app).

Then, let’s focus on the @code section. For this initial binding example, we write our code directly in the page file, but these same binding principles can be used to bind with other class instances. This code block defines:

  • The counter member variable (line #11) that holds the current counting value for this page. It is reset whenever the page is reloaded.
  • And, the IncrementCounter method (lines #13-16) simply increments the counter member variable.

Next in line #4, we define a paragraph to display text and the counter value. To do one-way binding to a property or member variable, we use the @ symbol followed the the variable name: @counter. This means: render the value of counter in this markup location. We can use this notation in a content section, like the paragraph above, or in attributes within an element.

Finally, another form of one-way binding is used to bind the <button> element’s onclick event to a method in our component (line #6). Note that this binding notation is slightly different: @onclick=IncrementCounter. But, it also means: in response to an onclick event on this element, call the IncrementCounter method.

The method signature for the bound method must match the event handler signature expected by the event. For onclick, the event handler signature returns void and has an empty parameter list, so our IncrementCounter method matches that. Other events may pass event arguments or other parameters, so the bound method would need to match them. There are dozens of events on HTML elements, so this binding mechanism can be used to respond to any of them.

With the new interactivity defined on this component, whenever the user clicks the ‘Increment Counter’ button, the counter member variable is updated and that paragraph render fragment is re-rendered with the new value.

We can now build and run our new code (Ctrl+F5) to get the page below. If we click the button a few times, we will see the counter update.

Fig 1 – One-Way Binding Sample

In conclusion, we learned to add one-way databinding to our Blazor component for either element contents or attributes. And we learned how the same one-way binding concept is used to bind element events to methods in our code, which respond to that event. While this form of binding is basic, it provides the foundation for building rich Blazor applications that show all kinds of data.

3 thoughts on “How-To: Add Blazor Component Interactivity with One-Way Binding

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s