Blazor 難しいことをしない郵便番号検索(zipcloud利用)

はじめに

Webアプリケーションで使用するために郵便番号検索を実装することは多々あるかと思います。様々なサイトから情報収集するも自分の中に落とし込むことが難しく感じた経験から「おそらく一番楽な実装方法」はこれだ！と思ったのを記事にします。

前提

Blazor WebAssemblyプロジェクトを作成(作成直後のindex.razorを上書き)
エラー通知のためAnt Design Blazorをインストールしています。

実装方法

index.razor

@page "/"
@inject HttpClient Http;
@inject NotificationService Notice
@using Microsoft.AspNetCore.Components;
@using System.Net.Http.Json;
@using System.Text.Json;
@using AntDesign;

<PageTitle>住所検索</PageTitle>

<div class="flex my-1">
    <div class="justify-content-center">
        <input type="text" class="put_on_post_code form-control my-1" placeholder="郵便番号" @bind="postalCode" @onblur="Search">
        <input type="text" class="put_on_prefectures form-control my-1" placeholder="都道府県" @bind="prefecture">
        <input type="text" class="put_on_municipalities form-control my-1" placeholder="市区町村" @bind="city">
    </div>
</div>

@code {
    private string postalCode;
    private string prefecture;
    private string city;

    private async void Search() => await FetchAddress(postalCode, 1);

    private async Task FetchAddress(string postalCode, int methodID)
    {
        try
        {
            // 郵便番号の妥当性チェック
            if (postalCode == null) return;
            if (postalCode.Length == 7 && int.TryParse(postalCode, out _))
            {

                string apiUrl = $"https://zipcloud.ibsnet.co.jp/api/search?zipcode={postalCode}";
                // APIリクエストの送信
                var response = await Http.GetAsync(apiUrl);

                if (response.IsSuccessStatusCode)
                {
                    // APIリクエストの結果を受け取り
                    var data = await response.Content.ReadAsStringAsync();
                    // AddressInfoクラス型でデシリアライズ
                    var addressInfo = JsonSerializer.Deserialize<AddressInfo>(data);

                    // 取得した住所情報の表示
                    var result = addressInfo.results[0];
                    prefecture = result.address1;
                    city = result.address2;
                    // UIの更新
                    StateHasChanged();
                }
            }
            else
            {
                // 無効な郵便番号フォーマット
                await Notice.Error(new NotificationConfig()
                {
                    Message = "無効な郵便番号形式です。"
                });
            }
        }
        catch (Exception ex)
        {
            await Notice.Error(new NotificationConfig()
            {
                Message = "住所検索中に例外が発生しました" + ex.Message
            });
        }
    }
}

AddressInfo.cs

public class AddressInfo
{
    public List<Result> results { get; set; }
}

public class Result
{
    public string address1 { get; set; } // 都道府県
    public string address2 { get; set; } // 市区町村
}

説明

入力フォームとして郵便番号・都道府県・市区町村を用意します。
郵便番号フォームのonblur(フォーカスを失った（別の要素に移動した))イベントでzipcloudから住所を検索します。検索結果の戻り値から都道府県・市区町村の値を設定し画面描画を更新してやることで反映されます。
※画面描画を更新しないと空白のままなので注意

実行結果

GitHub