Blazor - change value in child component but get it to update the parent interface to

Question

I have a Blazor Server app, I have a Blazor page which has some tabs in the tab heading I show the count of rows in the Grid, eg Tab1Name (RowCount), Tab2Name (RowCount), Tab3Name (RowCount)

I have created a Grid component that shows the data. This data is passed down as [Parameter] from my Page. In that grid, the user can edit the data, eg add/edit/delete records. This could change the count that appeared in the Tab heading. So I want to refresh this count.

Any idea how I could refresh the RowCount in the tab heading?

Can I some how force the child control to refresh the parent page, without doing a full page reload?

TIA

score 1 · Answer 1 · answered Jan 29 '22 at 13:53

You can create one EventCallback on chicd component and let parent component to subscribe to it, something like this

child component

[Parameter]
public EventCallback<int> OnRecordAddDelete {get; set;}

private AddRecord(){
    if (OnRecordAddDelete.HasDelegate) OnRecordAddDelete.InvokeInvokeAsync(no of rows in grid);
}

private DeleteRecord(){
    if (OnRecordAddDelete.HasDelegate) OnRecordAddDelete.InvokeAsync(no of rows in grid);
}

In parent component you can suscribe to rows change event

<childcomponent OnRecordAddDelete=@(e=> here you get rows count in grid) />

score 1 · Answer 2 · answered Jan 29 '22 at 16:50

While there's nothing wrong with Surinder's answer, there is a different approach to the whole issue of component to component notifications.

It's called the Blazor Notification pattern. Your data lives in a view service which has one of more events to signal that it's dataset has changed. Any components that need to know about the change inject the service and subscribe to the event. The component event handlers normally just call StateHasChanged.

Here's a Stackflow answer that demonstrates the Notification pattern using the WeatherForecast list. How can I trigger/refresh my main .RAZOR page from all of its sub-components within that main .RAZOR page when an API call is complete?

Blazor - change value in child component but get it to update the parent interface to

2 Answers2