双方向データバインディング

Blazor

■値を別の要素に表示する

@*テキストボックスで入力*@

<input class="form-control" @bind="Title"/>

@*入力値が保存されるプロパティ*@

private string Title { get; set; }

@*入力値をラベルに表示*@

<label class="col-form-label">@Title</label>

 

■即時反映する

上記例の場合、ロストフォーカス時にラベルに反映される。

入力値を即時反映する場合は、"oninput"inputにイベントを追加する。

<input class="form-control"  @bind:event ="oninput" @bind="Title2"  />

(*)この時、bindをbind-valueにすると、inputのvalue要素へのbindとなる

　value要素へのbindの場合、単方向のバインドとなり、画面での入力が

　プロパティに反映されない為、oninputイベントは走らない。

 

■入力値を加工して反映する

入力値はプロパティのSetterを通して保存され、Getterを通して反映される為、

そこに処理を追加してやれば良い。

(*)入力値に"test"を足して反映

　private string _Title2;
    public string Title2
    {
        get { return _Title2; }
        set { _Title2 = value + "test"; }
    }

 

■Styleにバインドする

<input type ="number" @bind ="fontSizeNum" class="form-control" />
<div style="font-size:@(fontSizeNum)pt">確認するよ</div>
@code
{
    private int fontSizeNum{ get; set; } = 12;
}

 

■CSSにバインドする

<input type ="number" @bind ="fontSizeNum" class="form-control" />
<div class="fontSize">確認するよ</div>
<style>
    div.fontSize{color:green;font-size:@(fontSizeNum)pt;}
</style>
@code
{
    private int fontSizeNum{ get; set; } = 12;
}

実際はClass属性をバインド先にし、Classを切り替える使い方が良いが。