次の方法で共有

ASP.NET Core Blazor プロジェクトの構造

注意

これは、この記事の最新バージョンではありません。 現在のリリースについては、 この記事の .NET 10 バージョンを参照してください。

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。 詳細については、 .NET および .NET Core サポート ポリシーを参照してください。 現在のリリースについては、 この記事の .NET 10 バージョンを参照してください。

この記事では、Blazor プロジェクト テンプレートから生成された Blazor アプリを構成するファイルとフォルダーについて説明します。

Blazor Web App

Blazor Web App プロジェクト テンプレート: blazor

Blazor Web App プロジェクト テンプレートは、Razor コンポーネント (.razor) を使用してサーバー側レンダリングとクライアント側レンダリングの両方の、任意のスタイルの Web UI を構築するための単一の開始点を提供します。 Blazor ServerとBlazor WebAssemblyの長所と、サーバー側およびクライアント側のレンダリング、ストリーミング レンダリング、強化されたナビゲーションとフォーム処理、およびコンポーネントごとにBlazor ServerまたはBlazor WebAssemblyを使用して対話機能を追加する機能が組み合わせられています。

クライアント側レンダリング (CSR) と対話型サーバー側レンダリング (対話型 SSR) の両方がアプリの作成時に選択されている場合、プロジェクト テンプレートでは対話型自動レンダリング モードを使用します。 自動レンダリング モードでは、.NET アプリ バンドルとランタイムがブラウザーにダウンロードされる間、最初に対話型 SSR が使われます。 .NET WebAssembly ランタイムがアクティブになると、レンダリングが CSR に切り替わります。

Blazor Web App テンプレートによって、1 つのプロジェクトを使用する静的および対話型の両方のサーバー側レンダリングが有効になります。 対話型の WebAssembly レンダリングも有効にした場合、プロジェクトに WebAssembly ベース コンポーネント用の追加のクライアント プロジェクト (.Client) が含められます。 クライアント プロジェクトからビルドされた出力がブラウザーにダウンロードされ、クライアントで実行されます。 対話型 WebAssembly または対話型自動レンダリング モードを使用するコンポーネントは、.Client プロジェクトに配置する必要があります。

メイン プロジェクトは標準の ASP.NET Core プロジェクトであるため、.Client プロジェクトのコンポーネント フォルダー構造は Blazor Web App のメイン プロジェクト フォルダー構造とは異なります。 メイン プロジェクトでは、Blazor に関連のない ASP.NET Core プロジェクトの他の資産を考慮する必要があります。 ただし、.Client プロジェクトで必要なコンポーネント フォルダー構造を使用することもできます。 必要に応じて、.Client プロジェクト内のメイン プロジェクトのコンポーネント フォルダー レイアウトを自由にミラーできます。 プロジェクト テンプレートが使用するフォルダーとは異なるフォルダーにコンポーネントを移動する場合、名前空間ではレイアウト ファイルなどのアセットの調整が必要になる場合があることに注意してください。

コンポーネントとレンダリング モードの詳細については、ASP.NET Core Razor コンポーネントおよびコア Blazor レンダー モード ASP.NET 記事をご覧ください。

アプリの作成時に選択された対話型レンダリング モードに基づいて、Layout フォルダーは、Components フォルダー内のサーバー プロジェクト内か、.Client プロジェクトのルートにあります。 フォルダーには、次のレイアウト コンポーネントとスタイルシートが含まれています。

  • MainLayout コンポーネント (MainLayout.razor):は。アプリのレイアウト コンポーネント。
  • MainLayout.razor.cssは、アプリのメイン レイアウト用に併置された (コンポーネントの横) スタイルシートです。
  • NavMenuコンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します このコンポーネントは、NavLinkコンポーネント (NavLink) を含み、他の Razor コンポーネントへのナビゲーションリンクを表示します。 NavLink コンポーネントは、現在表示されているコンポーネントをユーザーに示します。
  • NavMenu.razor.cssは、アプリのナビゲーション メニューに併置されたスタイルシートです。
  • ReconnectModal コンポーネントは、UI にサーバー側の接続状態を反映し、アプリの対話型レンダリング モードが Interactive Server または Interactive Auto である場合に含まれます。詳細については、ASP.NET Core BlazorSignalR ガイダンスを参照してください。
  • ReconnectModal.razor.cssは、ReconnectModal コンポーネントの併置されたスタイルシートです。
  • ReconnectModal.razor.jsは、ReconnectModal コンポーネントの併置された JavaScript ファイルです。
  • MainLayout コンポーネント (MainLayout.razor):は。アプリのレイアウト コンポーネント。
  • MainLayout.razor.cssは、アプリのメイン レイアウト用に併置された (コンポーネントの横) スタイルシートです。
  • NavMenuコンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します このコンポーネントは、NavLinkコンポーネント (NavLink) を含み、他の Razor コンポーネントへのナビゲーションリンクを表示します。 NavLink コンポーネントは、現在表示されているコンポーネントをユーザーに示します。
  • NavMenu.razor.cssは、アプリのナビゲーション メニューに併置されたスタイルシートです。

Routes コンポーネント (Routes.razor) は、サーバー プロジェクトまたは .Client プロジェクト内にあり、Router コンポーネントを使用してルーティングを設定します。 クライアント側の対話型コンポーネントについては、Router コンポーネントがブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

サーバー プロジェクトの Components フォルダーには、アプリのサーバー側の Razor コンポーネントが格納されます。 共有コンポーネントは多くの場合、Components フォルダーのルートに配置されますが、レイアウトコンポーネントとページ コンポーネントは通常、Components フォルダー内のフォルダーに配置されます。

フォルダー:Components/Pages アプリのルーティング可能なサーバー側の Razor コンポーネント が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。

App コンポーネント (App.razor): HTML <head> マークアップ、 Routes コンポーネント、および Blazor<script> タグを含むアプリのルート コンポーネント。 ルート コンポーネントは、アプリが読み込む最初のコンポーネントです。

各サーバーおよび _Imports.razor プロジェクトの .Client ファイルには、名前空間の Razor ディレクティブなど、いずれかのプロジェクトのコンポーネント Razor 共通の @using ディレクティブが含まれています。

Properties フォルダーは、開発環境の構成をlaunchSettings.json ファイル内に保持します。

注意

http プロファイルは、https ファイル内の launchSettings.json プロファイルより前にあります。 .NET CLI を使用してアプリを実行すると、最初に見つかるプロファイルが http であるため、アプリは HTTP エンドポイントで実行されます。 プロファイルの順序により、Linux および macOS ユーザーに HTTPS を導入する移行が簡単になります。 -lp https コマンド (または --launch-profile https) に dotnet watch や dotnet run オプションを渡さずに .NET CLI でアプリを起動する場合は、単に https プロファイルをファイル内の http プロファイルより上に配置してください。

サーバー プロジェクトの wwwroot フォルダーは、アプリのパブリック静的アセットを保持するサーバー プロジェクトの Web Root フォルダーです。

サーバー プロジェクトの Program.cs ファイル: ASP.NET Core Web アプリケーションのホストを設定し、アプリのスタートアップ ロジック (サービス登録、構成、ログ、要求処理パイプラインなど) を含んでいるプロジェクトのエントリ ポイント。

  • Razor コンポーネントのサービスは、AddRazorComponents を呼び出すことによって追加されます。 AddInteractiveServerComponents によって、対話型サーバー コンポーネントのレンダリングをサポートするサービスが追加されます。 AddInteractiveWebAssemblyComponents によって、対話型 WebAssembly コンポーネントのレンダリングをサポートするサービスが追加されます。
  • MapRazorComponents は使用可能なコンポーネントを検出し、アプリのルート コンポーネント (読み込む最初のコンポーネント) を特定します。これは既定では App コンポーネント (App.razor) です。 AddInteractiveServerRenderMode では、アプリの対話型サーバー側レンダリング (対話型 SSR) を構成します。 AddInteractiveWebAssemblyRenderMode では、アプリの対話型 WebAssembly レンダリング モードを構成します。

アプリ設定ファイル (appsettings.Development.json、appsettings.json):.Client サーバー プロジェクトの構成設定を指定します。 サーバー プロジェクトでは、設定ファイルはプロジェクトのルートにあります。 .Client プロジェクトでは、設定ファイルは Web Root フォルダー wwwroot から使用されます。

.Client プロジェクト:

  • Pages フォルダーには、アプリのルーティング可能なクライアント側の Razor コンポーネントが含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。

  • wwwroot フォルダー: アプリのパブリックな静的アセットを含む、 プロジェクトの .Client フォルダー。

  • Program.cs ファイル: WebAssembly ホストを設定し、プロジェクトのスタートアップ ロジック (サービス登録、構成、ログ、要求処理パイプラインなど) を含んでいるプロジェクトのエントリ ポイント。

追加のオプションが構成されている場合は、Blazor Web App プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

Blazor Server

Blazor Server プロジェクト テンプレート: blazorserver、blazorserver-empty

Blazor Server テンプレートによって、Blazor Server アプリの初期ファイルとディレクトリの構造が作成されます。

  • blazorserver テンプレートを使用する場合、アプリは以下と共に設定されます。
    • 天気予報サービス (FetchData) からデータを読み込む WeatherForecastService コンポーネントと、Counter コンポーネントを使用したユーザー操作のためのデモ コード。
    • Bootstrap フロントエンド ツールキット。
  • blazorserver-empty テンプレートを使用する場合、アプリはデモ コードと Bootstrap なしで作成されます。

プロジェクトの構造:

  • Data フォルダー:アプリの WeatherForecast コンポーネントに気象データの例を提供する、WeatherForecastService クラスと FetchData の実装が含まれます。

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) と、Razor アプリのルート Blazor Server ページが含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには以下が含まれています。

    • _Host.cshtml: Razor ページとして実装されるアプリのルート ページ。
      • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
      • [ホスト] ページは、ルート App コンポーネント (App.razor) を表示する場所を指定します。
    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • Error コンポーネント (Error.razor): アプリでハンドルされない例外が発生したときに表示されます。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。

  • Properties フォルダー: 開発環境の構成を launchSettings.json ファイル内に保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント。
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の NavLink コンポーネントに表示する (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。

  • wwwroot フォルダー: アプリのパブリックな静的アセットを含む、アプリの Web ルート フォルダー。

  • _Imports.razor:名前空間の Razor ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な @using ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • appsettings.json および環境アプリ設定ファイル:アプリの構成設定を指定します。

  • Program.cs: ASP.NET Core ホストを設定するアプリのエントリ ポイントであり、サービス登録や要求処理パイプライン構成など、アプリのスタートアップ ロジックが含まれています。

    • アプリの依存関係の挿入 (DI) サービスを指定します。 AddServerSideBlazor を呼び出すことによってサービスが追加されます。WeatherForecastService は、サンプルの FetchData コンポーネントで使用するためにサービス コンテナーに追加されます。
    • アプリの要求処理パイプラインを構成します。
      • MapBlazorHub は、ブラウザーとのリアルタイム接続用のエンドポイントを設定するために呼び出されます。 この接続は SignalR で作成されます。これは、アプリにリアルタイム Web 機能を追加するためのフレームワークです。
      • MapFallbackToPage("/_Host") は、アプリ (Pages/_Host.cshtml) のルート ページを設定し、ナビゲーションを有効にするために呼び出されます。

追加のオプションが構成されている場合は、Blazor Server プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

Blazor Server プロジェクト テンプレート: blazorserver

Blazor Server テンプレートによって、Blazor Server アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、登録済みサービスからデータを読み込む FetchData コンポーネント、WeatherForecastService、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Data フォルダー:アプリの WeatherForecast コンポーネントに気象データの例を提供する、WeatherForecastService クラスと FetchData の実装が含まれます。

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) と、Razor アプリのルート Blazor Server ページが含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには以下が含まれています。

    • _Host.cshtml: Razor ページとして実装されるアプリのルート ページ。
      • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
      • [ホスト] ページは、ルート App コンポーネント (App.razor) を表示する場所を指定します。
    • _Layout.cshtml: アプリの _Host.cshtml ルート ページのレイアウト ページ。
    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • Error コンポーネント (Error.razor): アプリでハンドルされない例外が発生したときに表示されます。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。

  • Properties フォルダー: 開発環境の構成を launchSettings.json ファイル内に保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント。
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の NavLink コンポーネントに表示する (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。

  • wwwroot フォルダー: アプリのパブリックな静的アセットを含む、アプリの Web ルート フォルダー。

  • _Imports.razor:名前空間の Razor ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な @using ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • appsettings.json および環境アプリ設定ファイル:アプリの構成設定を指定します。

  • Program.cs: ASP.NET Core ホストを設定するアプリのエントリ ポイントであり、サービス登録や要求処理パイプライン構成など、アプリのスタートアップ ロジックが含まれています。

    • アプリの依存関係の挿入 (DI) サービスを指定します。 AddServerSideBlazor を呼び出すことによってサービスが追加されます。WeatherForecastService は、サンプルの FetchData コンポーネントで使用するためにサービス コンテナーに追加されます。
    • アプリの要求処理パイプラインを構成します。
      • MapBlazorHub は、ブラウザーとのリアルタイム接続用のエンドポイントを設定するために呼び出されます。 この接続は SignalR で作成されます。これは、アプリにリアルタイム Web 機能を追加するためのフレームワークです。
      • MapFallbackToPage("/_Host") は、アプリ (Pages/_Host.cshtml) のルート ページを設定し、ナビゲーションを有効にするために呼び出されます。

追加のオプションが構成されている場合は、Blazor Server プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

Blazor Server プロジェクト テンプレート: blazorserver

Blazor Server テンプレートによって、Blazor Server アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、登録済みサービスからデータを読み込む FetchData コンポーネント、WeatherForecastService、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Data フォルダー:アプリの WeatherForecast コンポーネントに気象データの例を提供する、WeatherForecastService クラスと FetchData の実装が含まれます。

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) と、Razor アプリのルート Blazor Server ページが含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには以下が含まれています。

    • _Host.cshtml: Razor ページとして実装されるアプリのルート ページ。
      • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
      • [ホスト] ページは、ルート App コンポーネント (App.razor) を表示する場所を指定します。
    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • Error コンポーネント (Error.razor): アプリでハンドルされない例外が発生したときに表示されます。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。

  • Properties フォルダー: 開発環境の構成を launchSettings.json ファイル内に保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント。
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の NavLink コンポーネントに表示する (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。

  • wwwroot フォルダー: アプリのパブリックな静的アセットを含む、アプリの Web ルート フォルダー。

  • _Imports.razor:名前空間の Razor ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な @using ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • appsettings.json および環境アプリ設定ファイル:アプリの構成設定を指定します。

  • Program.cs: ASP.NET Core ホストを設定するアプリのエントリ ポイント。

  • Startup.cs: アプリのスタートアップ ロジックを含みます。 Startup クラスには、次の 2 つのメソッドがあります。

    • ConfigureServices:アプリの依存関係の挿入 (DI)サービスを構成します。 AddServerSideBlazor を呼び出すことによってサービスが追加されます。WeatherForecastService は、サンプルの FetchData コンポーネントで使用するためにサービス コンテナーに追加されます。
    • Configure: アプリの要求処理パイプラインを構成します。
      • MapBlazorHub は、ブラウザーとのリアルタイム接続用のエンドポイントを設定するために呼び出されます。 この接続は SignalR で作成されます。これは、アプリにリアルタイム Web 機能を追加するためのフレームワークです。
      • MapFallbackToPage("/_Host") は、アプリ (Pages/_Host.cshtml) のルート ページを設定し、ナビゲーションを有効にするために呼び出されます。

追加のオプションが構成されている場合は、Blazor Server プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

Blazor Server プロジェクト テンプレート: blazorserver

Blazor Server テンプレートによって、Blazor Server アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、登録済みサービスからデータを読み込む FetchData コンポーネント、WeatherForecastService、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Data フォルダー:アプリの WeatherForecast コンポーネントに気象データの例を提供する、WeatherForecastService クラスと FetchData の実装が含まれます。

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) と、Razor アプリのルート Blazor Server ページが含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには以下が含まれています。

    • _Host.cshtml: Razor ページとして実装されるアプリのルート ページ。
      • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
      • [ホスト] ページは、ルート App コンポーネント (App.razor) を表示する場所を指定します。
    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • Error コンポーネント (Error.razor): アプリでハンドルされない例外が発生したときに表示されます。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。

  • Properties フォルダー: 開発環境の構成を launchSettings.json ファイル内に保持します。

  • Shared フォルダー:次の共有コンポーネントが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の NavLink コンポーネントに表示する (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。

  • wwwroot フォルダー: アプリのパブリックな静的アセットを含む、アプリの Web ルート フォルダー。

  • _Imports.razor:名前空間の Razor ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な @using ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • appsettings.json および環境アプリ設定ファイル:アプリの構成設定を指定します。

  • Program.cs: ASP.NET Core ホストを設定するアプリのエントリ ポイント。

  • Startup.cs: アプリのスタートアップ ロジックを含みます。 Startup クラスには、次の 2 つのメソッドがあります。

    • ConfigureServices:アプリの依存関係の挿入 (DI)サービスを構成します。 AddServerSideBlazor を呼び出すことによってサービスが追加されます。WeatherForecastService は、サンプルの FetchData コンポーネントで使用するためにサービス コンテナーに追加されます。
    • Configure: アプリの要求処理パイプラインを構成します。
      • MapBlazorHub は、ブラウザーとのリアルタイム接続用のエンドポイントを設定するために呼び出されます。 この接続は SignalR で作成されます。これは、アプリにリアルタイム Web 機能を追加するためのフレームワークです。
      • MapFallbackToPage("/_Host") は、アプリ (Pages/_Host.cshtml) のルート ページを設定し、ナビゲーションを有効にするために呼び出されます。

追加のオプションが構成されている場合は、Blazor Server プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

スタンドアロン Blazor WebAssembly

スタンドアロン Blazor WebAssembly プロジェクトのテンプレート: blazorwasm

Blazor WebAssembly テンプレートは、次の場合にスタンドアロン Blazor WebAssembly アプリの初期ファイルとディレクトリ構造を作成します。

  • blazorwasm テンプレートを使用する場合、アプリは以下と共に設定されます。
    • 静的資産 (Weather) からデータを読み込む weather.json コンポーネントと、Counter コンポーネントを使用したユーザー操作のためのデモ コード。
    • Bootstrap フロントエンド ツールキット。
  • blazorwasm テンプレートは、サンプル ページとスタイル設定がなくても生成できます。

プロジェクトの構造:

  • Layout フォルダー: 次のレイアウト コンポーネントとスタイルシートが含まれています。
    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント。
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の NavLink コンポーネントに表示する (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには、次のコンポーネントが含まれています。
    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。
    • Weather コンポーネント (Weather.razor): 天気のページを実装します。

  • _Imports.razor:名前空間の Razor ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な @using ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • Properties フォルダー: 開発環境の構成を launchSettings.json ファイル内に保持します。

    注意

    http プロファイルは、https ファイル内の launchSettings.json プロファイルより前にあります。 .NET CLI を使用してアプリを実行すると、最初に見つかるプロファイルが http であるため、アプリは HTTP エンドポイントで実行されます。 プロファイルの順序により、Linux および macOS ユーザーに HTTPS を導入する移行が簡単になります。 -lp https コマンド (または --launch-profile https) に dotnet watch や dotnet run オプションを渡さずに .NET CLI でアプリを起動する場合は、単に https プロファイルをファイル内の http プロファイルより上に配置してください。

  • wwwroot フォルダー: 構成設定のための appsettings.json と環境アプリ設定ファイル、サンプルの天気データ () などのアプリのパブリックな静的アセットが含まれる、アプリの sample-data/weather.json フォルダー。 index.html Web ページは、HTML ページとして実装されるアプリのルート ページです。

    • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
    • このページは、ルート App コンポーネントを表示する場所を指定します。 コンポーネントは、div の id (app) を持つ <div id="app">Loading...</div> DOM 要素の位置にレンダリングされます。

  • Program.cs: WebAssembly ホストを設定するアプリのエントリ ポイントです。

    • App コンポーネントは、アプリのルート コンポーネントです。 App コンポーネントは、ルート コンポーネント コレクション (div) に対する id の app (<div id="app">Loading...</div> の wwwroot/index.html) を持つ builder.RootComponents.Add<App>("#app") DOM 要素として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

追加のオプションが構成されている場合は、Blazor WebAssembly プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

Blazor WebAssembly

Blazor WebAssembly プロジェクト テンプレート: blazorwasm、blazorwasm-empty

Blazor WebAssembly テンプレートによって、Blazor WebAssembly アプリの初期ファイルとディレクトリの構造が作成されます。

  • blazorwasm テンプレートを使用する場合、アプリは以下と共に設定されます。
    • 静的資産 (FetchData) からデータを読み込む weather.json コンポーネントと、Counter コンポーネントを使用したユーザー操作のためのデモ コード。
    • Bootstrap フロントエンド ツールキット。
  • blazorwasm-empty テンプレートを使用する場合、アプリはデモ コードと Bootstrap なしで作成されます。

プロジェクトの構造:

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには、以下のコンポーネントが含まれています。

    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。

  • Properties フォルダー: 開発環境の構成を launchSettings.json ファイル内に保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント。
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の NavLink コンポーネントに表示する (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor) (".NET 7 以前の ASP.NET Core"): アンケート用コンポーネント。Blazor

  • wwwroot フォルダー: アプリのパブリックな静的アセットが含まれる、アプリの Web ルート フォルダー。appsettings.jsonのための と環境アプリ設定ファイルなどが含まれます。 index.html Web ページは、HTML ページとして実装されるアプリのルート ページです。

    • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
    • このページは、ルート App コンポーネントを表示する場所を指定します。 コンポーネントは、div の id (app) を持つ <div id="app">Loading...</div> DOM 要素の位置にレンダリングされます。

  • _Imports.razor:名前空間の Razor ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な @using ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • Program.cs: WebAssembly ホストを設定するアプリのエントリ ポイントです。

    • App コンポーネントは、アプリのルート コンポーネントです。 App コンポーネントは、ルート コンポーネント コレクション (div) に対する id の app (<div id="app">Loading...</div> の wwwroot/index.html) を持つ builder.RootComponents.Add<App>("#app") DOM 要素として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

追加のオプションが構成されている場合は、Blazor WebAssembly プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

"ホストされた Blazor WebAssembly ソリューション" には、次の ASP.NET Core プロジェクトが含まれています。

  • "Client": Blazor WebAssembly アプリ。
  • "Server": Blazor WebAssembly アプリと気象データをクライアントに提供するアプリ。
  • "Shared": 共通のクラス、メソッド、リソースを保持するプロジェクト。

ソリューションは、Visual Studio の Blazor WebAssembly プロジェクト テンプレートから、[ASP.NET Core でホストされた] チェックボックスをオンにして、または .NET CLI の -ho|--hosted コマンドを使って dotnet new blazorwasm オプションを指定して生成されます。 詳しくは、「ASP.NET Core Blazor 用のツール」をご覧ください。

ホストされた Blazor Webassembly ソリューションのクライアント側アプリのプロジェクト構造 ("Client" プロジェクト) は、スタンドアロン Blazor WebAssembly アプリのプロジェクト構造と同じです。 ホストされた Blazor WebAssembly ソリューションの追加のファイルは次のとおりです。

  • "Server" プロジェクトには、"Controllers/WeatherForecastController.cs" プロジェクトの Client コンポーネントに気象データを返す天気予報コントローラーが FetchData で含まれています。
  • "Shared" プロジェクトには、"WeatherForecast.cs" プロジェクトと "Client" プロジェクトの気象データを表す天気予報クラスが Server で含まれています。

Blazor WebAssembly

Blazor WebAssembly プロジェクト テンプレート: blazorwasm

Blazor WebAssembly テンプレートによって、Blazor WebAssembly アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、静的資産からデータを読み込む FetchData コンポーネント、weather.json、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには、以下のコンポーネントが含まれています。

    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。

  • Properties フォルダー: 開発環境の構成を launchSettings.json ファイル内に保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント。
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の NavLink コンポーネントに表示する (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。

  • wwwroot フォルダー: アプリのパブリックな静的アセットが含まれる、アプリの Web ルート フォルダー。appsettings.jsonのための と環境アプリ設定ファイルなどが含まれます。 index.html Web ページは、HTML ページとして実装されるアプリのルート ページです。

    • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
    • このページは、ルート App コンポーネントを表示する場所を指定します。 コンポーネントは、div の id (app) を持つ <div id="app">Loading...</div> DOM 要素の位置にレンダリングされます。

  • _Imports.razor:名前空間の Razor ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な @using ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • Program.cs: WebAssembly ホストを設定するアプリのエントリ ポイントです。

    • App コンポーネントは、アプリのルート コンポーネントです。 App コンポーネントは、ルート コンポーネント コレクション (div) に対する id の app (<div id="app">Loading...</div> の wwwroot/index.html) を持つ builder.RootComponents.Add<App>("#app") DOM 要素として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

追加のオプションが構成されている場合は、Blazor WebAssembly プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

"ホストされた Blazor WebAssembly ソリューション" には、次の ASP.NET Core プロジェクトが含まれています。

  • "Client": Blazor WebAssembly アプリ。
  • "Server": Blazor WebAssembly アプリと気象データをクライアントに提供するアプリ。
  • "Shared": 共通のクラス、メソッド、リソースを保持するプロジェクト。

ソリューションは、Visual Studio の Blazor WebAssembly プロジェクト テンプレートから、[ASP.NET Core でホストされた] チェックボックスをオンにして、または .NET CLI の -ho|--hosted コマンドを使って dotnet new blazorwasm オプションを指定して生成されます。 詳しくは、「ASP.NET Core Blazor 用のツール」をご覧ください。

ホストされた Blazor Webassembly ソリューションのクライアント側アプリのプロジェクト構造 ("Client" プロジェクト) は、スタンドアロン Blazor WebAssembly アプリのプロジェクト構造と同じです。 ホストされた Blazor WebAssembly ソリューションの追加のファイルは次のとおりです。

  • "Server" プロジェクトには、"Controllers/WeatherForecastController.cs" プロジェクトの Client コンポーネントに気象データを返す天気予報コントローラーが FetchData で含まれています。
  • "Shared" プロジェクトには、"WeatherForecast.cs" プロジェクトと "Client" プロジェクトの気象データを表す天気予報クラスが Server で含まれています。

Blazor WebAssembly

Blazor WebAssembly プロジェクト テンプレート: blazorwasm

Blazor WebAssembly テンプレートによって、Blazor WebAssembly アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、静的資産からデータを読み込む FetchData コンポーネント、weather.json、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには、以下のコンポーネントが含まれています。

    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。

  • Properties フォルダー: 開発環境の構成を launchSettings.json ファイル内に保持します。

  • Shared フォルダー:次の共有コンポーネントおよびスタイルシートが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント。
    • MainLayout.razor.css: アプリのメイン レイアウト用のスタイルシート。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の NavLink コンポーネントに表示する (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • NavMenu.razor.css: アプリのナビゲーション メニュー用のスタイルシート。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。

  • wwwroot フォルダー: アプリのパブリックな静的アセットが含まれる、アプリの Web ルート フォルダー。appsettings.jsonのための と環境アプリ設定ファイルなどが含まれます。 index.html Web ページは、HTML ページとして実装されるアプリのルート ページです。

    • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
    • このページは、ルート App コンポーネントを表示する場所を指定します。 コンポーネントは、div の id (app) を持つ <div id="app">Loading...</div> DOM 要素の位置にレンダリングされます。

  • _Imports.razor:名前空間の Razor ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な @using ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • Program.cs: WebAssembly ホストを設定するアプリのエントリ ポイントです。

    • App コンポーネントは、アプリのルート コンポーネントです。 App コンポーネントは、ルート コンポーネント コレクション (div) に対する id の app (<div id="app">Loading...</div> の wwwroot/index.html) を持つ builder.RootComponents.Add<App>("#app") DOM 要素として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

追加のオプションが構成されている場合は、Blazor WebAssembly プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

"ホストされた Blazor WebAssembly ソリューション" には、次の ASP.NET Core プロジェクトが含まれています。

  • "Client": Blazor WebAssembly アプリ。
  • "Server": Blazor WebAssembly アプリと気象データをクライアントに提供するアプリ。
  • "Shared": 共通のクラス、メソッド、リソースを保持するプロジェクト。

ソリューションは、Visual Studio の Blazor WebAssembly プロジェクト テンプレートから、[ASP.NET Core でホストされた] チェックボックスをオンにして、または .NET CLI の -ho|--hosted コマンドを使って dotnet new blazorwasm オプションを指定して生成されます。 詳しくは、「ASP.NET Core Blazor 用のツール」をご覧ください。

ホストされた Blazor Webassembly ソリューションのクライアント側アプリのプロジェクト構造 ("Client" プロジェクト) は、スタンドアロン Blazor WebAssembly アプリのプロジェクト構造と同じです。 ホストされた Blazor WebAssembly ソリューションの追加のファイルは次のとおりです。

  • "Server" プロジェクトには、"Controllers/WeatherForecastController.cs" プロジェクトの Client コンポーネントに気象データを返す天気予報コントローラーが FetchData で含まれています。
  • "Shared" プロジェクトには、"WeatherForecast.cs" プロジェクトと "Client" プロジェクトの気象データを表す天気予報クラスが Server で含まれています。

Blazor WebAssembly

Blazor WebAssembly プロジェクト テンプレート: blazorwasm

Blazor WebAssembly テンプレートによって、Blazor WebAssembly アプリの初期ファイルとディレクトリの構造が作成されます。 このアプリには、静的資産からデータを読み込む FetchData コンポーネント、weather.json、および Counter コンポーネントとのユーザーの対話のためのデモンストレーション コードが設定されます。

  • Pages フォルダー: Blazor アプリのルーティング可能な Razor コンポーネント (.razor) が含まれています。 各ページのルートは、@page ディレクティブを使用して指定します。 テンプレートには、以下のコンポーネントが含まれています。

    • Counter コンポーネント (Counter.razor): カウンター ページを実装します。
    • FetchData コンポーネント (FetchData.razor): フェッチ データ ページを実装します。
    • Index コンポーネント (Index.razor): Home ページを実装します。

  • Properties フォルダー: 開発環境の構成を launchSettings.json ファイル内に保持します。

  • Shared フォルダー:次の共有コンポーネントが含まれています。

    • MainLayout コンポーネント (MainLayout.razor): アプリのレイアウト コンポーネント。
    • NavMenu コンポーネント (NavMenu.razor): サイドバー ナビゲーションを実装します。 ナビゲーション リンクを他の NavLink コンポーネントに表示する (NavLink) が含まれます。 NavLink コンポーネントは、そのコンポーネントが読み込まれると、自動的に選択された状態を示します。これは、ユーザーが現在どのコンポーネントが表示されているかを理解するために役立ちます。
    • SurveyPrompt コンポーネント (SurveyPrompt.razor): Blazor のアンケート用コンポーネント。

  • wwwroot フォルダー: アプリのパブリックな静的アセットが含まれる、アプリの Web ルート フォルダー。appsettings.jsonのための と環境アプリ設定ファイルなどが含まれます。 index.html Web ページは、HTML ページとして実装されるアプリのルート ページです。

    • アプリのいずれかのページが最初に要求されると、このページが表示されて応答として返されます。
    • このページは、ルート App コンポーネントを表示する場所を指定します。 コンポーネントは app DOM 要素 (<app>Loading...</app>) の位置に表示されます。

  • _Imports.razor:名前空間の Razor ディレクティブなど、アプリのコンポーネント (.razor) に含める一般的な @using ディレクティブが含まれます。

  • App.razor:Router コンポーネントを使用してクライアント側のルーティングを設定するアプリのルート コンポーネント。 Router コンポーネントは、ブラウザーのナビゲーションをインターセプトし、要求されたアドレスに一致するページをレンダリングします。

  • Program.cs: WebAssembly ホストを設定するアプリのエントリ ポイントです。

    • App コンポーネントは、アプリのルート コンポーネントです。 App コンポーネントは、ルート コンポーネント コレクション (app) に対する <app>Loading...</app> DOM 要素 (wwwroot/index.html の builder.RootComponents.Add<App>("app")) として指定されます。
    • サービスが追加され、構成されます (例: builder.Services.AddSingleton<IMyDependency, MyDependency>())。

追加のオプションが構成されている場合は、Blazor WebAssembly プロジェクト テンプレートから生成されたアプリで、追加のファイルとフォルダーが表示されることがあります。 たとえば、ASP.NET Core Identity でアプリを生成すると、認証と承認の機能に関する追加の資産が含まれます。

"ホストされた Blazor WebAssembly ソリューション" には、次の ASP.NET Core プロジェクトが含まれています。

  • "Client": Blazor WebAssembly アプリ。
  • "Server": Blazor WebAssembly アプリと気象データをクライアントに提供するアプリ。
  • "Shared": 共通のクラス、メソッド、リソースを保持するプロジェクト。

ソリューションは、Visual Studio の Blazor WebAssembly プロジェクト テンプレートから、[ASP.NET Core でホストされた] チェックボックスをオンにして、または .NET CLI の -ho|--hosted コマンドを使って dotnet new blazorwasm オプションを指定して生成されます。 詳しくは、「ASP.NET Core Blazor 用のツール」をご覧ください。

ホストされた Blazor Webassembly ソリューションのクライアント側アプリのプロジェクト構造 ("Client" プロジェクト) は、スタンドアロン Blazor WebAssembly アプリのプロジェクト構造と同じです。 ホストされた Blazor WebAssembly ソリューションの追加のファイルは次のとおりです。

  • "Server" プロジェクトには、"Controllers/WeatherForecastController.cs" プロジェクトの Client コンポーネントに気象データを返す天気予報コントローラーが FetchData で含まれています。
  • "Shared" プロジェクトには、"WeatherForecast.cs" プロジェクトと "Client" プロジェクトの気象データを表す天気予報クラスが Server で含まれています。

Blazor スクリプトの場所

Blazor スクリプトは、自動圧縮とフィンガープリントを備えた静的 Web 資産として機能します。 詳細については、「ASP.NET Core Blazor 静的ファイルの」を参照してください。

Blazor Web App では、Blazor スクリプトは Components/App.razor ファイル内にあります。

<script src="@Assets["_framework/blazor.web.js"]"></script>

Blazor Server アプリでは、Blazor スクリプトは Pages/_Host.cshtml ファイル内にあります。

<script src="_framework/blazor.server.js"></script>

Blazor スクリプトは、ASP.NET Core 共有フレームワークの埋め込みリソースから提供されます。

Blazor Web App では、Blazor スクリプトは Components/App.razor ファイル内にあります。

<script src="_framework/blazor.web.js"></script>

Blazor Server アプリでは、Blazor スクリプトは Pages/_Host.cshtml ファイル内にあります。

<script src="_framework/blazor.server.js"></script>

Blazor スクリプトは、ASP.NET Core 共有フレームワークの埋め込みリソースから提供されます。

Blazor Server アプリでは、Blazor スクリプトは Pages/_Host.cshtml ファイル内にあります。

<script src="_framework/blazor.server.js"></script>

Blazor スクリプトは、ASP.NET Core 共有フレームワークの埋め込みリソースから提供されます。

Blazor Server アプリでは、Blazor スクリプトは Pages/_Layout.cshtml ファイル内にあります。

<script src="_framework/blazor.server.js"></script>

Blazor スクリプトは、ASP.NET Core 共有フレームワークの埋め込みリソースから提供されます。

Blazor Server アプリでは、Blazor スクリプトは Pages/_Host.cshtml ファイル内にあります。

<script src="_framework/blazor.server.js"></script>

Blazor Web AppまたはBlazor Server アプリの場合、アプリの発行時にRazor スクリプトを自動的に含めるには、プロジェクトに少なくとも 1 つの.razor コンポーネント ファイル (Blazor) が含まれている必要があります。 プロジェクトに少なくとも 1 つの Razor コンポーネントが含まれていない場合は、 RequiresAspNetWebAssets MSBuild プロパティをアプリのプロジェクト ファイルに true に設定して、 Blazor スクリプトを含めます。

<RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>

Blazor WebAssembly アプリでは、Blazor スクリプトのコンテンツは wwwroot/index.html ファイル内にあります。

<script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>

アプリが発行されると、 {fingerprint} プレースホルダーはキャッシュ の無効化用の一意のハッシュに自動的に置き換えられます。

<script src="_framework/blazor.webassembly.js"></script>

<head> および <body> コンテンツの場所

Blazor Web App では、<head> および <body> コンテンツは Components/App.razor ファイル内にあります。

Blazor Server アプリでは、<head> および <body> コンテンツは Pages/_Host.cshtml ファイル内にあります。

Blazor Server アプリでは、<head> および <body> コンテンツは Pages/_Layout.cshtml ファイル内にあります。

Blazor Server アプリでは、<head> および <body> コンテンツは Pages/_Host.cshtml ファイル内にあります。

Blazor WebAssembly アプリでは、<head> および <body> コンテンツは wwwroot/index.html ファイル内にあります。

デュアル Blazor Server/Blazor WebAssembly アプリ

Blazor Server アプリ、または Blazor WebAssembly アプリのいずれかとして実行できるアプリを作成する方法の 1 つは、アプリのロジックとコンポーネントをすべて Razor クラス ライブラリ (RCL) に配置し、別の Blazor Server および Blazor WebAssembly プロジェクトからその RCL を参照することです。 ホスティング モデルに基づいて実装が異なる一般的なサービスの場合は、RCL でサービス インターフェイスを定義し、Blazor Server および Blazor WebAssembly プロジェクトでサービスを実装します。

その他のリソース

  • Last updated on