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

执行此操作时，出现以下错误：

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

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

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

我还应该注意，当我运行该项目时，在要调用的方法中设置一个断点，并像下面那样进行绑定，它确实可以工作。但是，删除断点将使其无法工作。这让我非常困惑。

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

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

Answer 1

InputNumber组件应嵌入到其Model属性设置为您的模型雇员的EditForm组件中
您不应添加@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);
}
}

Answer 2

当您告诉Blazor应该通过onkeydown之类的事件来更新变量的值时，它不知道如何处理提供给它的事件args。在这种情况下，要实现双向绑定，您需要手动进行绑定。

将@oninput的{{1}}指令添加到您的InputNumber组件中

您的InputNumber组件应如下所示：

"@((e) => @employee.Salary = Convert.ToDecimal(e.Value))"

现在，每当文本框的输入发生更改时，都会触发输入事件，并将ChangeEventArags传递给您，然后提取值，将其转换为十进制，然后将其分配给@ employee.Salary属性。

这个答案可以从我使用的第一个答案中得出

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

调用CalculationHere

希望这对您有帮助...

带非字符串的双向数据/事件绑定（Blazor）

2 个答案: