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 to the BaseComponent
We will want to follow the following steps to add to the BaseComponent
:
- Inject the
EventService
that we just created into theBaseComponent
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 theBaseComponent
, add theOnCharactersChange
method to theOnCharactersChange
event using +=. This will make sure that when theOnCharactersChange
event is notified that theOnCharactersChange
Method in ourBaseComponent
is run. - I’m realizing my naming convention needs some work. I’ll get that fixed.
- Now, let’s make our
BaseComponent
inherit fromIDisposable
. This will give us access to theDispose()
Method for all our components and allow us to add some logic. - In the
Dispose()
method, remove theOnCharactersChange
method from theOnCharactersChange
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 theProtectedBrowserStorage
with an updated list of characters, we want to call theNotifyCharactersChange
method in the event service to invoke that event.
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 theStateHasChanged()
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!
Series Quick Links
- Blazor Server in .NET 6 – Part One
- Blazor Server in .NET 6 – Part Two
- Blazor Server in .NET 6 – Part Three
- Blazor Server in .NET 6 – Part Four