使用 StateHasChanged 从父组件刷新 blazor 服务器子组件

Question

Blazor relaod child component

One of my component is like below ( This is a child component in my case )

ListMetaData component / Child Component

  <table>
        bind the list of items from model to the table
  </table>

@code {
   
    List<MetaDataViewModel> model= new List<MetaDataViewModel>();    
    
    protected override async Task OnInitializedAsync()
    {
        await LoadMetaDataList();
    }
    public async Task  LoadMetaDataList()
    {        
        model= dbContextService.fetchFromDb();
    }    
    public void Refresh()
    {
        StateHasChanged();
    }
}

I have a parent component and it is like below

@page "/settings/metadata"
@inject IDialogService DialogService
@inject ISnackbar Snackbar
<MudGrid>
<MudItem  >
   <MudButton OnClick="@((e) => AddNewmetaDataEvent())" 
    Class="ma-1">Add new</MudButton>
</MudItem>
<MudItem xs="12" >
    <ListMetaData  @ref="_listComponent" ></ListMetaData>
</MudItem>
</MudGrid>
@code {
     private ListMetaData  _listComponent;
    async Task AddNewmetaDataEvent()
    {
        var dialog = DialogService.Show<AddMetaDataDialog>("Add new MetaData");
        var result = await dialog.Result;
        if (!result.Cancelled)
        {           
             Snackbar.Add("Please wait while the list is getting updated", Severity.Info);
             _listComponent.Refresh();             
        }
        else
        {
              Snackbar.Add("Dialog cancelled without performing any action", Severity.Normal);
        }
    }
}

From parent component on button click event a dialog is appearing and allowing user to add new item to the database.

On close of dialog i am trying to reload the list of items in child component

But the list is not getting updated for me even after using StateHasChanged(). I have to reload the page to see the modified list of items in the child component

I followed couple of answers from community How to refresh a blazor sub/child component within a main/parent component? but not getting what is not correct in my code

Answer 1

This should work (however see the notes)

@page "/settings/metadata"
@inject IDialogService DialogService
@inject ISnackbar Snackbar

 <MudItem  >
   <MudButton OnClick="@((e) => AddNewmetaDataEvent())" 
    Class="ma-1">Add new</MudButton>
 </MudItem>

@if (_updating)
{
<span>Updating</span>
}
else
    {
<MudGrid>

   <MudItem xs="12" >
    <ListMetaData  @ref="_listComponent" ></ListMetaData>
</MudItem>
</MudGrid>        
 }



@code {
    private ListMetaData  _listComponent;
    private bool _updating;
    async Task AddNewmetaDataEvent()
    {
        _updating = true; // forces UI dom refresh

        var dialog = DialogService.Show<AddMetaDataDialog>("Add new MetaData");
        var result = await dialog.Result;
        if (!result.Cancelled)
        {           
             Snackbar.Add("Please wait while the list is getting updated", Severity.Info);
        }
        else
        {
              Snackbar.Add("Dialog cancelled without performing any action", Severity.Normal);
        }
        _updating = false; // forces UI dom refresh
    }
}

Try to avoid updating the child components by capturing the reference. I am aware that UI libraries like SyncFusion etc force this kind of @ref / Refresh() pattern. Avoid it as much as possible and instead pass on the data as parameter . That will save you from these type of manual refreshes.