Blazor コンポーネントを使用してユーザー インターフェイスを作成する
Blazor コンポーネントを使用すると、.NET コードを使用して、動的コンテンツを含む HTML の Web ページまたは部分を定義できます。 Blazor では、JavaScript を使用する代わりに、C# を使用して動的コンテンツを作成できます。
ピザ配達会社で新しい最新の Web サイトを作成する作業をしているとします。 ほとんどのサイト ユーザーのランディング ページになるウェルカム ページから始めます。 そのページに特別なお得な情報や人気のピザを表示する必要があります。
このユニットでは、Blazor でコンポーネントを作成し、それらのコンポーネントに動的コンテンツをレンダリングするコードを記述する方法について説明します。
Blazor コンポーネントについて
Blazor は、開発者が C# コードを記述することで、リッチな対話型ユーザー インターフェイス (UI) を作成するために使用できるフレームワークです。 Blazor を使用すると、サーバー側とクライアント側の両方のすべてのコードに同じ言語を使用できます。 モバイル デバイス上のブラウザーなど、さまざまなブラウザーで表示するためにレンダリングできます。
Note
Blazor アプリのコードには、次の 2 つのホスティング モデルがあります。
- Blazor サーバー: このモデルでは、アプリは ASP.NET Core アプリ内の Web サーバーで実行されます。 クライアント側では、UI の更新、イベント、および JavaScript 呼び出しは、クライアントとサーバー間の SignalR 接続を介して送信されます。 このモジュールでは、このモデルについて説明し、コードを記述します。
- Blazor WebAssembly: このモデルでは、Blazor アプリとその依存関係、および .NET ランタイムがダウンロードされ、ブラウザーで実行されます。
Blazor では、コンポーネントと呼ばれるコードの自己完結型部分から UI を構築 します。 各コンポーネントには、HTML と C# コードの組み合わせを含めることができます。 コンポーネントは Razor 構文を使用して記述され、コードは @code ディレクティブでマークされます。 その他のディレクティブは、変数へのアクセス、値へのバインド、およびその他のレンダリング タスクの実行に使用できます。 アプリがコンパイルされると、HTML とコードがコンポーネント クラスにコンパイルされます。 コンポーネントは、 .razor 拡張子を持つファイルとして書き込まれます。
Note
Razor 構文は、.NET コードを Web ページに埋め込む場合に使用されます。 ASP.NET MVC (モデルビューコントローラー) アプリケーションでは、ファイルの拡張子が .cshtml であるものを使用できます。 Razor 構文は、コンポーネントを記述するために Blazor で使用されます。 これらのコンポーネントには代わりに .razor 拡張機能があり、コントローラーとビューの間に厳密な分離はありません。
Blazor コンポーネントの簡単な例を次に示します。
@page "/index"
<h1>Welcome to Blazing Pizza</h1>
<p>@welcomeMessage</p>
@code {
private string welcomeMessage = "However you like your pizzas, we can deliver them blazing fast!";
}
この例では、 welcomeMessageという名前の文字列変数の値を設定します。 その変数は、HTML 内 <p> タグ内にレンダリングされます。 このユニットの後半では、より複雑な例について説明します。
Blazor コンポーネントを作成する
blazor コマンド ライン インターフェイス (CLI) で テンプレートを使用して Blazor アプリを作成すると、既定でいくつかのコンポーネントが含まれます。
dotnet new blazor -o BlazingPizzaSite
既定のコンポーネントには、 Index.razor ホーム ページと Counter.razor デモ コンポーネントが含まれます。 これらのコンポーネントはどちらも Pages フォルダーに配置されます。 これらのビューは、ニーズに合わせて変更することも、削除して新しいコンポーネントに置き換えることもできます。
既存の Web アプリに新しいコンポーネントを追加するには、次のコマンドを使用します。
dotnet new razorcomponent -n PizzaBrowser -o Pages
-
-nオプションは、追加するコンポーネントの名前を指定します。 次の使用例は、 PizzaBrowser.razor という名前の新しいファイルを追加します。 -
-oオプションは、新しいコンポーネントを格納するフォルダーを指定します。
Important
Blazor コンポーネントの名前は、大文字で始まる必要があります。
コンポーネントを作成したら、Visual Studio Code で編集できるようにコンポーネントを開くことができます。
code Pages/PizzaBrowser
Blazor コンポーネントでコードを記述する
Blazor で UI をビルドする場合、静的な HTML と CSS マークアップを C# コード (多くの場合、同じファイル内) と組み合わせて使用します。 これらの種類のコードを区別するには、Razor 構文を使用します。 Razor 構文には、C# コード、ルーティング パラメーター、バインドされたデータ、インポートされたクラス、およびその他の機能を区切る、 @ 記号がプレフィックス付きのディレクティブが含まれています。
この例のコンポーネントをもう一度考えてみましょう。
@page "/index"
<h1>Welcome to Blazing Pizza</h1>
<p>@welcomeMessage</p>
@code {
private string welcomeMessage = "However you like your pizzas, we can deliver them fast!";
}
HTML マークアップは、 <h1> タグと <p> タグを使用して認識できます。 このマークアップは、コードが動的コンテンツを挿入するページの静的フレームワークです。 Razor マークアップは、次の要素で構成されます。
-
@pageディレクティブ: このディレクティブは Blazor にルート テンプレートを提供します。 実行時に、Blazor は、このテンプレートをユーザーが要求した URL と照合してレンダリングするページを見つけます。 この場合、http://yourdomain.com/indexフォームの URL と一致する可能性があります。 -
@codeディレクティブ: このディレクティブは、次のブロック内のテキストが C# コードであることを宣言します。 1 つのコンポーネントに必要な数のコード ブロックを配置できます。 これらのコード ブロックでコンポーネント クラス メンバーを定義し、計算、データ参照操作、またはその他のソースから値を設定できます。 この場合、コードはwelcomeMessageと呼ばれる 1 つのコンポーネント メンバーを定義し、その文字列値を設定します。 -
メンバー アクセス ディレクティブ: レンダリング ロジックにメンバーの値を含める場合は、
@シンボルの後に、メンバーの名前などの C# 式を使用します。 この場合、@welcomeMessageディレクティブを使用して、welcomeMessageメンバーの値を<p>タグにレンダリングします。
