Blazor onclick event is not triggered

This answer is only for .net 8, where static rendering is the default. .net 8 introduced the notion of Render Modes, and it is now required either at the page level, or globally. The default is static rendering which means that the component is rendered exactly as it is written with no interactivity being wired up by the Blazor engine. This is nice if you have pure static html, and don’t need the overhead of the interactivity. On the other hand, it can catch you by suprise if have used earlier version and your click event is just not getting processed and there is no obvious reason for it.

To wire up interactivity, you have two options.

Per component solution
Check for this directive at the top of the file:

@rendermode InteractiveServer

If it’s missing, then you will not get events being fired.
On the client side (wasm) it will be this:

@rendermode InteractiveAuto

Global solution
Update Routes element in App.razor file:

<body>
    <Routes @rendermode=RenderMode.InteractiveServer />
    <script src="_framework/blazor.web.js"></script>
</body>

The Global solution allows you to use interactive elements in the MainLayout.razor which is not supported in the per component solution. This can be useful if you are doing something like wiring up a “dark” mode and need a class to be applied at the top level of your html so it gets applied to everything.

Edit: Even though you have added AddInteractiveServerComponents() this does NOT mean that you have set the default to be InteractiveServer. It only means that you have the option to add InteractiveServer as a global or component option. So you still must add the global or component option as above.

Leave a Comment