Data Binding in Blazor
Every web application that is out there has a purpose; either to provide information about a brand or their product in the desired way. Some web applications are also built with the purpose to collect data from users.
In the former case, there is data that is being fetched from the backend and displayed on the screens of the users. In the latter, a form that is filled on-screen is sent back to the backend.
Interestingly, in both these cases, there is a need to bind the data between the UI component and the View Model (Business Logic) page, so that the data can be seamlessly transferred from UI to the View Model page and from there to the backend.
In simple words, there is a need to bind data for displaying purposes or bind it for fetching data from the UI. Most SPA-based applications have the functionality of binding data through different techniques. Just like them, Blazor is also equipped with different binding techniques which help users to display/fetch data. Let’s see them in detail in this post.
Table of contents
- Understanding the different types of binding in Blazor
- Conclusion
Understanding the different types of binding in Blazor
Blazor is a SPA-based application that runs on the browser. It can be developed using a combination of C#/Razor and HTML. It provides a stable environment for full-stack development with the consistency and productivity of .Net. Razor components for carrying out UI-related activities.
Before we jump into the data binding topic, we are going to create a web assembly-based Blazor project.
Post this, we will add a new Razor component named ‘DataBinding’ to it. On this page, we will be experimenting with various binding tricks available in Blazor. Once created, the page looks like the below image.
Let’s now start with one-way binding.
One-way bindings are unidirectional, i.e data flows from one end to the other end only. One-way bindings are typically used for rendering a label or displaying a set of sentences dynamically from the background (based on the action that takes place in the UI).
To understand it better, consider a user registration form, it has few fields and has a header titled ‘Add User’, which, as the name suggests is used for adding users. Now imagine a situation where you want to modify the user details. The same form can be reused for modifying. Now you also want the heading to be changed. In such cases, the one-way binding comes into the picture.
From the View Model, based on the mode of the form, the label text can be set and displayed dynamically by using one-way binding. Similarly, for elements that need to be displayed dynamically (based on random selection) and do not allow the user to modify the details, one can make use of the one-way binding.
Below is a sample code that demonstrates the concept of one-way binding.
@page "/databinding"
<h1>@Title</h1>
@code {
private string Title = "Welcome to Partech";
}
And the output
Now let us try updating the same code with an intention to update the title from ViewModel when a button is clicked in the front end. To achieve it, the below code should be added.
@page "/databinding"
<h1>@Title</h1>
<button @onclick="UpdateTitle">Update Title</button>
@code {
private string Title = "Welcome to Partech";
private void UpdateTitle()
{
Title = "Title has been updated.";
}
}
Once the update button from the UI is clicked, the title gets updated like below.
One-way binding can also be used when you wish to pass data from one component to another. Imagine a situation where you are working on a data binding component and you need to pass one of the data present on this page to a child component. To achieve this, you have to pass the property as an attribute to the child component.
Example -
<childcomponent AttributeToSent="Property" />
And in the child component, you can use this value by accessing it in the form - @AttribureToSent.
Now that you have understood how one-way binding can be achieved, let's see about two-way binding next.
Two-way bindings are used in places where the data needs to be reflected in both the places i.e View and the View Model. Consider a situation where a form is filled in the frontend by the user. The details entered by the user have to be set to the View Model from the UI. In such cases, two-way binding is used.
The two-way binding in Blazor is achieved using the @bind keyword, which is typically used as an attribute. In the below code, we have added a new input field. This will bind it with the property - dataInput.
@page "/databinding"
<h1>@Title</h1>
<button @onclick="UpdateTitle">Update Title</button>
<input @bind="dataInput" />
@code {
private string Title = "Welcome to Partech";
private string dataInput;
private void UpdateTitle()
{
Title = "Title has been updated.";
}
}
Now, let's keep a breakpoint in the UpdateTitle method and run this code. Once the code is successfully executed, enter some values to the text field and click on the update title which was created as a part of the one-way binding process earlier.
Now, observe the dataInput variable in the backend.
Can you see the value that was entered in the UI getting reflected in the code now? Similarly, consider a scenario where the details of a user are already entered and we need to modify them. in that case, the input field will be pre-populated with the already existing value, which also can be achieved through this code.
Just the value for dataInput has to be set while the page gets loaded. Then the same gets displayed in the text box.
Conclusion
Data binding saves a lot of time and energy for the developers in passing the data back and forth. Blazor just like any other SPA has also provided the data binding feature in its own way.