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 内引用。此内容在 wwwroot 文件夹中提供，该文件夹的行为与 ASP.NET Core 或 Blazor 应用程序中的 wwwroot 文件夹的行为相同。
执行驻留在包含的 JavaScript 文件中的函数的 .NET 代码。

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 会添加双像素虚线红色边框和背景图像样式，后者将使用 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

知识检查

继续