はじめに
ASP.NET AJAX V1.0がリリースされてから早くも3ヶ月が過ぎました。ASP.NET 2.0 AJAX ExtensionsやMicrosoft AJAX Libraryは利用され始めているようですが、ASP.NET AJAX Control Toolkit(以下、Control Toolkit)はどんな状況かよく分からないため利用できないという意見を聞くことがあります。本稿ではASP.NET AJAX Control Toolkitの各コントロールの特徴を伝えつつ、コントロールの使い方について解説していきたいと思います。
ただし、各コントロールすべてのプロパティは網羅していないので、それぞれのコントロールについて詳しく知りたい方は公式ページを参照して学習してください。また、今回のサンプルプログラムは基礎の基礎といった用途の紹介ですので、さらに詳細な使い方を学習したい方も公式ページを参考にしてください。
対象読者
- ASP.NET 2.0を使ったことがある人
- ASP.NET AJAXに興味がある人
- AJAXに興味がある人
- AJAXに興味があるが、JavaScriptが分からない人
必要な環境と準備
- Visual Web Developer 2005 Express EditionもしくはVisual Studio 2005(以下、VS)
- ASP.NET AJAX V1.0
- ASP.NET AJAX Control Toolkit
ASP.NET AJAXの入手方法、インストール方法はこちらの記事を参照してください。続いて、Control Toolkitの入手方法と利用方法は前回の記事を参照してください。
ASP.NET AJAX Control Toolkitの種類
Control ToolkitはMicrosoftとコミュニティベースで作られたASP.NET 2.0 AJAX Extensionベースのコントロール群で、ASP.NET AJAX V1.0のリリースと同時に正式リリースされました。現在34種類のコントロールが公開され、それぞれがAJAXの機能を用いて作成されています。大部分が既存のASP.NETコントロールに対してAJAXの機能を付加させる拡張機能を持ったコントロールとなっています(もちろん、それ単体で動作する物もあります)。そのためサーバサイドの技術はASP.NETであることが条件となっています。以下の表に各コントロールの性能をまとめてみました(表1)。
| コントロール名 | 概要 |
| Accordion | 折りたたみが可能なマルチペインの作成するコントロール |
| AlwaysVisibleControl | 指定したコントロールをブラウザ内の一部にスクロールしても表示するコントロール |
| Animation | 指定したコントロールにパワフルで柔軟性のあるアニメーションを付加するコントロール |
| AutoComplete | テキストボックスに複数の文字を入力後、下部に入力の補助を行うDropDownListの機能を付加するコントロール |
| Calendar | TextBoxコントロールに付与することができるAJAX機能付きのカレンダー |
| CascadingDropDown | DropDownListコントロールの選択肢によって、次のDropDownListコントロールの選択肢を切り替える階層型ドロップダウン機能を付加するコントロール |
| CollapsiblePanel | Panelコントロールに折りたたみが可能な機能を付加するコントロール |
| ConfirmButton | ASP.NETのボタン系コントロールクリック時に確認ダイアログを表示するコントロール |
| DragPanel | PanelコントロールにWebページ上でドラッグ可能な機能を付加するコントロール |
| DropDown | コントロールをラップしてSharePointで使用されているようなドロップダウンを付加するコントロール |
| DropShadow | コントロールに調整可能な影を付加するコントロール |
| DynamicPopulate | ページの属性をWebサービスに渡して結果を表示するコントロール |
| FilteredTextBox | TextBoxコントロールに入力されるデータの制限機能を付加するコントロール |
| HoverMenu | マウスがコントロールの上にある時、UIメニューがコントロールの周りにポップアップする機能を付加するコントロール |
| ListSearch | タイピングによってListBoxコントロールかDropDownListコントロールの項目をリアルタイムに選択するコントロール |
| MaskedEdit | TextBoxコントロールにフォーカスした時に入力形式を表示し、データ入力が正しければ有効にされる機能を付加するコントロール |
| ModalPopup | HTMLダイアログを使用せずに、デザインされたモーダルのUIを表示するコントロール |
| MutuallyExclusiveCheckBox | 複数のCheckBoxコントロールに同一キーを指定し、どれか一つしかチェックできない機能を付加するコントロール |
| NoBot | Webページにボットかスクリプトを防ぐ簡単なルールを適用するコントロール |
| NumericUpDown | ボタンを押すことで値の増減や登録されているリストの表示を切り替える機能を付加するコントロール |
| PagingBulletedList | 箇条書きのリストにソートを加えて表示する機能を付加するコントロール |
| PasswordStrength | パスワードが見破られやすいかどうか視覚的に判断できる機能を付加するコントロール |
| PopupControl | コントロールにフォーカスがある状態で指定したコントロールをポップアップ表示させる機能を付加するコントロール |
| Rating | ユーザーがその項目に対して評価するために使用するコントロール |
| ReorderList | リスト内の要素がドラッグ&ドロップによって整理し直すことが可能なリストコントロール |
| ResizableControl | ユーザーによって表示されている内容や画像をリサイズさせることが可能なコントロール |
| RoundedCorners | コントロールの四隅に丸みを帯びさせるコントロール |
| Slider | TextBoxコントロールをスクロールバー型のスライダーに変えるコントロール |
| SlideShow | スライドショーを実現させるコントロール |
| Tabs | Webページ内にタブの切り替えが可能になるパネルとそのパネルを格納するコンテナコントロール |
| TextBoxWatermark | TextBoxコントロールに入力がされていない場合、透かしを表示させる機能を付加するコントロール |
| ToggleButton | CheckBoxコントロールをイメージチェックボックスへと変更する機能を付加するコントロール |
| UpdatePanelAnimation | 部分更新時にそのPanelコントロールに対してアニメーション機能を付加するコントロール |
| ValidatorCallout | 既存の検証コントロールの機能性を高めるコントロール |
ASP.NET AJAX Control Toolkitの分類
Control Toolkitは現在34種類のコントロールがありますが、そのすべては次のように分類することができます。本稿では1. データ入力ページの作成に役立つ部品の中の「より直感的で便利なデータ入力を可能とするエクステンダ」について触れて行きます。Extenderと書かれているコントロールが既存のASP.NETコントロールに機能拡張をするコントロールです。Extenderと書かれているコントロールはTargetControlIDを設定したコントロールのプロパティウィンドウからプロパティの設定が可能になっています。
1. データ入力ページの作成に役立つ部品
- より直感的で便利なデータ入力を可能とするエクステンダ
- 入力検証機能を強化するエクステンダ
- 特殊なメニュー表示を可能にするエクステンダ
2. データ表示ページの作成に役立つ部品
- 狭い画面をより有効的に活用して表示するエクステンダと部品
- (機能的には大差ないが)高度な描画を行うエクステンダ
- アニメーション描画を可能にするエクステンダ
3. その他
NoBot、DynamicPopulateExtender、SlideShow
