Двухсторонняя привязка данных / событий без строк (Blazor)

Question

Возможно ли двухстороннее связывание или связывание с событием в Blazor без строк? Я сделал это с текстом без проблем, но любой другой тип объекта вызывает у меня проблемы.

Например, у меня есть метод, который выполняется при вводе текста в поле, которое также основано на введенном значениикак несколько других входных данных в форме.

<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();
      }
}

Когда я делаю это, я получаю следующую ошибку:

Iтакже попытался передать его в качестве параметра, например, так:

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

Это также не работает, так как вызывает ошибку, когда текстовое поле пустое и не срабатывает для всех входных данных (пытался при нажатой клавише какЧто ж). Есть также много параметров, поэтому, если возможно, я бы хотел этого избежать.

Я также должен отметить, что когда я запускаю этот проект, установите точку останова в вызываемом методе и выполните привязку, как показано ниже,это работает. Однако удаление точки останова останавливает ее работу. Это очень смутило меня.

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

Есть ли лучшая практика в этом отношении? Я новичок в веб-разработке, и сам Blazor очень новый, поэтому я не уверен, что лучший путь здесь ... Какой совет? Спасибо!

Answer 1

Когда вы говорите Blazor, что он должен обновить значение переменной с помощью таких событий, как onkeydown, он не знает, что делать с предоставленными ему аргументами событий. Чтобы добиться двусторонней привязки в таком случае, необходимо выполнить привязку вручную.

Добавьте директиву @oninput к компоненту InputNumber со значением "@((e) => @employee.Salary = Convert.ToDecimal(e.Value))"

Ваш InputNumberКомпонент должен выглядеть следующим образом:

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

Теперь, всякий раз, когда изменяется ввод вашего текстового поля, инициируется событие ввода, и вам передается ChangeEventArags, вы извлекаете значение, преобразуете его в десятичное иприсвоил его свойству @ employee.Salary.

Этот ответ может быть выведен из моего первого ответа, в котором я использую

@oninput="@((e) => CalculationHere(e))" 

для вызова CalculationHere

Надеюсь, это поможет...

Answer 2

• Компонент InputNumber должен быть встроен в компонент EditForm, атрибут Model которого установлен для сотрудника вашей модели

• Не следует добавлять @bind-Value:event="onkeydown". Для чего? По умолчанию и правильным событием для привязки является событие onchange, и оно соответствующим образом работает с обновлением свойства Salary.

Поместите этот код на страницу индекса и выполните

<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);
}
}