ASP.NET AJAX エクステンダ コントロールの概要

更新 : 2007 年 11 月

ASP.NET AJAX エクステンダ コントロールは、標準の ASP.NET Web サーバー コントロールのクライアント機能を拡張します。TextBox コントロール、Button コントロール、Panel コントロールなどの標準の Web サーバー コントロールを対象として 1 つ以上のエクステンダ コントロールを使用することにより、ブラウザでのユーザー エクスペリエンスを拡充できます。たとえば、ユーザーがサーバーにフォームを送信する前に確認できるようにするには、Button コントロールにクライアント機能を追加するエクステンダ コントロールを使用します。

ASP.NET AJAX エクステンダ コントロールは、Visual Studio に追加して、他のコントロール同じように使用できます。エクステンダ コントロールは、独自に作成することも、他のソースから取得することもできます。

エクステンダ コントロールのソースの 1 つが、ASP.NET AJAX Control Toolkit です。この Control Toolkit には、カスタム コントロールおよびエクステンダを簡単に作成して再利用できるようにするサンプルと SDK が用意されています。ASP.NET AJAX Control Toolkit は、ASP.NET AJAX の Web サイトからダウンロードできます。

Bb470384.alert_caution(ja-jp,VS.90).gif重要 :

ASP.NET AJAX Control Toolkit は、コミュニティでサポートされているライブラリであり、Microsoft はサポートしていません。このトピックでは、Control Toolkit に含まれているエクステンダ コントロールを例として、エクステンダ コントロールの操作方法を説明します。ただし、ここで説明するエクステンダ コントロールは ASP.NET の正式な部品ではなく、サポートされているコントロールでもないことに注意してください。

このトピックでは、以下に関する情報を提供します。

  • AJAX エクステンダ コントロールの機能

  • 背景

  • クラス リファレンス

機能

Visual Studio は、エクステンダ コントロールに関する次の機能をサポートしています。

  • エクステンダ コントロールの追加

  • エクステンダ コントロールの削除

  • エクステンダ コントロールのプロパティの設定

  • エクステンダ コントロールの管理

ページのトップへ

背景

エクステンダ コントロールを使用して、標準の Web サーバー コントロールのクライアント機能を拡張できます。エクステンダ コントロールは単独では使用しません。別の ASP.NET Web サーバー コントロールにアタッチして使用します。エクステンダ コントロールを Web サーバー コントロールにアタッチするには、エクステンダ コントロールの TargetControlID プロパティを、拡張対象のサーバー コントロールの ID に設定します。

Visual Studio におけるエクステンダ コントロールの操作

ASP.NET AJAX Control Toolkit をインストールすると、エクステンダ コントロールが [ツールボックス] の専用のタブに表示されます。[ツールボックス] のエクステンダ コントロール セクションは、[ツールボックス][標準] セクションと同様に、Web ページに対してのみ表示されます。

Bb470384.alert_note(ja-jp,VS.90).gifメモ :

ASP.NET AJAX Control Toolkit は、コミュニティでサポートされているライブラリです。ASP.NET の一部ではありません。

エクステンダ コントロールの追加

デザイン ビューで Web サーバー コントロールにエクステンダ コントロールを追加するには、次の方法があります。

  • エクステンダ コントロールを Web サーバー コントロール上にドラッグします。エクステンダ コントロールは、エクステンダ コントロールをサポートする Web サーバー コントロール上にのみドロップできます。デザイン サーフェイス上にエクステンダ コントロールをドラッグすると、ポインタによって、Web サーバー コントロールにエクステンダ コントロールをドロップできるかどうかが示されます。

  • Web サーバー コントロールを右クリックし、[エクステンダの追加] をクリックします。

  • [Button タスク] スマート タグを選択し、[エクステンダの追加] をクリックします。

    Bb470384.alert_note(ja-jp,VS.90).gifメモ :

    デザイン ビューには、通常はエクステンダ コントロールが表示されません。ただし、エクステンダ コントロールに関連するエラーが発生すると、エクステンダ コントロールが表示されます。

デザイナでエクステンダを追加すると、エクステンダ コントロールの TargetControlID プロパティが、アタッチされた Web サーバー コントロールに設定されます。エクステンダ コントロールの名前は、アタッチ先の Web サーバー コントロールの名前に基づいて設定されます。

エクステンダ コントロールは、ユーザーが設定できるユーザー インターフェイス (UI) 要素をサポートする場合があります。その場合は、拡張された Web サーバー コントロールのスマート タグ メニューを使用して対象の要素を設定できます。

対象のコントロールにアタッチされているエクステンダ コントロールは、デザイン サーフェイスに表示されません。エクステンダ コントロールが対象のコントロールにアタッチされていない場合、またはデザイン時に関連付けを確認できない場合は、エクステンダ コントロールがプレースホルダとしてデザイン サーフェイスに表示されます。この状況は、次のシナリオで発生することが考えられます。

  • TargetControlID プロパティが空である。

  • TargetControlID プロパティが既存のコントロールと一致しない。

  • TargetControlID プロパティが、エクステンダ コントロールで拡張できないコントロールを参照している。

エクステンダ コントロールが有効な対象コントロールにアタッチされている場合は、Visual Studio の [プロパティ] ウィンドウに、次のエクステンダ コントロールのプロパティが表示されません。

  • TargetControlID

  • EnableViewState (Control から継承)

  • ID (Control から継承)

Web サーバー コントロールにエクステンダ コントロールを追加する方法の詳細については、「チュートリアル : ASP.NET AJAX エクステンダ コントロール」を参照してください。

エクステンダ コントロールの削除

エクステンダ コントロールと Web サーバー コントロールの間の関連付けを削除するには、次の方法があります。

  • [デザイン] ビューで、Web サーバー コントロールを右クリックして [エクステンダの削除] をクリックし、削除するエクステンダ コントロールを選択します。

  • [デザイン] ビューで、[Button タスク] スマート タグを選択し、[エクステンダの削除] をクリックして、削除するエクステンダ コントロールを選択します。

  • [ソース] ビューで、エクステンダ コントロール マークアップを削除します。

エクステンダ コントロールと ScriptManager コントロール

ExtenderControl クラスから派生するエクステンダ コントロールでは、ページ上に ScriptManager コントロールが必要です。ExtenderControl 基本クラスは、テストを実行して ScriptManager コントロールがページ上にあることを確認します。

ただし、ScriptManager コントロールを必要としないエクステンダ コントロールを作成する場合は、IExtenderControl インターフェイスを実装するクラスを直接作成できます。さらに、Control から派生するクラスを作成する場合や、Control から派生する既存のコントロールを拡張する場合は、IExtenderControl インターフェイスを各自で実装できます。

IExtenderControl インターフェイスは、GetScriptReferences メソッドを呼び出すことにより、コントロールのスクリプト ライブラリを登録します。また、GetScriptDescriptors メソッドを呼び出すことで、ScriptDescriptor オブジェクトを登録します。GetScriptDescriptors メソッドは、ScriptDescriptor オブジェクトの IEnumerable リストを返します。

Bb470384.alert_note(ja-jp,VS.90).gifメモ :

WebControl クラスから派生する既存のコントロールの種類を拡張する場合は、IScriptControl インターフェイスを実装します。

ASP.NET AJAX エクステンダ コントロールを作成する方法の詳細については、「Web サーバー コントロールへのクライアント機能の追加」を参照してください。

AJAX Control Toolkit のエクステンダ コントロール

ASP.NET AJAX Control Toolkit に用意されている AJAX エクステンダ コントロールの一部を、次の表に示します。

Bb470384.alert_note(ja-jp,VS.90).gifメモ :

ASP.NET AJAX Control Toolkit は、コミュニティでサポートされているライブラリです。ASP.NET の一部ではありません。このライブラリの内容と個々のコントロールの機能は、変更される可能性があります。

AJAX エクステンダ コントロール

説明

CascadingDropDown

DropDownList コントロールに、別の DropDownList での選択内容に応じて動的にデータを入力します。このエクステンダ コントロールは、DropDownList コントロールにアタッチされます。

ある DropDownList コントロールの選択が変更されると、CascadingDropDown エクステンダ コントロールが指定の Web サービスを呼び出して、セット内の次の DropDownList にデータを入力するために使用される一連の値を取得します。

CollapsiblePanelExtender

Web ページに折りたたみ可能なセクションを追加できるようにします。

このエクステンダ コントロールは、UpdatePanel コントロールにアタッチされます。

UpdatePanel コントロールを展開または折りたたむことのできる Web サーバー コントロールを指定できます。または、UpdatePanel を、ユーザーがマウス ポインタを置いたときに自動的に展開または折りたたみが行われるように設定できます。

ConfirmButtonExtender

Button コントロールがクリックされてから、ページまたは UpdatePanel がサーバーに送信されるまでの間に、確認メッセージ ボックスを表示します。ユーザーが操作を取り消すと、ページは送信されません。

このエクステンダ コントロールは、Button コントロールにアタッチされます。

FilteredTextBoxExtender

TextBox コントロールに、ユーザーが特定の文字を入力できないようにします。

このエクステンダ コントロールは、TextBox コントロールにアタッチされます。

ModalPopupExtender

コンテンツを表示できるようにすると同時に、ユーザーがページの残りの部分を操作できなくなるようにします。

このエクステンダ コントロールは、モーダル ウィンドウを開くために使用できる任意の Web サーバー コントロールにアタッチされます。

PasswordStrength

パスワードの強度を表示します。

このエクステンダ コントロールは、TextBox コントロールにアタッチされます。

RoundedCornersExtender

既存の要素に丸い角を適用します。

このエクステンダ コントロールは、一般に Panel コントロールにアタッチされます。

TextBoxWatermarkExtender

テキスト ボックスにテキスト値が含まれていない場合に、TextBox コントロール内にメッセージを表示します。

このエクステンダ コントロールは、TextBox コントロールにアタッチされます。

エクステンダ コントロールのプロパティの設定

エクステンダ コントロールのプロパティは、[プロパティ] ウィンドウで設定できます。一部のエクステンダ コントロールは、Web サーバー コントロールのスマート タグ メニューからアクセスできる追加の UI 要素を備えています。

Web サーバー コントロールが拡張されると、[プロパティ] ウィンドウに [エクステンダ] という新しいカテゴリが表示されます。このセクションには、Web サーバー コントロールに追加されたエクステンダ コントロールごとに、新しい複数レベルのプロパティが表示されます。各エクステンダ コントロールは、そのコントロール固有のプロパティを備えています。

Web サーバー コントロールのプロパティを設定する方法の詳細については、「方法 : Visual Web Developer の [プロパティ] ウィンドウを有効にする」を参照してください。

エクステンダ コントロールの管理

エクステンダ コントロールは、その UI がデザイン ビューに直接表示されないため、その追加先となったコントロールの一部として管理する必要があります。Web サーバー コントロールが別の場所に移動したり、別のコントロールの内部に配置されたりすると、アタッチされているエクステンダ コントロールも移動します。

エクステンダ コントロールのマークアップは、Web サーバー コントロールのマークアップの直後に配置されます。Web サーバー コントロールに複数のエクステンダ コントロールがアタッチされている場合、エクステンダ コントロールの順序は移動しても維持されます。これにより、実行時に競合が発生する可能性が低くなります。

エクステンダ コントロールがアタッチされた Web サーバー コントロールがデザイン サーフェイスから削除されると、関連するエクステンダも削除されます。エクステンダ コントロールがアタッチされた Web サーバー コントロールの ID プロパティを [プロパティ] ウィンドウで変更すると、それに合わせてエクステンダ コントロールの TargetControlID プロパティと ID プロパティが更新されます。

Bb470384.alert_note(ja-jp,VS.90).gifメモ :

エクステンダにカスタム ID (ユーザーが指定した ID など) がある場合、その ID プロパティは、関連する Web サーバー コントロールの ID プロパティが変更されても変更されません。

エクステンダ コントロールがアタッチされた Web サーバー コントロールが切り取りまたはコピーによってクリップボードにコピーされた場合、クリップボード上のコピーには、関連するエクステンダ コントロールも含まれています。これらはマークアップとしてコピーされ、コントロールの直後に配置されます。これは、ソース内でエクステンダ マークアップがコントロールに隣接していない場合でも同様です。Web サーバー コントロールが貼り付けられると、エクステンダ コントロールも貼り付けられます。

エクステンダ コントロールのマークアップでエラーが発生した場合は、そのエラーが "コントロールの描画エラー" というメッセージと共に [デザイン] ビューに表示されます。このエラーを解消するには、[ソース] ビューでマークアップを修正します。

ページのトップへ

クラス リファレンス

エクステンダ コントロールの主要なサーバー クラスを、次の表に示します。

クラス

説明

ExtenderControl

エクステンダ コントロールの抽象基本クラスを提供します。

IExtenderControl

エクステンダ コントロールの動作を定義します。

ページのトップへ

参照

処理手順

チュートリアル : ASP.NET AJAX エクステンダ コントロール