I have declared two <CascadingValue>
component in my razor, which are passing same type(int
) of value to the child component, one is declared with the Name attribute.
Counter.razor
<h1>Counter</h1>
<p role="status">Current count: @IncrementCounter</p>
<p role="status">Current count fixed: @IncrementCounterFixed</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<p><b>Cascading Parameter</b></p>
<CascadingValue Value="@IncrementCounter">
<CascadingValue Value="@IncrementCounterFixed" Name="FixedCascade" IsFixed="true">
<CascadingChild>
</CascadingChild>
</CascadingValue>
</CascadingValue>
@code
{
public int IncrementCounter { get; set; }
public int IncrementCounterFixed { get; set; }
protected override void OnInitialized()
{
IncrementCounterFixed = 5;
}
private void IncrementCount()
{
IncrementCounter++;
IncrementCounterFixed++;
}
}
CascadingChild.razor
<div>
<p>Cascading value: @IncrementCounter</p>
<p>Cascading value Fixed: @IncrementCounterFixed</p>
</div>
@code
{
[CascadingParameter]
public int IncrementCounter { get; set; }
[CascadingParameter(Name = "FixedCascade")]
public int IncrementCounterFixed { get; set; }
}
After clicking the Click Me button
, the fixed value is not changing first time, but in the second click it gets changed to ‘6’ and from the second click it keep on changing the value of the fixed property IncrementCounterFixed
value.
But if i use the single <CascadingValue>
component with IsFixed="true"
attribute, the IncrementCounterFixed
value is not changing, if the value is incremented in the Parent razor.
First click output:
Second click output:
Clarify me here how this works,
Thanks in advance.