新しい 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 ファイルを使用してプロジェクト内にモーダルコンポーネントを作成し、初期形式を提供します。

Component1.razor ファイルの名前を Modal.razor に、Component1.razor.css ファイルの名前を Modal.razor.css に変更します。 Modal.razor ファイルには、作成するコンポーネントが含められるので、将来、空のテキストファイルをプロジェクトに追加し、Razor または CSS のコンテンツで適切に書式設定することができます。

次の 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 パラメーターを使用して、ダイアログの表示状態を制御できます。

コンポーネントの既定の書式設定を指定するには、次の 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 アプリケーションを追加してモーダルコンポーネントの使用を開始します。

Visual Studio の新しいプロジェクトの追加機能を使うか、次のコマンドを実行して、FirstClassLibrary プロジェクトの横のフォルダーに MyBlazorApp という新しい Blazor Server プロジェクトを作成します。
```
dotnet new blazor -o MyBlazorApp -f net8.0
```
MyBlazorApp プロジェクトで、Visual Studio の参照の追加機能を使うか、MyBlazorApp フォルダーから次のコマンドを実行して、FirstClassLibrary プロジェクトへの参照を追加します。
```
dotnet add reference ../FirstClassLibrary
```

このプロジェクト参照を設定すると、MyBlazorApp アプリケーションは FirstClassLibrary プロジェクト内のコンポーネントと対話できます。

MyBlazorApp アプリケーションの Components フォルダーにある _Imports.razor ファイルの末尾にエントリを追加して、モーダルコンポーネントを簡単に参照できるようにします。これにより、コンポーネントの名前空間全体を指定しなくても、モーダルコンポーネントを参照できます。
```
@using FirstClassLibrary
```
このアプリケーションの開始ページである 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 テンプレートアプリケーションに先ほど作成したモーダルダイアログのスクリーンショット。

新しい Razor クラス ライブラリを作成する

Razor クラス ライブラリ プロジェクトを作成する

モーダル ダイアログ コンポーネントを作成する

モーダル コンポーネントの参照と使用

作業を確認

フィードバック

新しい Razor クラスライブラリを作成する

Razor クラスライブラリプロジェクトを作成する

モーダルダイアログコンポーネントを作成する

モーダルコンポーネントの参照と使用