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
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
- Inject the
EventServicethat we just created into the
- Still in the base class, add a protected virtual void method called
OnCharactersChangethat simply throws an exception if it is run without overriding.
- In the
OnParametersSetoverride method of the
BaseComponent, add the
OnCharactersChangemethod to the
OnCharactersChangeevent using +=. This will make sure that when the
OnCharactersChangeevent is notified that the
OnCharactersChangeMethod in our
- I’m realizing my naming convention needs some work. I’ll get that fixed.
- Now, let’s make our
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
OnCharactersChangemethod from the
OnCharactersChangeevent 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
SetCharactersmethod, when we have successfully set the
ProtectedBrowserStoragewith an updated list of characters, we want to call the
NotifyCharactersChangemethod in the event service to invoke that event.
Submit a New Character
- In the
AddCharactercomponent, 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
OnCharactersChangemethod 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!
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