上一個

下一個

建立 Razor 類別庫

已完成

在此練習中，您將在 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. 將下列 Razor 內容新增至 Modal.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 伺服器應用程式，並開始使用強制回應元件。

1. 使用 Visual Studio 的新增專案功能，或執行下列命令，來在 FirstClassLibrary 專案旁邊的資料夾中建立名為 MyBlazorApp 的新 Blazor 伺服器專案：

   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 應用程式，並在瀏覽器中瀏覽至該應用程式。 [我的第一個強制回應對話方塊] 對話方饋應顯示在畫面上的剩餘內容前方。

繼續