※ これは 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
が埋め込まれた箇所に反映されるというデータバインディングがされるようです
うーん・・・ぱっと見た印象で大小の頭文字が混在していたり、レイアウトとコードが分離しづらくてあんまり読みやすい感じではないですね
この辺はもっと整理して記述する方法があるのかどうか・・・?