はじめに

  • 3 分

あるピザ配達会社が、ピザの一覧表示、注文ページ、その他の機能を含む顧客向けの Blazor Web サイトを最新化するためにあなたを雇います。 Blazor の対話型 Web アプリは .NET を使い、サーバーとクライアント コード間でロジックを共有します。

あなたの更新プログラムで、以下を行いたいと考えています。

  • JavaScript を使用して、レンダリングされた HTML コンポーネントをアニメーション化する。
  • JavaScript ライブラリを使用して、アラート ページをブランド化する。
  • ページのレンダリングが完了した後のイベントに対するアプリの応答方法を変更する。
  • テンプレート コンポーネントを作成して適用し、複数のページを更新する。

このモジュールでは、JavaScript コードと相互運用し、テンプレート化されたコンポーネントを使用して、Blazor のコンポーネント ライフサイクル イベントに応答する方法を学習します。

学習の目的

  • Blazor アプリで .NET コードから JavaScript 関数を呼び出し、JavaScript から .NET コードを呼び出す。
  • Blazor コンポーネントのライフサイクル内のイベントを処理する
  • Blazor アプリに組み込むことができる再利用可能なテンプレート コンポーネントを作成する。

前提条件

  • HTML、CSS、および JavaScript Web 開発に関する知識。
  • C# コードを記述する初心者向け機能。
  • .NET 8.0 SDK がインストールされていること。
  • 統合開発環境 (IDE)。 このモジュールでは Visual Studio Code を使用します。

ヒント

このモジュールでは、ローカル開発に .NET コマンド ライン インターフェイス (CLI) と Visual Studio Code を使用します。 モジュールを完了すると、Visual Studio for Windows、Visual Studio for Mac、または Windows、Linux、Mac で Visual Studio Code を使用して概念を適用し、開発を続行できます。

.NET 8.0 SDK

このモジュールでは、.NET 8.0 SDK を使います。 適切なコマンド ターミナルで次のコマンドを実行して、.NET 8.0 がインストールされていることを確認します。

dotnet --list-sdks

次の例のような出力が表示されます。

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

8 で始まるバージョンが一覧に表示されていることを確実にします。 何も表示されない場合、またはコマンドが見つからない場合は、最新の .NET 8.0 SDK をインストールしてください。