Blazor FAQ - Data binding

In two-way binding, data moves from the component to the UI and from the UI to the component class. Use the @bind attribute in the property to bind two ways in Blazor. By default, the bind attribute binds the data in the OnChange event. The OnChange event triggers when the element loses focus.

Follow these steps to achieve the two-way binding in Blazor.

<div>
    <input @bind="BindValue" @bind:event="oninput" />
</div>
<div>
    Binding Value : @BindValue
</div>

@code {
    public string BindValue { get; set; } = string.Empty;
}

Refer to this link for more details.

You can bind a specific format for the DateTime value by using the @bind:format attribute of the INPUT element and assign it with the supported date format string value.

Refer to the following code sample.

<input @bind="Value" @bind:format="@Format" />
 
@code{
    [Parameter]
    public DateTime Value { get; set; } = DateTime.Now;
 
    [Parameter]
    public string Format { get; set; } = "yyyy-MM-dd";
}

To format the DateTime and numbers to the local culture, use the @bind:format attribute of the INPUT element that supports the date format string value .

Refer to the following code sample.

<input @bind="Value" @bind:format="@Format" />
 
@code{
    [Parameter]
    public DateTime Value { get; set; } = DateTime.Now;
 
    [Parameter]
    public string Format { get; set; } = "yyyy-MM-dd";
}

To bind properties to a list in Blazor, you can use the @foreach loop and the @bind directive. Here’s an example: 

@page "/" 

<h3>List Binding Example</h3> 
<ul> 
    @foreach (var item in itemList) 
    { 
        <li> 
            <input type="text" @bind="@item.Name" /> 
        </li> 
    } 
</ul> 

<button @onclick="AddNewItem">Add Item</button> 

@code { 
    List<ItemModel> itemList = new List<ItemModel>(); 
    void AddNewItem () 
    { 
        itemList.Add(new ItemModel()); 
    } 
    public class ItemModel 
    { 
        public string? Name { get; set; } 
    } 
} 

View Sample in GitHub  

This ObservableCollection (dynamic data collection) provides notifications when items are added, removed, and moved. The implemented INotifyCollectionChanged provides notifications when dynamic changes of adding, removing, moving, and clearing the collection occur. The implementation of INotifyPropertyChanged notifies when property value has changed in client side. Here, Order class implements the interface of INotifyPropertyChanged and it raises the event when CustomerID property value was changed.

[index.razor]

@page "/"
@using System.Collections.ObjectModel
@using System.ComponentModel


<h2>Observable Collections</h2>
<div class="d-flex flex-row my-2">
    <button id="add" @onclick="AddRecords">Add Data</button>
    <button id="del" @onclick="DelRecords">Delete Data</button>
    <button id="update" @onclick="UpdateRecords">Update Data</button>
</div>
<table class="table">
    <thead>
        <tr>
            <th>Customer ID</th>
            <th>Order ID</th>
            <th>Frieght</th>
            <th>Order Date</th>
            <th>Ship Country</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var data in GridData)
        {
            <tr>
                <td>@data.CustomerID</td>
                <td>@data.OrderID</td>
                <td>@data.Freight</td>
                <td>@data.OrderDate</td>
                <td>@data.ShipCountry</td>
            </tr>
        }
    </tbody>
</table>

@code{

    public ObservableCollection<OrdersDetailsObserveData> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetailsObserveData.GetRecords();
    }

    public void AddRecords()
    {
        GridData.Add(new OrdersDetailsObserveData(32341, "ALFKI", 4343, 2.3 * 43, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
    }

    public void DelRecords()
    {
        GridData.Remove(GridData.First());
    }

    public void UpdateRecords()
    {
        var a = GridData.First();
        a.CustomerID = "Update";
    }

    public class OrdersDetailsObserveData : INotifyPropertyChanged
    {
        public OrdersDetailsObserveData()
        {
        }
        public OrdersDetailsObserveData(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)
        {
            this.OrderID = OrderID;
            this.CustomerID = CustomerId;
            this.EmployeeID = EmployeeId;
            this.Freight = Freight;
            this.ShipCity = ShipCity;
            this.Verified = Verified;
            this.OrderDate = OrderDate;
            this.ShipName = ShipName;
            this.ShipCountry = ShipCountry;
            this.ShippedDate = ShippedDate;
            this.ShipAddress = ShipAddress;
        }
        public static ObservableCollection<OrdersDetailsObserveData> GetRecords()
        {
            ObservableCollection<OrdersDetailsObserveData> order = new ObservableCollection<OrdersDetailsObserveData>();
            int code = 10000;
            for (int i = 1; i < 2; i++)
            {
                order.Add(new OrdersDetailsObserveData(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
                order.Add(new OrdersDetailsObserveData(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
                order.Add(new OrdersDetailsObserveData(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bol�var #65-98 Llano Largo"));
                order.Add(new OrdersDetailsObserveData(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
                order.Add(new OrdersDetailsObserveData(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
                code += 5;
            }
            return order;
        }

        public int OrderID { get; set; }
        public string CustomerID
        {
            get { return customerID; }
            set
            {
                customerID = value;
                NotifyPropertyChanged("CustomerID");
            }
        }
        public string customerID { get; set; }
        public int EmployeeID { get; set; }
        public double Freight { get; set; }
        public string ShipCity { get; set; }
        public bool Verified { get; set; }
        public DateTime OrderDate { get; set; }

        public event PropertyChangedEventHandler PropertyChanged;

        public string ShipName { get; set; }

        public string ShipCountry { get; set; }

        public DateTime ShippedDate { get; set; }
        public string ShipAddress { get; set; }

        private void NotifyPropertyChanged(String propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

In the sample, we have add, delete and update buttons where the observable data for the table will be populated, removed or updated through the button click.

You have to use the bind attribute to reflect the DOM element value in the C# property.

<p>
    @* This is the input element *@
    Enter your name: <input type="text" @bind=@name />

    <button @onclick="@PrintName">Print Name</button>
</p>

@code {
    string name;

    private void PrintName()
    {
      Console.WriteLine(name); // Here the entered name will be printed.
    }
}

The format-value attribute is used to format the DateTime strings. Other formats, like currency or number formats, are currently not available.

 <input @bind="@StartDate" format-value="yyyy-MM-dd" />
    
   @code {
       private DateTime   StartDate { get; set; } = new DateTime(2020, 1, 1);
   }     

Refer to the link format strings to learn more about formatting.

By default, Blazor detects changes and reflects them in the UI automatically. However, there might be a situation where we have to manually trigger changes. StateHasChanged informs the component that its state has changed, but it does not render the component. The component will decide when to render itself.

You can’t do that in a synchronous method, so you should async your code to give the component a chance to render.

@page "/"
  
 @using System.Threading;
  
 <button type="button" @onclick="@PlaceOrder_Clicked" disabled="@DisablePlaceOrderButton">@Title</button> 

@code{
     private bool DisablePlaceOrderButton { get; set; } = false;
  
     public string Title { get; set; } = "Click Button";
  
     private async Task PlaceOrder_Clicked()
     {
  
         await DisablePlaceOrder();
         DisablePlaceOrderButton = false;
         Title = "State Has Changed";
  
     }
  
     async Task DisablePlaceOrder()
     {
         DisablePlaceOrderButton = true;
         Title = "Wait...";
         await Task.Delay(3000);
  
         StateHasChanged();
     }
 } 

Two-way is having a bi-directional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property as well The synchronization of data flow between model and view is achieved using the bind attribute in Blazor. Refer to the following code example for two-way data flow.

@page "/"
    
   Enter your name: <input type="text" @bind="@Name" /><br />
    
   <h2>Hello, @Name!</h2>
    
   @code {
      
       private string Name { get; set; } = "Blazor";      
 } 

You can bind the data with DOM element using the “@” prefix with a C# parameter. Refer to the following example for one-way data binding.

@page "/"
  
 <h2>Hello, @Name!</h2>
  
 @code {
    
     private string Name { get; set; } = "Blazor";
 }  

You have to use the binding in a ternary operator to achieve this.

<div class="menu @(IsOpen ? "open" : "")"></div>

<button @onclick="@AddClass">Add Class</button>
@code {

    private bool IsOpen { get; set; } = false;

    private void AddClass()
    {
        IsOpen = !IsOpen;
    }
}

Data binding synchronizes the data between the view and model. In other words, it binds the C# parameter with DOM elements and vice versa.