Blazor Server in .NET 6 - Part Four

Welcome to Part 4 of the Blazor Server in .NET 6 blog series. In case you missed Part 3, I ran through an installation of Radzen Blazor, a free component library for Blazor developed by Radzen Ltd. In this post, I will be covering how to add events in our Blazor components. We will add a service that contains the events that components can listen to as well as the methods to notify when to invoke our events. We will add this service to the BaseComponent so that all our components can interact with these events. Let’s get right into it!

Add the Event Service

First, we’ll add a class called EventService in the Services folder. This will contain all the events our components will interact with. In the photo below, you can see that I created an event Action OnCharactersChange. This is the event we want components to listen to, that will also be able to run methods when the characters in our ProtectedBrowserStorage change.

The NotifyCharactersChange method is called by us to let us know if any component listening to our event has occurred. As you will only want one instance of this class at a time in our application, we want to add this to the DI Container as a singleton. This method ensures that all our components are listening to the same service and don’t accidentally get different instances of the service.

Add the Event Service the Blazor Components Will Listen to

Add to the BaseComponent

We will want to follow the following steps to add to the BaseComponent:

Inject the EventService that we just created into the BaseComponent class.
Still in the base class, add a protected virtual void method called OnCharactersChange that simply throws an exception if it is run without overriding.
In the OnParametersSet override method of the BaseComponent, add the OnCharactersChange method to the OnCharactersChange event using +=. This will make sure that when the OnCharactersChange event is notified that the OnCharactersChange Method in our BaseComponent is run.
I’m realizing my naming convention needs some work. I’ll get that fixed.
Now, let’s make our BaseComponent inherit from IDisposable. This will give us access to the Dispose() Method for all our components and allow us to add some logic.
In the Dispose() method, remove the OnCharactersChange method from the OnCharactersChange event using -=. This will make sure that when the component is disposed, it removes the connection between the method and the event. If you don’t do this, then when the component is rerendered on the screen, you will have an issue where that JsInterop connection is no longer valid.
In the SetCharacters method, when we have successfully set the ProtectedBrowserStorage with an updated list of characters, we want to call the NotifyCharactersChange method in the event service to invoke that event.

Add to Blazor Base Component

Submit a New Character

In the AddCharacter component, we want to add the new character to our list of current characters in storage. This will also now notify all listening components of this event.

Update the Characters Page

Override the OnCharactersChange method to set the list of characters on the Characters page to the updated list in storage. After setting our new list we need to call the StateHasChanged() method, which lets Blazor know to check the render tree for changes and make any updates to the view.

Add a Character

Run the application and add a character. You should see that the character is now added to the view!

Synopsis

In Part 4 of the Keyhole Blazor Server in .NET 6 series, we covered adding events in our Blazor components. In sum, I demonstrated how to add a service that contains the events that components can listen to with methods to notify when to invoke our events.

After that, we added that service to the BaseComponent. The section is complete with adding the new character to our list of current characters in storage in order to notify all listening components of this event.

I hope you’re enjoying working with Blazor as much as I do so far. See you in part 5, the final part of the blog series, for how to use dropdowns and data binding using both lists and enums!