TOPシステム開発> DragOverlayExtenderコントロールを使ってみる
ASP.NET+Ajax
試せばわかる!Ajax開発環境ASP.NET AJAX

第5回:ASP.NET AJAXのExtenderコントロール

話者:日立ソフトウェアエンジニアリング  宮崎 昭世   2007/6/6
前のページ  1  2   3  次のページ
DragOverlayExtenderコントロールを使ってみる

   ツールボックスにコントロールを追加できましたので、実際に使ってみましょう。まずはASP.NET AJAX Futures January CTPからDragOverayExtenderコントロールを使ってみます。

   図10のようにDragOverayExtenderコントロールとASP.NET標準のコントロールであるPanelコントロールを貼り付けます。
DragOverayExtenderコントロールの貼り付け
図10:DragOverayExtenderコントロールの貼り付け
(画像をクリックすると別ウィンドウに拡大図を表示します)

   次に表2のように、各コントロールのプロパティを設定します。

コントロール プロパティ 設定値
DragOverayExtender TargetControlID Panel1
Enabled TRUE
Panel BackColor Aqua

表2:コントロールのプロパティ設定値

   これで完成です。ここまででコードは1行も書いていません。実行してみるとパネルをドラッグで移動できることが確認できます。

実行結果
図11:実行結果
(画像をクリックすると別ウィンドウに拡大図を表示します)


Extenderコントロールとは

   DragOverayExtenderコントロールやASP.NET AJAX Control Toolkitに含まれるコントロールの基本的な考え方は、既存のコントロールに機能を付加するというものです。

   図11のサンプルでは、ドラッグで動くのはPanelコントロールになります。Panelコントロール自体ではこのような機能は持っていないため、DragOverayExtenderコントロールを貼り付けることによって実現しています。

   これはDragOverayExtenderコントロールがPanelコントロールの機能を拡張する(extend)という考え方の元にコントロールが作られているためです。


Panelコントロールの状態の保持

   ここで、図11のサンプルでPanelコントロールを移動させた状態で、Webブラウザの更新ボタンをクリックしてみましょう。すると、動かしたはずのPanelコントロールが初期表示位置に戻ってしまいます。

   では、動かした位置を覚えさせるにはどうすればいいのでしょうか。

   実はASP.NET 2.0にはパーソナライズを実現するためのプロファイル機能が備わっています。これを容易に使えるようにするProfileServiceコントロールもASP.NET AJAX Futures January CTPに含まれています。次はプロファイル機能を使って、移動位置を覚えさせるサンプルに修正してみましょう。

   まずは、ASP.NET 2.0のプロファイル機能を利用可能とするためのWeb.Configファイルを設定しましょう。下記のコードをWeb.Configファイルの<system.web>セクションに追加してください。

<!--匿名ユーザの識別を行うように設定-->
<anonymousIdentification enabled="true"/>
<!--プロファイルに保存するプロパティの設定-->
<profile>
   <properties>
      <add name="PanelPos" allowAnonymous="true" type="String"/>
   </properties>
</profile>

   次にProfileServiceコントロールで、ここで作成したプロファイルプロパティにアクセスできるように設定を行います。下記のコードをWeb.Configファイルの<system.web.extensions> - <scripting> - <webServices>セクションに追加してください。

<profileService enabled="true" readAccessProperties="PanelPos" writeAccessProperties="PanelPos" />

   これでWeb.Configファイルの設定は完了です。次に、DragOverayExtenderコントロールを貼り付けたページにProfileServiceコントロールを図12のように貼り付けます。

ProfileServiceコントロールの貼り付け
図12:ProfileServiceコントロールの貼り付け
(画像をクリックすると別ウィンドウに拡大図を表示します)

   次に表3のように、各コントロールのプロパティを設定します。

コントロール プロパティ 設定値
ProfileService AutoSave TRUE
DragOverlayExtender ProfileServiceID ProfileService1
ProfileProperty PanelPos

表3:コントロールのプロパティ設定値

   これで完成です。先ほどと同じようにパネルをドラッグで移動できることが確認できると思います。さらに、今回はパネル移動後にWebブラウザの更新を行ってもパネル位置が初期状態に戻らないことも確認できると思います。

ProfileService利用時の実行結果
図13:ProfileService利用時の実行結果け
(画像をクリックすると別ウィンドウに拡大図を表示します)


WebPartZoneコントロールとWebPartManagerコントロール

   ASP.NET 2.0ではユーザごとにページの表示状態をカスタマイズすることが可能なWebParts機能が提供されています。この機能では、WebPartの移動や最小化などを行うたびにポストバックが発生するようになっており、使い勝手がいいとはいえません。

   この動作をAjax的に変更するために準備されたのがASP.NET AJAX Futures January CTPの「WebPartZoneコントロール」と「WebPartManagerコントロール」です。

   このコントロールはUpdatePanelコントロールと組み合わせて利用する点がポイントとなります。使い方についてはASP.NET 2.0のWebParts機能と変わらないため、今回は詳細な利用方法についての解説は割愛します。

前のページ  1  2   3  次のページ


日立ソフトウェアエンジニアリング株式会社 宮崎 昭世
著者プロフィール
日立ソフトウェアエンジニアリング株式会社  宮崎 昭世
仕事ではWindows環境におけるアプリケーション開発の標準化・技術教育などを担当する。Webアプリケーション開発では、個人で作成したC言語のCGIプログラムからはじまり、Perl、ASP、Javaなどを経て現在はASP.NETを主に利用している。

Microsoft MVP for Visual Developer - ASP/ASP.NET
https://mvp.support.microsoft.com/
profile=6C540032-3FD0-43B0-98EF-3690158D4EE6

kogumaブログ
http://koguma.cocolog-nifty.com/koguma/



INDEX
第5回:ASP.NET AJAXのExtenderコントロール
  ASP.NET AJAXの提供形態
DragOverlayExtenderコントロールを使ってみる
  AJAX Control Toolkitとは