ASP.NET Core の Razor クラスライブラリプロジェクトを使用して、再利用可能な UI を作成するCreate reusable UI using the Razor class library project in ASP.NET Core

作成者: Rick AndersonBy Rick Anderson

Razor ビュー、ページ、コントローラー、ページモデル、 razor コンポーネントビューコンポーネント、およびデータモデルは、razor クラスライブラリ (rcl) に組み込むことができます。Razor views, pages, controllers, page models, Razor components, View components, and data models can be built into a Razor class library (RCL). RCL はパッケージ化し、再利用できます。The RCL can be packaged and reused. アプリケーションには RCL を含めることができます。また、それに含まれるビューやページをオーバーライドできます。Applications can include the RCL and override the views and pages it contains. Web アプリと RCL の両方にビュー、部分ビュー、Razor ページがあるとき、Web アプリの Razor マークアップ ( .cshtml ファイル) が優先されます。When a view, partial view, or Razor Page is found in both the web app and the RCL, the Razor markup (.cshtml file) in the web app takes precedence.

サンプル コードを表示またはダウンロードします (ダウンロード方法)。View or download sample code (how to download)

Razor UI を含むクラス ライブラリを作成するCreate a class library containing Razor UI

  • Visual Studio から、[新しいプロジェクトの作成] を選択します。From Visual Studio select Create new a new project.
  • [Razor クラスライブラリ] > [次へ] を選択します。Select Razor Class Library > Next.
  • ライブラリに名前を指定します (たとえば、"RazorClassLib")。作成> ます。Name the library (for example, "RazorClassLib"), > Create. 生成されたビュー ライブラリとファイル名の競合を避けるため、ライブラリ名の末尾が .Views ではないことを確認します。To avoid a file name collision with the generated view library, ensure the library name doesn't end in .Views.
  • ビューをサポートする必要がある場合は 、サポートページとビューを選択します。Select Support pages and views if you need to support views. 既定では、Razor Pages のみがサポートされています。By default, only Razor Pages are supported. [作成] を選択します。Select Create.

Razor クラス ライブラリ (RCL) テンプレートは Razor コンポーネント開発での既定です。The Razor class library (RCL) template defaults to Razor component development by default. [サポートページとビュー] オプションでは、ページとビューがサポートされています。The Support pages and views option supports pages and views.

Razor ファイルを RCL に追加します。Add Razor files to the RCL.

ASP.NET Core テンプレートでは、RCL コンテンツがAreasフォルダーにあることを前提としています。The ASP.NET Core templates assume the RCL content is in the Areas folder. ~/Areas/Pagesではなく ~/Pages でコンテンツを公開する RCL を作成するには、「 Rcl ページレイアウト」を参照してください。See RCL Pages layout to create an RCL that exposes content in ~/Pages rather than ~/Areas/Pages.

RCL コンテンツの参照Reference RCL content

RCL は次によって参照できます。The RCL can be referenced by:

ビュー、部分ビュー、ページのオーバーライドOverride views, partial views, and pages

Web アプリと RCL の両方にビュー、部分ビュー、Razor ページがあるとき、Web アプリの Razor マークアップ ( .cshtml ファイル) が優先されます。When a view, partial view, or Razor Page is found in both the web app and the RCL, the Razor markup (.cshtml file) in the web app takes precedence. たとえば、 WebApp1/Areas/MyFeature/Pages/Page1. cshtmlを WebApp1 に追加すると、WebApp1 の PAGE1 が Rcl の page1 よりも優先されます。For example, add WebApp1/Areas/MyFeature/Pages/Page1.cshtml to WebApp1, and Page1 in the WebApp1 will take precedence over Page1 in the RCL.

サンプル ダウンロードの WebApp1/Areas/MyFeature2 の名前を WebApp1/Areas/MyFeature に変更し、優先設定をテストします。In the sample download, rename WebApp1/Areas/MyFeature2 to WebApp1/Areas/MyFeature to test precedence.

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 部分ビューを WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml ビューにコピーします。Copy the RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml partial view to WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml. 新しい場所を示すようにマークアップを更新します。Update the markup to indicate the new location. アプリをビルドして実行し、アプリの部分ビューが使用されていることを確認します。Build and run the app to verify the app's version of the partial is being used.

RCL ページのレイアウトRCL Pages layout

RCL コンテンツを web アプリのPagesフォルダーの一部として参照するには、次のファイル構造で rcl プロジェクトを作成します。To reference RCL content as though it is part of the web app's Pages folder, create the RCL project with the following file structure:

  • RazorUIClassLib/PagesRazorUIClassLib/Pages
  • RazorUIClassLib/Pages/SharedRazorUIClassLib/Pages/Shared

たとえば、 RazorUIClassLib/Pages/Sharedに2つの部分ファイルが含まれているとし ます。Suppose RazorUIClassLib/Pages/Shared contains two partial files: _Header.cshtml and _Footer.cshtml. <partial> タグをLayoutファイルに追加できます。The <partial> tags could be added to _Layout.cshtml file:

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>

静的なアセットを含む RCL を作成するCreate an RCL with static assets

RCL では、RCL の消費アプリから参照できる、関連する静的アセットが必要な場合があります。An RCL may require companion static assets that can be referenced by the consuming app of the RCL. ASP.NET Core では、使用中のアプリで利用可能な静的アセットを含む RCLs を作成できます。ASP.NET Core allows creating RCLs that include static assets that are available to a consuming app.

RCL の一部としてコンパニオン資産を含めるには、クラスライブラリにwwwrootフォルダーを作成し、そのフォルダーに必要なファイルを含めます。To include companion assets as part of an RCL, create a wwwroot folder in the class library and include any required files in that folder.

RCL をパッキングすると、 wwwrootフォルダー内のすべてのコンパニオン資産がパッケージに自動的に含まれます。When packing an RCL, all companion assets in the wwwroot folder are automatically included in the package.

静的アセットを除外するExclude static assets

静的アセットを除外するには、目的の除外パスをプロジェクトファイルの $(DefaultItemExcludes) プロパティグループに追加します。To exclude static assets, add the desired exclusion path to the $(DefaultItemExcludes) property group in the project file. エントリをセミコロン (;) で区切ります。Separate entries with a semicolon (;).

次の例では、 wwwrootフォルダーの .libスタイルシートは静的アセットとは見なされず、公開された rcl には含まれていません。In the following example, the lib.css stylesheet in the wwwroot folder isn't considered a static asset and isn't included in the published RCL:

<PropertyGroup>
  <DefaultItemExcludes>$(DefaultItemExcludes);wwwroot\lib.css</DefaultItemExcludes>
</PropertyGroup>

Typescript の統合Typescript integration

TypeScript ファイルを RCL に含めるには、次のようにします。To include TypeScript files in an RCL:

  1. TypeScript ファイル (ts) をwwwrootフォルダーの外側に配置します。Place the TypeScript files (.ts) outside of the wwwroot folder. たとえば、ファイルをクライアントフォルダーに配置します。For example, place the files in a Client folder.

  2. Wwwrootフォルダーの TypeScript ビルド出力を構成します。Configure the TypeScript build output for the wwwroot folder. プロジェクトファイルの PropertyGroup 内の TypescriptOutDir プロパティを設定します。Set the TypescriptOutDir property inside of a PropertyGroup in the project file:

    <TypescriptOutDir>wwwroot</TypescriptOutDir>
    
  3. プロジェクトファイル内の PropertyGroup 内に次のターゲットを追加することにより、TypeScript ターゲットを ResolveCurrentProjectStaticWebAssets ターゲットの依存関係として含めます。Include the TypeScript target as a dependency of the ResolveCurrentProjectStaticWebAssets target by adding the following target inside of a PropertyGroup in the project file:

    <ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
      CompileTypeScript;
      $(ResolveCurrentProjectStaticWebAssetsInputs)
    </ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
    

参照されている RCL からのコンテンツの使用Consume content from a referenced RCL

RCL のwwwrootフォルダーに含まれるファイルは、使用中のアプリにプレフィックス _content/{LIBRARY NAME}/で公開されます。The files included in the wwwroot folder of the RCL are exposed to the consuming app under the prefix _content/{LIBRARY NAME}/. たとえば、という名前のライブラリを使用すると、 _content/Razor.Class.Lib/の静的コンテンツへのパスが生成されます。For example, a library named Razor.Class.Lib results in a path to static content at _content/Razor.Class.Lib/.

使用中のアプリは、ライブラリによって提供される静的なアセットを <script><style><img>、およびその他の HTML タグと共に参照します。The consuming app references static assets provided by the library with <script>, <style>, <img>, and other HTML tags. コンシューマーアプリの Startup.Configureでは、静的ファイルのサポートが有効になっている必要があります。The consuming app must have static file support enabled in Startup.Configure:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...

    app.UseStaticFiles();

    ...
}

ビルド出力 (dotnet run) から使用中のアプリを実行すると、開発環境では、静的な web アセットが既定で有効になります。When running the consuming app from build output (dotnet run), static web assets are enabled by default in the Development environment. ビルド出力から実行するときに他の環境のアセットをサポートするには、 Program.csのホストビルダーで UseStaticWebAssets を呼び出します。To support assets in other environments when running from build output, call UseStaticWebAssets on the host builder in Program.cs:

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

public class Program
{
    public static void Main(string[] args)
    {
        CreateHostBuilder(args).Build().Run();
    }

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });
}

発行された出力 (dotnet publish) からアプリを実行する場合、UseStaticWebAssets の呼び出しは必要ありません。Calling UseStaticWebAssets isn't required when running an app from published output (dotnet publish).

複数プロジェクトの開発フローMulti-project development flow

コンシューマーアプリの実行時:When the consuming app runs:

  • RCL のアセットは元のフォルダーにとどまります。The assets in the RCL stay in their original folders. アセットは、消費側のアプリに移動されません。The assets aren't moved to the consuming app.
  • Rcl のwwwrootフォルダー内の変更は、rcl がリビルドされた後、使用中のアプリを再構築せずに、消費側アプリに反映されます。Any change within the RCL's wwwroot folder is reflected in the consuming app after the RCL is rebuilt and without rebuilding the consuming app.

RCL がビルドされると、静的な web 資産の場所を記述するマニフェストが生成されます。When the RCL is built, a manifest is produced that describes the static web asset locations. コンシューマーアプリは、実行時にマニフェストを読み取り、参照されたプロジェクトとパッケージのアセットを使用します。The consuming app reads the manifest at runtime to consume the assets from referenced projects and packages. RCL に新しいアセットが追加されたときに、使用中のアプリが新しい資産にアクセスできるようにするには、そのマニフェストを更新するために RCL を再構築する必要があります。When a new asset is added to an RCL, the RCL must be rebuilt to update its manifest before a consuming app can access the new asset.

公開Publish

アプリが発行されると、参照されているすべてのプロジェクトおよびパッケージの関連する資産が、_content/{LIBRARY NAME}/の下の発行済みアプリのwwwrootフォルダーにコピーされます。When the app is published, the companion assets from all referenced projects and packages are copied into the wwwroot folder of the published app under _content/{LIBRARY NAME}/.

Razor ビュー、ページ、コントローラー、ページモデル、 razor コンポーネントビューコンポーネント、およびデータモデルは、razor クラスライブラリ (rcl) に組み込むことができます。Razor views, pages, controllers, page models, Razor components, View components, and data models can be built into a Razor class library (RCL). RCL はパッケージ化し、再利用できます。The RCL can be packaged and reused. アプリケーションには RCL を含めることができます。また、それに含まれるビューやページをオーバーライドできます。Applications can include the RCL and override the views and pages it contains. Web アプリと RCL の両方にビュー、部分ビュー、Razor ページがあるとき、Web アプリの Razor マークアップ ( .cshtml ファイル) が優先されます。When a view, partial view, or Razor Page is found in both the web app and the RCL, the Razor markup (.cshtml file) in the web app takes precedence.

サンプル コードを表示またはダウンロードします (ダウンロード方法)。View or download sample code (how to download)

Razor UI を含むクラス ライブラリを作成するCreate a class library containing Razor UI

  • Visual Studio の [ファイル] メニューから、 [新規作成] 、> [プロジェクト] の順に選択します。From the Visual Studio File menu, select New > Project.
  • [ASP.NET Core Web アプリケーション] を選択します。Select ASP.NET Core Web Application.
  • ライブラリに名前を付け ("RazorClassLib" など)、 [OK] を選択します。Name the library (for example, "RazorClassLib") > OK. 生成されたビュー ライブラリとファイル名の競合を避けるため、ライブラリ名の末尾が .Views ではないことを確認します。To avoid a file name collision with the generated view library, ensure the library name doesn't end in .Views.
  • ASP.NET Core 2.1 以降が選択されていることを確認します。Verify ASP.NET Core 2.1 or later is selected.
  • [ Razor クラスライブラリ ] > [OK] を選択します。Select Razor Class Library > OK.

RCL には、次のプロジェクトファイルがあります。An RCL has the following project file:

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>netstandard2.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.2.0" />
  </ItemGroup>

</Project>

Razor ファイルを RCL に追加します。Add Razor files to the RCL.

ASP.NET Core テンプレートでは、RCL コンテンツがAreasフォルダーにあることを前提としています。The ASP.NET Core templates assume the RCL content is in the Areas folder. ~/Areas/Pagesではなく ~/Pages でコンテンツを公開する RCL を作成するには、「 Rcl ページレイアウト」を参照してください。See RCL Pages layout to create an RCL that exposes content in ~/Pages rather than ~/Areas/Pages.

RCL コンテンツの参照Reference RCL content

RCL は次によって参照できます。The RCL can be referenced by:

チュートリアル: RCL プロジェクトを作成し、Razor Pages プロジェクトから使用するWalkthrough: Create an RCL project and use from a Razor Pages project

作成しなくても、完全なプロジェクトをダウンロードしてテストできます。You can download the complete project and test it rather than creating it. サンプル ダウンロードには、プロジェクトのテストを簡単にする追加のコードやリンクが含まれています。The sample download contains additional code and links that make the project easy to test. GitHub の問題に関するフィードバックはこちらで扱っています。ダウンロード サンプルと段階的指示の違いについてコメントを投稿できます。You can leave feedback in this GitHub issue with your comments on download samples versus step-by-step instructions.

ダウンロード アプリをテストするTest the download app

完全なアプリをダウンロードしておらず、チュートリアル プロジェクトを作成する場合、次のセクションに進んでください。If you haven't downloaded the completed app and would rather create the walkthrough project, skip to the next section.

Visual Studio で .sln ファイルを開きます。Open the .sln file in Visual Studio. アプリを実行します。Run the app.

テスト WebApp1 の指示に従ってください。Follow the instructions in Test WebApp1

RCL を作成するCreate an RCL

このセクションでは、RCL を作成します。In this section, an RCL is created. Razor ファイルが RCL に追加されます。Razor files are added to the RCL.

RCL プロジェクトの作成:Create the RCL project:

  • Visual Studio の [ファイル] メニューから、 [新規作成] 、> [プロジェクト] の順に選択します。From the Visual Studio File menu, select New > Project.
  • [ASP.NET Core Web アプリケーション] を選択します。Select ASP.NET Core Web Application.
  • アプリにRazorUIClassLib > OKという名前を指定します。Name the app RazorUIClassLib > OK.
  • ASP.NET Core 2.1 以降が選択されていることを確認します。Verify ASP.NET Core 2.1 or later is selected.
  • [ Razor クラスライブラリ ] > [OK] を選択します。Select Razor Class Library > OK.
  • RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml という名前が付いた Razor 部分ビュー ファイルを追加します。Add a Razor partial view file named RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml.

Razor ファイルとフォルダーをプロジェクトに追加するAdd Razor files and folders to the project

  • RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml のマークアップを次のコードに変更します。Replace the markup in RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml with the following code:

    <h3>_Message.cshtml partial view.</h3>
    
    <p>RazorUIClassLib\Areas\MyFeature\Pages\Shared\_Message.cshtml</p>
    
  • RazorUIClassLib/Areas/MyFeature/Pages/Page1.cshtml のマークアップを次のコードに変更します。Replace the markup in RazorUIClassLib/Areas/MyFeature/Pages/Page1.cshtml with the following code:

    @page
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    
    <h2>Hello from a Razor UI class library!</h2>
    <p> From  RazorUIClassLib\Areas\MyFeature\Pages\Page1.cshtml</p>
    
    <partial name="_Message" />
    

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers は部分ビュー (<partial name="_Message" />) を使用するために必要です。@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers is required to use the partial view (<partial name="_Message" />). @addTagHelper ディレクティブを含める代わりに、 _ViewImports.cshtml ファイルを追加できます。Rather than including the @addTagHelper directive, you can add a _ViewImports.cshtml file. (例:For example:

    dotnet new viewimports -o RazorUIClassLib/Areas/MyFeature/Pages
    

    _ViewImports の詳細については、「共有ディレクティブのインポート」を参照してください For more information on _ViewImports.cshtml, see Importing Shared Directives

  • クラス ライブラリをビルドし、コンパイラ エラーがないことを確認します。Build the class library to verify there are no compiler errors:

    dotnet build RazorUIClassLib
    

ビルド出力には、RazorUIClassLib.dllRazorUIClassLib.Views.dll が含まれています。The build output contains RazorUIClassLib.dll and RazorUIClassLib.Views.dll. RazorUIClassLib.Views.dll には、コンパイル済みの Razor コンテンツが含まれています。RazorUIClassLib.Views.dll contains the compiled Razor content.

Razor ページ プロジェクトから Razor UI ライブラリを使用します。Use the Razor UI library from a Razor Pages project

Razor ページ Web アプリの作成:Create the Razor Pages web app:

  • ソリューションエクスプローラーで、ソリューションを右クリックして >新しいプロジェクト追加> ます。From Solution Explorer, right-click the solution > Add > New Project.

  • [ASP.NET Core Web アプリケーション] を選択します。Select ASP.NET Core Web Application.

  • アプリに WebApp1 という名前を付けます。Name the app WebApp1.

  • ASP.NET Core 2.1 以降が選択されていることを確認します。Verify ASP.NET Core 2.1 or later is selected.

  • [ Web アプリケーション> OK] を選択します。Select Web Application > OK.

  • ソリューション エクスプローラーで、WebApp1 を右クリックし、 [スタートアップ プロジェクトに設定] を選択します。From Solution Explorer, right-click on WebApp1 and select Set as StartUp Project.

  • ソリューションエクスプローラーで、 [WebApp1] を右クリックし、[ビルドの依存関係>プロジェクトの依存関係] を選択します。From Solution Explorer, right-click on WebApp1 and select Build Dependencies > Project Dependencies.

  • WebApp1 の依存関係として RazorUIClassLib を選択します。Check RazorUIClassLib as a dependency of WebApp1.

  • ソリューションエクスプローラーで、 WebApp1を右クリックし、[>参照追加] を選択します。From Solution Explorer, right-click on WebApp1 and select Add > Reference.

  • 参照マネージャー ダイアログボックスで、 RazorUIClassLib > OKをオンにします。In the Reference Manager dialog, check RazorUIClassLib > OK.

アプリを実行します。Run the app.

テスト WebApp1Test WebApp1

/MyFeature/Page1 を参照して、Razor UI クラスライブラリが使用されていることを確認します。Browse to /MyFeature/Page1 to verify that the Razor UI class library is in use.

ビュー、部分ビュー、ページのオーバーライドOverride views, partial views, and pages

Web アプリと RCL の両方にビュー、部分ビュー、Razor ページがあるとき、Web アプリの Razor マークアップ ( .cshtml ファイル) が優先されます。When a view, partial view, or Razor Page is found in both the web app and the RCL, the Razor markup (.cshtml file) in the web app takes precedence. たとえば、 WebApp1/Areas/MyFeature/Pages/Page1. cshtmlを WebApp1 に追加すると、WebApp1 の PAGE1 が Rcl の page1 よりも優先されます。For example, add WebApp1/Areas/MyFeature/Pages/Page1.cshtml to WebApp1, and Page1 in the WebApp1 will take precedence over Page1 in the RCL.

サンプル ダウンロードの WebApp1/Areas/MyFeature2 の名前を WebApp1/Areas/MyFeature に変更し、優先設定をテストします。In the sample download, rename WebApp1/Areas/MyFeature2 to WebApp1/Areas/MyFeature to test precedence.

RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 部分ビューを WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml ビューにコピーします。Copy the RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml partial view to WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml. 新しい場所を示すようにマークアップを更新します。Update the markup to indicate the new location. アプリをビルドして実行し、アプリの部分ビューが使用されていることを確認します。Build and run the app to verify the app's version of the partial is being used.

RCL ページのレイアウトRCL Pages layout

RCL コンテンツを web アプリのPagesフォルダーの一部として参照するには、次のファイル構造で rcl プロジェクトを作成します。To reference RCL content as though it is part of the web app's Pages folder, create the RCL project with the following file structure:

  • RazorUIClassLib/PagesRazorUIClassLib/Pages
  • RazorUIClassLib/Pages/SharedRazorUIClassLib/Pages/Shared

たとえば、 RazorUIClassLib/Pages/Sharedに2つの部分ファイルが含まれているとし ます。Suppose RazorUIClassLib/Pages/Shared contains two partial files: _Header.cshtml and _Footer.cshtml. <partial> タグをLayoutファイルに追加できます。The <partial> tags could be added to _Layout.cshtml file:

<body>
  <partial name="_Header">
  @RenderBody()
  <partial name="_Footer">
</body>