创建 Razor 类库

  • 5 分钟

在此练习中，创建可在默认 Blazor 模板应用程序中重用的 Razor 类库中的模式对话框。

将在标准 Blazor 模板应用程序中创建的模式对话框的屏幕截图。

创建 Razor 类库项目

此模块使用 .NET 6.0 SDK。 通过在首选终端中运行以下命令，确保你已安装 .NET 6.0：

dotnet --list-sdks

将显示类似于下面的输出：

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

确保列出了以 6 开头的版本。 如果未列出任何版本或未找到命令，请安装最新的 .NET 6.0 SDK。

首先，为模式对话框组件创建 Razor 类库项目。 可使用 Visual Studio 创建新项目，也可以使用 .NET 命令行工具在新文件夹中创建项目，如下所示：

dotnet new razorclasslib -o FirstClassLibrary -f net8.0

生成模式对话框组件

接下来，在项目中生成模式组件（其中附带一个适当的 CSS 文件），并提供初始格式。

  1. 将 Component1.razor 文件重命名为 Modal.razor，并将 Component1.razor.css 文件重命名为 Modal.razor.css。 Modal.razor 文件包含要创建的组件，将来可向项目中添加空白文本文件，并相应地使用 Razor 内容或 CSS 内容对它们进行格式设置。

  2. 向 Modal.razor 文件添加以下 Razor 内容：

    @if (Show) {

 <div class="dialog-container">
  <div class="dialog">
   <div class="dialog-title">
    <h2>@Title</h2>
   </div>

   <div class="dialog-body">
    @ChildContent
   </div>

   <div class="dialog-buttons">
    <button class="btn btn-secondary mr-auto" @onclick="OnCancel">@CancelText</button>
    <button class="btn btn-success ml-auto" @onclick="OnConfirm">@ConfirmText</button>
   </div>

  </div>
 </div>

}

@code {

 [Parameter]
 public string Title { get; set; }

 [Parameter]
 public string CancelText { get; set; } = "Cancel";

 [Parameter]
 public string ConfirmText { get; set; } = "Ok";

 [Parameter]
 public RenderFragment ChildContent { get; set; }

 [Parameter]
 public bool Show { get; set; }


 [Parameter] public EventCallback OnCancel { get; set; }
 [Parameter] public EventCallback OnConfirm { get; set; }

}

    此组件有几个很好的功能，你可以在项目之间共享：

    • 标题。
    • “取消”和“确认”按钮，具有可配置的标签和可管理的单击事件。
    • 可以通过 ChildContent 参数设置组件的内部内容。
    • 可以使用 Show 参数控制对话框的显示状态。

  3. 若要为组件提供默认格式设置，请将以下 CSS 添加到 Modal.razor.css 文件：

    .dialog-container {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: rgba(0,0,0,0.5);
 z-index: 2000;
 display: flex;
 animation: dialog-container-entry 0.2s;
}

@keyframes dialog-container-entry {
 0% {
   opacity: 0;
 }

 100% {
   opacity: 1;
 }
}

.dialog {
 background-color: white;
 box-shadow: 0 0 12px rgba(0,0,0,0.6);
 display: flex;
 flex-direction: column;
 z-index: 2000;
 align-self: center;
 margin: auto;
 width: 700px;
 max-height: calc(100% - 3rem);
 animation: dialog-entry 0.4s;
 animation-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
}

@keyframes dialog-entry {
 0% {
   transform: translateY(30px) scale(0.95);
 }

 100% {
   transform: translateX(0px) scale(1.0);
 }
}

.dialog-title {
 background-color: #444;
 color: #fff2cc;
 padding: 1.3rem 0.5rem;
}

 .dialog-title h2 {
   color: white;
   font-size: 1.4rem;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.3rem;
 }

.dialog-body {
 flex-grow: 1;
 padding: 0.5rem 3rem 1rem 0.5rem;
}

.dialog-buttons {
 height: 4rem;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 background-color: #eee;
 padding: 0 1rem;
}

此标记为底部的标题栏和按钮栏提供了一些默认颜色，使其比一组简单的灰色 HTML 元素更有趣。

引用和使用模式组件

现在将模式项目驻留在 FirstClassLibrary 项目中后，添加一个新的 Blazor Server 应用程序并开始使用模式组件。

  1. 通过使用 Visual Studio 的“添加新项目”功能或运行以下命令，在 FirstClassLibrary 项目旁的文件夹中创建名为“MyBlazorApp”的新 Blazor Server 项目：

    dotnet new blazor -o MyBlazorApp -f net8.0

  2. 在 MyBlazorApp 项目中，通过使用 Visual Studio 的“添加引用”功能或从 MyBlazorApp 文件夹运行以下命令来添加对 FirstClassLibrary 项目的引用：

    dotnet add reference ../FirstClassLibrary

引用此项目后，MyBlazorApp 应用程序可以与 FirstClassLibrary 项目中的组件进行交互。

  1. 在 MyBlazorApp 应用程序的 Components 文件夹中找到 _Imports.razor 文件，在该文件的末尾添加一个条目，以便更轻松地引用模式组件。 这样一来，你便可以引用模式组件，而无需为该组件指定整个命名空间。

    @using FirstClassLibrary

  2. 将模式组件添加到此应用程序的打开页面，即 Components/Pages/Home.razor 文件

    <Modal Title="My first Modal dialog" Show="true">
 <p>
   This is my first modal dialog
 </p>
</Modal>

    a. 为组件指定标题“我的第一个模式对话框”。
    b. 添加要在对话框内显示的短段落。 此内容描述了对话框的用途。
    c. 使用 Show 参数将对话框设置为可见。

检查你的工作

使用 dotnet run 启动 MyBlazorApp 应用程序，并在浏览器中导航到该应用程序。 “我的第一个模式对话框”应显示在屏幕上的其余内容的前面。

刚在标准 Blazor 模板应用程序中创建的模式对话框的屏幕截图。