Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

ASP.NET MVCと周辺技術の活用テクニック

ASP.NET MVCフレームワーク 正式版 入門(6)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/12/11 14:00

 ASP.NET MVCが少々苦手としている検証機能のサポートに便利なツールを紹介します。また、既存のWebアプリケーションの一部を流用したいといったケースに備え、ASP.NET MVCと従来のASP.NET WebFormとの共存方法も併せて解説します。

目次

はじめに

 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の強力な検証ツールxVal

 ASP.NET MVCにおける検証は以前も紹介しましたが、サーバーに一度問い合わせる必要があり、お世辞にも優れているとは言いづらい機能でした。

 しかし、現在CodePlex上でASP.NET MVCで簡単に利用できる検証ツールxValが正式リリースされました。xValの開発者は『Pro ASP.NET MVC Framework』の著者でもあるSteve Sandersonさんです。

 xValはクライアント / サーバーで行われる検証を一元管理する機能を提供します。検証ルールは.NETが提供するDataAnnotation(詳しくは後述)の属性指定で行い、ここで指定された検証ルールをxValがJSON形式に変換し、クライアントサイドに渡すことで、クライアントサイドはそれに応じたスクリプトをjQueryValidationで書き出します(図1)。

図1 xValイメージ図
図1 xValイメージ図

 また、多言語対応も行われているので、筆者が翻訳した日本語専用のパッチをダウンロードすることで、日本語環境でも容易に利用できるようになります。本稿最後で、ASP.NET MVC V2の紹介をしますが、ASP.NET MVC V2からは、標準でDataAnnotationの属性指定を利用しているので、ASP.NET MVC V2の新機能DataAnnotationModelBinderでもxValで培った知識をそのまま利用できます。

 xValを実際に使った例はこちらです。

図2 xVal実装ページアクセス時
図2 xVal実装ページアクセス時
図3 xVal動作時のページ
図3 xVal動作時のページ

 DataAnnotationの属性指定された検証を、xValのヘルパーメソッドがjQuery Validationを使いスクリプトを自動生成します。そのため、検証項目からフォーカスが変更された時点で検証メッセージが表示されます。

 DataAnnotationの属性指定を複数記述することで、複数の検証も同時に対応できます。

DataAnnotationの理解

 System.ComponentModel.DataAnnotationsクラスはASP.NET Dynamic DataでDynamic Dataコントロールの検証を行うために利用されたクラスです。これまで検証ロジックは、コードベースでnullチェックや入力数を確認していましたが、DataAnnotationを利用すると属性宣言だけで、入力検証を簡単に設定できます。

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をあらかじめダウンロードして準備を行ってください。

  1. xValとjQuery Validationを解凍
  2. ASP.NET MVCプロジェクトを作成
  3. System.ComponentModel.DataAnnotations/xVal(xVal解凍フォルダ内にあります)をそれぞれ参照追加
  4. Scriptsフォルダにjquery.validate.js/xVal.AspNetNative.js/xVal.jquery.validate.js/xVal.Messages.ja-JP.jsを追加
  5. Helpersフォルダの作成

 以上で事前準備は完了です。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト ナオキ(ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:ASP.NET MVCフレームワーク 正式版 入門
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5