前へ

次へ

新しい 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. 次の 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 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 アプリケーションを起動し、ブラウザーでそのアプリケーションに移動します。 [最初のモーダル ダイアログ] ダイアログが、画面の残りのコンテンツの前に表示されます。

続行