How do you update the cascading values in Blazor?

Platform: Blazor| Category: Components

The cascading values can be updated using an event, as in the following example.

Parent component

@page "/cascading"
 
<CascadingValue Value="@Id" Name="EmpId">
	<CascadingValue Value="@Name" Name="EmpName">
    	<CascadingChild OnNameChange="@ChangeName"></CascadingChild>
    	<CascadingChild1></CascadingChild1>
	</CascadingValue>
</CascadingValue>
 
@code {
	int Id = 1;
	string Name = "Test";
	private void ChangeName(string newName)
	{
    	Name = newName;
    	StateHasChanged();
	}
}

CascadingChild.razor

<p>Employee Id:@EmployeeId </p>
<p>Employee Name:@EmployeeName </p>
 
<button @onclick="@ChangeName">Change Name</button>
 
@code {
	[CascadingParameter(Name = "EmpId")]
	private int EmployeeId { get; set; }
	[CascadingParameter(Name = "EmpName")]
	private string EmployeeName { get; set; }
 
	[Parameter] Action<string> OnNameChange { get; set; }
 
	private void ChangeName()
	{
    	OnNameChange?.Invoke("Test2");
	}
}

CascadingChild1.razor

<p>Employee Id:@EmployeeId </p>
<p>Employee Name:@EmployeeName </p>
 
@code {
[CascadingParameter(Name = "EmpId")]
private int EmployeeId { get; set; }
[CascadingParameter(Name = "EmpName")]
private string EmployeeName { get; set; }
}

Reference link

https://chrissainty.com/understanding-cascading-values-and-cascading-parameters/

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.