Blazor WASM Data Binding

Blazor WASM Data Binding

blazor

24 Articles

 Improve

In previous article, we learnt what is components in blazor. if you are new to blazor, I strongly recommend you to check out my article on Blazor Wasm Introduction and Blazor Wasm Components. If you are familiar with blazor and components, you can skip introdution and continue with this article.

Table of Contents

  1. Why Data Binding in blazor components?
  2. One Way / Uni Directional Data Binding
  3. Two Way / Bi Directional Data Binding
  4. Summary

Why Data Binding in blazor components?

Gone are the days we used to make an ajax post from UI and bind data in our code behind or in controllers. We also have used form submit and get the data in code behind or in controllers by reading from form like formName["inputName"]. Now Data Binding in blazor components helps us to bind data to an input element using Razor directive attribute with field, property, or Razor expression value.

There are two ways of data binding,

  • One Way / Uni Directional Data Binding.
  • Two Way / Bi Directional Data Binding.

One Way / Uni Directional Data Binding

One way / Uni Directional data binding is used to bind data to field or property in uni directional flow. This means that user will not be able to directly modify the value. It can be done only as a result of user action or event such as button click.

This can be useful to set a label value dynamically or to set a css class value or to set a value to a hidden field.

The razor syntax for that is @bind

Code Sample - One Way Data Binding

Demo - One Way Data Binding

This example binds an Title property value to the "I ❤️ .NET" and the value can be updated on button click by user.


I ❤️ .NET




Two Way / Bi Directional Data Binding

Two way / Bi Directional data binding is used to bind data to field or property in bi directional flow. Thus allowing values to be updated from both sides.

This will be useful to bind data to a form inputs which you can use to collect data from user. You can also use @oninput bind event to bind data instantaneously. This can be used in search input to instantaneously search data and list to user.

The razor syntax for that is,

  • @bind-value=Property
  • @bind-value=Property @bind-value:event="onevent"

Code Sample - Two Way Data Binding

Demo - Two Way Data Binding

The following demo binds:

  • An <input> element value to the C# inputValue field. When an <input> element loses focus, its bound field or property is updated. This means by default value will be updated using @onchange event.
  • A second <input> element value to the C# InputValue property. When the use gives input value by typing for second <input> its bound field or property is updated instantaneously. This is because value will be updated using @oninput event.


field value - inputValue:


Property value - InputValue:

Summary

In this article, we learn't about what is data binding (both one way and two way) in blazor components and experienced a live demo. In our next article let's learn about what is event callback and how to communicate between components.

  • Blazor
  • Data Binding
  • One Way Binding
  • Two Way Binding