Blazor CascadingValues is a powerful feature that allows you to share data and services across multiple components in your Blazor application. With CascadingValues, you can easily flow data down a component hierarchy from an ancestor component to any number of descendent components, without the need for injection or attribute assignment for each descendent component where the data is consumed¹.
This is especially important where you only need one instance of a specific component for the entire application. e.g. You only need one Toast component, or one Clipboard service.
To use CascadingValues, you need to wrap a subtree of your component hierarchy with the `CascadingValue` component and supply a single value to all of the components within its subtree¹. This value can be any type of data or service that you want to share with the descendent components. In our cases, we want to share an interface that gives us either direct access to a service, or to component features.
In the descendent components, you can declare cascading parameters using the `[CascadingParameter]` attribute¹. This attribute allows you to specify which cascading value should be injected into the component. You can then use this value in your component's code, just like any other injected service.
One of the great things about CascadingValues is that it allows you to coordinate with other components across a component hierarchy. For example, you can use CascadingValues to share a common service or data source between multiple components, allowing them to work together seamlessly.
Practical examples we have created include:
- An AskUser component, so you can simply have something like this in any component:
- AskUser.Confirm("Delete selection", "Do you want to delete the selected items", ()=>OnDelete());
- A Clipboard component that shares selection state across the app. It exposes an injected service, so that you can reference it via CascadingValue in a component, or still inject the clipboard service (e.g. into other services). This also solved the initialisation problem of how to load the clipboard state from localstorage on startup or browser refresh.
- A Toast component that allows you to display toast messages. Examples we found previous, used a simple component, listening to messages from a toast service. We modified that to be available as a CascadedValue as it needs to be declared once in the MainLayout.razor anyway.
An example from our MainLayout.razor is below:
<Toast>
<AskUser>
<CascadingClipboard>
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4 auth">
<LoginDisplay />
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
</CascadingClipboard>
</AskUser>
</Toast>
Overall, Blazor CascadingValues is a powerful and flexible feature that can help you build more modular and maintainable Blazor applications. By using CascadingValues to share injected services, you can reduce code duplication and improve the organization of your code. So why not give it a try in your next Blazor project? 😊
(1) ASP.NET Core Blazor cascading values and parameters. https://learn.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-7.0.
(2) Blazor (server) can I call cascading parameters and/or injected .... https://stackoverflow.com/questions/76182675/blazor-server-can-i-call-cascading-parameters-and-or-injected-services-anywher.
(3) Blazor University - Cascading values by name. https://blazor-university.com/components/cascading-values/cascading-values-by-name/.
(4) Blazor University - Cascading values by type. https://blazor-university.com/components/cascading-values/cascading-values-by-type/.
(5) Can I call cascading parameters and/or injected services anywhere .... https://learn.microsoft.com/en-us/answers/questions/1276633/can-i-call-cascading-parameters-and-or-injected-se.