Two way data/event binding w/ non strings (Blazor)

Question

Is it possible to two way bind or bind to an event in Blazor w/ non strings? I have done this with text without an issue but any other type of object is causing me issues.

For example, I have a method that executes when inputting text in a box which is based on the value inputted as well as several other inputs on the form.

<InputNumber step=".01" class="form-control form-control-xs" @bind-Value="@Salary" @bind-Value:event="onkeydown"/>

private decimal salary {get; set;}
public decimal Salary
{
      get
      {
          return salary;
      }
      set
      {
          salary = value;
          CalculationHere();
      }
}

When I do this, I get the below error:

I have also tried passing it in as a parameter like so:

@oninput="@((ChangeEventArgs __e) => CalculationHere(Convert.ToDecimal(__e.Value)"

This also does not work as it causes an error when the textbox is empty and doesn't fire for all inputs (have tried on keydown as well). There are also a lot of parameters so if possible I'd like to avoid this.

I should also note that when I run this project, set a breakpoint in the method being called, and bind like the below, it DOES work. However, removing the breakpoint stops it from working. This has left me VERY confused.

<InputNumber step=".01" class="form-control form-control-xs" @bind-Value="@Salary" @oninput="(() => CalculationHere())"/>

Is there a best practice regarding this? I'm new to web development and Blazor itself is very new so I'm not sure what the best route to go here is... Any advice? Thanks!

Unknown Unknown · Accepted Answer · 2019-10-18T17:43:22

The InputNumber component should be embedded in the EditForm Component whose Model attribute is set to your model employee
You should not add the @bind-Value:event="onkeydown". What for ? The default and the correct event for the binding is the onchange event and it deals appropriately with updating the Salary property.

Put this code in the Index page and run

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" @bind-Value="@employee.Name" />

    <!-- <InputNumber step=".01" class="form-control form-control-xs" @bind-Value="@employee.Salary" /> -->

   <InputNumber step=".01" class="form-control form-control-xs" @bind-Value="@employee.Salary" @oninput="@((e) => CalculationHere(e))" />


    <button type="submit">Submit</button>
</EditForm>

<p>Salary: @employee.Salary</p>
<p>After calculation: @calculation</p>

@code{
 decimal calculation;

        Employee employee = new Employee() { Name = "Davolio Nancy", Salary =   234 } ;



    public class Employee
    {

        public string Name { get; set; }
        private decimal salary { get; set; }

        public decimal Salary
        {
            get
            {
                return salary;
            }
            set
            {
                salary = value;

                //CalculationHere();
            }
        }
    }

    private void HandleValidSubmit()
    {

    }

     void CalculationHere(ChangeEventArgs e)
{


    calculation = Convert.ToDecimal(e.Value) * Convert.ToDecimal(1.2);
}
}

Two way data/event binding w/ non strings (Blazor)

2 Answers