Data Binding in Blazor

In this article, we will explore Data Binding in Blazor,

Data binding is an important feature of software development data binding is the way how data transfers between view and business logic In Blazor data binding divided into two types,

1) One-way data binding

2) Two-way data binding

One way data binding we are property value from business logic to view and for achieving this we need t pass property or variable name with ‘@’.

Blazor also supports two-way data binding and this is achieved using bind attribute in Blazor.

Let's check an example of data binding,

Productlist.razor

@page “/”
@inherits ProductlistBase
<h3>Data Binding</h3>
<div>
<span>One Way Binding Example : @oneWayExample</span>
<br/>
<input type=”text” @bind=”currentCount”/>
<br/>
<span>Current Count is: @currentCount</span>
</div>

ProductlistBase.cs

using EmployeeManagement.Web.Services;
using Microsoft.AspNetCore.Components;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace EmployeeManagement.Web.Pages
{
public class ProductlistBase:ComponentBase
{
public string oneWayExample = “Testing One Way Data Binding”;
public int currentCount = 0;
}
}

Thank You, See you in the next article !!

You can reach out to me here,

LinkedIn: https://www.linkedin.com/in/vaibhav-bhapkar

Email: vaibhavbhapkar.medium@gmail.com