Blazor WASM: getting sibling components to communicate in order to update data

Question

I have a page component and within it a breadcrumbs component and a business data component that displays all of the businesses for that page based on a category alias it is passed through the route.

Some of the breadcrumb links direct the user to another routable/page component and these work fine. However, some of them require a refresh of the business data component and it's these I'm having an issue with.

I've tried creating a service with a event that the breadcrumbs component can invoke when a link is clicked and the data component can subscribe to (following this post), but I can't get that to work as the return type is wrong when I try and call GetBusinesses as a result.

Here is the front end of my page component:

@if (breadcrumbs != null)
    {
        <Breadcrumbs Items="breadcrumbs"></Breadcrumbs>
    }

<BrowseByBusiness Alias="@Alias"></BrowseByBusiness>

I set up my breadcrumbs like so (the Alias on the API call is a route parameter):

protected async override Task OnInitializedAsync()
        {
            categoryDto = await _publicClient.Client.GetFromJsonAsync<CategoryDto>($"api/Categories/GetCategoryByAlias/{Alias}");

            breadcrumbs = new List<BreadcrumbItem>
            {
                new BreadcrumbItem("Browse By Category", "/browse-by-category"),
                new BreadcrumbItem(categoryDto.Name, $"/browse-by-category/{categoryDto.Alias}"),
            };

            if (categoryDto.ParentCategory.Name != null)
            {
                breadcrumbs.Insert(1, new BreadcrumbItem(categoryDto.ParentCategory.Name, $"/browse-by-category/{categoryDto.ParentCategory.Alias}"));
            }
        }

My BrowseByBusiness component:

@foreach (var businessDto in businessesDto)
            {
                <Animate Animation="Animations.Fade" Easing="Easings.Ease" DurationMilliseconds="2000">
                    <BusinessCard businessDto="businessDto"></BusinessCard>
                </Animate>
            }

@code {

[Inject] IBusinessHttpRepository _businessRepo { get; set; }

public MetaData metaData = new MetaData();
IEnumerable<BusinessDto> businessesDto;

protected async override Task OnInitializedAsync()
        {
            await GetBusinesses();
        }

private async Task GetBusinesses()
        {
            var pagingResponse = await _businessRepo.GetBusinessesByCategory(Alias, businessParameters);
            businessesDto = pagingResponse.Items;
            metaData = pagingResponse.MetaData;
        }
}

My Breadcrumbs component:

<div class="flex-row border-bottom pb-2">
    @foreach (var item in Items)
    {
        if (item.Equals(Last))
        {
            <span class="me-1">@item.Name</span>
        }
        else
        {
            <a class="me-1" href="@item.Url">@item.Name </a>

            <span class="me-1">/</span>
        }
    }
</div>

@code {
    [Parameter] public List<BreadcrumbItem> Items { get; set; }

    private BreadcrumbItem Last;

    protected async override Task OnInitializedAsync()
    {
        Last = Items.Last();
    }
}

I'm using Blazor WASM and .net 6.

score 2 · Answer 1 · edited Feb 12 '22 at 20:38

I recently had a similar need and ended up rolling my own (extremely simple) message broker. You can see full details in this blog post, but the short story is that you add a message broker class (which in my blog post has a silly name, but should really be called something like MessageBroker)...

public class SoupDragon {
  public Action<Widget> NewWidget;
 
  public void RaiseNewWidget(Widget w) =>
    NewWidget?.Invoke(w);
}

You then register this as a service, inject it into the component that is to send the message, and use it follows...

_soupDragon.RaiseNewWidget(newWidget);

The component that is to pick up the message would inject a soup dragon, and hook up a method to catch the message. Whilst you can do this with a lambda, for reasons explained in more detail over there, you are best off hooking up to a method...

_soupDragon.NewWidget += HandleNewWidget;

One nice thing about this approach is that if you're doing server-side Blazor, you get communication between different users for free by making the message broker static.

Blazor WASM: getting sibling components to communicate in order to update data

1 Answers1