Blazor has 3 different ways of binding data on the client-side.
Here are the different data binding mechanisms in the client-side blazor framework.
This is the common data binding we’ll see in many of the client-side frameworks.
one-way data binding means binding the data from the model to view.
Unlike many client-side frameworks, we need no
bind- properties here to get the data in the field and bind to HTML.
You can use the
bind attribute on any element to bind the value.
In blazor, we’ll have a property assigned some value in the
functions and use the property in the HTML template.
Let’s get this done.
<h3>One-way data binding</h3>
So, when we run the app, the label tag will display “red” as a text in the label.
Notice how the
@color property is used in HTML from the
@functions. We must use the
@ symbol when accessing the properties/functions declared. If you’ve worked with razor files (.cshtml) this shouldn’t be a new thing.
Let’s make this little interesting by having a div with background and toggling that background color with a button.
<h3>One-way data binding</h3>
When the button is clicked, the background color is changed from red to green and vice-versa and the content in the HTML is also changed accordingly.
Two-way data binding is the synchronization of data between the model and the view. In Blazor, this is like synchronization between the properties in the functions and the HTML.
For the two-way binding, in blazor, we have a dedicated
Let’s have a label and a text box for greeting the person who entered text.
<h3>Two-way data binding</h3>
oninput bind attribute will fire for every character entered in the textbox.
bind-value-onchange directive will work like a blur event in jQuery. After entering the text in the textbox and focusing out, it will update the value of the property in DOM.
I’ve tried replacing the
bind-value-oninput with the
bind-value-onchange directive in the above example.
Components in blazor can pass the parameters from parent to child component.
This is like passing the model values to a partial view in ASP.NET MVC except that we don’t have events in the child component to get notified when the values are updated in the parent component.
Let’s have a year increment function in the parent component and pass that year parameter to child component. In the child component, we will check if the year supplied is a leap year or not.
Here’s the child component:
The parameters that are to be passed across the components should be decorated with
Parameter attribute. This should be done in both parent and child components.
This child component binding happens with the
YearChanged event in the child component as this matches the year parameter’s convention.
So, by convention the child component parameter should be
<LeapYear bind-Year-YearChanged="@Year" />
but that is equivalent to
<LeapYear bind-Year="@Year" />
To check if the year is a leap year or not we’ll have an
IsLeap property in the child component and it will check if the year is a leap or not.
That’s it for the data binding in client-side blazor framework.
Note: You need visual studio 2019 Preview (as of this May 2019) and .NET Core 3+ to run the solution.
- Featured image by Efe Kurnaz on Unsplash.com