在 ASP.NET Core 中使用 Razor 類別庫專案建立可重複使用的 UI

發行項
05/04/2023

Razor檢視、頁面、控制器、頁面模型、Razor 元件、檢視元件和資料模型可以內建至 Razor 類別庫 (RCL) 。 RCL 可以封裝和重複使用。應用程式可以包括 RCL，以及覆寫它所包含的檢視和頁面。在 Web 應用程式和 RCL 中找到檢視、部分檢視或 Razor 頁面時， Razor Web 應用程式中的標記 (檔案) .cshtml 優先。

如需如何將 npm 和 webpack 整合到類別庫建置程式 Razor 的詳細資訊，請參閱建置類別庫的 Razor 用戶端 Web 資產。

從 Visual Studio 選取 [ 建立新專案]。
選取Razor [類別庫>] [下一步]。
將程式庫命名為 (，例如「 Razor ClassLib」) 、 >Create。若要避免與產生的檢視程式庫發生檔案名稱衝突，程式庫名稱結尾請務必不要使用 .Views。
如果您需要支援檢視，請選取 [支援頁面和檢視 ]。根據預設，僅 Razor 支援 Pages。選取 [建立] 。

類別 Razor 庫 (RCL) 範本預設為 Razor 元件開發。 [支援頁面和檢視] 選項支援頁面和檢視。

從命令列執行 dotnet new razorclasslib。例如：

dotnet new razorclasslib -o RazorUIClassLib

類別 Razor 庫 (RCL) 範本預設為 Razor 元件開發。 --support-pages-and-views傳遞選項 (dotnet new razorclasslib --support-pages-and-views) ，以提供頁面和檢視的支援。

如需詳細資訊，請參閱 dotnet new。若要避免與產生的檢視程式庫發生檔案名稱衝突，程式庫名稱結尾請務必不要使用 .Views。

將檔案新增 Razor 至 RCL。

ASP.NET Core範本假設 RCL 內容位於 Areas 資料夾中。請參閱下方的 RCL 頁面版面配置，以建立公開內容而非 ~/Pages~/Areas/Pages 的 RCL。

參考 RCL 內容

RCL 可以由下列各項參考：

NuGet 套件。請參閱建立 NuGet 套件和 dotnet add package 和建立和發佈 NuGet 套件。
{ProjectName}.csproj. 請參閱 dotnet-add reference。

覆寫檢視、部分檢視和頁面

在 Web 應用程式和 RCL 中找到檢視、部分檢視或 Razor 頁面時， Razor Web 應用程式中的標記 (檔案) .cshtml 優先。例如，將新增 WebApp1/Areas/MyFeature/Pages/Page1.cshtml 至 WebApp1，而 WebApp1 中的 Page1 將優先于 RCL 中的 Page1。

在範例下載中，將重新命名 WebApp1/Areas/MyFeature2 為 WebApp1/Areas/MyFeature 以測試優先順序。

將 RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 部分檢視複製到 WebApp1/Areas/MyFeature/Pages/Shared/_Message.cshtml 。更新標記來指示新的位置。建置並執行應用程式，以確認正在使用部分檢視的應用程式版本。

如果 RCL 使用 Razor Pages，請在主控應用程式中啟用 Razor Pages 服務和端點：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

RCL 頁面版面配置

若要參考 RCL 內容，如同它是 Web 應用程式 Pages 資料夾的一部分，請使用下列檔案結構建立 RCL 專案：

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

假設 RazorUIClassLib/Pages/Shared 包含兩個部分檔案： _Header.cshtml 和 _Footer.cshtml 。 <partial>標籤可以新增至 _Layout.cshtml 檔案：

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

將檔案 _ViewStart.cshtml 新增至 RCL 專案 Pages 的資料夾，以使用 _Layout.cshtml 主機 Web 應用程式的檔案：

@{
    Layout = "_Layout";
}

建立具有靜態資產的 RCL

RCL 可能需要隨附靜態資產，這些資產可由 RCL 或 RCL 的取用應用程式參考。 ASP.NET Core允許建立包含可供取用應用程式的靜態資產的 RCL。

若要在 RCL 中包含隨附資產，請在類別庫中建立 wwwroot 資料夾，並在該資料夾中包含任何必要的檔案。

封裝 RCL 時，資料夾中的所有隨附資產 wwwroot 都會自動包含在套件中。

dotnet pack使用命令，而不是 NuGet.exe 版 nuget pack 。

排除靜態資產

若要排除靜態資產，請將所需的排除路徑新增至 $(DefaultItemExcludes) 專案檔中的屬性群組。以分號分隔專案 (;) 。

在下列範例中 wwwroot ， lib.css 資料夾中的樣式表單不會被視為靜態資產，且未包含在已發佈的 RCL 中：

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

Typescript 整合

若要在 RCL 中包含 TypeScript 檔案：

Microsoft.TypeScript.MSBuild參考專案中的 NuGet 套件。

注意

如需將套件新增至 .NET 應用程式的指引，請參閱在套件取用工作流程 (NuGet 文件) 的安裝及管理套件底下的文章。在 NuGet.org 確認正確的套件版本。
將 TypeScript 檔案放在資料夾外部 wwwroot (.ts) 。例如，將檔案 Client 放在資料夾中。
設定資料夾的 wwwroot TypeScript 組建輸出。在 TypescriptOutDir 專案檔的內 PropertyGroup 設定屬性：
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```

在專案檔中新增下列目標， PropertyGroup 將 TypeScript 目標納入為目標的相依性 PrepareForBuildDependsOn ：

<PrepareForBuildDependsOn>
  CompileTypeScript;
  GetTypeScriptOutputForPublishing;$(PrepareForBuildDependsOn)
</PrepareForBuildDependsOn>

從參考的 RCL 取用內容

RCL 資料夾中所包含的 wwwroot 檔案會公開給前置詞下的 _content/{PACKAGE ID}/ RCL 或取用應用程式。例如，在專案檔中具有元件名稱 Razor.Class.Lib 且沒有 <PackageId> 指定的程式庫，會導致靜態內容的路徑位於 _content/Razor.Class.Lib/ 。產生 NuGet 套件且元件名稱與程式庫專案檔中的套件識別碼 (<PackageId>) 不同時，請使用專案檔 {PACKAGE ID} 中所指定的套件識別碼。

取用的應用程式會參考程式庫所提供的靜態資產，以及 <script> 、 <style><img> 和其他 HTML 標籤。取用的應用程式必須在下列專案中啟用靜態檔案支援：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();
app.Run();

從建置輸出 () dotnet run 執行取用應用程式時，預設會在開發環境中啟用靜態 Web 資產。若要在從組建輸出執行時支援其他環境中的資產，請在中的 Program.cs 主機產生器上呼叫 UseStaticWebAssets ：

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.UseWebRoot("wwwroot");
builder.WebHost.UseStaticWebAssets();

builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

從已發佈的輸出 (執行應用程式時，不需要呼叫 UseStaticWebAssets) dotnet publish 。

多專案開發流程

當取用的應用程式執行時：

RCL 中的資產會保留在其原始檔案夾中。資產不會移至取用的應用程式。
在重建 RCL 之後，RCL wwwroot 資料夾內的任何變更會反映在取用的應用程式中，而不需要重建取用的應用程式。

建置 RCL 時，會產生描述靜態 Web 資產位置的資訊清單。取用的應用程式會在執行時間讀取資訊清單，以取用參考專案和套件中的資產。將新資產新增至 RCL 時，必須先重建 RCL 以更新其資訊清單，才能取用應用程式存取新的資產。

發佈

發佈應用程式時，所有參考專案和套件的隨附資產都會複製到 wwwroot 下 _content/{PACKAGE ID}/ 已發佈應用程式的資料夾中。產生 NuGet 套件，而元件名稱與程式庫專案檔中的套件識別碼 (<PackageId>) 不同時，請在檢查 wwwroot 已發行資產的資料夾時，使用專案檔 {PACKAGE ID} 中指定的套件識別碼。

其他資源

檢視或下載範例程式碼 $英文$ (如何下載)

建立包含 Razor UI 的類別庫

Visual Studio
.NET Core CLI

從 Visual Studio 選取 [建立新專案]。
選取[ Razor 類別庫>] [下一步]。
將程式庫命名 (，例如「 Razor ClassLib」) Create>>Next。若要避免與產生的檢視程式庫發生檔案名稱衝突，程式庫名稱結尾請務必不要使用 .Views。
選取 [目標 Framework]。檢查 ☑支援頁面和檢視 以支援檢視。根據預設，僅 Razor 支援元件。選取 [建立] 。

類別 Razor 庫 (RCL) 範本預設為 Razor 元件開發。 [支援頁面和檢視]選項支援頁面和檢視。

從命令列執行 dotnet new razorclasslib。例如：

dotnet new razorclasslib -o RazorUIClassLib

類別 Razor 庫 (RCL) 範本預設為 Razor 元件開發。 --support-pages-and-views傳遞選項 (dotnet new razorclasslib --support-pages-and-views) ，以提供頁面和檢視的支援。

如需詳細資訊，請參閱 dotnet new。若要避免與產生的檢視程式庫發生檔案名稱衝突，程式庫名稱結尾請務必不要使用 .Views。

將檔案新增 Razor 至 RCL。

ASP.NET Core範本假設 RCL 內容位於 Areas 資料夾中。請參閱 RCL 頁面版面配置，以建立公開內容的 ~/Pages RCL，而不是 ~/Areas/Pages 。

參考 RCL 內容

RCL 可以由下列各項參考：

NuGet 套件。請參閱建立 NuGet 套件和 dotnet add package 和建立和發佈 NuGet 套件。
{ProjectName}.csproj. 請參閱 dotnet-add reference。

覆寫檢視、部分檢視和頁面

在 Web 應用程式和 RCL 中找到檢視、部分檢視或 Razor 頁面時， Razor Web 應用程式中的標記 (檔案) .cshtml 優先。例如，新增 WebApp1/Areas/MyFeature/Pages/Page1.cshtml 至 WebApp1，而 WebApp1 中的 Page1 優先于 RCL 中的 Page1。

在範例下載中，將重新命名 WebApp1/Areas/MyFeature2 為 WebApp1/Areas/MyFeature 以測試優先順序。

RCL 頁面版面配置

若要參考 RCL 內容，就像是 Web 應用程式 Pages 資料夾的一部分，請使用下列檔案結構建立 RCL 專案：

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

假設 RazorUIClassLib/Pages/Shared 包含兩個部分檔案： _Header.cshtml 和 _Footer.cshtml 。標記 <partial> 可以新增至 _Layout.cshtml 檔案：

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

將 _ViewStart.cshtml 檔案新增至 RCL 專案的 Pages 資料夾，以使用 _Layout.cshtml 來自主機 Web 應用程式的檔案：

@{
    Layout = "_Layout";
}

建立具有靜態資產的 RCL

RCL 可能需要由 RCL 或 RCL 取用應用程式參考的隨附靜態資產。 ASP.NET Core允許建立包含可供取用應用程式的靜態資產的 RCL。

若要在 RCL 中包含隨附資產，請在類別庫中建立 wwwroot 資料夾，並在該資料夾中包含任何必要的檔案。

封裝 RCL 時，資料夾中的所有隨附資產 wwwroot 都會自動包含在套件中。

dotnet pack使用命令，而不是 NuGet.exe 版本 nuget pack 。

排除靜態資產

若要排除靜態資產，請將所需的排除路徑新增至 $(DefaultItemExcludes) 專案檔中的屬性群組。以分號分隔專案 (;) 。

在下列範例中，資料夾中的 lib.css stylesheet wwwroot 不會被視為靜態資產，也不會包含在已發佈的 RCL 中：

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

Typescript 整合

若要在 RCL 中包含 TypeScript 檔案：

參考專案中的 Microsoft.TypeScript.MSBuild NuGet 套件。

注意

如需將套件新增至 .NET 應用程式的指引，請參閱在套件取用工作流程 (NuGet 文件) 的安裝及管理套件底下的文章。在 NuGet.org 確認正確的套件版本。
將 TypeScript 檔案放在資料夾外部 wwwroot (.ts) 。例如，將檔案放在 Client 資料夾中。
設定資料夾的 wwwroot TypeScript 組建輸出。 TypescriptOutDir在專案檔中設定內的 PropertyGroup 屬性：
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```

在專案檔中新增下列目標，將 TypeScript 目標納入為目標的 PropertyGroup 相依性 ResolveCurrentProjectStaticWebAssets ：

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

從參考的 RCL 取用內容

RCL 資料夾中所包含的 wwwroot 檔案會公開給 RCL 或前置詞 _content/{PACKAGE ID}/ 底下的取用應用程式。例如，在專案檔中具有元件名稱 Razor.Class.Lib 且沒有 <PackageId> 指定的程式庫，會導致位於的靜態內容 _content/Razor.Class.Lib/ 路徑。產生 NuGet 套件和元件名稱與程式庫專案檔) 中的套件識別碼 (<PackageId> 不同時，請使用專案檔 {PACKAGE ID} 中指定的套件識別碼。

取用的應用程式會參考程式庫所提供的靜態資產，其中包含 <script> 、 <style> 、 <img> 和其他 HTML 標籤。取用的應用程式必須在中 Startup.Configure 啟用靜態檔案支援：

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

    app.UseStaticFiles();

    ...
}

從建置輸出 () dotnet run 執行取用應用程式時，預設會在開發環境中啟用靜態 Web 資產。若要在從組建輸出執行時支援其他環境中的資產，請在中的 Program.cs 主機產生器上呼叫 UseStaticWebAssets ：

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 。

多專案開發流程

當取用的應用程式執行時：

RCL 中的資產會保留在其原始檔案夾中。資產不會移至取用的應用程式。
在重建 RCL 且不重建取用的應用程式之後，RCL wwwroot 資料夾內的任何變更會反映在取用應用程式中。

建置 RCL 時，會產生描述靜態 Web 資產位置的資訊清單。取用應用程式會在執行時間讀取資訊清單，以從參考的專案和套件取用資產。將新資產新增至 RCL 時，必須先重建 RCL 以更新其資訊清單，取用應用程式才能存取新資產。

發佈

發佈應用程式時，來自所有參考專案和套件的隨附資產會複製到 wwwroot 下 _content/{PACKAGE ID}/ 已發佈應用程式的資料夾。產生 NuGet 套件和元件名稱與程式庫專案檔) 中的套件識別碼 (<PackageId> 不同時，請在檢查 wwwroot 已發行資產的資料夾時，使用專案檔 {PACKAGE ID} 中指定的套件識別碼。

其他資源

從 Razor 類別庫 (RCL) 取用 ASP.NET Core Razor 元件

Razor檢視、頁面、控制器、頁面模型、Razor 元件、檢視元件和資料模型可以內建到 Razor 類別庫 (RCL) 。 RCL 可以封裝和重複使用。應用程式可以包括 RCL，以及覆寫它所包含的檢視和頁面。在 Web 應用程式和 RCL 中找到檢視、部分檢視或 Razor 頁面時， Razor Web 應用程式中的標記 (檔案) .cshtml 優先。

檢視或下載範例程式碼 $英文$ (如何下載)

建立包含 Razor UI 的類別庫

Visual Studio
.NET Core CLI

從 Visual Studio 的 [檔案] 功能表中，選取 [新增]>[專案] 。
選取 ASP.NET Core Web 應用程式。
將程式庫命名 (，例如「 Razor ClassLib」) >OK。若要避免與產生的檢視程式庫發生檔案名稱衝突，程式庫名稱結尾請務必不要使用 .Views。
確認已選取 ASP.NET Core 2.1 或更新版本。
選取[ Razor 類別庫>確定]。

RCL 具有下列專案檔：

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

    <PropertyGroup>
        <TargetFramework>netcoreapp3.1</TargetFramework>
        <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
    </PropertyGroup>

    <ItemGroup>
        <FrameworkReference Include="Microsoft.AspNetCore.App" />
    </ItemGroup>


</Project>

從命令列執行 dotnet new razorclasslib。例如：

dotnet new razorclasslib -o RazorUIClassLib

如需詳細資訊，請參閱 dotnet new。若要避免與產生的檢視程式庫發生檔案名稱衝突，程式庫名稱結尾請務必不要使用 .Views。

將檔案新增 Razor 至 RCL。

ASP.NET Core範本假設 RCL 內容位於 Areas 資料夾中。請參閱RCL 頁面版面配置，以建立公開內容而非 ~/Areas/Pages 的 ~/Pages RCL。

參考 RCL 內容

RCL 可以由下列各項參考：

NuGet 套件。請參閱建立 NuGet 套件和 dotnet add package 和建立和發佈 NuGet 套件。
{ProjectName}.csproj. 請參閱 dotnet-add reference。

逐步解說：建立 RCL 專案，並從 Pages 專案使用 Razor

您可以下載完整專案並測試它，而不是建立它。下載範例包含額外的程式碼和連結，讓您輕鬆地測試專案。您可以在此 GitHub 問題留下意見反應以及您對下載範例與逐步指示的評論。

測試下載應用程式

如果您尚未下載已完成的應用程式，而是要建立逐步解說專案，請跳至下一節。

Visual Studio
.NET Core CLI

在 Visual Studio 中開啟 .sln 檔案。執行應用程式。

從目錄中的 cli 命令提示字元，建置 RCL 和 Web 應用程式。

dotnet build

移至 WebApp1 目錄並執行應用程式：

dotnet run

遵循測試 WebApp1 中的指示執行。

建立 RCL

本節會建立 RCL。 Razor 檔案會新增至 RCL。

Visual Studio
.NET Core CLI

建立 RCL 專案：

從 Visual Studio 的 [檔案] 功能表中，選取 [新增]>[專案] 。
選取 ASP.NET Core Web 應用程式。
將應用程式Razor 命名為 [UIClassLib>確定]。
確認已選取 ASP.NET Core 2.1 或更新版本。
選取Razor [類別庫>確定]。
Razor新增名為 RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 的部分檢視檔案。

從命令列執行下列命令：

dotnet new razorclasslib -o RazorUIClassLib
dotnet new page -n _Message -np -o RazorUIClassLib/Areas/MyFeature/Pages/Shared
dotnet new viewstart -o RazorUIClassLib/Areas/MyFeature/Pages

上述命令：

RazorUIClassLib建立 RCL。
建立 Razor _Message頁面，並將其新增至 RCL。 -np 參數會建立頁面而不使用 PageModel。
建立檔案 _ViewStart.cshtml 並將它新增至 RCL。

需要檔案 _ViewStart.cshtml 才能使用 Pages 專案的版面配置 Razor ， (會在下一節中新增) 。

將檔案和資料夾新增 Razor 至專案

將中的 RazorUIClassLib/Areas/MyFeature/Pages/Shared/_Message.cshtml 標記取代為下列程式碼：

<h3>_Message.cshtml partial view.</h3>

<p>RazorUIClassLib\Areas\MyFeature\Pages\Shared\_Message.cshtml</p>

將中的 RazorUIClassLib/Areas/MyFeature/Pages/Page1.cshtml 標記取代為下列程式碼：
```
@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" />)。您可以新增 _ViewImports.cshtml 檔案，而不是包含 @addTagHelper 指示詞。例如：
```
dotnet new viewimports -o RazorUIClassLib/Areas/MyFeature/Pages
```
如需的詳細資訊 _ViewImports.cshtml ，請參閱匯入共用指示詞
建置類別庫，以確認沒有任何編譯器錯誤：
```
dotnet build RazorUIClassLib
```

組建輸出包含 RazorUIClassLib.dll 和 RazorUIClassLib.Views.dll 。 RazorUIClassLib.Views.dll 包含已 Razor 編譯的內容。

Razor從 Razor Pages 專案使用 UI 程式庫

Visual Studio
.NET Core CLI

Razor建立 Pages Web 應用程式：

從方案總管，以滑鼠右鍵按一下方案 >[新增>專案]。
選取 ASP.NET Core Web 應用程式。
將應用程式命名為 WebApp1。
確認已選取 ASP.NET Core 2.1 或更新版本。
選取[Web 應用程式>確定]。
從 [方案總管]，以滑鼠右鍵按一下 WebApp1，然後選取 [設定為啟始專案]。
從方案總管，以滑鼠右鍵按一下 WebApp1，然後選取 [建置相依性]>[專案相依性]。
檢查Razor UIClassLib作為WebApp1的相依性。
從 [方案總管]，以滑鼠右鍵按一下 WebApp1，然後選取 [新增]>[參考]。
在 [參考管理員] 對話方塊中，檢查Razor [UIClassLib>確定]。

執行應用程式。

建立 Razor Pages Web 應用程式和包含 Razor Pages 應用程式和 RCL 的解決方案檔案：

dotnet new webapp -o WebApp1
dotnet new sln
dotnet sln add WebApp1
dotnet sln add RazorUIClassLib
dotnet add WebApp1 reference RazorUIClassLib

建置和執行 Web 應用程式：

cd WebApp1
dotnet run

測試 WebApp1

流覽至 /MyFeature/Page1 以確認 Razor UI 類別庫正在使用中。

覆寫檢視、部分檢視和頁面

在範例下載中，將重新命名 WebApp1/Areas/MyFeature2 為 WebApp1/Areas/MyFeature 以測試優先順序。

RCL 頁面版面配置

若要參考 RCL 內容，如同它是 Web 應用程式 Pages 資料夾的一部分，請使用下列檔案結構建立 RCL 專案：

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

假設 RazorUIClassLib/Pages/Shared 包含兩個部分檔案： _Header.cshtml 和 _Footer.cshtml 。 <partial>標籤可以新增至 _Layout.cshtml 檔案：

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

檢視或下載範例程式碼 $英文$ (如何下載)

建立包含 Razor UI 的類別庫

Visual Studio
.NET Core CLI

從 Visual Studio 選取 [ 建立新專案]。
選取Razor [類別庫>] [下一步]。
將程式庫命名為 (，例如「 Razor ClassLib」) 、 >Create。若要避免與產生的檢視程式庫發生檔案名稱衝突，程式庫名稱結尾請務必不要使用 .Views。
如果您需要支援檢視，請選取 [支援頁面和檢視 ]。根據預設，僅 Razor 支援 Pages。選取 [建立] 。

類別 Razor 庫 (RCL) 範本預設為 Razor 元件開發。 [支援頁面和檢視] 選項支援頁面和檢視。

從命令列執行 dotnet new razorclasslib。例如：

dotnet new razorclasslib -o RazorUIClassLib

類別 Razor 庫 (RCL) 範本預設為 Razor 元件開發。 --support-pages-and-views傳遞選項 (dotnet new razorclasslib --support-pages-and-views) ，以提供頁面和檢視的支援。

如需詳細資訊，請參閱 dotnet new。若要避免與產生的檢視程式庫發生檔案名稱衝突，程式庫名稱結尾請務必不要使用 .Views。

將檔案新增 Razor 至 RCL。

ASP.NET Core範本假設 RCL 內容位於 Areas 資料夾中。請參閱下方的 RCL 頁面版面配置，以建立可公開內容的 ~/Pages RCL，而不是 ~/Areas/Pages 。

參考 RCL 內容

RCL 可以由下列各項參考：

NuGet 套件。請參閱建立 NuGet 套件和 dotnet add package 和建立和發佈 NuGet 套件。
{ProjectName}.csproj. 請參閱 dotnet-add reference。

覆寫檢視、部分檢視和頁面

在範例下載中，將重新命名 WebApp1/Areas/MyFeature2 為 WebApp1/Areas/MyFeature 以測試優先順序。

如果 RCL 使用 Razor Pages，請在主控應用程式中啟用 Razor Pages 服務和端點：

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews();
    services.AddRazorPages();
}

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");

        endpoints.MapRazorPages();
    });
}

RCL 頁面版面配置

若要參考 RCL 內容，就像是 Web 應用程式 Pages 資料夾的一部分，請使用下列檔案結構建立 RCL 專案：

RazorUIClassLib/Pages
RazorUIClassLib/Pages/Shared

假設 RazorUIClassLib/Pages/Shared 包含兩個部分檔案： _Header.cshtml 和 _Footer.cshtml 。標記 <partial> 可以新增至 _Layout.cshtml 檔案：

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

將 _ViewStart.cshtml 檔案新增至 RCL 專案的 Pages 資料夾，以使用 _Layout.cshtml 來自主機 Web 應用程式的檔案：

@{
    Layout = "_Layout";
}

建立具有靜態資產的 RCL

RCL 可能需要由 RCL 或 RCL 取用應用程式參考的隨附靜態資產。 ASP.NET Core允許建立包含可供取用應用程式的靜態資產的 RCL。

若要在 RCL 中包含隨附資產，請在類別庫中建立 wwwroot 資料夾，並在該資料夾中包含任何必要的檔案。

封裝 RCL 時，資料夾中的所有隨附資產 wwwroot 都會自動包含在套件中。

dotnet pack使用命令，而不是 NuGet.exe 版本 nuget pack 。

排除靜態資產

若要排除靜態資產，請將所需的排除路徑新增至 $(DefaultItemExcludes) 專案檔中的屬性群組。以分號分隔專案 (;) 。

在下列範例中，資料夾中的 lib.css stylesheet wwwroot 不會被視為靜態資產，也不會包含在已發佈的 RCL 中：

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

Typescript 整合

若要在 RCL 中包含 TypeScript 檔案：

參考專案中的 Microsoft.TypeScript.MSBuild NuGet 套件。

注意

如需將套件新增至 .NET 應用程式的指引，請參閱在套件取用工作流程 (NuGet 文件) 的安裝及管理套件底下的文章。在 NuGet.org 確認正確的套件版本。
將 TypeScript 檔案放在資料夾外部 wwwroot (.ts) 。例如，將檔案放在 Client 資料夾中。
設定資料夾的 wwwroot TypeScript 組建輸出。 TypescriptOutDir在專案檔中設定內的 PropertyGroup 屬性：
```
<TypescriptOutDir>wwwroot</TypescriptOutDir>
```

在專案檔中新增下列目標，將 TypeScript 目標納入為目標的 PropertyGroup 相依性 ResolveCurrentProjectStaticWebAssets ：

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

從參考的 RCL 取用內容

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

    app.UseStaticFiles();

    ...
}

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 。

多專案開發流程

當取用的應用程式執行時：

RCL 中的資產會保留在其原始檔案夾中。資產不會移至取用的應用程式。
在重建 RCL 且不重建取用的應用程式之後，RCL wwwroot 資料夾內的任何變更會反映在取用應用程式中。