In this post, we will cover up all remaining data binding related points left in our previous article blazor data binding in depth. We will discuss about two-way data binding between nested components, event handling with DOM events as well as custom events, EventCallBack and passing data from child component to parent component.
In our previous article, we discussed about one-way data binding and two-way data binding in a single component. Also we discussed about multiple forms of @bind attribute such as data formatting, two-way data binding with specific event and more. If you have not gone through part of this article, please check it Blazor Data Binding in Depth.
You can download demo project with examples explained from GitHub.
Event Handling
Blazor components provide event handling features. When an event is fired in blazor component, blazor calls StatusHasChanged internally. That means blazor re-renders the UI. If you are not aware with StatusHasChanged() method in blazor, check it here.
There are basically two type of events –
DOM Events – DOM events are the events that come by default with html DOM like onclick, onkeyup, onkeypress etc. When user interacts with them, those are triggered to perform some kind of specific operation.
User-defined Events – User-defined events also called custom events that are created by user itself for performing some kind of custom operation based on application needs.
Let’s understand first DOM events handling in blazor components with the help of an example –
DOM events handling
Any DOM event such as onclick, onkeypress etc. can work with HTML element inside blazor components. That means you can access any DOM event with HTML element in blazor. Syntax for accessing events with HTML in blazor would be following –
@on{EVENT} = “EVENT_HANDLER”
EVENT – it can be any DOM event.
EVENT_HANDLER – this is a method the executes when event triggers.
For example, if you want to perform any operation on clicking of a
#blazor #@bind attribute in blazor #asynchronous event handlers #event handling in blazor #eventcallback
