Razor类库的创建与概念

Web 应用程序中的组件使开发人员能够在整个应用程序中重复使用应用程序用户界面的某些部分。 通过使用 Razor 类库，开发人员可以在多个应用程序中共享和重复使用这些组件。

在本单元中，你将了解如何创建 Razor 类库。 然后使用它来共享 Blazor 应用程序的渲染内容和静态内容，以进行自定义和显示。

Razor 类库

Razor 类库是 .NET 项目类型。 它包含 Blazor 应用程序可以引用的 Razor 组件、页面、HTML、级联样式表（CSS）文件、JavaScript、图像和其他静态 Web 内容。 与其他 .NET 类库项目一样，Razor 类库可以捆绑为 NuGet 包，并在 NuGet 包存储库（如 NuGet.org）上共享。

让我们看看用于创建 Razor 类库的默认模板。

使用默认模板创建项目

可以选择性地开始在 Visual Studio 中创建 Razor 类库，方法是选择 “文件>新建项目”。

还可以通过运行以下命令在命令行接口上创建项目：

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 类库。
• 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