Binding values with markup elements

In this recipe, we introduce the foundational concept of data binding in Blazor applications. This feature bridges the gap between the user interface and the application’s data or state. A deep understanding of this concept will allow you to level up the interactivity of your projects. We start with mastering the basics.

Let’s bind a simple text field to a backing variable to see the data flowing from the user interface to the backend.

Getting ready

Before you dive into binding, create a Recipe01 directory – this will be your working directory.

How to do it…

Follow these steps to bind a C# value with a markup element:

1. Add a routable IntroduceYourself component that renders in an InteractiveWebAssembly mode:

   @page "/ch02r01"
   @rendermode InteractiveWebAssembly

2. Inside the @code block of IntroduceYourself, initialize a User variable to store the user input value:

   @code {
      ...