How to perform data-binding in Blazor

In this tutorial I will explain how to use data-binding within a Blazor Server application.

Blazor uses Razor components to display the page to the user and within Razor components there is an attribute of “@bind” which can be used within elements such as text and number inputs. We can set the “@bind” attribute equal to a field/property within the “@code” block of the Razor component.

So to help explain this with code open your favourite code editor and create a new Blazor Server application, name it something like “DataBindExample” and create a new Razor component within the project named “DataBind”.

Once you have created this page add a “@page” directive of “/databind” so we are able to navigate to the page.

@page "/databind"

Inside of the “@code” write a property with an access modifier of “private” of type “string” named “DataBindValue”.

private string DataBindValue {get;set;}

Outside of the “@code” now write a input tag of type text with the “@bind” variable set equal to the variable “DataBindValue”.

<input @bind="DataBindValue"/>

One thing to note about the “input” element is that when you lose focus from entering a value into the input then the field property that is…