演習 - 新しい Razor ページを追加する

10 分

前のユニットでは、Contoso Pizza プロジェクトのソースコードを取得し、ホームページにいくつかの簡単な変更を加えました。このユニットでは、新しい Razor ページをプロジェクトに追加します。

Pizza List ページを作成する

新しい Razor ページを作成するには、.NET CLI を使用します。

ターミナルは dotnet watch コマンドによってブロックされているため、エクスプローラーで ContosoPizza フォルダーを右クリックして別のターミナルを開き、[統合ターミナルで開く] を選択します。
新しいターミナルウィンドウで、次のコマンドを入力します。
```
dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages
```
上記のコマンドでは次のことが行われます。
- ContosoPizza.Pages 名前空間に次の 2 つのファイルを作成します。
  - PizzaList.cshtml - Razor ページ
  - PizzaList.cshtml.cs - 付随する PageModel クラス
- 両方のファイルがプロジェクトの Pages サブディレクトリに格納されます。
Pages/PizzaList.cshtml で、@{ } コードブロック内に次のコードを追加します。
```
ViewData["Title"] = "Pizza List 🍕";
```
これにより、ページの <title> 要素が設定されます。
ファイルの末尾に次のコードを追加します。
```
<h1>Pizza List 🍕</h1>




```
これによってページに、見出しと、後で追加する機能の 2 つの HTML コメントプレースホルダーが追加されます。
ファイルを保存します。 GitHub Codespaces を使用している場合は、ファイルが自動的に保存されます。
dotnet watch を実行しているターミナルに戻り、Ctrl + R キーを押してアプリを再度読み込んで、新しいファイルを検出します。

この時点でページをテストするのが望ましいのですが、ページがまだナビゲーションメニューにリンクされていないため、ブラウザーではページに到達できません。ここでリンクします。

Pages/Shared/_Layout.cshtml を開きます。
<ul> クラスを指定した navbar-nav 要素 (21 行目から始まる) で、<li> および Privacy ページへのリンクを含む要素に注目してください。次のコードをリストの末尾に、つまり <li> リンクを含む要素の後に追加します。
```
<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/PizzaList">Pizza List 🍕</a>
</li>
```
これにより、PizzaList ページへのリンクがナビゲーションメニューに追加されます。
ファイルを保存します。アプリが実行されているブラウザータブは自動的に更新され、変更が表示されます。 GitHub Codespaces を使用している場合、ファイルは自動的に保存されますが、ブラウザータブを手動で更新する必要があります。
ナビゲーションメニューの [Pizza List] 🍕 リンクを選択します。 Pizza List ページが表示されます。

PizzaService クラスを依存関係挿入コンテナーに登録する

ピザ一覧ページでは、ピザの一覧を取得するために PizzaService オブジェクトに依存しています。依存関係の挿入を使用して、PizzaService オブジェクトをページに提供します。まず、PizzaService クラスをコンテナーに登録します。

Program.cs を開きます。
コンテナーにサービスを追加するセクションで、次のコードを追加します。
```
builder.Services.AddScoped<PizzaService>();
```
このコードで PizzaService クラスを依存関係挿入コンテナーに登録します。 AddScoped メソッドは、HTTP 要求ごとに新しい PizzaService オブジェクトを作成する必要があることを示します。これで、PizzaService を任意の Razor ページに挿入できます。
ファイルを保存します。 GitHub Codespaces を使用している場合は、ファイルが自動的に保存されます。

ピザの一覧を表示する

PageModel オブジェクトからピザのリストを取得し、プロパティに格納するために、ピザリストページの PizzaService クラスを修正してみましょう。

Pages/PizzaList.cshtml.cs を開きます。
次の using ステートメントをファイルの先頭に追加します。
```
using ContosoPizza.Models;
using ContosoPizza.Services;
```
これらのステートメントにより、ページで使用する Pizza および PizzaService 型をインポートします。
ContosoPizza.Pages 名前空間ブロック内で、PizzaListModel クラス全体を次のコードに置き換えます。
```
public class PizzaListModel : PageModel
{
    private readonly PizzaService _service;
    public IList<Pizza> PizzaList { get;set; } = default!;

    public PizzaListModel(PizzaService service)
    {
        _service = service;
    }

    public void OnGet()
    {
        PizzaList = _service.GetPizzas();
    }
}
```
上のコードでは以下の操作が行われます。
- PizzaService という名前の読み取り専用プライベート _service が作成されます。この変数は、PizzaService オブジェクトへの参照を保持します。
  - readonly キーワードは、コンストラクターで設定された _service 変数の値を後から変更できないことを示します。
- PizzaList プロパティは、ピザの一覧を保持するように定義されます。
  - IList<Pizza> 型は、PizzaList プロパティが Pizza オブジェクトの一覧を保持することを示します。
  - PizzaList は default! に初期化されます。これにより、後で初期化されることがコンパイラに示されるため、null safety チェックは必要ありません。
- コンストラクターは PizzaService オブジェクトを受け取ります。
  - PizzaService オブジェクトは、依存関係の挿入によって提供されます。
- OnGet メソッドは、PizzaService オブジェクトからピザの一覧を取得し、PizzaList プロパティにそれを保管するように定義されます。
ヒント

Null Safety を理解するのにヘルプが必要な場合は、「C# での Null Safety」を参照してください。
ファイルを保存します。 GitHub Codespaces を使用している場合は、ファイルが自動的に保存されます。
dotnet watch を実行しているターミナルに戻り、Ctrl + R キーを押して、登録済みサービスと PizzaListModel の新しいコンストラクターを使用してアプリを再度読み込みます。

ピザの一覧を表示する

ページからピザの一覧にアクセスできるようになったので、その一覧を使用して、ページにピザを表示します。

Pages/PizzaList.cshtml を開きます。
コメント `` を、次のコードに置き換えます。
```
<table class="table mt-5">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Size</th>
            <th scope="col">Gluten Free</th>
            <th scope="col">Delete</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var pizza in Model.PizzaList)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@(pizza.IsGlutenFree ? "✔️" : string.Empty)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
    </tbody>
</table>
```
上のコードでは以下の操作が行われます。
- ピザの一覧を表示する <table> 要素が作成されます。
- テーブルヘッダーを保持する <thead> 要素が作成されます。
- @foreach 内の <tbody> ステートメントは、ピザの一覧を反復処理します。
  - Model プロパティは、分離コードファイルで作成された PizzaListModel オブジェクトを参照します。
  - PizzaList プロパティは、分離コードファイルで定義された PizzaList プロパティを参照します。
- @foreach ステートメントが反復処理されるたびに、ピザのデータを保持する <tr> 要素が作成されます。
  - <td> 要素にピザのデータを表示するために、Razor 構文が使用されます。この構文は、Pizza 変数に格納された pizza オブジェクトのプロパティを表示するために使用されます。
  - Price が、C# 文字列補間を使用して書式設定されます。
  - IsGlutenFree プロパティの値を "✔️" または空白のセルとして表示するために、三項式が使用されます。
  - ピザを削除するフォームが作成されます。
    - asp-page-handler 属性は、フォームを分離コードファイル内の Delete ハンドラーに送信する必要があることを示します。このハンドラーは、後のユニットで作成します。
    - asp-route-id 属性は、Id オブジェクトの Pizza プロパティを Delete ハンドラーに渡す必要があることを示します。
ファイルを保存します。ブラウザーで、Pizza List ページがピザの一覧で更新されます。 GitHub Codespaces を使用している場合、ファイルは自動的に保存されますが、ブラウザータブを手動で更新する必要があります。

作業リストを含む Pizza List ページのスクリーンショット。

良くできましたピザの一覧を表示する Razor ページを作成しました。次のユニットでは、タグヘルパーとページハンドラーについて学習します。

フィードバック

このページはお役に立ちましたか?

演習 - 新しい Razor ページを追加する

Pizza List ページを作成する

ナビゲーション メニューに Pizza List ページを追加する

PizzaService クラスを依存関係挿入コンテナーに登録する

ピザの一覧を表示する

ピザの一覧を表示する

フィードバック

ナビゲーションメニューに Pizza List ページを追加する