How can I create a razor component with binding

Question

I created a customized input with label and some spans. (In the following, the spans are not shown, to keep the example simple.)

<div>
    <label for="length">length</label>
    <input type="number" id="length" @bind-value="@Length" min="100" max="500">
</div>
<span>@Length</span>

@code {
    private static double length = 300;
    private static int Length
    {
        get => (int)length;
        set => length = value;
    }
}

Since i need this customized input several times, I created a razor component LabeledInput.razor:

<div>
    <label for="@ID">@LabelText</label>
    <input type="number" id="@ID" @bind-value="@BindValue" min="@Min" max="@Max">
</div>

@code {
    [Parameter] public int BindValue { get; set; }
    [Parameter] public string ID { get; set; }
    [Parameter] public string LabelText { get; set; }
    [Parameter] public int Max { get; set; }
    [Parameter] public int Min { get; set; }
}

But when I use it as

[code from above]
<LabeledInput ID="length" LabelText="length2" Min="100" Max="500" BindValue="@Length"></LabeledInput>

clicking the spinner buttons of the LabeledInput does not update the <span>@Length</span> on the GUI. On the other hand, clicking the spinner buttons of the normal Input does update the span and also the LabeledInput. So, there is a binding but only in one direction.

What am I doing wrong?

Answer 1

What you want is to create two-way data-binding between the parent component and the child component. To achieve this, you'll have to create a Value property in your parent component like this:

private int Value { get; set; }

The Value property requires you to define a prameter property in the child component, like this... Let's call it Value

[Parameter]
Public int Value { get; set; }

In addition you'll have to create an event call back a prameter property like this:

[Parameter]
Public EventCallback<int> ValueChanged { get; set; }

The ValueChanged will contain the event call back that is to be called when the ValueChanged is triggered. Note that the EventCallback is of type int, meaning that you should pass an int value to the method (in our case it is the Value property defined in the parent component. Let's see how you call the child component from the parent component:

Index.razor

@page "/"
<Child @bind-Value="@Value" Min="0" Max="100" />
<div>@Value.ToString()</div>

@code
{
    private int Value { get; set; } = 10; // default value
}

Child.razor

<div>
    <input type="number" value="@Value" 
           @onchange="@((args) => ValueChanged.InvokeAsync(Convert.ToInt32(args.Value)) )" 
           min="@Min" max="@Max">
</div>

@code {
    [Parameter]
    public int Value { get; set; }

    [Parameter]
    public EventCallback<int> ValueChanged { get; set; }

    [Parameter] public int Max { get; set; }
    [Parameter] public int Min { get; set; }
}

Copy, test and then adapt...

Note that instead of providing the @onchange directive with a lambda expression as is done above, you can assign the name of a method, which you'll have to define, and from which you'll have to update the Value property

UPDATE:

Why can't I change the property name Value of the child component?

The rule goes like this: If you name the parameter property BindValue, like this:

[Parameter]
public int BindValue { get; set; }

Then, the EventCallback property should be named: BindValueChanged, like this:

[Parameter]
public EventCallback<int> BindValueChanged { get; set; }

And it is used in the parent component like this:

<Child @bind-BindValue="@Value" Min="0" Max="100" />

That is, you apply the @bind directive, plus a hyphen, plus the name of the parameter property defined in the child component. Its value: "@Value" is the name of the local property that is bound to the child component, and is updated with a new value passed from the child component, whenever you change the value in the input type="number" element. Get it?