ScottGu's blog translated by Chica @ Wankuma

VS 2008のASP.NET AJAX コントロール エクステンダの使用

  

数週間に渡って、ベータ2の新しいVS 2008 JavaScript インテリセンスVS 2008 JavaScript デバッグ機能についてブログ投稿してきました。また、VS2008でどのようにASP.NET AJAX 1.0 およびASP.NET AJAX 3.5がサポートされるのか、そしてVS2008でどのようにSilverlight 1.0 JavaScript インテリセンスを取得することができるのかについても投稿してきました。

VS2008で今活用できる小さいんですが非常に有用なAJAX機能が、改善されたASP.NET AJAXコントロールエクステンダのデザイナサポートです。

ASP.NETコントロールエクステンダとは?

ASP.NET コントロールエクステンダとは、System.Web.UI.ExtenderControlベースクラスから派生したコントロールで、ページ上で既に宣言されている既存のコントロールに追加機能(通常AJAXかJavaScriptのサポート)を追加するために使用します。これらにより、開発者は上手くUIの動作をカプセル化し、リッチな機能をアプリケーションへ簡単に追加することができるようになります。

ASP.NET AJAX コントロールツールキットはこのコントロールエクステンダを活用したプロジェクトのいい例です。40以上の無料のコントロールエクステンダが含まれています。これは簡単にダウンロードできて、AJAX機能をアプリケーションに追加する時に使用することができます。

例えば、ユーザが日付を入力するテキストボックスをページ上に配置したいと仮定します。

ブラウザでJavaScriptが有効になっていた場合、ユーザが日付テキストボックスにフォーカスを置いた時に、できればクライアントサイドで日付選択用のカレンダが表示されて、日付が選択できるようにするようにしたいです。

これを有効にするには、ASP.NET AJAXコントロールエクステンダを使えばなんでもないことです。ページにそれと一緒に出荷されている"CalendarExtender"コントロールを追加して、<asp:textbox>の"TargetControlID"プロパティをポイントさせるだけです。

CalendarExtenderは現在自動的にASP.NET AJAX JavaScriptクライアントスクリプトを発行して、ランタイム時にテキストボックスにクライアントサイドカレンダの動作を追加します。追加のコードは必要ありません。

VS 2008でASP.NET AJAXコントロールエクステンダを使用

VS 2005だと、手動で(ソースビューまたはプロパティグリッドのいずれかから)コントロールエクステンダをつながなくてはなりませんでした。

VS 2008ではより簡単にコントロールへコントロールエクステンダを発見してアタッチすることができます。以下はこれを行うところを確認するためのステップです。

ステップ1:ASP.NET AJAXコントロールエクステンダをVS 2008ツールボックスに追加:

このページから.NET 3.5をターゲットとしたASP.NET AJAXコントロールツールキットをダウンロードすることができます。AJAXControlToolkit.dllアセンブリをVS2008のツールボックスにドラッグアンドドロップすると、コントロールエクステンダがコントロールとして表示されるのでASP.NET Webサイトまたはプロジェクトに追加することができます。

 

ステップ2: 既存のコントロールにコントロールエクステンダををアタッチ

VS2008ツールボックスにコントロールエクステンダを追加すると、VS2008デザイナでコントロールを選択した時に、新しい"エクステンダを追加..."スマートタスクオプションが表示されます。

"エクステンダを追加..."リンクをクリックすると、ダイアログがポップアップし、全てのコントロールエクステンダが表示されるので、いずれかを現在選択しているコントロールに使用することができます。

コントロールエクステンダを選択して、選択しているコントロールにつなぎ(オプションとしてデフォルトの"ID"値をエクステンダに対してオーバーライドし)、OKをクリックします。これにより適切なエクステンダコントロールがページに追加されて、その"TagetControlID"プロパティが選択した元のコントロールに接続されます。

ステップ3: マージされたプロパティグリッド

コントロールエクステンダをVS2008でアタッチした場合、元のコントロールのプロパティグリッドは元のプロパティとそれにアタッチされたコントロールエクステンダのプロパティの両方が表示されるように拡張されます。:

これにより全てのプロパティが統合されて見やすくなります。またUIは同じコントロールに複数のコントロールエクステンダを接続できるように調整されます。(例えば、同じテキストボックスに接続されたTextBoxWatermarkエクステンダとCalendarExtenderコントロールを両方とも持つことができ、テキストボックスのプロパティグリッドでリストアップされた両方のコントロールエクステンダのプロパティを確認することができます。)

ステップ4: コントロールエクステンダを削除

コントロールエクステンダををコントロールから削除する場合は、コントロールのスマートタスクにある"エクステンダの削除..."リンクを選択するだけです。

まとめ

ASP.NETにあるコントロールエクステンダのアーキテクチャだと、非常に簡単にUI機能と動作をカプセル化して再利用することができます。VS 2008 ではより簡単にこのサポートを活用することができ、ASP.NET AJAXコントロールツールキットと上手く動作することが分かると思います。

ASP.NET AJAXコントロールエクステンダとAJAXコントロールツールキットの詳細については、最近発行された新しいASP.NET AJAXの本で確認することができます。

最近投稿した、ASP.NET AJAX とAJAXコントロールツールキットリンクのリストがありますが、そこで素晴らしい記事をリンクしていますので、お読み頂ければと思います。

カスタムのAJAXコントロールエクステンダの構築方法については、以下の記事をお読み頂くことをお薦めします。

Hope this helps,

Scott

ScottGu's blog translated by Chica @ Wankuma 

※本翻訳に関しまして、Scottさんにはご了承頂いております。