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 for keydown event. The event handler has KeyboardEventArgs 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 has click 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.