Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

使ってみようASP.NET AJAX Control Toolkit(入力補助コントロール編)

ASP.NET AJAX Control Toolkitの利用方法を学習する 前編

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

ASP.NET AJAXリリースによりASP.NET 2.0の開発にAJAX技術を取り入れる事が簡単になりました。ASP.NETユーザーがメインで利用することになるASP.NET 2.0 AJAX Extensionsは優秀な技術セットですが、ASP.NET AJAX Control Toolkitを利用する事で更にWebサイトのユーザーエクスペリエンスの向上が望めます。

目次

はじめに

 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)。

表1
コントロール名概要
Accordion折りたたみが可能なマルチペインの作成するコントロール
AlwaysVisibleControl指定したコントロールをブラウザ内の一部にスクロールしても表示するコントロール
Animation 指定したコントロールにパワフルで柔軟性のあるアニメーションを付加するコントロール
AutoCompleteテキストボックスに複数の文字を入力後、下部に入力の補助を行うDropDownListの機能を付加するコントロール
Calendar TextBoxコントロールに付与することができるAJAX機能付きのカレンダー
CascadingDropDown DropDownListコントロールの選択肢によって、次のDropDownListコントロールの選択肢を切り替える階層型ドロップダウン機能を付加するコントロール
CollapsiblePanelPanelコントロールに折りたたみが可能な機能を付加するコントロール
ConfirmButton ASP.NETのボタン系コントロールクリック時に確認ダイアログを表示するコントロール
DragPanel PanelコントロールにWebページ上でドラッグ可能な機能を付加するコントロール
DropDown コントロールをラップしてSharePointで使用されているようなドロップダウンを付加するコントロール
DropShadowコントロールに調整可能な影を付加するコントロール
DynamicPopulateページの属性をWebサービスに渡して結果を表示するコントロール
FilteredTextBoxTextBoxコントロールに入力されるデータの制限機能を付加するコントロール
HoverMenu マウスがコントロールの上にある時、UIメニューがコントロールの周りにポップアップする機能を付加するコントロール
ListSearchタイピングによってListBoxコントロールかDropDownListコントロールの項目をリアルタイムに選択するコントロール
MaskedEditTextBoxコントロールにフォーカスした時に入力形式を表示し、データ入力が正しければ有効にされる機能を付加するコントロール
ModalPopup HTMLダイアログを使用せずに、デザインされたモーダルのUIを表示するコントロール
MutuallyExclusiveCheckBox 複数のCheckBoxコントロールに同一キーを指定し、どれか一つしかチェックできない機能を付加するコントロール
NoBotWebページにボットかスクリプトを防ぐ簡単なルールを適用するコントロール
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. データ入力ページの作成に役立つ部品

  1. より直感的で便利なデータ入力を可能とするエクステンダ
  2. FilteredTextBox、NumericUpDown、Rating、ReorderList、Slider、ListSearch、CascadingDropDown
  1. 入力検証機能を強化するエクステンダ
  2. ValidatorCallout、TextBoxWatermak、ConfirmButton、PasswordStrength、MutuallyExclusiveCheckbox、AutoComplete、MaskedEdit
  1. 特殊なメニュー表示を可能にするエクステンダ
  2. PopupControlModalPopup、HoverMenur、Calendar

2. データ表示ページの作成に役立つ部品

  1. 狭い画面をより有効的に活用して表示するエクステンダと部品
  2. CollapsiblePanel、Accordion、ResizableControl、DragPanel、PagingBulletedList、AlwaysVisibleControl、Tabs
  1. (機能的には大差ないが)高度な描画を行うエクステンダ
  2. ToggleButton、DropShadow、RoundedCorners、DropDown
  1. アニメーション描画を可能にするエクステンダ
  2. Animation、UpdatePanelAnimation

3. その他

 NoBot、DynamicPopulateExtender、SlideShow


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

修正履歴

  • 2007/05/21 09:49 誤字修正:Page1 ResisableControl→ResizableControl

著者プロフィール

  • WINGSプロジェクト ナオキ(ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

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

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

バックナンバー

連載:使ってみようASP.NET AJAX Control Toolkit
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5