RIAへの第一歩としてのjQuery

実例で学ぶASP.NET Webフォーム業務アプリケーション開発のポイント 第7回

DatePickerの使用

　jQuery、jQuery UIへの参照ができてしまえば、あとは次のようなコードを実行するだけで、DatePickerを使用することができます。

リスト3 jQueryコード例（ReservationsAdd.aspxより）

function setUpDatePicker() {
  /// <summary>
  /// 日付の項目にjQuery UIのDatePickerを設定します。
  /// </summary>

  // 予約日にDatePickerを設定
  $("#ReserveDateFromTextBox")  // (1)
    .datepicker({               // (2)
      minDate: 0,		         
      dateFormat: "yy/mm/dd"
      });
  $("#ReserveDateToTextBox")
    .datepicker({
      minDate: 0,
      dateFormat: "yy/mm/dd"
    });
}

$(document).ready(function () {	// (3)
  // DatePickerを設定
  setUpDatePicker();

  ...

});

1.DatePickerを使用するテキストボックスをセレクターで指定する

　前述したセレクターを使い、DatePickerを設定する項目を指定します。今回は予約日時の開始日、終了日に設定するよう指定しています。

2.datepickerメソッドを呼び出す

　datepickerメソッドにはオプションをJSON形式で設定することができます。

　今回のシステムが「予約」を行うためのシステムであることを考慮し、DatePickerのカレンダーに表示するのは本日以降（minDate: 0）とし、さらに日付は2012/10/10のようなyyyy/MM/dd形式として設定するようにしています（dateFormat: "yy/mm/dd"）。

　その他の設定可能なオプションについては、jQuery UI DatePickerのAPIリファレンスを参照ください。

• UI/Datepicker - jQuery JavaScript Library

3.Webページ初回表示時にDatePickerの設定を行う

　jQueryを使う際によくやる方法ですが、$(document).readyメソッドを使うことで、Webページの初回表示時に実行するスクリプトを登録できます。ここにDatePicker設定処理を記載します。

• .ready() - jQuery API

　この状態で実行すると、図4のように予約日をクリックするとカレンダーが表示され、値を選択できるようになります。

ASP.NETでjQueryを使う際の注意点

　ここまでで、jQueryおよびjQuery UIの基本的な使い方を説明しました。ただ、jQueryをASP.NET Webフォームアプリケーションで使用する際には、少し注意が必要です。

生成されるHTML要素のidの問題

　jQueryを使っていく中で、セレクターにHTML要素のidを指定することがよくあります。しかし、ASP.NET Webフォームアプリケーションでは、最終的に生成されたHTML要素のidはサーバーコントロールの階層とIDから自動的に生成されるため、決して人が解釈しやすいとは言えません。

リスト4 HTML要素のidの既定の生成値

・Reservations.aspx
予約日 :
<asp:TextBox ID="ReserveDateTextBox" runat="server" Columns="10"></asp:TextBox>

↓

・生成されたHTML
予約日 :
<input name="ctl00$MainContent$ReserveDateTextBox" type="text" size="10" id="MainContent_ReserveDateTextBox" />

　この問題に対処するため、サーバーコントロールにはClientIDModeプロパティが用意されています。このプロパティをStaticにすることで、サーバーコントロールのIDとHTML要素のidを一致させることができます。

リスト5 ClientIDModeを使った解決法

・ReservationsAdd.aspx
予約日時 :
<asp:TextBox ID="ReserveDateFromTextBox" runat="server"
  Columns="8" MaxLength="10" ClientIDMode="Static" />

↓

・生成されたHTML
予約日時 :
<input name="ctl00$MainContent$ReservationsFormView$ReserveDateFromTextBox"
  type="text" maxlength="10" size="8" id="ReserveDateFromTextBox" />

　こうすることで、リスト4のようにサーバーコントロールのIDをそのまま使って、jQueryのコードを書くことが可能になります。

まとめ

　今回は従来のWebアプリケーションとRIAの違い、そしてその第一歩としてjQueryを導入する方法について紹介してきました。jQueryは思いのほか簡単に導入できることが分かってもらえたのではないかと思います。

　今回のポイントをまとめると次のようになります。

• 元々Webアプリケーションは、動的にWebページを変化させようとすると、必ずポストバックが必要だったため、使いにくかった。
  • 画面のちらつき。
  • スクロール位置の初期化　等。
• AJAXの登場により、Webページの一部分のみを動的に変化できるようになり、上記の問題を解決できるようになった。
  • こういったWebアプリケーションは、Rich Internet Application（RIA）と呼ばれる。
• 動的Webページ操作はJavaScriptライブラリのjQueryがデファクトスタンダードとなっている。
  • jQuery UIを使うことで、カレンダーからの日付選択などが簡単に行える。
• ASP.NET WebフォームアプリケーションでjQueryを使用する際は以下の点に注意する。
  • HTML要素のidの生成ルールを考慮する必要がある。
  • HTML要素のidを静的なものにするには、サーバーコントロールのClientIDModeプロパティにStaticを設定する。

　次回は今回に引き続き、RIAを実現するためのもう一つの大きな柱であるAJAXの導入方法について紹介します。お楽しみに。