著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマイクロソフトの見解を反映したものですマイクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワ

Size: px

Start display at page:

Download "著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマイクロソフトの見解を反映したものですマイクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワ"

みいかかなり
5 years ago
Views:

1 Visual Studio Do-It-Yourself シリーズ第 14 回 ASP.NET AJAX

2 著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマイクロソフトの見解を反映したものですマイクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワイトペーパーは情報提供のみを目的としています明示黙示または法令に基づく規定に関わらずこれらの情報についてマイクロソフトはいかなる責任も負わないものとしますこの文書およびソフトウェアを使用する場合は適用されるすべての著作権関連の法律に従っていただくものとしますこのドキュメントのいかなる部分も米国 Microsoft Corporation の書面による許諾を受けることなくその目的を問わずどのような形態であっても複製または譲渡することは禁じられていますここでいう形態とは複写や記録など電子的なまたは物理的なすべての手段を含みますただしこれは著作権法上のお客様の権利を制限するものではありませんマイクロソフトはこの文書に記載されている事項に関して特許申請中特許商標著作権および他の知的財産権を所有する場合があります別途マイクロソフトのライセンス契約上に明示の規定のない限りこのドキュメントはこれらの特許商標著作権またはその他の知的財産権に関する権利をお客様に許諾するものではありません別途記載されていない場合このドキュメントで使用している会社組織製品ドメイン名電子メールアドレスロゴ人物場所出来事などの名称は架空のものです実在する商品名団体名個人名などとは一切関係ありません 2010 Microsoft Corporation. All rights reserved. Microsoft Windows Visual Studio Visual Studio ロゴは米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です他のすべての商標はそれぞれの所有者の財産です

3 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.

4 非同期通信の例これらの 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 種類の画像も用意しておきます

5 以上のコントロールの配置が終わったら 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();

6 } 通常のポストバックとの違い以上の作業で画像と 2 つのボタン (1 つは UpdatePanel 内にあります ) が配置されたページが出来上がりました実行してそれぞれのボタンをクリックしページの更新方法にどのような違いがあるのかを見てみましょうまず [AJAX なし ] ボタンをクリックしてみますこの場合は通常のポストバックが発生しますつまり現在表示しているページを Web ブラウザーが再度リクエストしますのでページの表示内容がいったんクリアされて異なる画像とともにページ全体が再描画されます一方 [AJAX あり ] ボタンをクリックした場合はページ全体の更新は行われず画像部分だけが更新されますその際 UpdateProgress に設定した " 更新中です..." が表示されますがページに含まれるボタンやそのほかの部分は再描画されません

7 またスクロールバーが表示されるまで Web ブラウザーのウィンドウの高さを狭くしその状態でそれぞれのボタンをクリックしてみましょう [AJAX なし ] ボタンをクリックした場合はページの表示開始部分がページの先頭に戻ってしまうのに対して [AJAX あり ] ボタンの場合はスクロール位置が変わらないまま画像が切り替わるのが分かります

簡単に説明すると "AJAX あり " の場合は AJAX ライブラリ内の JavaScript のスクリプトによりバックグラウンドでポストバックが行われますさらにはその結果もスクリプトが処理 (<img> タグの src 属性の内容を動的に変更 ) しますそのため [AJAX あり ] ボタンで画像が切り替わった後 Web ブラウザーから表示中のページのソースを表示しても <img>

8 簡単に説明すると "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 MaskedEdit ModalPopup ReorderList テキストボックスにカラーパレット機能を追加 WYSIWYG なテキストエリアを提供指定フォーマットに従ってテキストボックスに入力マスクを追加モーダルウィンドウを生成ドラッグ & ドロップで順番を変更できる箇条書きリスト

SlideShow 自動再生機能付きのスライドショーを生成以下では Control Toolkit を利用するための手順について解説すると共に Control Toolkit のサンプルとして ColorPicker コントロールを利用したカラーパレット付きテキストボックスを実装してみます以下は本節で作成するサンプルの実行結果ですテキストボックスをクリックするとカラーパレットが表示

9 SlideShow 自動再生機能付きのスライドショーを生成以下では Control Toolkit を利用するための手順について解説すると共に Control Toolkit のサンプルとして ColorPicker コントロールを利用したカラーパレット付きテキストボックスを実装してみます以下は本節で作成するサンプルの実行結果ですテキストボックスをクリックするとカラーパレットが表示され色を選択すると RGB 形式の色名がテキストボックスに反映されます Control Toolkit のインストール方法 Control Toolkit は拡張ライブラリですので ASP.NET (Visual Studio) 本体とは別に本家サイト ( から入手してインストールする必要がありますいくつかのパッケージが用意されていますが 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] タブが開いた状態で右クリックし [ アイテムの選択 ] を選択します

10 [ ツールボックスアイテムの選択 ] ダイアログが開きますので [ 参照 ] ボタンから先ほど解凍した AjaxControlToolit.dll を選択してください [.NET Framework コンポーネント ] タブのリストに Control Toolkit で提供されているコントロールの一覧が追加されますのでチェックボックスにチェックが入っていることを確認した上で [OK] ボタンをクリックします [Control Toolkit] タブの配下に以下のようにコントロールが追加されていれば Control Toolkit は正しくセットアップできています

11 カラーパレット付きテキストボックスを実装する新規に ColorPalette.aspx という名前の Web フォームを生成しますデザインビューから以下の図のように ToolkitScriptManager と TextBox を配置します ToolkitScriptManager は Control Toolkit 版の ScriptManager です Control Toolkit を利用する場合には ScriptManager の代わりに ToolkitScriptManager を利用してください

続いて TextBox に ColorPicker (ColorPickerExtender) を関連づけます一般的には Extender の部分を省いて ColorPicker のように略記することが多いですが Control Toolkit にはサフィックスとして Extender が付いているコントロールが多く含まれていますこれらコントロールのことを

12 続いて TextBox に ColorPicker (ColorPickerExtender) を関連づけます一般的には Extender の部分を省いて ColorPicker のように略記することが多いですが Control Toolkit にはサフィックスとして Extender が付いているコントロールが多く含まれていますこれらコントロールのことを総称してエクステンダーコントロールと言いますエクステンダーコントロールは通常のサーバーコントロールとは異なりそれ単体で動作することはできず他のサーバーコントロールに関連付けてその機能を拡張するのが特徴です ( ちなみにエクステンダーコントロールを関連付けるコントロールのことをターゲットコントロールとも言います ) また配置の方法も異なります直接デザインビューに配置する代わりに関連付けるコントロール ( ここでは TextBox) のスマートタグ ( タスクメニュー ) を開き [ エクステンダーの追加 ] を選択します

[ エクステンダーウィザード ] ダイアログが開きますので上のリストから ColorPickerExtender を選択し下のテキストボックスに ID 値として cpe と入力します [OK] ボタンをクリックするとエクステンダーコントロールが TextBox に関連付けられます最後に

13 [ エクステンダーウィザード ] ダイアログが開きますので上のリストから ColorPickerExtender を選択し下のテキストボックスに ID 値として cpe と入力します [OK] ボタンをクリックするとエクステンダーコントロールが TextBox に関連付けられます最後に ColorPicker のプロパティを設定しておきますエクステンダーコントロールのプロパティを設定するにはターゲットコントロールのプロパティとして設定します TextBox を選択した状態でプロパティウィンドウから cpe という項目を探してください cpe は先ほど設定したエクステンダーコントロールの ID 値です

cpe 配下に ColorPicker コントロールのプロパティが展開されますのでここでは PopupPosition プロパティを BottomRight に設定しておきます PopupPosition プロパティはカラーパレットの表示位置を表しますこれでカラーパレット付きテキストボックスの実装は完了です以下に Visual Studio で自動生成されたコードも見てみましょう

14 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" " <html xmlns=" <head runat="server">

15 <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 を利用するには? ( AJAX を使えばこれまでの Web アプリケーションでは不可能だった使い勝手の良いユーザーインターフェイスを実現できます今後より高度なユーザビリティが要求される状況では ASP.NET AJAX が役立つこと

16 でしょう次回は ASP.NET の標準的なクライアントサイドライブラリである jquery について学習します

Visual Studio Do-It-Yourself シリーズ第 11 回テーマとスキン

Visual Studio Do-It-Yourself シリーズ第 11 回テーマとスキン著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマクロソフトの見解を反映したものですマクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワトペーパーは情報提供のみを目的としています