Understand Cascading Parameters and Cascading Values in Blazor

In the previous article we discussed arbitrary parameters and attribute splatting. Now it’s time to understand one more aspect of passing values to a Blazor component from the external world - Cascading Parameters and Cascading Values. In all the examples discussed so far, we explicitly set a parameter value from the parent component. This means if we want to pass a value to, say, ten components, we must set a parameter of all the ten components. In such cases Cascading Parameters and Cascading Values come handy. The remainder of this article discusses how.

Open the same Blazor project you created in the previous article. Recollect that we have already created Message component in the project. For the sake of this article, we will create two components - UpperCaseMessage and LowerCaseMessage - to demonstrate our point of discussion

So, add two Razor Components namely UpperCaseMessage.razor and LowerCaseMessage.razor to the project. These are quite simple components that display a specified message in uppercase and lowercase letters respectively. For the sake of clear understanding we will first build them with normal parameters and then convert them to use cascading parameters.

#blazor #dotnet #csharp #programming #developer

What is GEEK

Buddha Community

Understand Cascading Parameters and Cascading Values in Blazor

Cascading Dropdown in Blazor

#Cascading Dropdown in Blazor #Blazor #Blazor tutorial #Blazor c# #Blazor core api

Abigale  Yundt

Abigale Yundt

1595700480

Understanding About Cascading Values And Cascading Parameters In Blazor

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.

cascading values and cascading parameters in blazor

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

Abigale  Yundt

Abigale Yundt

1595688757

Blazor Data Binding In Depth - Part 1

In this post, we will discuss about blazor data binding in depth. This is first part of “Blazor Data Binding in Depth” article.

Introduction

Blazoris a .NET framework for building single-page applications (SPA) using C#, Razor and HTML. Data binding is one the most powerful features of any single-page application through which page UI updates with model data without page reload. We will discuss about data binding feature in Blazor.

This article is part of our step-by-step Blazor series. If you have not read our previous articles on Blazor, you can check them here.

Data Binding in Blazor is a powerful feature that allows us to synchronize a variable and a html element or a component. In simple terms, whenever a variable/property data gets update in C#, UI immediately gets update with updated data and vice-versa. Let’s see data binding types in detail.

One-Way Binding

In one-way binding, data flows in one direction only from C# code to UI. That means any property or variable in C# code directly can be used inside html and whenever this property or variable value gets update in C#, this is immediately updated in UI. However vice-versa in one-way binding is not possible. This is just to display updated model data in the UI.

Let’s understand it with the help of code example. In the following example, take a look at Counter component (counter.razor) that comes with default blazor template project.

blazor one-way data binding

In the above code, we have a private variable _currentCount _which is initially set to 0 that displays 0 in paragraph when application runs. The _currentCount _variable works as a one-way binding here. In order to bind one-way values, we use @ symbol followed by variable or property name.

A method IncrementCount is also given in the code which works as an event handler of _onclick _blazor event of button element. When _ClickMe _button will be clicked, handler will be executed and increases the _currentCount _value by one, which will immediately update the UI. Executing event handlers in blazor triggers a re-render which updates the UI.

You are aware now with one-way binding that updates the value in one direction only. What, if you want user to update the variable or property value from UI also. This is where two-way binding comes place.

Before understanding two-way binding in blazor, let’s understand “what are components parameters in blazor?


[Parameter] attribute in Component

A component can receive data from its parent component using [Parameter] attribute. Any of following types of data can be send to a component through [Parameter] attribute. Methods can also be send thru parameters.

  • Data
  • Events
  • Razor Content

As we saw in our previous article A deep dive on Blazor components that blazor components can be nested. That means a blazor component can be nested inside other blazor components. As an example, let’s create a new component called CounterValueDisplay.razor and nest it inside count component.

So [Parameter] attribute is used when you want to pass any data from parent (Counter) to child (CounterValueDisplay) component.

blazor data binding - component parameters

In above example, Parent (count) component is passing value to Child (CounterValueDisplay) component using [Parameter] attribute. Follow below steps for clear understanding

#blazor #asp.net core #blazor #component parameters in blazor #one-way data binding in blazor #two-way data binding in blazor

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

https://youtu.be/5xG9J6OqdV8

#blazor #blazor in c# #blazor tutorial #blazor webassembly #blazor crud #blazor with asp.net core

CRUD App Using Blazor And Entity Framework Core in ASP.NET Core

https://youtu.be/5xG9J6OqdV8

#blazor #blazor tutorial #blazor in c# #blazor crud #blazor webassembly #blazor with asp.net core