ASP.NET 4.5の新機能「Unobtrusive Validation（控えめな検証）」「async/awaitを用いた非同期ページ」

実例で学ぶASP.NET 4.5 Webフォーム 新機能活用法 第5回

　ASP.NET 4.5では、これまでに紹介してきた新機能以外にも、さりげない変更が加えられています。その中で今回は「Unobtrusive Validation（控えめな検証）」と「async/awaitを用いた非同期ページ」について、サンプルとともに紹介します。

Unobtrusive Validation（控えめな検証）とは

　ASP.NET Webフォームでは、第3回『エラー処理をパターンではめよう』で紹介した検証サーバーコントロールを使うことで、非常に簡単にクライアントサイド、サーバーサイドでの検証処理を実装することができました。特に、クライアントサイド検証について自分でやろうとすると、サーバーサイドC#やVBといった言語とは別にJavaScriptを使用する必要がありますが、言語の切り替えはそこそこ負担となるものです。その負担の大部分を検証サーバーコントロールを用いることで解消できます。

　しかし、その便利さにはもちろんトレードオフがあります。その代表的なものが、「クライアントサイドのコードが煩雑で分かりにくい」ことです。検証サーバーコントロールを用いると、実行時に非常に大量のJavaScriptのコードがWebページに出力されます。そのため、いざクライアントサイドの処理を追加して動作を確認しようとしても、目的のコードが見つけづらかったり、そもそもWebページのコード量が増えるため、通信の負担になったりします。

　それでは、実際にどのようなコードが出力されるのか見てみましょう。「会議室追加画面」（MeetingRoomsAdd.aspx）を右クリックし、「Page Inspectorで表示」を選択してください（図1）。すると、生成されたWebページの終わりのほうにたくさんのscriptタグが作成され、RequiredFieldValidatorコントロールで指定した検証処理がJavaScriptのコードとして挿入されていることが分かります（図2）。

　ASP.NET 4.5では、この膨大なJavaScriptを「Unobtrusive Validation（控えめな検証）」という機能によってかなり抑制することができます。つまり、生成されるクライアントサイドコードが「控えめ」になるのです。

図1：Page Inspector実行メニュー

図2：控えめな検証が無効の状態

　なお、JavaScriptコードの確認に使った「Page Inspector（ページインスペクター）」はVisual Studio 2012から導入された機能で、実行中のWebページの構造やスタイルシート、JavaScriptを解析するためのツールです。Internet ExplorerではF12キーを押すことで起動できる「開発者ツール」のようなものが、Visual Studioに統合されたと考えてよいでしょう。

控えめな検証の導入方法

　控えめな検証は、ターゲットフレームワークが.NET Framework 4.5で新規に作成したWebフォームアプリケーションであれば、既定で有効になっています（ただし、後述のScriptResouceMappingへの登録が必要な点は注意が必要です）。本連載のサンプルは.NET Framework 4.0のアプリケーションをアップグレードしたため、現段階では控えめな検証は有効になっていません。有効にするには、最初にWeb.config上で設定が必要です（リスト1）。

リスト1 控えめな検証の有効化（Web.config）

<appSettings>
  <add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms" />
</appSettings>

　appSettingsセクションがないので新たに追加し、「ValidationSettings:UnobtrusiveValidationMode」プロパティに"WebForms"を設定します。また、"None"指定することで、明示的に控えめな検証を無効にすることも可能です。

　ただ、このまま実行すると、次のような標準エラーページが出力されることでしょう（図3）。

図3：jQuery不足のエラー画面

　これは、控えめな検証にjQueryを利用しており、なおかつそのスクリプトファイルを「ScriptResourceMapping（＊1）」から取得しようとしていますが、ASP.NET 4.0の時に作られたWebサイトではこの動作に対応していないためです。

　対処するには、Global.asaxのApplication_Startイベントハンドラーで、明示的に使用するjQueryをScriptResourceMappingに登録する必要があります（リスト2）。

リスト2 使用するjQueryの登録

void Application_Start(object sender, EventArgs e)
{
  // データベースの初期化
  Database.SetInitializer(new DropCreateDatabaseIfModelChanges<MRRSContext>());
  // jQueryの登録
  ScriptManager.ScriptResourceMapping.AddDefinition("jquery",
    new ScriptResourceDefinition
    {
      ResourceName="jquery",
      CdnPath = "http://code.jquery.com/jquery-1.10.2.min.js",
      CdnDebugPath = "http://code.jquery.com/jquery-1.10.2.js"
    });
}

　例では、jQueryの公式のCDNからjQueryのスクリプトファイルを取得するよう設定しています。もちろん自サイト内にダウンロードしたjQueryのファイルを配置し、そのパスをPath、Debugパスプロパティで指定する方法でも可能です。

　以上で控えめな検証を使用する準備が整いました。それでは、実際に有効するとどうなるのか、結果を見てみましょう。控えめな検証を有効にする前と同様に、Page Inspectorで見た結果が図3です。

図4：控えめな検証が有効の状態

　控えめな検証が無効だった時とは違い、scriptタグが出力されず、代わりにRequiredFieldValidatorの部分に、いくつかのデータ属性（data-*属性）が出力されていることが分かります。ASP.NETはこの属性を元に、別途生成されたJavaScriptを実行するため、元のWebページへのJavaScriptコードの出力が不要になる、という仕組みです。

　なお、出力されるデータ属性はHTML5で追加された属性です。それぞれの属性にどのような意味があるかについては、おおよそ名前から想像はつきますが、公式情報が見つかりませんでしたので省略します。

　ちなみに、HTML5で追加された属性だからといってHTML5未対応のブラウザで動作しないというわけではないようで、Windows 7の既定のブラウザであるIE7（HTML5未対応）では動作することを確認しました。他のHTML5未対応ブラウザでもおそらくは動作すると思いますが、使用する際には動作確認することをお勧めします。

＊1

　ScriptResourceMapping：クライアントサイドスクリプトファイルを、「名前」を使って各ページに埋め込むための仕組み。詳しくは「ScriptManager.ScriptResourceMapping プロパティ （System.Web.UI）」を参照。