How can I refresh a child component from a parent component multiple times from the same method?

Question

Right now my child component only updates once the GetLeads() method in the parent component is finished. I never see the spinner or Searching text.

Parent Component:

<SearchResultComponent @ref="ChildComponent"></SearchResultComponent>

Code:

 protected SearchResultComponent ChildComponent; public int LeadsFound { get; set; } public void GetLeads() { ChildComponent.Refresh(true, 0); var leads = _searchService.Search(searchRequest); LeadsFound = leads?.Count ?? 0; _writeFileService.WriteToFile(leads); ChildComponent.Refresh(false, LeadsFound); }

Child Component:

@code { public bool Searching { get; set; } = false; public int LeadsFound { get; set; } = 0; public void Refresh(bool searching, int leadsFound) { Searching = searching; LeadsFound = leadsFound; StateHasChanged(); } } @if (Searching) { <div>Searching...</div> <div> <img src="~/Content/searching-spinner.gif" /> </div> } else { <div>Leads Found: @LeadsFound</div> }

Why isn't _searchService.Search(searchRequest) async? Same for WriteToFile() — Henk Holterman
– Henk Holterman, Commented May 31, 2020 at 21:46

Henk Holterman · Accepted Answer · 2020-05-31 21:56:06Z

my child component only updates once

You can make the eventhandler async. That allows you then to call Task.Delay(1) or Task.Yield() and that will effectuate the StateHasChanged().

The call form @onclick="@GetLeads" can remain the same. Note that you don't need the 2nd @ in there.

If your searchService.Search() was async then you wouldn't need Task.Yield()

 public async Task GetLeads() { ChildComponent.Refresh(true, 0); await Task.Yield(); // enable the render thread to run. var leads = _searchService.Search(searchRequest); LeadsFound = leads?.Count ?? 0; _writeFileService.WriteToFile(leads); ChildComponent.Refresh(false, LeadsFound); }

Collectives™ on Stack Overflow

How can I refresh a child component from a parent component multiple times from the same method?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related