How to add client DOM javascript event handler when using Blazor Server?

Question

...yes I know... Blazor Server is served side, and I can handle DOM events with my C# code at server side... still it makes sense to add a pure client side javascript event handler and surprisingly it seems it is not possible, because _framework/blazor.server.js swallows them...

Here are the simplest isolated steps to reproduce what am I doing.

Create a Blazor App using VS 2019 template, choose Blazor Server App in the next step.
In Index.razor add a line anywhere <div id="test">Hello, click me!</div>
In _Host.cshtml add the following script after or before the already existing <script src="_framework/blazor.server.js"></script> line:

... pulling my hair out, I can not insert code block, here, see after the step 4...
Run the app, and press F12 to see the console output.

here is the script in step 3:

<script>
    console.log("script is executing...");
    console.log("element found, its innerText is: " + document.getElementById("test").innerText);

    document.getElementById("test").addEventListener("click",
        function() {
            console.log("click handler called");
        });
</script>

Question

Am I missing something? Is it possible to make this work, without a server roundtrip? If it is not possible, then many of the existing javascript widgets, and jQuery plugins how will initialize themself?

What I've tried so far?

Use other event for example mouseup: does not work.
Change the order of my custom script and the <script src="_framework/blazor.server.js"></script> : neither order is working...
Comment out the line <script src="_framework/blazor.server.js"></script> for diagnostic reasons: The event handler now called and I see the console output in the browser: "click handler called"

To answer in advance "why I would like to do this?":

I would like for example implement a DOM behavior where clicking on an element it changes something in its attributes. I do know, I can attach a C# handler, then call a back javascript function but I would not like this roundtrip. Besides of that, maybe there are many existing javascript plugin and lib which relies on that its initialization script attaches event handler on DOM.

It seems like for some reason blazor.server.js removes all the event listeners for the elements. — canbax
– canbax, Commented Apr 23, 2020 at 10:24
yes, this is what I isolated and diagnosed with this sample. The question is how can we make this work, and how the existing javascript libs and jQuery plugins supposed to work with this behavior? — g.pickardou
– g.pickardou, Commented Apr 23, 2020 at 10:31
You need to use the js interopt after blazor initialization to initialize your js script learn.microsoft.com/en-us/aspnet/core/blazor/… — agua from mars
– agua from mars, Commented Apr 23, 2020 at 13:11

g.pickardou · Accepted Answer · 2020-04-23 13:45:47Z

2

...based on the documentation what agua from mars pointed to in his comment: (If anyone has better idea then please answer or comment)

If I run my client side script which is attaching the event handlers after the server OnAfterRender event, then it works. If I run it any way before (for example in OnInitialized event) it will not work:

So here is a working solution: Index.razor

@code
{
    protected override void OnAfterRender(bool firstRender)
    {
        _jsRuntime.InvokeVoidAsync("attachHandlers");
    }
}

_Host.cshtml:

window.attachHandlers = () => {
    document.getElementById("test").addEventListener("click", function()
    {
         console.log("click handler called");
    });
};

edited Apr 23, 2020 at 13:45

answered Apr 23, 2020 at 13:25

g.pickardou

36.5k47 gold badges161 silver badges326 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

agua from mars Over a year ago

It's what I told you in my comment. there isn't other way

rdmptn Over a year ago

Read up on prerendering too. That's one thing that can also try you up when touching the DOM. and yes, onafterrender is the place to call js that will touch the dom, including handler attachment

Collectives™ on Stack Overflow

How to add client DOM javascript event handler when using Blazor Server?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related