C#•12mo ago

✅ Blazor's @onclick isn't firing

I have a simple blazor server page with a couple of buttons. All the buttons have the same callback, where I put a Console.WriteLine to check if it does anything, but upon clicking them nothing happens. Anyone able to explain to me what's wrong? The console doesn't show any errors either. I'm using net8

@page "/"
@inject IJSRuntime JSRuntime

<PageTitle>Home</PageTitle>

<div class="grid-container">
    @foreach (var x in secrets)
    {
        <button class="grid-item" @onclick="() => CopySecret(x)" @onclick:preventDefault>
            <h3>asdf</h3>
            <p>@x</p>
        </button>
    }
    
    <button class="add-grid-item">
        <h4>Add new</h4>
    </button>
</div>

@code
{
    private string[] secrets = ["xD", "kimne", "gp7xd", "lol", "kimne", "gp7xd", "lol", "kimne", "gp7xd", "lol"];


    private async Task CopySecret(string secret)
    {
        Console.WriteLine("test"); // This is never executed, even if the line below is commented out
        await JSRuntime.InvokeVoidAsync("clipboardCopy.copyText", secret);
    }
}

@page "/"
@inject IJSRuntime JSRuntime

<PageTitle>Home</PageTitle>

<div class="grid-container">
    @foreach (var x in secrets)
    {
        <button class="grid-item" @onclick="() => CopySecret(x)" @onclick:preventDefault>
            <h3>asdf</h3>
            <p>@x</p>
        </button>
    }
    
    <button class="add-grid-item">
        <h4>Add new</h4>
    </button>
</div>

@code
{
    private string[] secrets = ["xD", "kimne", "gp7xd", "lol", "kimne", "gp7xd", "lol", "kimne", "gp7xd", "lol"];


    private async Task CopySecret(string secret)
    {
        Console.WriteLine("test"); // This is never executed, even if the line below is commented out
        await JSRuntime.InvokeVoidAsync("clipboardCopy.copyText", secret);
    }
}

15 Replies

Asher•12mo ago

I don't believe you need the preventDefault

occluderOP•12mo ago

tried without it, didn't work either

Anchy•12mo ago

try changing up your formatting: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-8.0#lambda-expressions

ASP.NET Core Blazor event handling

Learn about Blazor's event handling features, including event argument types, event callbacks, and managing default browser events.

Anchy•12mo ago

i dont use blazor but it doesn't seem like you are using the lambda correctly here

occluderOP•12mo ago

I tried removing the method param and not using a lambda, but that didn't work either

Anchy•12mo ago

do you use the other formatting

occluderOP•12mo ago

not sure what this curse is, I have the same problem with other new blazor projects. Even if the code is identical to the counter example I use the <button @onclick="OnClickCallback">

Anchy•12mo ago

<button class="grid-item" @onclick="() => CopySecret(x)"> to <button class="grid-item" @onclick="@(() => CopySecret(x))">

occluderOP•12mo ago

doesn't work no web console error too

Anchy•12mo ago

try calling it asynchronously since it is an async task <button class="grid-item" onclick="@(async () => await CopySecret(x))">

occluderOP•12mo ago

I'll try when I get back home, although that doesn't sound like it'll do anything

Anchy•12mo ago

otherwise like I said I don't use blazor so I'm unsure, but you could try some of these answers: https://stackoverflow.com/questions/58196812/blazor-onclick-event-is-not-triggered

Stack Overflow

Blazor onclick event is not triggered

I try to implement a simple onclick event handler like this sample, but it is not working in my solution. The event is only triggered at the run of the web page for unknown reasons. The HTML page w...

Anchy•12mo ago

Yeah I'm just clutching at straws because it should work even without async-await

mindhardt•12mo ago

You sure you set up your interactivity? Blazor .net 8 requires it Try putting @rendermode InteractiveServer on top

occluderOP•12mo ago

thanks this fixed it

Gaming

Programming

✅ Blazor's @onclick isn't firing