Blazor コンポーネントからデータにアクセスする

魅力的な Web サイトでは、常に変更される可能性のある動的なコンテンツを表示する必要があります。 データベースや Web サービスなどの動的ソースからデータを取得する方法を学習することは、Web 開発の基本的な手法です。

あなたは、更新された顧客向けの Web サイトでピザ配達会社に勤務しているとします。 さまざまな Web ページがレイアウトされ、Blazor コンポーネントとして設計されています。 次に、データベースから取得するピザ、トッピング、注文に関する情報をこれらのページに設定します。

このユニットでは、データにアクセスし、ユーザーに表示するために HTML マークアップ内でレンダリングする方法について説明します。

登録済みデータ サービスの作成

変更する情報をユーザーに表示する動的な Web サイトを作成する場合は、そのデータをどこかから取得するコードを記述する必要があります。 たとえば、会社が販売するすべてのピザを格納するデータベースがあるとします。 ピザは常に変化しているので、ウェブサイトHTMLにハードコーディングするのは悪い考えです。 代わりに、C# コードと Blazor を使用してデータベースに対してクエリを実行し、ユーザーが自分のお気に入りを選択できるように詳細を HTML として書式設定します。

Blazor Server アプリでは、データ ソースを表す登録済みサービスを作成し、そこからデータを取得できます。

登録されたサービスの作成は、まず、そのプロパティを定義するクラスを記述することから始まります。 ピザを表すために記述する例を次に示します。

namespace BlazingPizza.Data;

public class Pizza
{
    public int PizzaId { get; set; }
    
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    public decimal Price { get; set; }
    
    public bool Vegetarian { get; set; }
    
    public bool Vegan { get; set; }
}

このクラスは、ピザのプロパティとデータ型を定義します。 これらのプロパティがデータ ソースのピザ スキーマと一致していることを確認する必要があります。 プロジェクトの Data フォルダーにこのクラスを作成し、 Data というメンバー名前空間を使用するのが理にかなっています。 必要に応じて、他のフォルダーと名前空間を選択できます。

次に、サービスを定義します。

namespace BlazingPizza.Data;

public class PizzaService
{
    public Task<Pizza[]> GetPizzasAsync()
    {
    // Call your data access technology here
    }
}

サービスは非同期呼び出しを使用してデータにアクセスし、 Pizza オブジェクトのコレクションを返します。 データ ソースは、Blazor コードが実行されているサーバーからリモートである可能性があります。 その場合は、非同期呼び出しを使用します。 その後、データ ソースの応答が遅い場合は、応答を待機している間、他のコードを引き続き実行できます。

サービスを登録するには、Add Services to the container セクションに行を追加します。

...
// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Register the pizzas service
builder.Services.AddSingleton<PizzaService>();
...

サービスを使用してデータを取得する

次に、Blazor コンポーネントで呼び出してデータを取得することで、定義したサービスを使用します。 次のコンポーネント コードがあり、その中にピザを表示するとします。

@page "/pizzas"

<h1>Choose your pizza</h1>

<p>We have all these delicious recipes:</p>

サービスの挿入

コンポーネントからサービスを呼び出す前に、依存関係の挿入を使用してサービスを追加する必要があります。 @page ディレクティブの後に次のコードを追加して、サービスを挿入します。

@using BlazingPizza.Data
@inject PizzaService PizzaSvc

通常、コンポーネントとサービスは異なる名前空間メンバー内に存在するため、 @using ディレクティブを含める必要があります。 このディレクティブは、C# コード ファイルの先頭にある using ステートメントと同じように動作します。 @inject ディレクティブは、現在のコンポーネントにサービスを追加し、そのインスタンスを開始します。 ディレクティブで、サービス クラスの名前を指定します。 このコンポーネント内でサービスのインスタンスに使用したい名前を指定してください。

OnInitializedAsync メソッドをオーバーライドする

サービスを呼び出してデータを取得するには、 OnInitializedAsync メソッドを使用することをお勧めします。 このイベントは、コンポーネントの初期化が完了し、その初期パラメーターを受け取ったが、ページがレンダリングされてユーザーに表示される前に発生します。 イベントは Blazor コンポーネントの基底クラスで定義されます。 このコード ブロックでは、次の例のようにオーバーライドできます。

protected override async Task OnInitializedAsync()
{
    \\ Call the service here
}

サービスを呼び出してデータを取得する

サービスを呼び出すときは、呼び出しが非同期であるため、 await キーワードを使用します。

private Pizza[] todaysPizzas;

protected override async Task OnInitializedAsync()
{
    todaysPizzas = await PizzaSvc.GetPizzasAsync();
}

ユーザーへのデータの表示

サービスからデータを取得した後、ユーザーに表示する必要があります。 ピザの例では、サービスがユーザーが選択できるピザの一覧を返す必要があります。 Blazor には、ユーザーに表示されるページにこのデータを挿入するために使用できる豊富なディレクティブ のセットが含まれています。

データのチェック

まず、 todaysPizzas コレクションが nullされているかどうかを確認して、ピザが読み込まれる前にページに表示される内容を決定します。 Blazor コンポーネントで条件付きレンダリング コードを実行するには、 @if ディレクティブを使用します。

@if (todaysPizzas == null)
{
    <p>We're finding out what pizzas are available today...</p>
}
else
{
    <!-- This markup will be rendered once the pizzas are loaded -->
}

@if ディレクティブは、C# 式がtrueを返す場合にのみ、最初のコード ブロックでマークアップをレンダリングします。 また、 else if コード ブロックを使用して他のテストを実行し、マークアップが true の場合はマークアップをレンダリングすることもできます。 最後に、前の条件が true を返さなかった場合にコードをレンダリングする else コード ブロックを指定できます。 null コード ブロックで@ifを確認することで、Blazor がサービスからデータを取得する前にピザの詳細を表示しないようにします。

オブジェクトのコレクションのレンダリング

Blazor が前のコードで else ステートメントを実行すると、一部のピザがサービスから取得されたことがわかります。 次のタスクは、これらのピザをユーザーに表示することです。 単純な HTML テーブルでデータを表示する方法を見てみましょう。

このページのコーディング時に使用できるピザの数はわかりません。 @foreach ディレクティブを使用して、todaysPizzas コレクション内のすべてのオブジェクトをループ処理し、それぞれの行をレンダリングできます。

<table>
 <thead>
  <tr>
   <th>Pizza Name</th>
   <th>Description</th>
   <th>Vegetarian?</th>
   <th>Vegan?</th>
   <th>Price</th>
  </tr>
 </thead>
 <tbody>
  @foreach (var pizza in todaysPizzas)
  {
   <tr>
    <td>@pizza.Name</td>
    <td>@pizza.Description</td>
    <td>@pizza.Vegetarian</td>
    <td>@pizza.Vegan</td>
    <td>@pizza.Price</td>
   </tr>
  }
 </tbody>
</table>

この例で示されているプレーン テーブルよりも、ピザの表示が豊富である可能性があります。 価格やその他の値の書式を設定できます。 グラフィック デザイナーと協力して、より魅力的な UI を開発します。 たとえば、各ピザの画像を含めます。

次のユニットでは、独自のデータ サービスを登録します。