In previous article, we have created a simple Blazor component. In that component, we have created a simple form, which contains three textboxes and a submit button. It was really very basic form – without any validations. We are going to discuss few important aspects related to Blazor forms in coming articles. We used @bind directive attribute in that form, but we did not discuss it in detail.

In this article, we are going to discuss about some basics around data bindings and event bindings.

The @bind Directive Attribute

The directive attribute, @bind, can be used by Blazor components for binding data or events. When I started writing this article, I was thinking that this attribute is really simple and this article would be really very short. But now, it seems there are too many things which can be done by this directive attribute and I feel it deserves a complete full length post.

As I mentioned earlier, @bind can be used for data or events binding. When this attribute is specified, it can be bound with

• a C# field defined in the component class (or in @code section)
• a C# property defined in the component class (or in @code section)
• OR it can also be bound to any Razor expression

On a very high level, generally UI level frameworks offer two types of bindings – property bindings and event bindings. In the remaining article, we are going to discuss how it can be achieved in Blazor apps.

How to bind properties ?

We already have seen this in previous article. For binding a property, we need to use the same @bind attribute followed by a hyphen, which is followed by the property name.

In short, the syntax is @bind-{property}="{some C# or razor expression}".

So, let’s say, if we want to bind value property of input control, we need to use @bind-value, as shown in the code snippet given below. We have used @bind-value on all the three textboxes so as to get the updated values in the studentsModel instance.

When do the values get assigned ?

The value will be evaluated while rendering the component. Hence whatever value right hand side expression evaluates to, will be be assigned to the property while rendering the component. And when user is editing the values, the bound fields / properties would be updated only after control loses its focus.

This means that the values are, be default, assigned on the ‘onchange‘ event. This events gets triggered when the control loses focus.

Point to note here is, the behavior mentioned in above paragraph is the default behavior. It can be changed using event bindings. We will have a look at event bindings and how to change this default behavior in the coming sections of this article.

Reflecting Value Changes Immediately

The @bind directive attribute also provides option to specify the event on which the data should be updated in the bound field or property. We can bind a property or field on other Document Object Model (DOM) events by including an @bind:event="{EVENT}" attribute with a DOM event for the {EVENT} placeholder. 

Let’s take another example. Here the input is bound to an integer property. As we know integers do not allow numbers with decimal point. So let’s create a nullable int field, value, and set it to 9.

Then we can use @bind-value to bind the field to input textbox. As soon as form is rendered, the textbox will show value 9. Now, enter 543.21, it allows to enter the value. But as soon as focus is lost, the previous number 9. This is because, by default onchange event is used, which happens after control loses the focus. As the new input was invalid, it is not bound to the field and it shows previous valid value.

Let’s say we want to change this behavior. We want the number to correct itself when the control is in focus and user is typing. For that, we can use @bind:event directive attribute and set the event name to oninput.

Now, when user enters a valid digit, it is assigned to the field as soon as key is pressed. So, when user enters 123 and then a decimal point, then the decimal point is ignored and previous valid value 123 is restored..

So, we have seen how the directive attribute @bind can be used. I hope you find this information helpful. Let me know your thoughts.