帶非字符串的兩種方式數據/事件綁定 (Blazor)

Question

是否可以通過兩種方式綁定或綁定到 Blazor 中帶有非字符串的事件？ 我已經用文本完成了這個沒有問題，但是任何其他類型的 object 都會給我帶來問題。

例如，我有一個方法在輸入文本時執行，該方法基於輸入的值以及表單上的其他幾個輸入。

<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 本身的新手，所以我不確定通往 go 的最佳途徑是什么……有什么建議嗎？ 謝謝！

Answer 1

• InputNumber 組件應嵌入到 EditForm 組件中，其 Model 屬性設置為您的 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);
}
}

Answer 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

希望這可以幫助...