I select two different numbers from the drop-down lists (containing only numbers) and these are passed to the component via cascading parameters. On this component is displays the values that were chosen. BUT both variables are the same?!?! What am I doing wrong?
Component:
<p>number 1:@selectedNumberOne</p>
<p>number 2: @selectedNumberTwo</p>
@code {
#region Cascading Parameter
[CascadingParameter(Name="one")] //added name
public int? selectedNumberOne { get; set; }
[CascadingParameter(Name="two")] //added name
public int? selectedNumberTwo { get; set; }
#endregion
}
index:
<div class="col-sm-12 col-lg-2">
<select class="fluent-input" @onchange="SelectNumberOne">
@for (int i = 10; i < 20 + 9; i++)
{
<option value="@i">@i</option>
}
</select>
</div>
<div class="col-sm-12 col-lg-2">
<select class="fluent-input" @onchange="SelectNumberTwo">
@for (int i = 10; i < 20 + 9; i++)
{
<option value="@i">@i</option>
}
</select>
</div>
<MudCard Elevation="1" Class="mb-5">
<CascadingValue Value="selectedNumberOne" Name="one">
<CascadingValue Value="selectedNumberTwo" Name="two">
<TestComponent @ref="testComponent"></TestComponent>
</CascadingValue>
</CascadingValue>
</MudCard>
@code{
TestComponent? testComponent;
private int? selectedNumberOne { get; set; }
async Task SelectNumberOne(ChangeEventArgs e)
{
selectedNumberOne = Convert.ToInt32(e.Value.ToString());
}
private int selectedNumberTwo { get; set; }
async Task SelectNumberTwo(ChangeEventArgs e)
{
selectedNumberTwo = Convert.ToInt32(e.Value.ToString());
}
}