asp.net core - JavaScript event doesn't work when add @rendermode InteractiveServer - Stack Overflow

admin管理员组

文章数量:1287535

I'm starting with ASP.NET Core 8 and Blazor.

I put my script in main layout or in app.razor.

When I add components in my application and I put @rendermode InteractiveServer to call server functions, all my JavaScript events don't work.

So if I put a datable.js not script work if I use @rendermode InteractiveServer.

I am looking for a solution with chatgpt but no answer work except load each function in afterending event with java runtime or something that.

Problem, I don't know all event my app need and I'm sure a easier solution must be exist.

Thanks

I'm starting with ASP.NET Core 8 and Blazor.

I put my script in main layout or in app.razor.

When I add components in my application and I put @rendermode InteractiveServer to call server functions, all my JavaScript events don't work.

So if I put a datable.js not script work if I use @rendermode InteractiveServer.

I am looking for a solution with chatgpt but no answer work except load each function in afterending event with java runtime or something that.

Problem, I don't know all event my app need and I'm sure a easier solution must be exist.

Thanks

• asp-core
• blazor

Share Improve this question Follow edited Feb 23 at 18:36 marc_s 755k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Feb 23 at 17:57 Guillaume DuruptGuillaume Durupt 5477 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Since you didn't metion the render mode and the js event handler type, I just had a test in my side in my side with an onload event and an onclick event both in my Home.razor and Counter.razor component. My testing project is a .Net 8 blazor web app using server side rendered mode. And my test codes like below.

<script>
    window.addEventListener('load', function() {
        alert('Warning: Home page has finished loading!');
    });
</script>

<button id="myButton">Click Me!</button>

<script>
    const button = document.getElementById('myButton');
    button.addEventListener('click', function () {
        alert('Button was clicked!');
    });
</script>

Just like you know, Home.razor doesn't define a render mode in the component while Counter.razor has @rendermode InteractiveServer. Then in my test, no matter with or without @rendermode InteractiveServer, onload event could work when I refresh the page by pressing F5, but if I run the app and it could only work on Home page but not on Counter page, that's because from Home to Counter, it's a navigation but not an entire-page-reloading.

And about the onclick event, Home page worked but Counter page doesn't work. I can see error message Failed to execute 'appendChild' on 'Node': Identifier 'button' has already been declared" which is proved to relate to const and prerendering feature in InteractiveServer render mode. But to be honest, for onclick event, we should use blazor Built-in event handler. If we don't want to use them, or we just migrate from an old app so that we hope to use origin js codes for event handler, we might follow the approach to call js from .Net which requires us to inject all js methods in the root folder in App.razor. Then the codes shall be

@page "/counter"
@rendermode InteractiveServer
@inject IJSRuntime JS

<button id="myButton2">Click Me!</button>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("bindClickEvent");
        }
    }
}

----- in App.razor ----
<script src="_framework/blazor.web.js"></script>
<script>
    window.bindClickEvent = () => {
     const button = document.getElementById('myButton2');
     if (button && !button.dataset.clickBound) {
         button.addEventListener('click', () => alert('Button2 clicked!'));
         button.dataset.clickBound = 'true'; // Prevent rebinding
     }
    };
</script>

本文标签： aspnet coreJavaScript event doesn39t work when add rendermode InteractiveServerStack Overflow