Blazor Simple Arithmetic Example

Question

I made an example to learn Blazor. The example is to multiply the weight and the center of gravity to get the moment.

The goal is to perform calculation when the weight or center of gravity changes. I get the following error.

The attribute 'onchange' is used two or more times for this element. Attributes must be unique (case-insensitive). The attribute 'onchange' is used by the '@bind' directive attribute.

Can you help me to achieve the goal?

 <h3>MomentBasicCalc</h3>

<div class="container">
    <div class="row">
        <div class="col-sm">
            <label for="weight">Weights</label>
            <input type="text" class="form-control" id="weight"
                   @onchange="Calc"  @bind="@Weight" />
        </div>
        <div class="col-sm">
            <label for="CG">CG</label>
            <input type="text" class="form-control" id="CG"
                    @onchange="Calc" @bind=@Cg />
        </div>
        <div class="col-sm">
            <label for="Moment">Moment</label>
            <input type="text" class="form-control" id="Moment" value=@Moment readonly />
        </div>
    </div>
</div>



@code {
    public double Weight { get; set; }
    public double Cg { get; set; } 
    public double Moment { get; set; }

    void Calc()
    {

        Moment = Weight * Cg;

    }
}

Answer 1

It's not supported to attach multiple event handlers on a single event. You should do something like this:

<div class="container">
        <div class="row">
            <div class="col-sm">
                <label for="weight">Weights</label>
                <input type="text" class="form-control" id="weight"
                       **value="@Weight**
                       @onchange="SetWeight"  "/>
            </div>
            <div class="col-sm">
                <label for="CG">CG</label>
                <input type="text" class="form-control" id="CG"
                        **value=@Cg**
                        @onchange="SetCG"  />
            </div>
            <div class="col-sm">
                <label for="Moment">Moment</label>
                <input type="text" class="form-control" id="Moment" value=@Moment readonly />
            </div>
        </div>
    </div>

@code
{
    void SetWeight(UIChangeEventArgs e)
        {
            Weight = (string) e.Value;
            Calc();
        }

    void SetCG(UIChangeEventArgs e)
        {
            CG = (string) e.Value;
            Calc();
        }

}