Blazor UIが削除イベントの後に更新されない理由:
マイコンポーネント:
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Example</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var trainingTechnique in TrainingTechniques) {
<tr>
<td>@trainingTechnique.Id</td>
<td>@trainingTechnique.Name</td>
<td>@trainingTechnique.Example</td>
<td>
<button type="button"
class="btn btn-danger"
@onclick="@(async () => await DeleteTechnique(trainingTechnique.Id))">
Delete
</button>
</td>
</tr>
}
</tbody>
</table>
My Component code behind:
public class TrainingTechniqueViewPageBase : ComponentBase
{
public List<TrainingTechniqueView> TrainingTechniques { get; set; }
[Inject]
public ITrainingTechniqueConsumer TrainingTechniqueConsumer { get; set; }
protected TrainingTechniqueForm TrainingTechniqueForm { get; set; }
protected override async Task OnInitializedAsync()
{
TrainingTechniques = (await TrainingTechniqueConsumer.GetTechniques()).ToList();
}
public async void TrainingTechniqueForm_OnSave()
{
TrainingTechniques = (await TrainingTechniqueConsumer.GetTechniques()).ToList();
StateHasChanged();
}
protected void AddTrainingTechnique()
{
TrainingTechniqueForm.Show();
}
protected async Task DeleteTechnique(int id)
{
await (TrainingTechniqueConsumer.DeleteTrainingTechnique(id));
this.StateHasChanged();
}
}
}
削除方法:
public async Task DeleteTrainingTechnique(int id)
{
await _httpClient.DeleteAsync($"training/trainingtechniques/{id}");
}
バックエンドのアイテムを正しく削除しています。
しかし、効果を確認するには、データをリロードする必要があります:
protected async Task DeleteTechnique(int id)
{
await (TrainingTechniqueConsumer.DeleteTrainingTechnique(id));
TrainingTechniques = (await TrainingTechniqueConsumer.GetTechniques()).ToList();
//this.StateHasChanged(); -- not necessary
}
別の方法として、すでにロードされているTrainingTechniquesからアイテムを削除することもできますが、これは小さな最適化ですが、同時実行エラーのリスクを負うことになります。