How do I communicate between two sibling Blazor components?

Question

I have a Blazor page with two components. One component has a button which generates a random number when clicked. The other component has a text area which should display the generated random number.

<h1>Parent Page</h1>

<ProvideNumberComponent />

<DisplayNumberComponent  />

@code {
}

<h3>Provides Number</h3>

<button class="btn btn-primary" @onclick="CalculateNumber">Provide Number</button>

@code {
    private void CalculateNumber(MouseEventArgs e)
    {
        Random rnd = new Random();
        Int32 nextNumber = rnd.Next();
    }

}

<h3>Displays number</h3>

<textarea cols="9" rows="1" readonly style="font-family:monospace;" />

@code {

}

What is the cleanest way to get the number from the calculate sibling component to appear in the display sibling component?

A problem with my code is that the Random object is instantiated on every button click, instead of once on initialization. Is this best addressed by placing the Random object in a singleton service class, and injecting that into the calculate component?

Answer 1

The best solution, to my mind, is to create a service which implements the state pattern and the notifier pattern. The following code describes how communication between two sibling can be done through an intermediary

NotifierService.cs

public class NotifierService
{
    public NotifierService()
    {

    }

    int rnd;
    public int RandomNumber
    {
        get => rnd;
        set
        {
            if (rnd != value)
            {
                rnd= value;

                if (Notify != null)
                {
                    Notify?.Invoke();
                }
            }
        }
     }
     public event Func<Task> Notify;
 }

Add this: services.AddScoped<NotifierService>();

ProvideNumberComponent.razor

 @inject NotifierService Notifier
 @implements IDisposable

<h3>Provides Number</h3>

 <button class="btn btn-primary" @onclick="CalculateNumber">Provide 
                                                    Number</button>

 @code 
 {
    private void CalculateNumber(MouseEventArgs e)
   {
      Random rnd = new Random();
      Int32 nextNumber = rnd.Next();

      Notifier.RandomNumber = nextNumber; 
   }

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


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


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

}

DisplayNumberComponent.cs

 @inject NotifierService Notifier
 @implements IDisposable

 <hr />
<h3>Displays number</h3>

<textarea cols="9" rows="1" readonly style="font-family:monospace;">
    @Notifier.RandomNumber
</textarea>

@code {

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


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


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

 }

Of course you can inject and use the service in multiple components, as well as adding more features that the service can provide. Implementing communication by means of event handlers may be problematic, unless it is between a parent and its child...

Hope this works...

Answer 2

Indeed there are many ways to accomplish your goal, I just want to show you the way I like more:

Parent Component:

<EditForm Model="Message">
    <PageOne @bind-Send="Message.Text"/>
    <PageTwo @bind-Receive="Message.Text"/>
</EditForm>

@code{
    public Content Message { get; set; }=new Index.Content();

    public class Content
    {
        public string Text { get; set; } = "Hello world";
    }
}

PageOne component - the one who send the value:

    <button @onclick="@GetGuid">Change value</button>

@code{
    [Parameter] public string Send { get; set; }
    [Parameter] public EventCallback<string> SendChanged { get; set; }

   async void GetGuid()
    {
       await SendChanged.InvokeAsync(Guid.NewGuid().ToString());
    }
}

PageTwo the component which will receive the data

<h1>@Receive</h1>

@code{
    [Parameter] public string Receive { get; set; }
    [Parameter] public EventCallback<string> ReceiveChanged { get; set; }
}

Explanations:

Usually when we need to communicate, we need a third party service, and in this case I used the EditForm component, which can store a Model and the properties of this model can be shared by all child components.

I also made a custom component, with less functionality, and I named PhoneBox (to be used instead EditForm), just to be obvious the role :)

PhoneBox - third party communication service :)

<CascadingValue Value="EditContext">
    @ChildContent(EditContext)
</CascadingValue>

@code {
    [Parameter] public object Model { get; set; }
    [Parameter]public EditContext EditContext { get; set; }
    [Parameter] public RenderFragment<EditContext> ChildContent { get; set; }

    protected override void OnInitialized()
    {
        EditContext = new EditContext(Model);
    }
}

I like more this approach because look's more "blazor way" :)

Look how nice is "blazor way"

<PhoneBox Model="Message">
    <PageOne @bind-Send="Message.Text"/>
    <PageTwo @bind-Receive="Message.Text"/>
</PhoneBox>

You can see a working example Working Example

Answer 3

I think interfaces are the best way to do this.

This is from my Nuget package, DataJugger.Blazor.Components

Interface IBlazorComponent:

#region using statements

using System.Collections.Generic;

#endregion

namespace DataJuggler.Blazor.Components.Interfaces
{

    #region interface IBlazorComponent
    /// <summary>
    /// This interface allows communication between a blazor componetn and a parent component or page.
    /// </summary>
    public interface IBlazorComponent
    {

        #region Methods

            #region ReceiveData(Message message)
            /// <summary>
            /// This method is used to send data from a child component to the parent component or page.
            /// </summary>
            /// <param name="data"></param>
            void ReceiveData(Message message);
            #endregion

        #endregion

        #region Properties

            #region Name
            /// <summary>
            /// This property gets or sets the Name.
            /// </summary>
            public string Name { get; set; }
            #endregion

            #region Parent
            /// <summary>
            /// This property gets or sets the Parent componet or page for this object.
            /// </summary>
            public IBlazorComponentParent Parent { get; set; }
            #endregion

        #endregion

    }
    #endregion

}

Interface IBlazorComponentParent

#region using statements

using System.Collections.Generic;

#endregion

namespace DataJuggler.Blazor.Components.Interfaces
{

    #region interface IBlazorComponentParent
    /// <summary>
    /// This interface is used to host IBlazorComponent objects
    /// </summary>
    public interface IBlazorComponentParent
    {

        #region Methods

            #region FindChildByName(string name)
            /// <summary>
            /// This method is used to find a child component that has registered with the parent.
            /// </summary>
            /// <param name="name"></param>
            /// <returns></returns>
            IBlazorComponent FindChildByName(string name);
            #endregion

            #region ReceiveData(Message message)
            /// <summary>
            /// This method is used to send data from a child component to the parent component or page.
            /// </summary>
            /// <param name="data"></param>
            void ReceiveData(Message message);
            #endregion

            #region Refresh()
            /// <summary>
            /// This method will call StateHasChanged to refresh the UI
            /// </summary>
            void Refresh();
            #endregion

            #region Register(IBlazorComponent component)
            /// <summary>
            /// This method is called by the Sprite to a subscriber so it can register with the subscriber, and 
            /// receiver events after that.
            /// </summary>
            void Register(IBlazorComponent component);

        #endregion

        #endregion

        #region Properties

            #region Children
            /// <summary>
            /// This property gets or sets the value for Children.
            /// </summary>
            public List<IBlazorComponent> Children { get; set; }
            #endregion

        #endregion

    }
    #endregion

}

For usage, here is the most relevant parts:

In your component, which is an IBlazorCompoent (child), there is a Parent property.

In your component, you set the parent like this:

<Login Parent=this></Login>

Then in your component, you alter the parent property like this:

[Parameter]
public IBlazorComponentParent Parent
{
    get { return parent; }
    set 
    { 
        // set the value
        parent = value;

        // if the Parent exists
        (Parent != null)
        {
            // Register with the parent
            Parent.Register(this);
        }
    }   
}

Next, in your parent component that implements IBlazorComponentParent, add a property for your component and change the Register method to this:

// Login component reference
public Login LoginComponent { get; set; }


public void Register(IBlazorComponent component)
{
    if (component is Login)
    {
        // Store the LoginComponent
        LoginComponent = component as Login;
    }
    else if (component is Join)
    {
        // Store the compoent
        SignUpComponent = component as Join;
    }
}

Now at this point, my Login component knows about the parent and the parent knows about the Login, so I can sent messages like this:

From the child, send a simple message:

if (Parent != null)
{
    Message message = new Message();

    message.Text = "Some message";

    Parent.SendMessage(message);
}

Or send a complex message

// create a message
DataJuggler.Blazor.Components.Message message = new DataJuggler.Blazor.Components.Message();

// Create the parameters to pass to the component
NamedParameter parameter = new NamedParameter();

// Set the name
parameter.Name = "PixelInformation Update";
parameter.Value = pixel;

// Create a new collection of 'NamedParameter' objects.
message.Parameters = new List<NamedParameter>();

// Add this parameter
message.Parameters.Add(parameter);

// Send this to the component
ColorPickerComponent.ReceiveData(message);

Then in the parent to receive the message:

public void ReceiveData(Message message)
{
    // If the message object exists and has parameters
    if ((message != null) && (message.HasParameters))
    {
        // if this a PixelInformation update from the Index page
        if (message.Parameters[0].Name == "PixelInformation Update")
        {
            // this is only relevant to my app, just showing an example of 
            // \what I do with the data after it is received.

            // Set the SelectedPixel
            SelectedPixel = (PixelInformation) message.Parameters[0].Value;

            // Set the properties from the Pixel to display
            SetupColorPicker();
        }
    }
}

The above code is used in my newest site, PixelDatabase.Net https://pixeldatabase.net

The Nuget package code is all open source if anyone wants it:

DataJuggler.Blazor.Components https://github.com/DataJuggler/DataJuggler.Blazor.Components

I come from a Windows Forms background, so I love being able to communicate between components like this, which data binding doesn't always work.

this.Login.DoSomething(data); 

You can also cast the parent as a specific type like this:

public IndexPage ParentIndexPage
{
    get
    {
        // cast the Parent object as an Index page
        return this.Parent as IndexPage;
    }
}

So your child can call methods or set properties on the parent, if the parent exists of course, so always add a:

public bool HasParentIndexPage
{
    get
    {
        // return true if the ParentIndexPage exists
        return (ParentIndexPage != null);
    }
}

So then for easy usage from the child:

// if the parent index page exists
if (HasParentIndexPage)
{
    // Safely call your parent page
    ParentIndexPage.SomeMethod();
}

Answer 4

On way to do it would absolutely be to use the session pattern and inject the same instance in both components and then notify them onchange. A faster way would probably be to use the two way binding and eventcallbacks.

In ProvideNumberComponent.razor

<button class="btn btn-primary" @onclick="CalculateNumber">Provide Number</button>

@code {

    [Parameter]
    public EventCallback<int> OnRandomNumberSet{get; set;}
    private void CalculateNumber(MouseEventArgs e)
    {
        Random rnd = new Random();
        Int32 nextNumber = rnd.Next();
        OnRandomNumberSet.InvokeAsync(nextNumber);
    }

}

In ParentComponent.razor

<h1>Parent Page</h1>

<ProvideNumberComponent OnRandomNumberSet="((r) => SetRandomNumber(r))"/>

<DisplayNumberComponent TextAreaValue="_randomNumber" />

@code {
   private int _randomNumber;
   private void SetRandomNumber(int randomNumber)
   {
       _randomNumber = randomNumber;
   }
}

In DisplayNumberComponent.razor

<h3>Displays number</h3>
<textarea cols="9" rows="1" bind:value="TextAreaValue" readonly style="font-family:monospace;" />
@code 
{
  [Parameter]
  public int TextAreaValue{get; set;}
}

Answer 5

MDSN has an example using DI injected Notifier service invoke component methods externally to update state, which should work for any component-relation (not only siblings).

At a steeper learning curve, but more maintenance-friendly + scaleable in the long run is the Flux/Redux library Fluxor

For anyone trying to get an overview of more "design-pattern"'ish solutions, MVVM is also a posibility, example here: MVVM example implementation 4 Blazor