Data binding in blazor

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.

• One-way data binding
• Two-way data binding
• Component parameters
  

One-way data binding

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>
color is : <label>@color</label>
@functions{
    private string color = "red";
}

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>
color is : <label>@color</label>
<div style="background-color: @color; padding: 50px;"></div>
<button class="btn btn-dark" onclick="@ToggleBackGround">Toggle background color</button>

@functions{
    private string color = "red";
    private void ToggleBackGround(UIMouseEventArgs eventArgs)
    {
        color = color == "red" ? "green" : "red";
    }
}

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

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.

1. bind-value-oninput attribute

For the two-way binding, in blazor, we have a dedicated bind-value-oninput attribute.

Let’s have a label and a text box for greeting the person who entered text.

<h3>Two-way data binding</h3>
<label>Hello @labelText !!</label><br/>
<input class="input-group-text" bind-value-oninput="@labelText"/>

@functions{
    private string labelText = "Karthik";
}

So, the oninput bind attribute will fire for every character entered in the textbox.

2. bind-value-onchange attribute

The 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.

Component parameters

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.

<h3>Component parameters</h3>
<p>Year: @Year</p>
<br />
<button class="btn btn-outline-dark" onclick="@IncrementYear">Increment Year</button>
<br />
<LeapYear bind-Year="@Year" />
@functions{
    [Parameter]
    private int Year { get; set; } = 2000;
    private void IncrementYear()
    {
        Year++;
    }
}

Here’s the child component:

<div style="border: 2px dashed gray;">
    <h2>Leap Year checker</h2> <hr />
    <h3>Year: @Year</h3>
    <h3>@IsLeap</h3>
</div>

@functions{
    [Parameter]
    private int Year { get; set; }
    private string IsLeap
    {
        get
        {
            if (((Year % 4 == 0) && (Year % 100 != 0)) || (Year % 400 == 0))
            {
                return Year + " is a leap year";
            }
            else
            {
                return Year + " is not a leap year";
            }
        }
        set
        {

        }
    }

    [Parameter]
    private EventCallback<int> YearChanged { get; set; }
}

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.

Source code

[Source code of data binding examples is on github](https://github.com/karthikchintala1/Data-binding-in-Blazor).

Note: You need visual studio 2019 Preview (as of this May 2019) and .NET Core 3+ to run the solution.

Pic Credits

– Featured image by [Efe Kurnaz]( https://unsplash.com/photos/Rs5BQj5zbf8) on Unsplash.com