SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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実行メニュー
図1:Page Inspector実行メニュー
図2:控えめな検証が無効の状態
図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不足のエラー画面
図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:控えめな検証が有効の状態
図4:控えめな検証が有効の状態

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

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

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

*1

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

次のページ
非同期ページとは

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
実例で学ぶASP.NET 4.5 Webフォーム 新機能活用法連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 高野 将(タカノ ショウ)

<個人紹介>新潟県長岡市在住の在宅リモートワークプログラマー。家事や育児、仕事の合間に長岡IT開発者勉強会(NDS)、Niigata.NET、TDDBCなどのコミュニティに関わったり、Web記事や書籍などの執筆を行ったりしている。著書に『アプリを作ろう! Visual C#入門 Visual C# 2017対応』(日経BP社、2017)など。<WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7466 2013/11/11 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング