Blazor Data And Property Binding

Introduction

Data binding in Blazor is quite unique. We can bind data in both one way and two ways without the help of javascript. The complete code will be in C# itself. We will see the different ways to bind data in Blazor.

Agenda for the Article

One-Way Data Binding
Two-Way Data Binding

One-Way Data Binding

First, we will create a Blazor Server project. To know more about the Blazor Server project creation and introduction of Blazor. Please refer to my previous article. Now let's understand the below steps.

First, we will add a new console project for the model class as given below.

Add New Console Project

Now give a proper name to the project and click next. Now we have a new project Blazor_Model with DemoProducts.cs class as given below.

Model Class

Now, we have three properties Id, Name, and IsActive as given below,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Blazor_Model
{
    public class DemoProducts
    {
        public int Id { get; set; }
        public string Name { get; set; }    
        public bool IsActive { get; set; }
    }
}

So with that our model looks good, we need to actually use this inside our BindData.razor component. Now we will move inside our BindData component and create an object of DemoProduct class. In an MVC application, we typically did that inside controllers inside the razor pages application. In Blazor we do that inside the @code block. In fact, we can write all the C# code inside these blocks. Now we will add demo data inside these blocks and use them inside razor syntax to display on UI as given below.

@page "/bindproduct"
<h3>Bind Data</h3>
<div>
    <b>Id:</b>@product.Id
    <br />
    <b>Name:</b>@product.Name
    <br />
    <b>IsActive:</b>@product.IsActive
</div>

@code {
      Blazor_Model.DemoProducts product = new()
    {
      Id=101,
      Name="Computer Table",
      IsActive = true
      
    };

}

In the above code, we will define routing inside the @page directive. Inside the @code block, we have the complete C# code. Now see the output as given below.

One way binding output

This is known as one-way data binding in Blazor. One way data binding is the process of rendering the view as per the values inside our model.

Two-Way Data Binding

Now we will add one more property to our model class Price as given below,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Blazor_Model
{
    public class DemoProducts
    {
        public int Id { get; set; }
        public string Name { get; set; }  
        public double Price { get; set; }     //new property
        public bool IsActive { get; set; }
    }
}

Now we will make some changes in our razor component as given below

@page "/bindproduct"
<h3>Bind Data</h3>
<div>
    <b>Id:</b>@product.Id
    <br />
    <b>Name:</b>@product.Name
    <br />
    <b>Price:</b>@product.Price
    <br />
    <b>IsActive:</b>@product.IsActive
    <br />
    <b>Price</b>
    <input type = "number" @bind-value="@product.Price" />
</div>

@code {
      Blazor_Model.DemoProducts product = new()
    {
      Id=101,
      Name="Computer Table",
      Price=10000,
      IsActive = true
      
    };

}

In the above code, we have assigned a static value to the Price and displayed that value in the Input field and inside plane text. But one thing that you have to notice here is that instead of a simple value attribute we took @bind-value here which is a Blazor attribute. It is used for the two-way binding in Blazor. Let's see the output below.

Output

output one way data binding

In the above video, we can see that after changing the value in the input box if we click outside the box real-time value is getting reflected outside also. This is two-way data binding but the binding actually happens when you click somewhere else from the text box. It only changes when we click outside because two-way data binding happens on the onclick event by default. But we want to change this value as soon as the input value changes. To do that follow the code given below.

 <input type = "number" @bind-value="@product.Price" @bind-value:event="oninput" />

In the above code, we have added an attribute with oninput value. With that change, if we type anything inside the text box it changes outside also as given below.

Output

In the above video, as we can see the text outside the box changes as we are changing inside.

Data Binding In Checkbox

Now we will see how the two-way data binding works with the checkbox. Let's modify the razor component as given below.

@page "/bindproduct"
<h3>Bind Data</h3>
<div>
    <b>Id:</b>@product.Id
    <br />
    <b>Name:</b>@product.Name
    <br />
    <b>Price:</b>@product.Price
    <br />
    <b>IsActive:</b>@product.IsActive
    <br />
    <b>Price</b>
    <input type = "number" @bind-value="@product.Price" @bind-value:event="oninput" />
    <br />
    <b>This product is</b> @(product.IsActive?"added to cart":"removed from cart") 
    <br />
     <b>Add to cart:</b>
     <input type = "checkbox" @bind-value = "@product.IsActive" checked/> 
</div>

@code {
      Blazor_Model.DemoProducts product = new()
    {
      Id=101,
      Name="Computer Table",
      Price=10000,
      IsActive = true
      
    };

}

In the above-given code, we have added an input type check box with the IsActive property. If we check and uncheck the checkbox the value gets reflected in line number 15. Let's see the output to get a more clear picture.

Output

output checkbox data binding

DataBinding In Dropdowns

Now we will see the Blazor data binding in dropdowns. To do that we need to follow the below-given steps

First, we will add a new Model class as given below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Blazor_Model
{
    public class ProductProperties
    {
        public int Id { get; set; } 
        public string Key { get; set; }
        public string Value { get; set; }
    }
}

Now add one more property inside the DemoProduct class,

public List<ProductProperties> productProperties { get; set; }

Do more changes inside the razor component to display that dropdown as given below,

@page "/bindproduct"
<h3>Bind Data</h3>
<div>
    <b>Id:</b>@product.Id
    <br />
    <b>Name:</b>@product.Name
    <br />
    <b>Price:</b>@product.Price
    <br />
    <b>IsActive:</b>@product.IsActive
    <br />
    <b>Price</b>
    <input type = "number" @bind-value="@product.Price" @bind-value:event="oninput" />
    <br />
    <b>This product is</b> @(product.IsActive?"added to cart":"removed from cart") 
    <br />
     <b>Add to cart:</b>
     <input type = "checkbox" @bind-value = "@product.IsActive" checked/> 
     <br />
     <b>Product Properties:</b>
     <select>
        @foreach(var item in product.productProperties)
        {
            <option value="@item.Key">@item.Value</option>
        }
    </select>
</div>

@code {
    Blazor_Model.DemoProducts product = new()
        {
            Id = 101,
            Name = "Computer Table",
            Price = 10000,
            IsActive = true,
            productProperties = new List<Blazor_Model.ProductProperties>()
            {
                new Blazor_Model.ProductProperties { Id = 1, Key = "Color", Value = "Grey" },
                new Blazor_Model.ProductProperties { Id = 2, Key = "Design", Value = "Premium" },
                new Blazor_Model.ProductProperties { Id = 3, Key = "Size", Value = "Large" }
            }

    };

}

In the above-given code first, we have added some static values in the productProperties object. Then we are displaying all these values inside the select tag with the help of foreach loop. Now will see a dropdown as given below.

Dropdown Output

Now we will select any option from the dropdown and will show that above and will see how the selected values are changing dynamically. To do that make the changes inside the razor component as given below.

@page "/bindproduct"
<h3>Bind Data</h3>
<div>
    <b>Id:</b>@product.Id
    <br />
    <b>Name:</b>@product.Name
    <br />
    <b>Price:</b>@product.Price
    <br />
    <b>IsActive:</b>@product.IsActive
    <br />
    <b>Price</b>
    <input type = "number" @bind-value="@product.Price" @bind-value:event="oninput" />
    <br />
    <b>This product is</b> @(product.IsActive?"added to cart":"removed from cart") 
    <br />
     <b>Add to cart:</b>
     <input type = "checkbox" @bind-value = "@product.IsActive" checked/> 
     <br />
     <b>Selected Property is:</b>@selectedProperty
     <br />
     <b>Product Properties:</b>
     <select @bind="selectedProperty">
        @foreach(var item in product.productProperties)
        {
            <option value="@item.Key">@item.Value</option>
        }
    </select>
</div>

@code {
    public string selectedProperty{ get; set; }
    Blazor_Model.DemoProducts product = new()
        {
            Id = 101,
            Name = "Computer Table",
            Price = 10000,
            IsActive = true,
            productProperties = new List<Blazor_Model.ProductProperties>()
            {
                new Blazor_Model.ProductProperties { Id = 1, Key = "Color", Value = "Grey" },
                new Blazor_Model.ProductProperties { Id = 2, Key = "Design", Value = "Premium" },
                new Blazor_Model.ProductProperties { Id = 3, Key = "Size", Value = "Large" }
            }

    };

}

In the above code, we have added a new property selectedProperty to hold the value of selection and we are binding that inside the @bind attribute in line number 23. Now display that in line number 20.

Output

So with that, we have seen how we can bind data in different ways in Blazor.

Conclusion

We have discussed the Blazor data binding. First, we did one-way data binding in that we simply displayed the model data in the razor component. In two-way data binding by adding an event attribute we can bind real-time data. We have different use cases to bind data like checkbox, dropdown, etc.

Thank You and Stay Tuned for More