はじめに
ASP.NET MVCでは、ASP.NET WebForm(以下、WebForm)で使用していたValidationコントロールが使えないため、検証周りがWebFormよりも苦手だったと言えます。しかし、ASP.NET MVCにおいて検証周りを検証コントロール並に強力に検証できるツールが登場しました。
また、ASP.NET MVCとASP.NET WebFormはアプリケーション構築方法が異なるため、それぞれ独立して扱うというイメージがあるかと思います。確かに構築するアプリケーションの仕様や設計によりそれぞれ独立して扱うべきですが、シナリオによっては「ルーティングだけ利用したい」「既存のWebFormで作成したアプリケーションの流用をしたい」などの要望も出てくるかもしれません。
今回はASP.NET MVCで若干不得手な検証機能を拡張するツールと、ASP.NET MVCとWebFormの共存方法について紹介します。
必要な環境
次の環境が必要です。
- Visual Studio 2008
- Visual Studio 2008 SP1
- ASP.NET MVC RTW版
- xVal
- jQuery Validation
Visual Studio 2008(以下、VS2008)のインストールは、Visual Studio 2008入門 第1回を参考に行ってください。VS2008 SP1のインストールは『簡単なデータ編集はお任せ! ASP.NET Dynamic Dataアプリケーション 』を参照してください。
xValは、CodePlexからダウンロードできます。日本語パッチもCodePlexにあります。
jQuery Validationは、bassistance.deからダウンロードできます。
今回触れる内容
今回触れるのは、以下の部分です。
- ASP.NET MVC対応の検証ツールxValの利用方法
- サードベンダーによるASP.NET MVCサポートについて
- ASP.NET MVCとWebFormのハイブリッドアプリケーション構築方法
- ASP.NET MVC V2で登場予定の新機能
ASP.NET MVCそのものについては過去の内容も併せて参照してください。
- ASP.NET MVCフレームワークの概要を理解する
- ASP.NET MVCで簡単なアプリケーションを構築しよう
- ASP.NET MVCで認証、テスト、フィルタ機能、AJAXを活用しよう
- ASP.NET MVCの開発~リポジトリパターンをマスターする~
- ASP.NET MVCのセキュリティ対策とクライアントサイドスクリプト活用方法
ASP.NET MVCの強力な検証ツールxVal
ASP.NET MVCにおける検証は以前も紹介しましたが、サーバーに一度問い合わせる必要があり、お世辞にも優れているとは言いづらい機能でした。
しかし、現在CodePlex上でASP.NET MVCで簡単に利用できる検証ツールxValが正式リリースされました。xValの開発者は『Pro ASP.NET MVC Framework』の著者でもあるSteve Sandersonさんです。
xValはクライアント / サーバーで行われる検証を一元管理する機能を提供します。検証ルールは.NETが提供するDataAnnotation(詳しくは後述)の属性指定で行い、ここで指定された検証ルールをxValがJSON形式に変換し、クライアントサイドに渡すことで、クライアントサイドはそれに応じたスクリプトをjQueryValidationで書き出します(図1)。
また、多言語対応も行われているので、筆者が翻訳した日本語専用のパッチをダウンロードすることで、日本語環境でも容易に利用できるようになります。本稿最後で、ASP.NET MVC V2の紹介をしますが、ASP.NET MVC V2からは、標準でDataAnnotationの属性指定を利用しているので、ASP.NET MVC V2の新機能DataAnnotationModelBinderでもxValで培った知識をそのまま利用できます。
xValを実際に使った例はこちらです。
DataAnnotationの属性指定された検証を、xValのヘルパーメソッドがjQuery Validationを使いスクリプトを自動生成します。そのため、検証項目からフォーカスが変更された時点で検証メッセージが表示されます。
DataAnnotationの属性指定を複数記述することで、複数の検証も同時に対応できます。
DataAnnotationの理解
System.ComponentModel.DataAnnotationsクラスはASP.NET Dynamic DataでDynamic Dataコントロールの検証を行うために利用されたクラスです。これまで検証ロジックは、コードベースでnullチェックや入力数を確認していましたが、DataAnnotationを利用すると属性宣言だけで、入力検証を簡単に設定できます。
' 必須入力チェック [Required(ErrorMessage="必須入力項目です")] ' 文字数チェック [StringLength(6, ErrorMessage="メンバIDは6文字以内で入力してください")]
.NET 3.5ベースでは、Dynamic Data環境で主に利用されていましたが、ASP.NET MVCでも応用できます。このDataAnnotationはxValにかかわらず、今後リリースされるWPF 4.0や、Silverlightでも利用できます。これからの検証のスタンダードになる可能性が非常に高い注目のクラスです。
以下に、利用可能な検証属性を紹介します。
属性 | 概要 |
DataTypeAttribute | プロパティに追加の型を指定 |
RangeAttribute | 値の数値範囲を指定 |
RegularExpressionAttribute | 正規表現を指定 |
RequiredAttribute | 必須項目を指定 |
StringLengthAttribute | 最大文字長を指定 |
それでは使い方について解説します。
事前準備
xValを利用するに辺り準備がいくつか必要ですので、手順を以下に記します。必要な環境の項目で記述しているxVal/jQueryValidationをあらかじめダウンロードして準備を行ってください。
- xValとjQuery Validationを解凍
- ASP.NET MVCプロジェクトを作成
- System.ComponentModel.DataAnnotations/xVal(xVal解凍フォルダ内にあります)をそれぞれ参照追加
- Scriptsフォルダにjquery.validate.js/xVal.AspNetNative.js/xVal.jquery.validate.js/xVal.Messages.ja-JP.jsを追加
- Helpersフォルダの作成
以上で事前準備は完了です。