BlazorでのWebアプリケーション開発手法２【C#】B02_pタグを使ったメッセージ表示

前回のレクチャーまでで、計測エリア名称を入力するためのレイアウト（ラベル・テキストボックス・保存ボタン）は作成済みです。本レクチャーでは、この入力エリアに文字が入力されていない場合にエラーメッセージを表示する処理を、pタグを使ったシンプルな方法で実装していきます。

なお、@rendermodeやレイアウトの作成方法自体は「BlazorでのWebアプリケーション開発手法１【C#】」のコースで解説済みのため、本レクチャーではそれらを理解済みという前提で進めます。

図1　変更前のHome.razor。入力欄と保存ボタンのみが配置されている

図2　変更前のブラウザー表示。「エリア名称」欄と「保存」ボタンがあるだけの状態

1. 入力値をデータバインドする

まず、入力欄（inputタグ）に何が入力されているかをプログラム側で判定できるようにするため、@codeブロックに文字列型のフィールドを追加し、データバインドします。

図3　@codeブロックにprivate string型のフィールドを追加していく

private string _areaName = "";

続けて、input要素にbind属性を追加し、この_areaNameフィールドと双方向にデータバインドします。

<input type="text" @bind="_areaName" />

図4　inputタグに@bind=”_areaName”を追加し、フィールドとデータバインドする

2. 保存ボタン押下時に入力チェックを行う

次に、保存ボタン押下時に呼ばれるSave()メソッドの中で、_areaNameが空文字またはnullかどうかをstring.IsNullOrEmpty()で判定します。

private void Save()
{
    if (string.IsNullOrEmpty(_areaName))
    {

    }
}

図5　Save()メソッド内にif (string.IsNullOrEmpty(_areaName))で入力チェックを追加する

3. pタグでエラーメッセージを表示する

画面にエラーメッセージを表示するため、入力欄の下にdivで区切ったpタグを追加します。このpタグの中身もデータバインドしたいので、メッセージ表示用のフィールド_messageを新たに用意します。

図6　入力欄の下にdivで区切ったpタグを追加し、@_messageでバインドする

<div>
    <p>@_message</p>
</div>

@code {
    private string _areaName = "";
    private string _message = "";

    private void Save()
    {

    }
}

図7　@codeブロックにprivate string _messageフィールドを追加する

Save()メソッドの先頭で、まず_messageを空文字にクリアしておき、入力チェックでエラーだった場合にのみメッセージ文字列を代入します。

図8　入力チェックがエラーの場合に代入するメッセージ文字列「エリア名称を入力してください」を入力していく

private void Save()
{
    _message = "";

    if (string.IsNullOrEmpty(_areaName))
    {
        _message = "エリア名称を入力してください";
        return;
    }

    // ここで本来は保存処理を行う
}

図9　完成したSave()メソッド全体。エラー時はreturnで処理を抜ける（本来はここで保存処理を行う想定）

returnは今回のサンプルでは意味を持ちませんが、本来は入力チェックの後に保存処理が続くため、エラー時にそこから先の処理を実行しないよう、通常はここでreturnします。

4. 動作確認

実行し、エリア名称を空欄のまま保存ボタンを押すと、「エリア名称を入力してください」というメッセージがpタグに表示されます。

図10　エリア名称を空欄のまま保存を押すと、エラーメッセージが表示される

何か文字を入力してから保存ボタンを押すと、_messageが空文字にクリアされるため、メッセージ表示は消えます。

図11　エリア名称に文字を入力してから保存を押すと、メッセージ表示はクリアされる

シンプルにpタグだけを使ってメッセージを表示する方法であれば、以上の実装でOKです。

5. 補足：style属性でメッセージを赤字にする

ちなみに、pタグにstyle属性を追加し、colorをredなどに指定しておくと、メッセージの文字色を赤にすることができます。

<p style="color:red">@_message</p>

図12　pタグにstyle=”color:red”を追加する。IntelliSenseで色名の候補も表示される

図13　文字色が赤になったエラーメッセージ表示

何か入力されていればOK、入力されていなければこのように赤字でメッセージが表示される、というシンプルな実装です。