Blazor’s data binding system is one of its most powerful features, enabling seamless communication between the UI and the underlying logic of your application. Whether you’re capturing user input, updating fields dynamically, or controlling when and how updates happen, Blazor provides various binding syntaxes to fine-tune your interactions. In this article, we will explore the different bind features available in Blazor, such as bind-value, bind:event, bind:get, bind:set, bind:after, bind:culture, and bind:format. We’ll also cover real-world scenarios to demonstrate when you might use each of these options.

1. Basic Binding with bind

The simplest form of two-way binding in Blazor is using bind, which synchronizes a value between an HTML element and a C# field.

Example

<input type="text" @bind="name" />
<p>Your name is: @name</p>

@code {
    private string name = "";
}

Use Case

Imagine a form where a user inputs their name, and the system reflects the name in real-time in other parts of the page, such as a greeting message. Here, @bind keeps the input and the variable synchronized.

2. Customizing with bind-value

Sometimes you want more control over which part of the component you’re binding. bind-value allows you to specify which property to bind to. For instance, if you’re binding to a custom input component, bind-value ensures you’re binding to the right value.

Example

<InputText @bind-value="email" />
<p>Your email is: @email</p>

@code {
    private string email = "";
}

Use Case

You may have custom input components where you need to bind to a specific property (such as Value or Text), and bind-value helps clarify exactly which property is being bound.

3. Controlling Events with bind:event

By default, Blazor updates the value as the input changes. However, in some scenarios, you might want to bind the value to an event other than oninput. For instance, you may want the value to update only when the user leaves the input field, in which case you can specify bind:event="onchange".

Example

<input type="text" @bind="username" @bind:event="onchange" />
<p>Username: @username</p>

@code {
    private string username = "";
}

Use Case

In situations where you want to reduce unnecessary UI updates (e.g., saving form data after input changes), you can use bind:event="onchange" to only update after the user finishes typing and moves away from the input.

4. Conditional Binding with bind:get and bind:set

bind:get and bind:set allow you to define how a value is retrieved and updated, providing fine-grained control over your data binding.

Example

<input type="text" @bind:get="GetName" @bind:set="SetName" />
<p>Your name is: @name</p>

@code {
    private string name = "";

    private string GetName() => name;
    private void SetName(string value) => name = value.ToUpper();
}

Use Case

This technique is useful when you want to manipulate data before binding it to the UI or before updating the bound field. In this example, the SetName method converts the input to uppercase before assigning it to the name variable.

5. Executing Actions After Binding with bind:after

The bind:after modifier allows you to perform an action immediately after the binding operation completes. This is useful when you want to trigger additional logic once the data has been bound.

Example

<input type="text" @bind="phoneNumber" @bind:after="OnPhoneNumberBound" />
<p>Phone number: @phoneNumber</p>

@code {
    private string phoneNumber = "";

    private void OnPhoneNumberBound()
    {
        Console.WriteLine($"Phone number bound: {phoneNumber}");
    }
}

Use Case

In a form that updates data in real-time, you might want to log, validate, or perform additional actions every time the user inputs data. The bind:after modifier ensures this action happens as soon as the binding completes.

6. Internationalization with bind:culture

bind:culture allows you to control the culture used for binding. This is particularly useful in scenarios where you’re working with date formats, numbers, or currencies that are culture-specific.

Example

<input type="date" @bind="birthDate" @bind:culture="new CultureInfo('fr-FR')" />

@code {
    private DateTime birthDate = DateTime.Now;
}

Use Case

If your application is used in different countries or regions, bind:culture ensures that data is formatted and parsed according to the user’s locale. In this example, the date is formatted for a French audience (dd/MM/yyyy).

7. Formatting Values with bind:format

For scenarios where specific value formats are required (like dates or numbers), bind:format provides a simple way to format values according to the desired pattern.

Example

<input type="text" @bind="selectedDate" @bind:format="MM/dd/yyyy" />

@code {
    private DateTime selectedDate = DateTime.Now;
}

Use Case

This is especially useful for date inputs or numeric fields where you want to enforce a specific format, such as showing dates in MM/dd/yyyy format or currency values in $ format. In this example, the date is always displayed in the month/day/year format, regardless of the user’s locale settings.

Blazor’s powerful data-binding system offers a range of flexible options for synchronizing the UI and the underlying logic of your application. From basic two-way binding with @bind to more advanced techniques such as bind:get, bind:set, bind:event, and bind:after, you can control how and when data is updated, formatted, and displayed. By mastering these binding options, you can create rich, interactive web applications that provide users with seamless, responsive experiences. Whether you’re building forms, handling events, or managing internationalization, Blazor’s binding system empowers you to fine-tune how your app reacts to user input.