Open2022/08/10にコメント追加2

友人向け Blazor メモ

たくのろじぃ | Takumi Okawa 2022/08/10

.NET Core 3 より導入された JSON シリアライズライブラリの System.Text.Json を使って Json をデシリアライズ。サンプルでは File.ReadAllText() を使っていたが、Blazor ではファイルパスが見つからないので、別案を試す。

サンプルコードの forecasts を見てみると、HttpClient クラスの GetFromJsonAsync() メソッドを使えばいいみたい。Json ファイル内の配列要素に関しては、List ではなくそのまま配列を使ってアクセスする必要があるみたい。ちょっとパクらせていただこう。

Index.razor

@page "/"
@using BlazorApp1.Model
@inject HttpClient client

<div class="my-5">
    <h3>経歴</h3>
    <table class="table table-hover my-1">
        <thead>
            <tr>
                <th style="width:26%" scope="col">日付</th>
                <th scope="col">学歴・活動</th>
            </tr>
        </thead>
        <tbody>
                @foreach(var item in History)
                {
                    <tr>
                        <td>@item.Date</td>
                        <td>@item.Event</td>
                    </tr>
                }
        </tbody>
    </table>
</div>
@code
{
    private HistoryModel[]? History;

    protected override async Task OnInitializedAsync()
    {
        History = await client.GetFromJsonAsync<HistoryModel[]>("json/history.json");
    }
}

Model/HistoryModel.cs

public class HistoryModel
{
    public string? Date { get; set; }
    public string? Event { get; set; }
}

wwwroot/json/history.json

[
  {
    "Date": "2021年4月",
    "Event": "ほげ大学 入学"
  },
  {
    "Date": "2024年3月",
    "Event": "ほげ大学 卒業"
  },
  {
    "Date": "2024年4月",
    "Event": "ほげ株式会社 入社"
  }
]

実行すると、非同期で配列要素を取得するのでレンダリングの際に null のまま表示させようとして例外が発生してしまう。
なので、ちょっとした工夫を行う。

たくのろじぃ | Takumi Okawa 2022/08/10

History 要素が null のときは表を表示させずに、読み込んだ後で描画させるようにしてあげればいい。

Index.razor

<div class="my-5">
    <h3>経歴</h3>
    <table class="table table-hover my-1">
        <thead>
            <tr>
                <th style="width:26%" scope="col">日付</th>
                <th scope="col">学歴・活動</th>
            </tr>
        </thead>
        <tbody>
            @if (History == null)
            {
                <div class="spinner-border text-primary mt-1" role="status"/>
            }
            else
            {
                @foreach(var item in History)
                {
                    <tr>
                        <td>@item.Date</td>
                        <td>@item.Event</td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>

配列が null の場合

要素を読み込んだ場合

ただし、json ファイルにて要素が空になっていると永遠にスピナーがまわり続けるので、もう一つ分岐させて n 秒以上経過して配列が null なら「データがありません」のような表示にすれば良さそう。