【環境】
ASP.NET AJAX 1.0
ASP.NET AJAX January CTP

こんにちは。

連載掲載した 「ASP.NET AJAX の世界」 で、「第5回 Web サービス連携とクライアントセントリックな実装」に記載した AutoCompleteExtender が、残念ながら CTP から Control Toolkit に降格になってしまい、ここに記載しているコードが同様の方法で動かなくなってしまいました。そこで、今回は、January CTP として未だ残ってくれている DargOverlayExtender を使って、同様に、クライアントセントリックな処理を記述する例を記載してみましょう。

【DragOverlayExtender をクライアントセントリックに利用したサンプル】

1. 例により、CTP (JanCTP) のコントロールを何か貼り付けたページを準備しておいてください。（サンプルとはいえ、このようなインチキが嫌な方は、JanCTPのフォルダから所定の js ファイルを取り出して、aspxページ上にこのスクリプトファイルを取り込んで（参照して）おいてください。）
2. このページ (Default.aspx) に、HTMLコントロールの Div を貼り付けます。
   さらに、ソースを編集し、この Div に、id=”div1” と属性を追加しておいてください。（このdivは、ソースを編集して背景色を変えたり、中に文字を記載するなどして、区別がつくようにしておいてください。）
3. ページをソース編集モードにし、Bodyタグに、onload=”doLoad();” と属性を追加記入します。
4. ページ内に、以下のクライアントコードを追加してください。
    
   <script language="javascript" type="text/javascript">
   function doLoad() {
      var auto1 = new Sys.Preview.UI.FloatingBehavior(document.getElementById('div1'));
      auto1.set_handle(document.getElementById('div1'));
      auto1.initialize();
   }
   </script>

これで、ドラッグ & ドロップのできる Div が利用できるようになります。

尚、この記事（第５回）の中で、Web サービスを参照する際に、コードをそのままページに記述しなければならないような書き方をしていましたが、サーバサイドが ASP.NET の Web サービスの場合を仮定すると、無論、以下のような記述で参照できます。

<script src="SimpleService.asmx/js" type="text/javascript"></script>.

まだリリース版のすべてを再検証したわけではないためタイトルに「(1)」と付記しましたが、今後時間がとれたら、リリース版における 「ASP.NET AJAX の世界」 の検証と変更箇所があればさらに記載していきたいと思いこのようなタイトルにしています。

※ 尚、ブログは、出張（移動）のため、２日ほど（２日以上）お休みします、、、