チュートリアル : ASP.NET AJAX エクステンダ コントロール
更新 : 2007 年 11 月
ASP.NET AJAX エクステンダ コントロールは、TextBox、Button、および Panel の各コントロールなど、ASP.NET Web サーバー コントロールのクライアント機能を拡張します。エクステンダを使用することにより、ユーザーに Web ベースの豊富な操作性を提供できます。このチュートリアルでは、エクステンダ コントロールを使用して、ASP.NET Button Web サーバー コントロールの機能を拡張します。
ASP.NET AJAX エクステンダ コントロールは、Visual Studio に追加して、他のコントロールと同じように使用できます。エクステンダ コントロールは、独自に作成することも、他のソースから取得することもできます。
エクステンダ コントロールのソースの 1 つが、ASP.NET AJAX Control Toolkit です。この Control Toolkit には、カスタム コントロールおよびエクステンダを簡単に作成して再利用できるようにするサンプルと SDK が用意されています。ASP.NET AJAX Control Toolkit は、ASP.NET AJAX Control Toolkit の Web サイトからダウンロードできます。
.gif "重要 :") 重要 : |
|---|
この Control Toolkit は、コミュニティでサポートされているライブラリであり、Microsoft はサポートしていません。このトピックでは、Control Toolkit に含まれているエクステンダ コントロールを例として、エクステンダ コントロールの操作方法を説明します。ただし、ここで説明するエクステンダ コントロールは ASP.NET の正式な部品ではなく、サポートされているコントロールでもないので注意してください。 |
Visual Studio 2008 のエクステンダ コントロールの詳細については、「ASP.NET AJAX エクステンダ コントロールの概要」を参照してください。ASP.NET AJAX Toolkit の詳細については、ASP.NET AJAX Control Toolkit の Web サイトを参照してください。
前提条件
このチュートリアルの手順を実行するための要件は次のとおりです。
Visual Studio 2008 または Microsoft Visual Web Developer Express Edition。
ASP.NET AJAX Control Toolkit。この Control Toolkit は、ASP.NET AJAX Control Toolkit の Web サイトからダウンロードできます。
Web サイトの作成
最初に、AJAX 機能に対応した ASP.NET Web サイトを作成します。
ファイル システム Web サイトを作成するには
Visual Studio 2008 または Microsoft Visual Web Developer Express Edition を開きます。
[ファイル] メニューの [新しい Web サイト] をクリックします
[新しい Web サイト] ダイアログ ボックスで、[Visual Studio にインストールされたテンプレート] の下の [ASP.NET Web サイト] をクリックします。
[場所] ボックスで、[ファイル システム] チェック ボックスをオンにし、Web サイトのページを格納するフォルダの名前を入力します。
たとえば、フォルダ名として「C:\WebSite1」と入力します。
[言語] ボックスの一覧で、[Visual Basic] または [Visual C#] をクリックし、[OK] をクリックします。
Visual Studio によりフォルダが作成され、Default.aspx という名前の新しい Web ページがソース ビューに表示されます。
AJAX エクステンダ コントロールの追加
ASP.NET AJAX Control Toolkit には、Web サーバー コントロールのクライアント機能を拡張できるエクステンダ コントロールがいくつか用意されています。
.gif "メモ") メモ : |
|---|
次の手順でサーバー コントロールにエクステンダ コントロールを追加する前に、ASP.NET AJAX Toolkit をインストールする必要があります。この Control Toolkit は、ASP.NET AJAX Control Toolkit の Web サイトからダウンロードできます。 |
AJAX エクステンダ コントロールを追加するには
デザイン ビューに切り替えます。
ページに ScriptManager コントロールが含まれていない場合は、[ツールボックス] の [AJAX Extensions] タブを使用して、このコントロールをドラッグします。
メモ :ScriptManager コントロールは、AJAX 機能をサポートするために必要です。
ツールボックスの [標準] タブから、Button コントロールをページにドラッグします。
[Button タスク] ショートカット メニューが表示されない場合は、Button コントロールを右クリックし、[スマート タグの表示] をクリックします。
[Button タスク] メニューの [エクステンダの追加] をクリックします。
エクステンダ ウィザードで、[Button1 に追加する機能を選択します] ボックスの一覧の [ConfirmButtonExtender] をクリックし、[OK] をクリックします。
メモ :ツールボックスから Button コントロールに直接エクステンダ コントロールをドラッグして、エクステンダ コントロールを追加することもできます。
[プロパティ] ウィンドウで、[エクステンダ] タブを展開し、[Button1_ConfirmButtonExtender] を展開します。
ConfirmText プロパティを「Continue?」に設定します。
エクステンダ コントロールのテスト
ここでページを実行して、エクステンダ コントロールをテストできます。
エクステンダ コントロールをテストするには
Ctrl キーを押しながら F5 キーを押して、ブラウザでページを実行します。
ページに追加したボタンをクリックします。
確認のメッセージ ボックスが表示されます。これが、エクステンダ コントロールによって追加された動作です。
ブラウザを閉じます。
AJAX エクステンダ コントロールの削除
エクステンダ コントロールの機能が不要になった場合は、エクステンダ コントロールを削除できます。
AJAX エクステンダ コントロールを削除するには
デザイン ビューに切り替えます。
Button コントロールを選択し、[Button タスク] メニューの [エクステンダの削除] をクリックします。
[Button1 にアタッチされたエクステンダ] ボックスの一覧の [ConfirmButtonExtender] をクリックします。
[削除] をクリックし、[OK] をクリックします。