带非字符串的两种方式数据/事件绑定 (Blazor)答案

【问题标题】：Two way data/event binding w/ non strings (Blazor)带非字符串的两种方式数据/事件绑定 (Blazor)
【发布时间】：2020-02-15 16:55:39
【问题描述】：

是否可以通过两种方式绑定或绑定到 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();
      }
}

当我这样做时，我收到以下错误：

我也尝试过像这样将它作为参数传递：

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

这也不起作用，因为当文本框为空并且不会为所有输入触发时会导致错误（也已尝试过 keydown）。还有很多参数，所以如果可能的话我想避免这种情况。

我还应该注意，当我运行这个项目时，在被调用的方法中设置一个断点，然后像下面这样绑定，它确实有效。但是，删除断点会阻止它工作。这让我很困惑。

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

在这方面有最佳实践吗？我是 Web 开发的新手，Blazor 本身很新，所以我不确定去这里的最佳途径是什么......有什么建议吗？谢谢！

【问题讨论】：

标签： c# asp.net-core data-binding .net-core blazor

【解决方案1】：

InputNumber 组件应嵌入到 EditForm 组件中，其 Model 属性设置为您的模型员工
您不应添加@bind-Value:event="onkeydown"。做什么的？绑定的默认和正确事件是 onchange 事件，它适当地处理更新 Salary 属性。

把这段代码放到Index页面中运行

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

【讨论】：

感谢您的回复！不幸的是，你展示的正是我正在做的，但它并没有按预期工作。当用户键入时，属性应该会发生变化（它不会）。只有当你离开现场时它才会改变。我正在尝试在用户输入时这样做。这不可能吗？

【解决方案2】：

当您告诉 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

希望这会有所帮助...

【讨论】：