Razor記法で分岐・繰り返しを行う

Blazor WebAssembly アプリケーションでは、 Razor 構文の中で if 文といった条件分岐や for 文といった繰り返しを 使用することができます。 画面は index.razor という スラッシュから始まる URL のページで利用される Razor コンポーネントが 表示されています。 ここに Razor 構文で if 文を記述して 使用していきます。 まず、変数を用意します。 ブール型の flag という変数を ひとつ用意しましょう。 値は true に設定しておきます。 続いて Razor 構文で if 文を記述します。 ＠if という書き方から始めます。 その後は通常の If 文と 同じような感覚で記述することが できます。 ここで 変数 flag を使用します。 もしも flag が true なら この中括弧の中のコードを 実行します。 ここには HTML を記述することが できます。 もちろん、Razor 構文を 埋め込むこともできます。 今回はこのまま true と p タグで表示することに しましょう。 このアプリケーションを 実行してみます。 アプリケーションの実行結果です。 左側のナビゲーションなどは テンプレートのレイアウトで 埋め込まれている部分なので、 白背景の true と書かれた部分を 注目してください。 このように True という文字が 表示されていることがわかります。 もうひとつ、繰り返しを 実行してみましょう。 また、新しく変数をひとつ用意します。 ストリング型の配列をひとつ 用意します。 名前は stringArray としましょう。 このストリング型の Array は ２つの文字を持ちます。 abc と def です。 この変数 stringArray を 繰り返しで取り出して 値を表示してみます。 リストにしたいので、 ul タグを、まず、記述しましょう。 そしてこの中で繰り返しを実行します。 ＠ から始まる for または foreach を利用します。 ここからは通常の C# の foreach 文と同様の書き方ができます。 まず、取り出した値を受け取る変数 str を用意します。 そして、 そして、取り出すための配列を記述します。 この中でも HTML を書くことができます。 ul の中に…