Search code examples
c#asp.net-coreblazorblazor-webassembly

How to pass the value of an input to another input in blazor webassembly?


hello community I am working on a form with decimal quantities, in which I want to write an amount in an input and that the same amount is passed to another input, the problem is that the first input in the bind-Value has the cost property and the second sale_price, also I want the value to change at the time of writing the quantity in the input so I made a custom input, but I cannot make the bind work well to pass the cost value to the sale_price value

this is my form:

<EditForm Model="Producto" OnValidSubmit="OnDataAnnonationsValidated">
    <div class="col-sm-4">
        <div class="form-group">
            <InputLabel for="costo">Costo</InputLabel>
            <CampoNumeroOnInput id="costo" Placeholder="Costo" @bind-Value="Producto.Costo" />
            <p>Value: @Producto.Costo</p>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <InputLabel for="margen">Margen de Ganancia</InputLabel>
            <InputNumber @bind-Value="@Producto.Margen_de_Ganancia" />
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <InputLabel for="precioventa">Precio de Venta</InputLabel>
            <InputNumber @bind-Value="@Producto.Precio_de_Venta" />
        </div>
    </div>
<EditForm />

@code {
    [Parameter] public Producto Producto { get; set; }
    [Parameter] public EventCallback OnValidSubmit { get; set; }
}

inputnumber custom:

[![@typeparam T
@inherits InputNumber<T>

<input @attributes="AdditionalAttributes"
       type="number"
       class="form-control form-control-sm"
       value="@stringValue"
       placeholder="@Placeholder"
       @oninput="OnInput"
       @onblur="OnBlur" />

@code {
    \[Parameter\] public string Placeholder { get; set; }
    private string stringValue;
    private T lastParsedValue;

    protected override void OnParametersSet()
    {
        // Only overwrite the "stringValue" when the Value is different
        if (!Equals(CurrentValue, lastParsedValue))
        {
            lastParsedValue = CurrentValue;
            stringValue = CurrentValueAsString;
        }
    }

    private void OnInput(ChangeEventArgs e)
    {
        // Update the value
        CurrentValueAsString = stringValue = (string)e.Value;
        lastParsedValue = CurrentValue;
    }

    private void OnBlur(FocusEventArgs e)
    {
        // Overwrite the stringValue property with the parsed value.
        // This call Value.ToString(), so the value in the input is well formatted.
        // note: Ensure the string value is valid before updating the content
        if (!EditContext.GetValidationMessages(FieldIdentifier).Any())
        {
            stringValue = CurrentValueAsString;
        }
    }
}

example of what I want to do:

enter image description here


Solution

  • Use the Producto class to do the work. Just bind one input to Cost and one to SalePrice with bind-event on-input.

    producto model

    public class Producto
    {
        decimal _cost;
    
        public decimal Cost
        {
            get => _cost;
            set
            {
                 _cost = value;
                 this.SalePrice = _cost * 1.2;
            }
        }
        
        public decimal SalePrice { get; set; }
    }
    

    You can make the logic as complex as you like inside your model class. Your input controls will just bind to the resulting values.