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

作者:Rick Anderson

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

建立包含 Razor UI 的類別庫

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

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

將檔案新增 Razor 至 RCL。

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

參考 RCL 內容

RCL 可以由下列各項參考:

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

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

在範例下載中,將 重新命名 WebApp1/Areas/MyFeature2WebApp1/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) 專案檔中的屬性群組。 以分號分隔專案 (;) 。

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

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

Typescript 整合

若要在 RCL 中包含 TypeScript 檔案:

  1. 將 TypeScript 檔案放在資料夾外部 wwwroot (.ts) 。 例如,將檔案放在 Client 資料夾中。

  2. 設定資料夾的 wwwroot TypeScript 組建輸出。 TypescriptOutDir在專案檔中設定 內的 PropertyGroup 屬性:

    <TypescriptOutDir>wwwroot</TypescriptOutDir>
    
  3. 在專案檔中新增下列目標,將 TypeScript 目標納入為目標的 PropertyGroup 相依性 PrepareForBuildDependsOn

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

從參考的 RCL 取用內容

RCL 資料夾中所包含的 wwwroot 檔案會公開給 RCL 或前置詞 _content/{PACKAGE ID}/ 底下的取用應用程式。 例如,在專案檔中具有 元件名稱 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();

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

多專案開發流程

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

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

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

發佈

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

其他資源

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

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

建立包含 Razor UI 的類別庫

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

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

將檔案新增 Razor 至 RCL。

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

參考 RCL 內容

RCL 可以由下列各項參考:

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

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

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

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

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) 專案檔中的屬性群組。 以分號分隔專案 (;) 。

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

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

Typescript 整合

若要在 RCL 中包含 TypeScript 檔案:

  1. 將 TypeScript 檔案放在資料夾外部 wwwroot (.ts) 。 例如,將檔案 Client 放在資料夾中。

  2. 設定資料夾的 wwwroot TypeScript 組建輸出。 在 TypescriptOutDir 專案檔的 內 PropertyGroup 設定 屬性:

    <TypescriptOutDir>wwwroot</TypescriptOutDir>
    
  3. 在專案檔中新增下列目標, PropertyGroup 將 TypeScript 目標納入為目標的相依性 ResolveCurrentProjectStaticWebAssets

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

從參考的 RCL 取用內容

RCL 資料夾中所包含的 wwwroot 檔案會公開給前置詞下的 _content/{PACKAGE ID}/ RCL 或取用應用程式。 例如,在專案檔中具有 元件名稱 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>();
            });
}

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

多專案開發流程

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

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

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

發佈

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

其他資源

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

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

建立包含 Razor UI 的類別庫

  • 從 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>

將檔案新增 Razor 至 RCL。

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

參考 RCL 內容

RCL 可以由下列各項參考:

逐步解說:建立 RCL 專案,並從 Pages 專案使用 Razor

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

測試下載應用程式

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

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

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

建立 RCL

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

建立 RCL 專案:

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

將檔案和資料夾新增 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.dllRazorUIClassLib.Views.dllRazorUIClassLib.Views.dll 包含已 Razor 編譯的內容。

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

Razor建立 Pages Web 應用程式:

  • 方案總管,以滑鼠右鍵按一下方案 >[新增>Project]。

  • 選取 ASP.NET Core Web 應用程式

  • 將應用程式命名為 WebApp1

  • 確認已選取 ASP.NET Core 2.1 或更新版本。

  • 選取[Web 應用程式>確定]。

  • 從 [方案總管],以滑鼠右鍵按一下 WebApp1,然後選取 [設定為啟始專案]

  • 從方案總管,以滑鼠右鍵按一下 WebApp1,然後選取 [建置相依性]>[專案相依性]

  • 檢查Razor UIClassLib作為WebApp1的相依性。

  • 從 [方案總管],以滑鼠右鍵按一下 WebApp1,然後選取 [新增]>[參考]

  • 在 [參考管理員]對話方塊中,檢查Razor [UIClassLib>確定]。

執行應用程式。

測試 WebApp1

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

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

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

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

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

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

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

建立包含 Razor UI 的類別庫

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

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

將檔案新增 Razor 至 RCL。

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

參考 RCL 內容

RCL 可以由下列各項參考:

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

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

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

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

如果 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 檔案:

  1. 將 TypeScript 檔案放在資料夾外部 wwwroot (.ts) 。 例如,將檔案放在 Client 資料夾中。

  2. 設定資料夾的 wwwroot TypeScript 組建輸出。 TypescriptOutDir在專案檔中設定 內的 PropertyGroup 屬性:

    <TypescriptOutDir>wwwroot</TypescriptOutDir>
    
  3. 在專案檔中新增下列目標,將 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} 中指定的套件識別碼。

其他資源