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