Looking at bindings
In this chapter, we are using bindings to bind data to our form controls. We briefly discussed bindings in Chapter 5, Creating Advanced Blazor Components, but it’s time to dig deeper into bindings.
Binding to HTML elements
With HTML elements, we can use @bind
to bind variables to the element.
So, if we are binding to a textbox, we would do it like this:
<input type="text" @bind="Variable"/>
@bind
and @bind-value
both work and do the same thing. Note the lower v
in value. The input element is an HTML element that will render as a normal HTML element with no extra features (except binding). Compare this to InputText
, which will work in a similar way but also give you additional features like validation and styles.
By default, the value in the variable will change when we leave the textbox. But we can change that behavior by adding a @bind:event
attribute like this:
<input type="text" @bind...