Blazor assembly: Data is updated but Ui is not refreshed

Question

I'm brand new to blazor ( about 1 months). Now I'm using BlazorHero as the template to build an Spa app.

In one of my pages, Data is updated but Ui is not refreshed. Strangely, I can refresh the Ui by programmatically press the "reload" key (manually clicking the button works as well). Code here:

private MudButton _reloadButton;

protected override async Task OnInitializedAsync()
{
    //...
    await GetDataAsync(); //It works here.
    //...
}

private async Task GetDataAsync()
{
    _sourceId2RecordCounts = (await LibAdaHub.AdaPPM.DataSources.GetSourceId2MeasureRecordCounts(Config.AdaHubUrl)).Value!;
    _dataRecords = (await LibAdaHub.AdaPPM.DataRecords.GetAll(Config.AdaHubUrl, _sourceId)).Value!;
 //When I stepped into here, the data are really updated.
}

private async void CreateOrEdit(string sourceId, string recordId)
{
    var dialog = _dialogService.Show<CreateDialog>(Localizer["DataSources"],
        new DialogParameters
        {
            {nameof(CreateDialog.SourceId), sourceId},
            {nameof(CreateDialog.RecordId), recordId},
            {nameof(CreateDialog.Model), string.IsNullOrEmpty(_sourceId) 
                ? null : _dataRecords.FirstOrDefault(i => i.SourceId == _sourceId)},
            {nameof(CreateDialog.ModelType), typeof(DataRecord)}
        },
        new DialogOptions
        {
            CloseButton = true,
            FullScreen = true,
            DisableBackdropClick = true
        });
    var result = await dialog.Result;
    if (result.Cancelled)
    {
        return;
    }

    // await GetDataAsync(); //Data are updated by ui is not refreshed!
    await _reloadButton.OnClick.InvokeAsync(null); //But this works and the Ui freshed.
}

and in the blazor:

<MudTable Hover="true" Elevation="25" Items="_dataRecords" Dense="true" Bordered="false" Striped="true" 
          Filter="new Func<DataRecord, bool>(Search)">
 ...
                <MudButton DisableElevation Variant="Variant.Filled" Color="Color.Primary" 
                           OnClick="async () => await CreateOrEditAsync(_sourceId, _recordId)"
                           StartIcon="@Icons.Material.Filled.AddComment" IconColor="Color.Surface">
                    @Localizer["Create"]
                </MudButton>
                 <MudButton @ref="_reloadButton" DisableElevation Variant="Variant.Filled" OnClick="GetDataAsync" 
                       StartIcon="@Icons.Material.Filled.Refresh" IconColor="Color.Surface" 
                       Color="Color.Secondary" Style="margin-left: 5px;">@Localizer["Reload"]</MudButton>

Although I can get the job done by introducing the _reloadButton, but it looks veired. Any idea? Thanks!

2023-7-4： I just added the code of calling CreateOrEdit() in the second piece of code.

Answer 1

It does appear to be the async void. That breaks the normal update flow.

Try this:

//private async void CreateOrEdit(string sourceId, string recordId)
  private async Task CreateOrEdit(string sourceId, string recordId)
  {
       ... as before

       await GetDataAsync();   // ought to work now
    // await _reloadButton.OnClick.InvokeAsync(null);
  }