Cascading Values and Cascading Parameters in Blazor

-

This blog is going to explain what Cascading values and Cascading parameters are. And it is going to explain with examples how to use them. You can easily transfer values from parent to child components using cascading values and cascading parameters.

Let's look at a small example. There are two components: parent and child components. In the code below, a text box is included to get the value to send to child components. Added CascadingValue component with value attribute to send value. Inside the CascadingValue a child component was added to get the value.

Parent.razor
@page "/Parent"
<h3>Parent Component</h3>
Enter Value to Pass: <input type="text" @bind="@ValueToPass" />
<br /><br />

<CascadingValue Value="@ValueToPass">
    <Child></Child>
</CascadingValue>

@code {
    int ValueToPass = 100;
}

Below one is a child component code. Here the [CascadingParameter] attribute is added to the ReceivedValue property variable. If you notice this, the variable name (ValueToPass) of the parent component does not match the value of the child component (ReceivedValue). But the value will cascade down to the child by data type(int).

Child.razor
@page "/Child"

<div style="background-color:lightblue;">
    <h4>Child Component</h4>
    <p>Received Value: <b>@ReceivedValue</b></p>
</div>

    @code {
        [CascadingParameter]
        int ReceivedValue { get; set; }
    }

The following image is the output of the code above. The child component is highlighted with background blue. As the value of the parent component changes, it also changes in the child component.

Cascading Parameters

Pass Multiple values

By Type

The next example is going to illustrate how to pass multiple values to the child component using CascadingValues and CascadingParameters. The following code is a Parent component code. Here you can see two CascadingValue components are added along with value attributes. The first value is movieName which is a string type. The second value is a releasedYear which is an int type.

Parent.razor
@page "/Parent"

<h3>Parent Component</h3>

Movie Name: <input type="text" @bind="@movieName" />
 <br />
Released Year: <input type="text" @bind="@releasedYear" />

<br /><br />

<CascadingValue Value="@movieName">
    <CascadingValue Value="@releasedYear">
        <Child></Child>
    </CascadingValue>
</CascadingValue>

@code {
     string movieName = "Frozen";
     int releasedYear = 2013;
}

The following is a child component code. Here you can see two property variables are declared with [CascadingParameter]. The first one is ‘Name’ with string type and the second one is ‘Year’ with int type.

Child.razor
@page "/Child"

<div style="background-color:lightblue;">
    <h4>Child Component</h4>

    <p>Movie Name: <b>@Name</b></p>
    <p>Released Year: <b>@Year</b></p>

    @code {
        [CascadingParameter]
        string Name { get; set; }

        [CascadingParameter]
        int Year { get; set; }
    }
</div>
Output

The output of the code above is below. Here you can see how values are passed from parent to child by type.

By Name

'By name' is the best way to send multiple values. For this, you need to add the 'Name' attribute to the CascadingValue components. The 'Name' attribute helps the child component to receive the value. In the example below, you can see that the 'Name' attribute is assigned with the values "name" and "product".

Parent.razor
@page "/Parent"

<h3>Parent Component</h3>

Movie Name: 
<input type="text" @bind="@movieName" />
<br />
Co Production: 
<input type="text" @bind="@coProduction" />

<br />
<br />

<CascadingValue Value="@movieName" Name="name">
    <CascadingValue Value="@coProduction" Name="production">
        <Child></Child>
    </CascadingValue>
</CascadingValue>

@code {
    string movieName = "Frozen";
    string coProduction = "Disney";
}

The following is a child component in which you can see the [CascadingParameter] attribute added with the Name property. The same names (name and product) of the parent components are assigned to the Name attributes.

Child.razor
@page "/Child"

<div style="background-color:lightblue;">
    <h4>Child Component</h4>

    <p>Movie Name: <b>@Name</b></p>
    <p>Released Year: <b>@Production</b></p>

    @code {
        [CascadingParameter (Name = "name")]
        string Name { get; set; }

        [CascadingParameter (Name = "production")]
        string Production { get; set; }
    }
</div>

Output

The below one is an output of the above code.

I hope this helps you. Keep coding.

Comments

Post a Comment

Popular posts from this blog

Entity Framework Core (EF) with SQL Server LocalDB

-
Image
This blog is going to illustrate how to implement Entity Framework (EF) Core with SQL Server LocalDB. The Entity Framework Core enables access to data from the database. This allows developers to avoid having to write most of the data access code. And the SQL Server LocalDB works similarly to the SQL SERVER with few features. You can get the LocalDB when you install visual studio or visual studio express. You can find the .mdf and _log.ldf files in the C:/Users/{user} directory. Let see how to create a SQL Server LocalDB and implement Entity Framework Core Step 1: The first step is to add a connection. In the menu -> click Tools and select Connect to Database It will display the Add Connection window. Enter (localdb)\mssqllocaldb in the server name textbox. Then in the Select or enter a database, select master and click ok Now in the server explorer, you can find the master DB containing Tables, Views, Stored...
Read more

SignalR with JavaScript in ASP.NET Core MVC

-
Image
This blog is going to explain what is SignalR and how to implement it in ASP.NET Core. SignalR is a real time application framework for ASP.NET Core. Using SignalR you can provide updated information without refreshing the page, for example poll results, game score, chat etc. Let's see how to achieve it in ASP.NET Core MVC. Step 1: First step I added the SignalR client library. To add a SignalR client library, Right click on the project in Solution Explorer and Add -> Client-Side Library. Select the provider as unpkg as shown in the image below. Enter the latest version of SignalR into the library. And selected signalr.js and signalr.min.js files. Finally clicked the install button to install the client library. Step 2: At this step I have created a VoteHub.cs class inside the Hubs folder(create a new folder called Hubs). This class inherits from the Hub class which is a base class of SignalR hub. The SendMessage method will be called by the connected client. ...
Read more

Localization in ASP.NET Core MVC with Example

-
Image
Using Query Strings for Request Culture and Simplifying Localization with IStringLocalizer Interface Let’s see how to implement Localization in ASP.NET Core MVC. In the first example, I am going to use the IStringLocalizer Interface in the controller to implement Localization. Additionally, when the user passes the desired language through the query string, it will display content in that language. First, let’s configure the settings in the program.cs file. builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");  The AddLocalization method adds the localization service to the service container. I have added the supported cultures here. I have added two cultures: en for English and nl for Dutch. In the RequestCultureProviders , I have included QueryStringRequestCultureProvider() . This allows the system to determine the culture information from the query string. UseRequestLocalization initializes a RequestLocalizationOptions o...
Read more