Why are my cascading parameters interfering with one another?

89 Views Asked by At

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());
    }
}
0

There are 0 best solutions below