Best way to share data between two child components in Blazor

Question

I have this code.

<ParentComponent>
    <ChildComponet>
         @renderFragment
    </ChildComponent>
    <ChildComponetn>
       <GridComponent Data="@dataList"/>
    </ChildComponent>
</ParentComponent>

where @renderFragment is dynamically render componet and Grid componet is list of some data with actions like "add new", "edit record", "delete".

If we click "add new", form for add new record is opened dynamically in @renderFragment and we want to refresh grid data after submit form but we don't know how to share some data between two child components. Same is about edit form, when some record is edited, we need to refresh grid component to show edited data. If need more code and data about it please comment.

Answer 1

You may define a class service that implements the State pattern and the Notifier pattern to handle the state of your objects, pass state to objects, and notify subscriber objects of changes.

Here's a simplified example of such service, which enables a parent component to communicate with his children.

NotifierService.cs

public class NotifierService
{
    private readonly List<string> values = new List<string>();
    public IReadOnlyList<string> ValuesList => values;

    public NotifierService()
    {

    }

    public async Task AddTolist(string value)
    {
        values.Add(value);

        await Notify?.Invoke();
        
    }

    public event Func<Task> Notify;
}

Child1.razor

    @inject NotifierService Notifier
@implements IDisposable

<div>User puts in something</div>
<input type="text" @bind="@value" />
<button @onclick="@AddValue">Add value</button>

@foreach (var value in Notifier.ValuesList)
{
    <p>@value</p>
}


@code {
    private string value { get; set; }

    public async Task AddValue()
    {
        await Notifier.AddTolist(value);
    }

    public async Task OnNotify()
    {
        await InvokeAsync(() =>
        {
            StateHasChanged();
        });
    }


    protected override void OnInitialized()
    {
        Notifier.Notify += OnNotify;
    }


    public void Dispose()
    {
        Notifier.Notify -= OnNotify;
    }
}

Child2.razor

    @inject NotifierService Notifier

<div>Displays Value from service and lets user put in new value</div>

<input type="text" @bind="@value" />

<button @onclick="@AddValue">Set Value</button>

@code {
    private string value { get; set; }
    public async Task AddValue()
    {
        await Notifier.AddTolist(value);
         
    }

}

Usage

@page "/"

 <p>
    <Child1></Child1>
 </p>
<p></p>
<p>
   <Child2></Child2>
</p>

Startup.ConfigureServices

services.AddScoped<NotifierService>();

Hope this helps...