More than 1 year has passed since last update.

.NET MAUI (データ入力と検証)

Last updated at 2022-08-02Posted at 2022-06-10

データ入力と検証

前回、単純な画面遷移ができたので、
今回は、画面から値を入力し、検証結果で画面遷移を制御してみます。

環境構築＆プロジェクト作成の流れはこちらの記事でどうぞ。

単純なものがよいので、ログイン画面にしてみました。

.NET MAUI の実装方法も、変わらずMVVMです。

作成したソースをGithubに公開しました。

ログイン画面と、遷移先の画面を追加しておきます。

社員番号は数値4桁。
パスワードは社員番号と同じであれば、メイン画面へ遷移します。
入力値が不正な場合や、パスワードが不一致の場合は、ログイン画面にエラーメッセージを表示します。

どうやるのがベストプラクティスなのかわからなかったので、Behaviorでやってみました。

なにも入力しないで[ログイン]ボタンを押してみます。

エラーがある場合、ログインボタンは無効化されているので、社員番号に「abcd」を入力してみます。

社員番号を「1234」(数値4桁以内)にしてみます。

パスワードに「1235」を入力してみます。

ログインボタンを押してみます。

テキストが変更されるたびに、エラー内容が切り替わります。
TODO Unfocusedでのイベント発火に変更する

検証エラーの一覧表示(赤い枠の部分)を、ContentViewを継承して部品化してみた。
ValidationPropertyError.xaml
ValidationPropertyError.xaml.cs

※上記では使ってないけど、エラーを全部まとめて表示するやつ
ValidationPropertyErrors.xaml
ValidationPropertyErrors.xaml.cs

入力値が正しい状態で、[ログイン]ボタンを押してみます。
ログイン画面で入力した社員番号を、メイン画面に渡して表示しました。

データの渡し方としては、QueryParameterでやってみました。

別の方法として、画面間のデータの受け渡しはDIで