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.