ホーム > .NET, ASP.NET 4.5, ASP.NET 備忘録 > 最新の GridView なら検証の設定も楽々!

最新の GridView なら検証の設定も楽々!

※この記事は One ASP.NET Advent Calender の21日分のエントリーです。
21日分、、、

前の記事では GridView の SelectMethod プロパティを設定してデータの抽出を行いました。
データの更新には UpdateMethod を利用します。

image

GridView に UpdateMethod と AutoGenerateEditButton プロパティの設定を追加します。

image

UpdateMember メソッドの実装はこんな感じです。
ASP.NET MVC を使ったことのある人にはわかりやすいですね。
UpdateMember メソッドは Member 型の引数をとっていますが、これはモデルバインダーという仕組みが今回 WebForms にも採用されているからできることです。
モデルバインダーはブラウザからのリクエストであがってきたデータを、モデル(上記の場合は Member)のプロパティ名と照らし合わせて、自動的に Member 型のインスタンスを生成してくれます。

データの追加の部分は EntityFramework の最近のバージョン(4.2からじゃなかったかな?)ではこういう記述でデータの追加ができます。

image

デバッグの実行を開始すると編集リンクが追加されていて、データの編集が可能になっています。
Name を「おの2」としてデータが更新できることを確認してみましょう。

image

さて、ここから今日の本題。
以前の GridView では、データの更新時に検証を行おうとすると、データのフィールドをテンプレートフィールドにして、そこに検証コントロールを一つ一つ貼っていかないといけない、というかなり手間のかかるものでした。
それが、今なら。。。

まず、GridView のすぐ下あたりにエラー時のメッセージを表示するために ValidationSummary を貼り付けます。

image

Member クラスの Name プロパティに Required 属性を追加します。
Name を必須の入力項目にするわけですね。

image

Member クラスは EDM を作り直したら上書きされますので、そのような操作を行うときは注意しましょう。
まぁ、どんな属性を設定したか覚えておけばいいだけの話です。
そして UpdateMember メソッドをちょっと修正します。

image

このあたり、ASP.NET MVC と同様ですね。
で、デバッグ実行して Name を空にして更新しようとすると、

image

このように、きちんと必須チェックを行ってくれるようになります。
モデルバインダーが Member のインスタンスを生成する際、設定されている属性によるチェックも自動的に実施してくれて、エラーの状態まで登録してくれるのでこのようになるんですね。

エラーの状態はプログラムで追加することもできます。

image

こんなふうに ModelState にエラー状態を追加すると、どんな場合でも更新できなくなります。

image

まあ、ふつうは独自の更新チェックの条件を追加する場合に使うんですけどね。

ここまででも便利は便利なのですが、もうひとつ。

image

GridView の ItemType プロパティに Member クラスを設定します。
そうすると、

image

さっきのすべての更新をエラーにするプログラムを修正していないのに、必須入力の検証が行われて、またそのチェックが実行された項目に「*」が表示されています。
これ、HTMLをみるとわかりますがクライアント側でスクリプトによる検証が行われているんですね。

ItemType プロパティを設定することで何が起きてるのか。。。
という話を続けるには記事がながくなりすぎたので、それは次の機会にしたいと思います。

しかし、GridView、かなり使えるやつになってると思いません?
環境が許すならどんどん使っていきたいですね。

カテゴリー:.NET, ASP.NET 4.5, ASP.NET 備忘録
  1. まだコメントはありません。
  1. No trackbacks yet.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。