上一篇

下一步

创建 Razor 类库

已完成

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

创建 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 的“添加引用”功能或从 MyBlazorServer 文件夹运行以下命令来添加对 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 应用程序，并在浏览器中导航到该应用程序。 “我的第一个模式对话框”应显示在屏幕上的其余内容的前面。

继续