In this post, we will be understanding about Cascading Values and Cascading Parameters in Blazor framework. As we have already discussed about passing values from parent component to child components in Blazor using Component Parameters in our previous posts. Using component parameters is one way to pass data from parent to child. Blazor introduced another way for doing the same i.e. using cascading values and cascading parameters that we are going to discuss in detail in this post.

Table of Contents

1. Cascading values and Parameters
2. CascadingValue Component
3. Accessing single Cascading Value using CascadingParameter attribute
4. Passing multiple values of different types through CascadingValue component
5. Accessing multiple values of different types using multiple CascadingParameter attributes
6. Passing multiple values of same types using CascadingValue component
7. Match by Type
8. Match By Name
9. Cascading Values Performance
10. IsFixed Parameter and overcome performance issues
11. Summary

You can download source code with examples explained from GitHub.

Cascading values and Parameters

As we already know Blazor framework is a component based framework and for creating a blazor application, components can be deeply nested.

For example. Component C can be nested inside component B and that component B can be nested inside another component A and so on. It means there can be several layers of components in a hierarchy in a real-time blazor application.

As I explained above, there is one way to pass data from an ancestor component (component A) to its descendant components (component B & C and more in hierarchy) using Component Parameters.

But using this way, it’s tedious to pass data to all descendant components. That’s why Blazor introduced cascading values and parameters that allows any data cascaded down to its all descendant components in components hierarchy.

Data can be cascaded down only means passed from Parent to Child components using cascading values and parameters. You cannot update a value from child component. If you want to update value from descendants, use Events.

CascadingValue Component

Blazor framework introduced a special component called CascadingValue that allows an ancestor component to pass data to its all descendants.

In the following example, Parent component TextColor property value is passed to the CascadingValue component.

#blazor #aspnetcore #blazor #cascadingparameter attribute #cascadingvalue component