Razor Component - button @onclick not triggering method

37 Views Asked by At

I created a blazor app (from the blazor webapp template in VS22) to keep track of some stats in a board game. The following code snippet represents a player for that game, which can be edited here:

@page "/playerCard/{id:int}"
@using CatanTools.Data.Services
@using CatanTools.Data.Tables
@inject PlayerService playerService
@inject NavigationManager navigationManager

<PageTitle>Spieler</PageTitle>

<h1>Spieler</h1>

<form>
    <div class="row">
        <div class="col-md-6">
            <label class="control-label">ID:</label>
            <input disabled class="form-control" @bind="@player.Id" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <label class="control-label">Name:</label>
            <input class="form-control" @bind="@player.Name" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <label class="control-label">Hinzugefügt am:</label>
            <input disabled class="form-control" @bind="@player.TimestampAdded" />
        </div>
        <div class="col-md-3">
            <label class="control-label">Letzte Änderung am:</label>
            <input disabled class="form-control" @bind="@player.TimestampModified" />
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-md-6">
            <div class="form-group">
                <button type="button" class="btn btn-primary" @onclick="Save">Speichern</button>
                <button type="button" class="btn btn-danger" @onclick="Delete">Löschen</button>
            </div>
        </div>
    </div>
</form>

@code {
    [Parameter]
    public int Id { get; set; }

    Player player = new Player();

    protected override async Task OnInitializedAsync()
    {
        if (Id != 0)
        {
            player = (await playerService.GetAsync(p => p.Id == Id)).FirstOrDefault() ?? new Player();
        }
    }

    protected async Task Save()
    {
        await playerService.AddOrUpdateAsync(player);
        navigationManager.NavigateTo("/playerList");
    }

    protected async Task Delete()
    {
        await playerService.DeleteAsync(player);
        navigationManager.NavigateTo("/playerList");
    }
}

But there is one essential problem: Clicking the buttons (Save / Delete) does not trigger the Methods below. No errors occure in the browser / program console. Nothing happens.

The rest of the page is working just fine rendered component

I already tried to comment everything out from that (except the buttons and their methods), but it did not help.

In the project template example codesnippet the @onclick binding works, but I can not see the difference:

@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

However the Counter component works just fine.

Normally i would expect the methods to run, when the button is clicked.

0

There are 0 best solutions below