IgbInput – string 型以外とバインディングしたい

IgbInput において、@bind-Value よりデータをバインディングすることができますが、string 型しか対応していません。ここでは double 型や int 型等をバインディングする方法を紹介します。

方法

例として double 型とバインディングする方法を紹介します。

以下のように IgbInput の Value プロパティに、バインディングしたい変数を doubleValue として ToString() メソッドで string 型に変換します。

また ValueChanging イベントで値が変更されるたびに呼び出されるメソッドを OnValueChanging として指定します。

<IgbInput ....
          Value="@doubleValue.ToString()"
          ValueChanging="OnValueChanging" />

C# 側で doubleValue 変数と OnValueChanging メソッドを以下のように定義します。

double doubleValue = 0;
public void OnValueChanging(string args)
{
    if (double.TryParse(args, out var number))
    {
        doubleValue = number;
    }
}

OnValueChanging メソッドは、入力フィールドの値が変更されるたびに呼び出され、受け取った文字列を double 型の値に変換して doubleValue 変数にセットします。

これにより、IgbInputコンポーネントを使用することで、string 型以外のデータ型（この場合は double 型）とのバインディングが可能になります。

実行結果

ユーザーが入力した値をバインディングと同時に画面に表示すると、こちらのような動作になります。