Embed Size (px)
Citation preview
Visual Studio Do-It-Yourself シリーズ
第 14 回 ASP.NET AJAX
著作権
このドキュメントに記載されている情報は、このドキュメントの発行時点におけるマイクロソフトの見解を反映
したものです。マイクロソフトは市場の変化に対応する必要があるため、このドキュメントの内容に関する責任
を問われないものとします。また、発行日以降に発表される情報の正確性を保証できません。
このホワイトペーパーは情報提供のみを目的としています。明示、黙示、または法令に基づく規定に関わらず、
これらの情報についてマイクロソフトはいかなる責任も負わないものとします。
この文書およびソフトウェアを使用する場合は、適用されるすべての著作権関連の法律に従っていただくものと
します。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることな
く、その目的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう
形態とは、複写や記録など、電子的な、または物理的なすべての手段を含みます。ただしこれは、著作権法上の
お客様の権利を制限するものではありません。
マイクロソフトは、この文書に記載されている事項に関して、特許、申請中特許、商標、著作権、および他の知
的財産権を所有する場合があります。別途マイクロソフトのライセンス契約上に明示の規定のない限り、このド
キュメントはこれらの特許、商標、著作権、またはその他の知的財産権に関する権利をお客様に許諾するもので
はありません。
別途記載されていない場合、このドキュメントで使用している会社、組織、製品、ドメイン名、電子メール ア
ドレス、ロゴ、人物、場所、出来事などの名称は架空のものです。実在する商品名、団体名、個人名などとは一
切関係ありません。
© 2010 Microsoft Corporation. All rights reserved.
Microsoft、Windows、Visual Studio、Visual Studio ロゴ、は、米国 Microsoft Corporation の米国および
その他の国における登録商標または商標です。他のすべての商標は、それぞれの所有者の財産です。
ASP.NET Do-It-Yourself 第 14 回は、ASP.NET AJAX について学習します。ASP.NET AJAX を使えば、ペー
ジ全体を更新せずに特定のコントロールだけを更新できます。これにより、ちらつきのない、Windows アプリ
ケーションのようなリッチな画面表示が Web アプリケーションでも可能になります。
■AJAX とは？
AJAX (Asynchronous JavaScript and XML) とは、ページの表示後に、ページ内のスクリプト (JavaScript) か
ら Web サーバーに非同期通信を行い、DOM (Document Object Model) を用いてページの内容を動的に更新
する技術の総称です。ASP.NET 4 では、この AJAX 機能が標準で備わっており、追加インストールなしで、AJAX
を利用したページを作成できます。
通常、AJAX を用いるページの制作では、JavaScript によるスクリプト作成が重要になりますが、ASP.NET AJAX
では、JavaScript を記述することなく AJAX の機能を利用できます (もちろんスクリプトを自分で記述して、
独自の処理を作成することも可能です)。
ASP.NET AJAX に含まれる主なコンポーネントを次に示します。
●AJAX ライブラリ
AJAX ライブラリは、JavaScript で記述されたライブラリです。このライブラリは、次の ScriptManager か
ら Web ブラウザーにダウンロードされます。AJAX ライブラリを用いることで、クライアント側で動作するス
クリプトを効率的に記述できるようになります。
●ScriptManager コントロール
AJAX ライブラリ、部分的なページ レンダリング、ローカライズおよび独自のスクリプトの配信を管理します。
以下の UpdatePanel、UpdateProgress、Timer を利用する場合は ScriptManager が必要になります。
●UpdatePanel コントロール
通常のポストバックを使用してページ全体を更新するのではなく、ページの一部分のみを非同期に更新できるよ
うにします。
●UpdateProgress コントロール
UpdatePanel を使って非同期の更新処理を行っている間のステータスを表示します。
●Timer コントロール
指定された間隔でポストバックを実行します。UpdatePanel を使ってページの一部を更新することも、ページ
全体を更新することもできます。
■非同期通信の例
これらの ASP.NET AJAX の機能を使って、ボタンをクリックするたびにページ上に表示された画像が切り替わ
るページを作成してみましょう。
まず、通常どおり Web サイト プロジェクトを新規作成します。プロジェクトを新規作成したら、Default.aspx
を新規に作成して、デザイン ビュー表示に切り替えます。そしてツール ボックスの [AJAX Extension] タブ
を開いて、まず ScriptManager をページ上にドラッグ & ドロップします。
ScriptManager は、アプリケーション実行時には Web ブラウザーに表示されません。これは ASP.NET AJAX
のコントロールを使用する際に必要となるスクリプトを Web ブラウザーにダウンロードする働きがあります。
UpdatePanel を使用する際には必ず配置しておく必要があります。
次に UpdatePanel をページにドラッグ & ドロップします。UpdatePanel は、ページの一部分を非同期に更
新するためのコントロールです。UpdatePanel 内に配置したコントロールが部分的な更新処理の対象となりま
す。今回は UpdatePanel 内に、画像を表示するための Image と、画像を切り替えるための Button を配置
します。Button は "AJAX あり" という表示にしておきます (Text プロパティを設定)。
さらに UpdateProgress を配置して、ページが更新中 （非同期通信中） であることを表示するようにします。
UpdateProgress には "更新中です..." という文字列を記述しておきます。Image に表示する 2 種類の画像
も用意しておきます。
以上のコントロールの配置が終わったら、Button がクリックされた際に実行される Click イベント ハンドラ
ーを作成します。イベント ハンドラーでは、呼び出されるたびに Image コントロールの ImageUrl プロパテ
ィを書き換えることにより、画像を切り替えます。
// [AJAX あり] ボタン
protected void Button1_Click(object sender, EventArgs e)
{
flipImage();
}
// 画像を切り替える処理
protected void flipImage()
{
if (Image1.ImageUrl == "~/images/Hydrangeas.jpg")
{
Image1.ImageUrl = "~/images/Tulips.jpg";
}
else
{
Image1.ImageUrl = "~/images/Hydrangeas.jpg";
}
// 更新処理が分かりやすいように処理を遅延
System.Threading.Thread.Sleep(2000);
}
これで画像の切り替え処理は完成です。AJAX を利用するということで何か特別な記述が必要というわけではあ
りません。UpdatePanel や UpdateProgress などの AJAX 関連のコントロールを配置した以外に特別な作業
は行っていません。
最後に、非同期の通信が行われているかどうかを確認するために、UpdatePanel の下側にもう 1 つ、"AJAX な
し" と表示した Button を配置しておきます。そして先ほどの [AJAX あり] ボタンとまったく同じ内容の
Click イベント ハンドラーを作成しておきます。
// [AJAX なし] ボタン
protected void Button2_Click(object sender, EventArgs e)
{
flipImage();
}
■通常のポストバックとの違い
以上の作業で、画像と 2 つのボタン (1 つは UpdatePanel 内にあります) が配置されたページが出来上がり
ました。実行してそれぞれのボタンをクリックし、ページの更新方法にどのような違いがあるのかを見てみまし
ょう。
まず [AJAX なし] ボタンをクリックしてみます。この場合は通常のポストバックが発生します。つまり、現在
表示しているページを Web ブラウザーが再度リクエストしますので、ページの表示内容がいったんクリアされ
て、異なる画像とともにページ全体が再描画されます。
一方 [AJAX あり] ボタンをクリックした場合は、ページ全体の更新は行われず、画像部分だけが更新されます。
その際、UpdateProgress に設定した "更新中です..." が表示されますが、ページに含まれるボタンやそのほか
の部分は再描画されません。
また、スクロールバーが表示されるまで Web ブラウザーのウィンドウの高さを狭くし、その状態でそれぞれの
ボタンをクリックしてみましょう。
[AJAX なし] ボタンをクリックした場合は、ページの表示開始部分がページの先頭に戻ってしまうのに対して、
[AJAX あり] ボタンの場合は、スクロール位置が変わらないまま画像が切り替わるのが分かります。
簡単に説明すると、"AJAX あり" の場合は AJAX ライブラリ内の JavaScript のスクリプトにより、バックグ
ラウンドでポストバックが行われます。さらには、その結果もスクリプトが処理 (<img> タグの src 属性の内
容を動的に変更) します。そのため [AJAX あり] ボタンで画像が切り替わった後、Web ブラウザーから表示
中のページのソースを表示しても、<img> タグの src 属性の内容は元の画像を示したままとなっています。
それに対して、[AJAX なし] ボタンをクリックした場合は、<img> タグの src 属性が変化します。
■ASP.NET AJAX Control Toolkit を導入する
ASP.NET AJAX Control Toolkit (以降、Control Toolkit) とは、ASP.NET AJAX をベースとした Ajax対応のサ
ーバー コントロール集です (執筆時点で約 40 種類ほどを提供)。ASP.NET AJAX 単独では多くのコーディン
グを必要とする機能も、Control Toolkit を利用することで、最低限のコードで実装できるようになります。以
下に、Control Toolkit で提供している主なコントロールを挙げておきます。
コントロール名 概要
Accordion アコーディオン式のパネルを生成
AutoComplete テキストボックスにオートコンプリート機能を追加
Calendar テキストボックスに日付入力用のポップアップ カレンダを追加
CascadingDropDown 階層式のドロップダウンリストを生成
ColorPicker テキスト ボックスにカラー パレット機能を追加
HTMLEditor WYSIWYGなテキストエリアを提供
MaskedEdit 指定フォーマットに従ってテキストボックスに入力マスクを追加
ModalPopup モーダルウィンドウを生成
ReorderList ドラッグ＆ドロップで順番を変更できる箇条書きリスト
SlideShow 自動再生機能付きのスライドショーを生成
以下では、Control Toolkit を利用するための手順について解説すると共に、Control Toolkit のサンプルとして
ColorPicker コントロールを利用したカラーパレット付きテキストボックスを実装してみます。
以下は、本節で作成するサンプルの実行結果です。テキストボックスをクリックすると、カラーパレットが表示
され、色を選択すると、RGB 形式の色名がテキストボックスに反映されます。
●Control Toolkit のインストール方法
Control Toolkit は拡張ライブラリですので、 ASP.NET (Visual Studio) 本体とは別に本家サイト
(http://ajaxcontroltoolkit.codeplex.com/) から入手してインストールする必要があります。いくつかのパッ
ケージが用意されていますが、ASP.NET 4 環境では AjaxControlToolkit.Binary.NET4.zip をダウンロードし
てください (ASP.NET 3.5 環境であれば、AjaxControlToolkit.Binary.NET35.zip)。ダウンロードしたパッケ
ージは、適当なフォルダに解凍してください。これに含まれる AjaxControlToolkit.dll が Control Toolkit の本
体です。
続いて、Visual Studio のツールボックスで右クリックし、[タブの追加] を選択、[Control Toolkit] という名
前のタブを追加します。更に、作成した [Control Toolkit] タブが開いた状態で右クリックし、[アイテムの選択
…] を選択します。
[ツールボックス アイテムの選択] ダイアログが開きますので、[参照…] ボタンから先ほど解凍した
AjaxControlToolit.dll を選択してください。[.NET Framework コンポーネント] タブのリストに、Control
Toolkit で提供されているコントロールの一覧が追加されますので、チェックボックスにチェックが入っている
ことを確認した上で、[OK] ボタンをクリックします。[Control Toolkit] タブの配下に、以下のようにコントロ
ールが追加されていれば、Control Toolkit は正しくセットアップできています。
●カラーパレット付きテキストボックスを実装する
新規に ColorPalette.aspx という名前の Web フォームを生成します。デザイン ビューから、以下の図のよう
に ToolkitScriptManager と TextBox を配置します。ToolkitScriptManager は、Control Toolkit 版の
ScriptManager です。Control Toolkitを利用する場合には、ScriptManager の代わりに ToolkitScriptManager
を利用してください。
続いて、TextBox に ColorPicker (ColorPickerExtender) を関連づけます。一般的には Extender の部分を省
いて ColorPicker のように略記することが多いですが、Control Toolkit にはサフィックスとして Extender が
付いているコントロールが多く含まれています。これらコントロールのことを、総称してエクステンダー コン
トロールと言います。
エクステンダー コントロールは、通常のサーバー コントロールとは異なり、それ単体で動作することはできず、
他のサーバー コントロールに関連付けて、その機能を拡張するのが特徴です (ちなみに、エクステンダー コン
トロールを関連付けるコントロールのことを、ターゲット コントロールとも言います)。
また、配置の方法も異なります。直接、デザイン ビューに配置する代わりに、関連付けるコントロール (ここ
では TextBox) のスマート タグ (タスク メニュー) を開き、[エクステンダーの追加…] を選択します。
[エクステンダー ウィザード] ダイアログが開きますので、上のリストから ColorPickerExtender を選択し、
下のテキストボックスに ID 値として cpe と入力します。
[OK] ボタンをクリックすると、エクステンダー コントロールが TextBox に関連付けられます。
最後に、ColorPicker のプロパティを設定しておきます。エクステンダー コントロールのプロパティを設定す
るには、ターゲット コントロールのプロパティとして設定します。TextBox を選択した状態で、プロパティ ウ
ィンドウから cpe という項目を探してください。cpe は、先ほど設定したエクステンダー コントロールの ID
値です。
cpe 配下に、ColorPicker コントロールのプロパティが展開されますので、ここでは PopupPosition プロパテ
ィを BottomRight に設定しておきます。PopupPosition プロパティは、カラー パレットの表示位置を表しま
す。
これでカラー パレット付きテキストボックスの実装は完了です。以下に、Visual Studio で自動生成されたコー
ドも見てみましょう。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ColorPalette.aspx.cs"
Inherits="ColorPalette" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET Do-It-Yourself #14</title>
</head>
<body>
<form id="form1" runat="server">
<div>
ASP.NET Do-It-Yourself #14<hr />
<br />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
色名：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:ColorPickerExtender ID="cpe" runat="server" Enabled="True"
PopupPosition="BottomRight" TargetControlID="TextBox1">
</asp:ColorPickerExtender>
</div>
</form>
</body>
</html>
プロパティ ウィンドウでは TextBox の一プロパティのように見えていたエクステンダー コントロールです
が、マークアップの上ではあくまで別々のコントロールとして表現されている点に注目です。エクステンダー コ
ントロールをターゲット コントロールに紐付けているのは、TargetControlID プロパティです。
サンプルを実行し、テキストボックスをクリックすると、カラー パレットがポップアップすること、色を選択
すると、その色名がテキストボックスに反映されることを確認してください。
■まとめ
今回は ASP.NET AJAX と、その拡張ライブラリである Control Toolkit について学習しました。特に Control
Toolkit にはまだまだたくさんの機能が用意されていますので、本稿を手掛かりに他の機能にも触れてみること
をお勧めします。具体的な方法は、以下のページも参考になるでしょう。
ASP.NET AJAX Control Toolkit を 利 用 す る に は ？
(http://www.atmarkit.co.jp/fdotnet/dotnettips/561aspajaxprepare/aspajaxprepare.html)
AJAX を使えば、これまでの Web アプリケーションでは不可能だった、使い勝手の良いユーザー インターフ
ェイスを実現できます。今後、より高度なユーザビリティが要求される状況では、ASP.NET AJAXが役立つこと
でしょう。
次回は、ASP.NET の標準的なクライアントサイド ライブラリである jQuery について学習します。
