コース: Blazor 基本講座

今すぐコースを受講しましょう

今すぐ登録して、23,100件以上登録されている、業界エキスパート指導のコースを受講しましょう。

Razor記法の基礎を学ぶ

Razor記法の基礎を学ぶ

Blazor WebAssembly アプリケーションでは HTML に動的にプログラムコードの 値を埋め込むことができます。 画面には、シンプルな Blazor の コンポーネントが表示されています。 @page でこのページの URL が スラッシュから始まるということを 定義しています。 その後は HTML で Hello Razor World と 表示されています。 動的に値を埋め込んではいません。 このアプリケーションを 実行してみます。 アプリケーションの実行画面です。 ファイルには記述されていない 左のナビゲーションなどが 表示されていますが、 これはレイアウトの機能で 表示されているもので、 中央に表示されている Hello Razor World が先ほどの ファイルで記述していたコードになります。 先ほどのコードを少し変更してみました。 まずは @ から始まる部分で C# のコードとして変数を定義しています。 ストリング型の world という変数に Razor World という値を 設定しています。 続いて HTML の部分ですが、 Hello の後に再び @ から始まる コードが続きます。 この @world は 4行目の World の値を埋め込むという 記述です。 それでは実行して 動作を確認してみましょう。 実行すると、このように @world という部分に Razor World という変数の値が 埋め込まれていることがわかります。 例えば、この @world の後に 何か文字を繋げたいとします。 Hello Razor WorldSample と 表示したい、 このように sample と打ち込むと このコードはエラーになってしまいます。 変数 World ではなく、 変数 worldsample という 変数が存在しないというエラーです。 world だけを変数としたい場合は このように括弧で括ることで エラーがなくなります。 実行すると、 このように Hello Razor WorldSample と 表示することができました。 @ から続く変数の後に 文字列を繋げたい場合は、 このように括弧で括ります。 変数以外にも、このように クラスのプロパティやメソッド、 スタティックなフィールドなどを 使用することができます。…

目次