In past few articles, I have been exploring the Blazor WebAssembly App features. We have discussed routing and navigation. We have discussed about binding data to the form and submitting the form. We also have discussed about form input validations in previous post.
In this article, we are going to discuss about how the events can be handled in Blazor apps.
Basic Syntax
In Blazor component markup (i.e. .razor
file), we can specify event handlers using the syntax given below:
@on{DOM-EVENT}="{DELEGATE}"
Here the {DOM-EVENT}
token can be replaced by Document Object Model (DOM) event (e.g. click
or change
). And the {DELEGATE}
token is basically a C# handler for handling the event.
Asynchronous event handlers support the Task return type. If any thing is changed in these event handlers, they automatically trigger the rendering of the UI. Moreover, Lambda expressions are supported as the delegate event handler.
Event Arguments
In the event handler delegates, the event arguments can be optionally specified. The type of event argument depends on the type of event which is being handled. All these events arguments are inherited from the base class – EventArgs.
Specifying this argument in the handler is optional. If you want to use it, you can specify it in the handler.
Some of the event arguments, which we may need usually
- MouseEventArgs – the event arguments for mouse related events like
click
,mouse over
, etc. - FocusEventArgs – the event arguments for the focus related events like
onfocus
,onblur
, etc. - KeyboardEventArgs – the event arguments for keyboard related events like
onkeydown
,onkeypress
, etc. - TouchEventArgs – the event arguments related to touch like
ontouchstart
,ontouchend
,ontouchmove
, etc. - ChangeEventArgs – the event arguments related to inputs (
onchange
,oninput
)
Preventing the default actions
Like in JavaScript, the default actions on events can be prevented by using syntax @on{DOM EVENT}:preventDefault
.
For example, when user clicks on a textbox and a key is pressed, that key is displayed in the textbox. This default behavior can be prevented by putting @onkeydown:preventDefault
directive attribute.
Stopping the propagation of events
We can also stop events from propagating further, within the Blazor scope by placing the @on{DOM EVENT}:stopPropagation
directive attribute on the control.
Now here, the important word is Blazor Scope. Events must propagate to the HTML DOM root before Blazor can act upon them. So, if we place this directive attribute stopPropagation
, then it would not be able to stop propagation of event in the HTML DOM. For that purpose, you need to use other approaches (which are outside the scope of this article).
Example
We have discussed enough about events without really writing any code. So, in this section, let’s have a look the code snippet given below and let’s try to understand how it would behave.
- The code has an
input
control which has an delegate handler specified forkeydown
event. The event handler hasKeyboardEventArgs
specified in the method definition. This handler increments a counter which is shown in the textbox. - The
input
control also prevents the default action, so the pressed keys are not visible in the textbox. - Then there is a
button
element, which hasclick
event handler specified. This handler does not need to use event argument, and hence, method does not specify any event arguments in the method signature. - The
click
event handler increments the counter value. And UI automatically updates. There is no additional code to trigger UI rendering for showing the updated value.
That’s it for today’s post. I hope you find this information helpful. Let me know your thoughts.