Razor 類別庫建立和概念

5 分鐘

Web 應用程式中的元件，可讓開發人員在整個應用程式中，重複使用應用程式使用者介面的部分。開發人員可以使用 Razor 類別庫，在許多應用程式中共用和重複使用這些元件。

在此單元中，您將瞭解如何建立 Razor 類別庫，並使用該類別庫來共用 Blazor 應用程式的轉譯和靜態內容，以自訂和顯示其內容。

關於 Razor 類別庫

Razor 類別庫是一種 .NET 專案類型，其中包含 Razor 元件、頁面、HTML、階層式樣式表 (CSS) 檔案、JavaScript、影像，和其他可由 Blazor 應用程式參考的靜態 Web 內容。如同其他 .NET 類別庫專案，Razor 類別庫可以組合為 NuGet 套件，並在 NuGet 套件存放庫 (例如 NuGet.org) 上共用該套件。

請查看建立 Razor 類別庫的預設範本。

使用預設範本來建立專案

您可以選取 [檔案]>[新增專案]，選擇性地開始在 Visual Studio 中建立 Razor 類別庫。

Screenshot of the

您也可以執行下列命令，在命令列介面上建立專案：

dotnet new razorclasslib -o MyProjectName

此範本會提供名為 Component1 的初始元件，其中包含元件可以使用的數個重要功能：

名為 Component1.razor.css 的隔離階層式樣式表，會儲存在與 Component1.razor 相同的資料夾中。 Component1.razor.css 檔案有條件地包含在參考 Component1 的 Blazor 應用程式中。
靜態內容，例如影像和 JavaScript 檔案，可在執行階段供 Blazor 應用程式使用，並可在 Component1 內參考其內容。此內容會以與 ASP.NET Core 或 Blazor 應用程式中 wwwroot 資料夾相同的方式，傳遞至 wwwroot 資料夾中。
.NET 程式碼，會執行位於內含 JavaScript 檔案中的函式。

Screenshot of Visual Studio Solution Explorer, showing the default project contents.

類別庫與 Razor 類別庫之間的差異

類別庫是 .NET 應用程式中的通用套件傳遞結構，而在結構方面，Razor 類別庫和專案檔中設定的幾個功能相似。

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

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  
  <ItemGroup>
    <SupportedPlatform Include="browser" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.0" />
  </ItemGroup>

</Project>

專案檔包含 Microsoft.NET.Sdk.Razor 的 SDK 參考，宣告其包含並建立 Razor 內容作為 Razor 類別庫。
SupportedPlatform 項目會宣告此程式庫可用於 browser 平台，也就是 WebAssembly。
Microsoft.AspNetCore.Components.Web 程式庫的 PackageReference 會授與隨附架構的基底 Blazor 元件存取權。可讓您使用這些簡單的元件，協助您建置更複雜的元件。

Razor 元件內容

傳遞的初始 Razor 元件內容相當簡單。其只包含具有簡短文字區塊的 HTML div 元素：

<div class="my-component">
    This component is defined in the <strong>FirstRazorLibrary</strong> library.
</div>

此元件會與其他 Blazor 元件和頁面進行互動，其參考該元件的方式，會與您預期相同專案中，傳遞元件參考該元件的方式相同。意即，Component1.razor.css 檔案中的 CSS 隔離指令碼，會轉譯並內嵌於 application.css 檔案中其餘應用程式的 CSS。

靜態資產傳遞

針對 wwwroot 資料夾，您可以在該資料的其他內容，以及元件的個別 CSS 檔案間 (例如 Component1.razor.css) 相對性地參考其資料夾的內容，如同相同基底資料夾中的檔案。例如，預設的 CSS 會新增 2 像素的紅色虛線邊框和背景影像樣式 (該樣式會使用 wwwroot 資料夾中的 background.png 影像)。您不需要使用路徑，讓來自 CSS 的參考移至位於 wwwroot 資料夾的內容中。

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

裝載的 Blazor 應用程式可使用完整的資料夾參考，來參考 wwwroot 資料夾的內容，適用的資料夾參考格式如下：

/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}

參考 Razor 類別庫

在 .NET 解決方案中，Razor 類別庫會位於 Blazor 應用程式旁的磁碟上，該應用程式會參考程式庫，您可以使用標準 Visual Studio [新增參考] 對話方塊，以及 .NET CLI add reference 命令，更新 Blazor 應用程式來參考 Blazor 類別庫，如下所示：

dotnet add reference ../MyClassLibrary

針對以 NuGet 套件表單形式來傳遞的程式庫，您可以使用 Visual Studio NuGet 套件安裝程式，或使用 .NET CLI add package 命令來新增參考，如下所示：

dotnet add package MyClassLibrary