CodeZine(コードジン)

特集ページ一覧

RIAへの第一歩としてのjQuery

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

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

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リファレンスを参照ください。

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

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

 この状態で実行すると、図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の導入方法について紹介します。お楽しみに。



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

バックナンバー

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

もっと読む

著者プロフィール

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

    <個人紹介> 新潟県長岡市在住の在宅リモートワークプログラマー。家事や育児、仕事の合間に長岡IT開発者勉強会(NDS)、Niigata.NET、TDDBCなどのコミュニティに関わったり、Web記事や書籍などの執筆を行ったりしている。著書に『アプリを作ろう! Visual C#入門 Visual C...

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

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

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5