BlazorでのWebアプリケーション開発手法２【C#】C01_EditFormを使った入力検証

図1 オープニングタイトル

これまでのレクチャーでは、メッセージ表示の回で作成したエリア名称の入力チェックを教材に使ってきました。保存ボタンを押したときにAreaNameが空文字かどうかをif文で判定し、空であればMessageService.Alertでエラーメッセージを表示して処理を抜ける、という自前のチェック処理です。

図2 変更前のHome.razor全体（メッセージ表示方式のコード）

本レクチャーでは、これを「EditForm」というBlazor標準の入力検証の仕組みに置き換えます。プロパティに属性（アノテーション）を付けておくだけで、条件を満たさない入力があった場合に自動でエラーメッセージが表示されるようになる、というやり方です。

ログインボタンの削除

本題に入る前に、以前のレクチャーで作成したログインボタンとLoginメソッドが残っているため、まずこれらを削除して整理します。

図3 ログインボタンのdivブロックをマークアップから削除

図4 Loginメソッドを@codeブロックから削除

図5 削除後のシンプルな状態（エリア名称の入力欄と保存ボタンのみ）

整理後は、エリア名称の入力欄（AreaName）と保存ボタン（Save）だけが残るシンプルな画面になります。

変更前の動作確認

この状態で保存ボタンを押すと、まず「保存しますか？」という確認ダイアログが表示され、OKを押すとエリア名称が未入力の場合に「エリア名称を入力してください」というエラーメッセージが表示されます。この一連の動きを、EditFormに置き換える前の挙動として確認しておきます。

図6 保存ボタン押下時の「保存しますか？」ダイアログ（変更前）

図7 「エリア名称を入力してください」エラーメッセージ（変更前）

EditFormで入力エリアを囲む

入力検証を行いたいコントロール（今回はエリア名称の入力欄と保存ボタン）の外側に、EditFormタグを追加してまとめて囲みます。

図8 EditFormタグのIntelliSense説明（EditContextをカスケードするコンポーネント）

図9 入力エリアと保存ボタン全体をEditFormで囲んだ状態

EditFormにはModel属性で検証対象のインスタンスを指定します。ViewModelを分けている場合はそのインスタンスを指定しますが、今回はViewModelに分けない形で進めるため、コンポーネント自身を表すthis（Razor構文では@this）を指定します。

図10 Model=”@this”を指定

続けて、入力検証がすべて成功したときに呼び出す処理をOnValidSubmit属性で指定します。今回は保存処理を行いたいので、@Saveを指定します。

図11 OnValidSubmit属性のIntelliSense候補一覧

図12 OnValidSubmit=”@Save”を設定

次に、EditFormのModelに指定した検証対象を実際に検証対象とすることを宣言するため、DataAnnotationsValidatorを追加します。さらに、検証に引っかかった項目のエラーメッセージをどこに表示するかを指定するValidationSummaryを、入力欄と保存ボタンの下（EditFormの閉じタグの直前）に追加します。

図13 DataAnnotationsValidatorを追加

図14 ValidationSummaryを追加

保存ボタンをsubmitに変更

保存ボタンを押したときに検証が行われるようにするため、ボタンのtype属性をsubmitに変更します。EditFormがsubmit時にOnValidSubmitで指定した処理（今回はSave）を呼び出すため、これまで使っていたOnClick=”Save”は不要になり削除します。

図15 保存ボタンのtype属性とOnClick=”Save”（削除前）

検証対象プロパティの用意

入力検証に使う値は、publicなプロパティとして公開しておく必要があります。これまでprivateなフィールドとして持っていた_areaNameを、public string AreaNameというプロパティに変更します。setを外部に公開したくない場合はprivate setにすることが認められているため、get; private set;という形にします。

図16 _areaNameフィールドをpublicなAreaNameプロパティに変更

図17 get; private set; に変更したAreaNameプロパティ

プロパティ名を変更したため、入力欄側の@bind=”_areaName”も@bind=”AreaName”に書き換えます。

Required属性で必須チェックを追加

AreaNameプロパティに、必須項目であることを示すアノテーション（属性）を追加します。角括弧で[Required]と入力し、Ctrl+.（クイックアクション）でSystem.ComponentModel.DataAnnotations名前空間のusingを追加します。さらに括弧内にErrorMessageパラメータを指定し、検証に引っかかったときに表示するメッセージ（「エリア名称を入力してください」）を設定します。

図18 [Required]属性とErrorMessageパラメータのIntelliSense説明

図19 usingステートメントの追加（System.ComponentModel.DataAnnotations）

不要になった既存チェックの削除

AreaNameに[Required]属性を付けたことで、これまでSaveメソッド内で行っていた自前のIsNullOrEmptyによるチェックとMessageService.Alertでのエラーメッセージ表示は不要になったため、削除します。

図20 不要になった既存の入力チェックコード（ハイライト表示）

図21 既存チェック削除後の最終的なSaveメソッド

図22 最終的なHome.razorマークアップ全体（EditForm完成形）

完成したHome.razorのマークアップ部分

<EditForm Model="@this" OnValidSubmit="@Save">
    <DataAnnotationsValidator />
    <div class="mb-3">
        <label>エリア名称</label>
        <input type="text" @bind="AreaName" />
    </div>
    <div class="mb-3">
        <button type="submit" class="btn btn-primary">保存</button>
    </div>
    <ValidationSummary />
</EditForm>

完成したAreaNameプロパティとSaveメソッド

@code {
    [Required(ErrorMessage = "エリア名称を入力してください！！！")]
    public string AreaName { get; private set; } = "";
 
    private async Task Save()
    {
        bool messageResult = await MessageService.Confirm(
            "保存しますか？");
        if (!messageResult)
        {
            return;
        }
 
        //save処理
        await MessageService.Alert("Saveしました！！");
    }
}

実行結果の確認

実行して、エリア名称を未入力のまま保存ボタンを押すと、確認ダイアログを経由することなく、ValidationSummaryの位置に赤字で「エリア名称を入力してください！！！」というエラーメッセージが表示されます。

図23 未入力で保存ボタンを押した際の赤字エラーメッセージ表示

一方、エリア名称に値を入力してから保存ボタンを押すと、これまでどおり「保存しますか？」の確認ダイアログが表示され、OKを押すと「Saveしました！！」という完了メッセージが表示されます。

図24 値を入力して保存した場合の「保存しますか？」ダイアログ

図25 「Saveしました！！」の完了メッセージ

このように、これまでメッセージ表示の回で自前で書いていた入力チェックのロジックは、プロパティに属性（アノテーション）で条件を定義し、EditFormで対象を囲むだけで自動化できます。属性は複数個付けることができるため、必須チェック以外にも文字数や数値の範囲など、さまざまな条件を組み合わせて定義できます。次のレクチャー以降では、この入力検証についてさらにいろいろなやり方を見ていきます。