How to react to javascript CustomEvent from Blazor webassembly component

Question

I have a Canvas element which has some custom functionality written in Javascript. I'm trying to create a wrapper for this functionality in a Blazor Webassembly component.

The Javascript code generates custom events using the dispatchEvent method:

const event = new CustomEvent("uvrectadded", {
            bubbles: true,
            detail: { uvrect: uvr }
});
const result = this.canvas.dispatchEvent(event);

How to I listen for this event in a Blazor serverside component? I have tried the following:

<canvas id="map-canvas" @uvrectadded="OnUVRectAdded"></canvas>

@code{
    private void OnUVRectAdded(EventArgs e)
    {
        Console.WriteLine("Blazor: ONUVRectAdded");
    }
}

In the code above, the directive is not compiled, but I can't find out how to register an event directive.

Aside: I have also tried raising a change event from the Javascript component, and this does get registered by the Blazor code with an @onchange directive, however, an exception is thrown saying the system cannot deserialize the event.

Answer 1

In Blazor, you can register a directive using an EventHandlerAttribute like this:

[EventHandler("onuvrectadded", typeof(EventArgs))]
public static class EventHandlers
{
}

However, I am having some issues deserializing the detail property of the CustomEvent.