The component parameter 'ValueChanged' is used two or more times for this component...

• Jan 21, 2022

In Blazor, when you use two-way binding to a property (PropertyName), you implicitly handle the corresponding PropertyNameChanged event and define the PropertyNameExpression property. For example, bind the Spin Edit’s Value property in the following way:

<DxSpinEdit @bind-Value="@DecimalValue"></DxSpinEdit>

@code {
    Decimal DecimalValue { get; set; } = 15;
}

After you build the project, the “~/obj/Debug/net6.0/Razor/Pages/Index.razor.g.cs” file contains the ValueChanged and ValueExpression attributes, although you did not specify them in your code:

__builder.AddAttribute(__seq1, "ValueChanged", __arg1);
__builder.AddAttribute(__seq2, "ValueExpression", __arg2);

So, if you add the ValueChanged event handler as in the code snippet below, Blazor generates the ValueChanged attribute one more time:

<DxSpinEdit @bind-Value="@DecimalValue" 
            ValueChanged="@((Decimal newValue) => OnValueChanged(newValue))">
</DxSpinEdit>

In this case, the following error is displayed:

The component parameter ‘ValueChanged’ is used two or more times for this component. Parameters must be unique (case-insensitive). The component parameter ‘ValueChanged’ is generated by the ‘@bind-Value’ directive attribute.

To solve this issue, do not use two-way binding and event handling together. Specify the property value and handle the corresponding event instead:

<DxSpinEdit Value="@DecimalValue" ValueChanged="@((Decimal newValue) => OnValueChanged(newValue))"></DxSpinEdit>

@code {
    Decimal DecimalValue { get; set; } = 15;
    void OnValueChanged(Decimal newValue)
    {
        DecimalValue = newValue;
        // Perform some other actions 
    }
}