BlazorでのWebアプリケーション開発手法１【C#】C01_一覧表示

ここからは一覧表示を扱います。一覧表示については、プロジェクト作成時に付属しているサンプルのWeather.razor（Weather画面）がすでに一覧表示を行っているので、これを見本にして真似しながら画面を作っていきます。

図1　Weather画面。一覧表示のサンプルとして参照する

図2　ソリューションエクスプローラーでWeather.razorの場所を確認

まずは新しいRazorページを追加します。Pagesフォルダーを右クリックして「追加」→「Razorコンポーネント」を選択します。

図3　Pagesを右クリック→「追加」→「Razorコンポーネント」を選択

今回は商品一覧の画面を作りたいので、名前は「ProductPage」にします。

図4　コンポーネント名を「ProductPage」にする

ProductPage.razorが作成されたら、一番上に @page ディレクティブを書き、ダブルクォーテーションで囲んで /product を指定します。URLは /product にしておきます。

図5　@page “/product” でURLを指定

見出しは「商品一覧」にしておきます。

図6　h3見出しに「商品一覧」と記述

この画面の中でProductのリストを作りたいので、まずエンティティ（データベースの1行分のデータをイメージしたもの）としてProductクラスを作ります。Objectsフォルダーを右クリックして「追加」→「クラス」を選択し、ProductEntityという名前で作成します。

図7　ProductEntity.csを作成し、public sealed classと記述（継承させる予定がないのでsealed）

データベースでいうところの列にあたるプロパティを書いていきます。まずProductIdをget onlyのプロパティとして作ります。インスタンス生成後は値を変える予定がないため、getだけにしておきます。同様にProductName、Priceも合わせて3つのプロパティを作ります。

図8　public int ProductId { get; } を記述

続けてコンストラクタを作り、同じように3つの項目（productId, productName, price）を受け取れるようにします。

図9　3つのプロパティとコンストラクタを記述している途中の状態

コンストラクタの中で、受け取った値をそれぞれのプロパティに代入します。これでProductEntityクラスは完成です。

図10　完成したProductEntityクラス（プロパティ3つ＋コンストラクタ）

namespace Ander99.Objects
{
    public sealed class ProductEntity
    {
        public ProductEntity(int productId, string productName, int price)
        {
            ProductId = productId;
            ProductName = productName;
            Price = price;
        }
 
        public int ProductId { get; }
        public string ProductName { get; }
        public int Price { get; }
    }
}

ProductPage.razorに戻り、@codeブロックの中に List<ProductEntity> の変数を用意します。Ctrlキーを押しながらピリオドを押すクイックアクションで、@using Ander99.Objects を追加しておきます。_products = new List<ProductEntity>(); としてインスタンス生成しておきます。

図11　@using Ander99.Objects を追加し、private List<ProductEntity> _products を宣言

図12　_products = new List<ProductEntity>(); でインスタンス生成

画面が起動したときにこのリストへ値を入れたいので、protected override void OnInitialized() を作り、その中で _products.Add(…) を使ってデータを追加します。同期・非同期の書き方がありますが、まずは同期のOnInitializedでやってみます（非同期は別のレクチャーで扱います）。ProductEntity(100, “p100”, 1000) のようなデータを3つ、100・200・300という形で作っておきます。

図13　OnInitialized()メソッドを作成し、_products.Add(new ProductEntity(…)) を記述

図14　商品ID 100・200・300の3件のデータを追加し終えた状態

protected override void OnInitialized()
{
    _products.Add(new ProductEntity(100, "p100", 1000));
    _products.Add(new ProductEntity(200, "p200", 2000));
    _products.Add(new ProductEntity(300, "p300", 3000));
}

続いて、この_productsをHTML側で表示させます。書き方はWeather.razorを見本にします。Weather.razorのelseの中にある <table class=”table”> から </table> までをコピーして、ProductPage.razorのh3の下に貼り付けます。

図15　Weather.razorのtableタグ部分（if文のelse内）を確認

図16　ProductPage.razorのh3見出しの下にtable要素を貼り付け

タイトル行（データグリッドでいう列見出し）は4つありますが、今回は3列にしたいので、1番上のDateだけ残して「商品ID」に書き換え、それをコピー＆貼り付けして「商品名」「価格」の合計3列にします。

図17　1つ目の見出しを「商品ID」に書き換え

図18　見出しを「商品ID」「商品名」「価格」の3列にする

次にforeachでぐるぐる回っている部分（<tr><td>…というテーブルの行・データにあたる部分）も、サンプルでは4つありますが、今回は3列に合わせて1つ（1行分）だけ残します。

図19　余分なtd要素（2〜4番目）を選択して削除

foreachで回す対象を forecasts から _products に書き換え、ループ変数の名前は p にします。

図20　foreachの対象forecastsを選択し、_productsに書き換える準備

@p. と入力すると、ProductName・ProductId・Priceの3つがインテリセンスの候補に出てくるので、これを1つずつtd要素の中に入れていきます。

図21　@foreach (var p in _products) に書き換え、@p.でインテリセンスの候補（ProductName等）が表示された状態

図22　@p.ProductId、@p.ProductName、@p.Priceをそれぞれtd要素にバインドし終えた状態

<table class="table">
    <thead>
        <tr>
            <th>商品ID</th>
            <th>商品名</th>
            <th>価格</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var p in _products)
        {
            <tr>
                <td>@p.ProductId</td>
                <td>@p.ProductName</td>
                <td>@p.Price</td>
            </tr>
        }
    </tbody>
</table>

これで_productsがforeachで回り、3件のデータがあるので3行分のデータが表示されるはずです。あとはこの画面を開けるようにするため、NavMenu.razorを開き、「計測」のひとかたまり（divからdivまで）をコピーして貼り付けます。「計測」の部分は「商品一覧」に、Measureのところのhref属性はproductに書き換えます。アイコンは今回は変更せず同じものにしておきます（変え方は以前のレクチャーを参照）。

図23　NavMenu.razorの「計測」のdivブロックをコピー

図24　複製したブロックのhrefをproductに、表示テキストを「商品一覧」に書き換え

<div class="nav-item px-3">
    <NavLink class="nav-link" href="product">
        <span class="bi bi-activity-nav-menu" aria-hidden="true"></span> 商品一覧
    </NavLink>
</div>

これで実行します。「商品一覧」をクリックすると、3行のデータが表示されました。このように一覧表示ができるので、ぜひやってみてください。

図25　アプリを実行し、/productへ遷移する直前の状態

図26　「商品一覧」画面を実行し、商品ID・商品名・価格の3行が正しく表示された