Hello Worldデータバインディングを作成する

データバインディングを利用すると、 HTML の値と C# コードの変数の値を 紐づけることができます。 画面は Visual Studio で Blazor WebAssembly アプリケーションの プロジェクトテンプレートを 作成した直後の状態です。 Index.razor でデータバインディングを 使用していきましょう。 まず、不要なコードを削除します。 そして、input タグを ひとつ用意しましょう。 input そして、 データバインディングを設定します。 ＠bind= バインドしたい変数名を指定します。 まだ、変数名はありませんが、 Text という変数を 用意することにしましょう。 これで input タグが完成です。 続いて C# コードで 変数を用意します。 code public な ストリング型の変数、 Text を用意します。 正確には変数ではなく、 プロパティとして実装します。 これで、先ほどの input タグに 表示されていたエラーが消えました。 この値を変更した際に コンソールに出力して 値を確認しましょう。 そのためのボタンを用意します。 button クリックした際に、 処理を行いたいので、 onclick イベントハンドラーを設定します。 ConsoleWriteText という メソッドを呼び出すことにしましょう。 「コンソールに出力」としましょう。 メソッドを追加します。 ConsoleWriteText というメソッドです。 この中でコンソールに Text の値を出力します。 input タグの値が変更された際に この Text の値がどうなっているかを 確認しましょう。 アプリケーションを デバック実行します。 アプリケーションが実行されました。 input タグに値を入れます。 Hello と入力し 「コンソール出力」のボタンを クリックします。 Visual Studio に戻り 出力ウィンドウの値を確認すると、 Text の値を出力した結果が Hello と表示されていることがわかります。 このように HTML の変更が 変数に反映されていることがわかります。 デバックを終了して 今度は変数の方を変更してみましょう。 変数の変更を行うための ボタンを用意します。 同じくbutton onclick です。…