Razor 類別庫建立和概念
- 5 分鐘
Web 應用程式中的元件可讓開發人員在整個應用程式中重複使用應用程式使用者介面的部分。 藉由使用 Razor 類別庫，開發人員可以在許多應用程式中共用和重複使用這些元件。
在本單元中，您將瞭解如何建立Razor類別庫。 然後，您可以使用它來共用 Blazor 應用程式的轉譯和靜態內容，以自定義和顯示。
Razor 類別庫
Razor 類別庫是 .NET 項目類型。 它包含 Blazor 應用程式可以參考的 Razor 元件、頁面、HTML、級聯樣式表 （CSS） 檔案、JavaScript、影像和其他靜態 Web 內容。 與其他 .NET 類別庫項目一樣，Razor 類別庫可以組合為 NuGet 套件，並在 NuGet 套件存放庫上共用，例如 NuGet.org。
讓我們看看建立Razor類別庫的預設範本。
使用預設範本建立專案
您可以選擇性地開始在 Visual Studio 中建立 Razor 類別庫，方法是選取 [ 檔案>新專案]。
![Visual Studio 中 [建立新專案] 窗格 Razor 元件庫範本連結的螢幕快照。](../../aspnetcore/blazor-build-reusable-components/media/visual-studio-create.png)
您也可以執行下列命令，在命令列介面上建立專案：
dotnet new razorclasslib -o MyProjectName
此樣本會提供名為 Component1 的初始元件，其中包含您元件可以使用的數個重要功能：
- 名為 Component1.razor.css 的隔離級聯樣式表單，儲存在 與 Component1.razor 相同的資料夾中。 Component1.razor.css檔案會有條件地包含在參考 Component1 的 Blazor 應用程式中。
- 靜態內容，例如影像和 JavaScript 檔案，可供 Blazor 應用程式在運行時間使用，並在 Component1 內參考。 此內容會在 wwwroot 資料夾中傳遞，其運作方式與 ASP.NET Core 或 Blazor 應用程式中的 wwwroot 資料夾相同。
- .NET 程式代碼，它會執行位於內含 JavaScript 檔案中的函式。
類別庫與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內容建立為Razor類別庫。
- 條目
SupportedPlatform宣告此函式庫可用於browser平台，也就是 WebAssembly。 -
PackageReference程式庫的Microsoft.AspNetCore.Components.Web會授與隨附架構的基底 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 會新增兩個像素虛線紅色框線，以及使用 wwwroot 資料夾中 background.png 影像的背景影像樣式。 不需要路徑，即可將 CSS 的參考設為 wwwroot 資料夾中的內容。
.my-component {
border: 2px dashed red;
padding: 1em;
margin: 1em 0;
background-image: url('background.png');
}
wwwroot 資料夾的內容可供託管的 Blazor 應用程式參考，格式為絕對資料夾參考：
/_content/{PACKAGE_ID}/{PATH_AND_FILENAME_INSIDE_WWWROOT}
參考 Razor 類別庫
在 .NET 解決方案中，Razor 類別庫位於參考連結庫的 Blazor 應用程式旁邊的磁碟上，您可以使用標準 Visual Studio [新增參考 ] 對話框，並使用 .NET CLI add reference 命令來更新 Blazor 應用程式以參考 Razor 類別庫，如下所示：
dotnet add reference ../MyClassLibrary
針對以 NuGet 套件形式交付的程式庫，您可以使用 Visual Studio NuGet 套件安裝程式或使用 .NET CLI add package 命令來新增參考，如下所示：
dotnet add package MyClassLibrary