Blazor Web Assembly のデータバインディングをながめてみる

※ これは 2019/11/15 .NET Core 3.1.0 preview3 時点の情報です

最新版では動作が異なる可能性がありますのでご注意ください

Electron.NET のライブラリを使えばクライアントアプリっぽく ASP.NET Core の Blazor が利用できることはわかりました

今回はあらためて Blazor のサンプルコードを見て、データバインディングの仕方を確認してみます

スポンサードリンク

さっそくサンプルのプロジェクト構成をのぞいてみると

プロジェクト構成

*.razor のファイルが Blazor のコンポーネントファイルのようなので、その中で一番簡単そうな Counter.razor を開いてみます

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

@ を先頭に含まれる箇所は拡張コードらしく、‘‘@code`` が囲んでいる範囲が C# のコードビハインドみたいになっています

<button> タグの中の @onclick=IncrementCount の指定により、ボタンがクリックされたときに IncrementCount() のメソッドが呼ばれるようですね

IncrementCount() のメソッド内で加算された currentCount は @currentCount が埋め込まれた箇所に反映されるというデータバインディングがされるようです

うーん・・・ぱっと見た印象で大小の頭文字が混在していたり、レイアウトとコードが分離しづらくてあんまり読みやすい感じではないですね

この辺はもっと整理して記述する方法があるのかどうか・・・？