現在プロジェクトを起動するたびに、既定のパスは / になります。しかし、現時点ではこのルートに適用する Component はなく、手動で Post に切り替えるのは少々面倒です。また、Menu のアイコンが名称と一致していないので、調整していきましょう。
まずアイコンを変更します。font-awesome は現在会員制で、ログインしないと無料のアイコンセットを生成できないため、筆者は bootstrap の icon を使用します。まず bootstrap の icon ページから zip ファイルをダウンロードし（ファイルをダウンロードしたくない場合は CDN を直接参照してください）、ファイルを解凍して wwwroot に配置します。_Layout.cshtml で bootstrap-icons.css を参照し、公式サイトでお好みのアイコンを検索して適用します。筆者はさらにスタイル調整も行いました。
次に、Blazor Server プロジェクトの launchSettings.json ファイルを開き、profiles 内の BlazorServer に次の行を追加します。"launchUrl": "Post"。
Day06 でバインディングについて触れましたが、その時は form を表示することが目的だったので軽く触れただけでした。ここで詳しく説明します。
Blazor のデータバインディングには、単方向バインディング (one way binding) と双方向バインディング (two way binding) があります。単方向バインディングは、ページ上で @variable と記述し、データがあればそれをそのまま表示します。
双方向バインディングでは、@bind-value を使用して input 内のデータとページを結びつけ、ページに入力した内容がデータに逆向きに影響します。
Angular を学んだことがある方には馴染み深いでしょう。[ngModel] と [(ngModel)] の用途と同じで、名前が変わっただけです。
では、Blazor に Angular の (click) イベントバインディングのようなものはあるのでしょうか？もちろんあります。ただし、<InputText> Component を使用すると EventCallBack のような複雑な内容になるため、筆者はここでは単純な <input> 要素を使用し、EventCallBack については後で説明する際に改めて触れます。
まず <InputText> を <input> に置き換えます。次に @bind-Value を @bind に変更し、さらに @bind:event を追加します。値は onchange や oninput などの HTML イベント名で、これらのイベントは MDN で確認できます。その後、Web ページの入力フィールドに内容を入力すると、下の文字が即座に変化するのが確認できます。フォーカスが input 要素に残っていても、下の内容が変わっていることがわかります。
ただし、oninput と onchange の使い分けは慎重に行う必要があります。oninput を number 型のデータにバインドした場合、ユーザーが 1.5 と入力した瞬間に 1 に変更されてしまい、ユーザーを混乱させる可能性があります。onchange を使用すれば、ユーザーがフォーカスを外した後に 1.5 が 1 に変更されます。どうしても oninput を使わなければならない場合は、バインドするデータを nullable または文字列にし、getter/setter を使って不正データの処理を自前で実装することもできます。
では、Blazor には Angular の pipe のように数値や日時などのデータ形式を変更する機能はあるのでしょうか？現在は @bind:format バインディングを使用して日付形式を変更できます。まず PostModel に CreateDateTime を追加し、次にタイトルの div をコピーして貼り付け、label と @bind のバインドデータを変更し、@bind:event を @bind:format に変更すると、指定した日付形式で表示されます。
注意すべき点として、Blazor には <select> に対応する Component はありません。なぜなら、HTML の attribute は null を取れないからです。null に最も近い概念は value という attribute 自体を削除することですが、value のない <option> を選択すると、ブラウザはその <option> のテキストを value として扱います。
本記事の参照：
注：本記事のコードは .NET 6 + Visual Studio 2022 でリファクタリングされています。原文のリンクからリファクタリング後のコードと比較して学習できます。ご愛読ありがとうございます。原作者をサポートしてください。