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 bound to the input element (in this case DataBindValue) is updated.
Furthermore, the input box in the UI is only updated when a component is rendered and since components re-render after an event handler piece of code is executed the bound property or field of the input is reflect straight after the event handler is activated. For this example, when we begin to enter a value into the above input and remove focus from the input element the onChange event of the element is ran and the bound property is set to the value that is within the textbox.
To further the example as well as having the “DataBindValue” in the input put it inside a span tag.
<span>@DataBindValue</span>So if you were to run the project and enter a value into the textbox like “hello”, as of yet the property “DataBindValue” is not equal to the entered value of “hello”, however, if we lose focus from the input element then we will see the value on the screen inside of the “span” tag, proving that the property only updates when we lose focus.
In addition to the OnChange event we can also bind a property or field to an elements value by using other DOM events with the “@bind:event=[EVENT]” syntax within the “input” element. An example being the “OnInput” event which is triggered when the value of the input element changes, not when the element loses focus. The “bind” and “event” must always be lowercase, “Bind” or “Event” are invalid.
<input @bind="DataBindValue" @bind:event="oninput"/> Binding between parent and child components
One scenario that is common within Blazor (and I have used in my own personal projects) is passing down a value (binding a property) from a parent component to a child component. This is called a “chained-bind”. The syntax of the “@bind” is “@bind-[PROPERTYNAME]” i.e. we could have “@bind-YearGrown” to represent the year that the fruit chosen was grown in.
So create another Razor component in your project and name it “ChildComp” and inside of “@code” block of this component write the below code.
[Parameter]
public int YearGrown {get;set;}[Parameter]
public EventCallback<int> YearGrownChanged {get;set;}
private async Task ShowFruitGrownYear()
{
await YearGrownChanged.InvokeAsync(2022);
}
The “[Parameter]” functionality tells Blazor that when we want to implement the “ChildComp” component in its parent component we will be required to pass in a “YearGrown” parameter.
There is also a second parameter named “YearGrownChanged” which is of type EventCallback which is a class that can be used by Razor components to notify its consumers that something has happened, so we could pass in a method from the parent component and it will run in the child component. In this instance we have created the “EventCallback” (which is ran asynchronously) as a parameter and will be used alongside a binded property parameter so one thing to note is that the “EventCallback” must be the same name as the parameter name passed into the component but also have “Changed” appended to it.
An explicit call to “StateHasChanged” is not necessary as it is called automatically to re-render the parent component due to the natural workings of “EventCallback”.
Notice I have created a method as well named “ShowFruitGrownYear” it runs something called “InvokeAsync” on the “YearGrownChanged” event callback which invokes the delegate for the property that has been binded with the event callback which in this case is “YearGrown”, meaning that when this method is ran the value passed into “InvokeAsync” will be the new value of the “YearGrown” property.
We shall move onto some basic HTML in order to display the value.
Outside of the “@code” block write the below code.
<div class="card bg-light mt-3 mb-3">
<div class="card-body">
<h3 class="card-title">Fruit app</h3>
<p class="card-text">
Year the fruit was grown: @YearGrown.ToString()
</p>
<button type="button" @onclick="ShowFruitGrownYear" >Update the year fruit was grown</button>
</div>
</div>Now navigate to the initial component we made at the start of this article “DataBind” and create another variable called “year” and give it a default value of 2019.
private int year = 2019;Now implement an instance of the “ChildComp” component and set the year variable equal to the bind property of “YearGrown”.
<ChildComp @bind-YearGrown="year"/>So we are using the parameter of “YearGrown” that we set in the child component to be equal to the variable of “year”, this will then show by default to the user.
Now run the app and navigate to “/databind”, you will see the value of 2019 show on the screen, if you go and click the button you will see that the value of the year the fruit was grown is now 2022, because the “InvokeAsync” has taken the value in its parameter and set the value of “YearGrown” equal to it.
That seemed like a lot to take in, however, I know from experience that some of the Blazor concepts can be quite confusing to get to grips with and hope this helped in some way. If not let me know what I can do better in the responses.
The Microsoft documentation is very good for Blazor Server to be honest and recommend you look there if you wish for further clarity regarding data-binding.
See my blog below where I will be writing further articles (mainly relating to React and React-Native) — https://simplyreact.uk/
