Data Binding In Blazor

The Blazor is .net web framework which can run in any browser. We can create Blazor application using C#/Razor and HTML. The Blazor application runs in the browser on a real.NET runtime (Mono) via WebAssembly. It enables full stack web development with consistency, stability and productivity of .NET. Normally, it works with latest browser that support WebAssembly and it works in older browser by falling back to asm.js based .net runtime.

Introduction
 
Blazor is a .NET web framework which can run in any browser. We can create a Blazor application using C#/Razor and HTML. Blazor application runs in the browser on a real.NET runtime (Mono) via WebAssembly. It enables full stack web development with consistency, stability, and productivity of .NET. Normally, it works with the latest browser that supports WebAssembly and it works in older browsers by falling back to asm.js-based .Net runtime.
 
In my previous article, I have explained about Blazor and the prerequisites that are required to get started with Blazor. In this article, I will explain about Data Binding with Blazor.
 
Note: It is an experimental .NET web framework project, so many changes are going on. As a result, some portion of this article may become invalid in the future.
 
Data binding is one of the most powerful features of software development technologies. Data binding is the connection bridge between View and the business logic (View Model) of the application. Following are the ways of doing data banding with Blazor.
  • One-way Data Binding
  • Two-way Data Binding
  • Event Binding
One-way Data Binding

One-way data binding is also known as interpolation in other frameworks, such as Angular. It is very similar to Razor and also it will be quite straightforward. In one-way binding, we need to pass property or variable name along with @ i.e. @Name (here Name is either the property or variable). In the following example, I have done one-way binding with variable currentTask.
  1. @page "/databindingExample"  
  2.     <h3>One-way Data Binding</h3>  
  3.   
  4.     <p>  
  5.         @currentTask  
  6.     </p>    
  7.   
  8.  @functions {  
  9.     string currentTask = "Test One-way Data Binding!";  
  10.  }  
 Output
 
 
Two-way Data Binding

Blazor now supports two-way binding. This can be achieved by using "bind" attribute. The current version of Blazor supports the following types for two-way binding.
  • string
  • int
  • DateTime
  • Enum
  • bool
If we want other types such as decimal, we need to provide getter/setter from supported type. In the following example, I have demonstrated an example of string and bool type for two-way binding. 
  1. @page "/databindingExample"  
  2.   <h3>Two-way Data Binding</h3>  
  3.   
  4.     Enter your name: <input type="text" bind=@Name /><br />  
  5.     <br />  
  6.     Have you try the Blazor? <input type="checkbox" bind="IsTry" /><br />  
  7.     <br />  
  8.     <br />  
  9.   
  10.     <p><b>Summary</b></p>  
  11.     You have entered:@Name <br />  
  12.     Try Blazor: @(IsTry ? "Yes" : "No")  
  13.   
  14. @functions {  
  15.     public string Name { getset; }  
  16.     public bool IsTry { getset; }  
  17. }  
Output
 
 
Event Binding

The current version of Blazor, event binding is very limited. Currently, it only supports onclick and on change event. It is under development, so many more event support in the new version. Event binding is done by using function name along with @ i.e. @ButtonClicked (here ButtonClicked is function name).
 
In following Example, I have bound the click event with a button.
  1. @page "/databindingExample"  
  2.   
  3. <h3>Event Binding</h3>  
  4. <br />  
  5. <button onclick=@ButtonClicked>Event Binding Example</button>  
  6. <br />  
  7. <br />  
  8. <button onclick=@(() => Console.WriteLine("Inline:Button Clicked"))>Inline Event Binding</button>  
  9.   
  10. @functions {  
  11.     void ButtonClicked()  
  12.     {  
  13.         Console.WriteLine("Button Clicked");  
  14.     }  
  15. }  
Output
 
 
We can also handle child component event into parent component. It can offer the callback that parent component can use to react on an event. In the following example, I have created child component with button and handle child component button event to parent component on OnSomeEvent.
 
ChildComponent.cshtml
  1. <h4>This is Child Component</h4>  
  2. <br />  
  3. <button onclick=@OnClick>Click Me(child component)</button>  
  4.   
  5. @functions {  
  6.     public Action OnSomeEvent { getset; }  
  7.   
  8.     private void OnClick()  
  9.     {  
  10.         OnSomeEvent?.Invoke();  
  11.     }  
  12. }  
Parent Compoent 
  1. @page "/databindingExample"  
  2.   
  3.  <h3>Handle Child Component event in parent Component</h3>  
  4.  <ChildComponent OnSomeEvent=@ChildEventClicked />  
  5.   
  6. @functions {  
  7.     void ChildEventClicked()  
  8.     {  
  9.         Console.WriteLine("Child event clicked");  
  10.     }  
  11. }  
Output
 
 
Manually Trigger UI Refresh

Blazor automatically detects the necessary UI changes in many scenarios such as button click. However, In some scenarios, we need to trigger UI refresh manually. To do this, BlazorComponent provides method "StateHasChanged" method". In the following example, I have updated the value of currentCount variable in timer event. It is not detected by the Blazor hence we need to call StateHasChanged method tho refresh UI with correct currentCount value.
 
Example
  1. @page "/databindingExample"  
  2.   
  3.     @using System.Threading;  
  4.       
  5.     <h3>Manually Trigger UI Refresh</h3>  
  6.   
  7.     Counter: @CurrentCount  
  8.     <br />  
  9.     <br />  
  10.     <button onclick=@Countdown>Start Countdown</button>  
  11. @functions {  
  12.     void Countdown()  
  13.     {  
  14.         var timer = new Timer(TimeCallBack, null, 1000, 1000);  
  15.   
  16.     }  
  17.   
  18.     void TimeCallBack(object state)  
  19.     {  
  20.         if (CurrentCount > 0)  
  21.         {  
  22.             CurrentCount--;  
  23.   
  24.             // Note:following line is necessary because Blazor would not recognize the state change hence not refresh the UI  
  25.             this.StateHasChanged();  
  26.         }  
  27.     }  
  28. }   
Output
 
Summary

The Blazor provides one-way and two-way data binding that is similar to modern client frameworks, such Angular. It provides event binding with very limited events but support for more events is added in the new version.

You can view or download the source code from the GitHub link here