Compartir a través de

サンプルから体験するASP.NET AJAX (2)

  • Artículo

こんにちは。 前回 に引き続き、サンプルを使ってASP.NET AJAXの魅力を見ていきましょう。

0_Default.aspx：
　このページは、ASP.NET AJAXのコントロールを一切使っていません。まずは、レコードの編集をしてみましょう。ContactID:40 のレコードを変更することにします。ちょっと画面の下のほうにあり操作しにくそうなのでスクロールして上の方に40番が行くようにします（わざとやってます（＾＾； ）。ここで「編集」ハイパーリンクをクリックするとレコードの変更作業ができるのですが･･･ページ全体がポストバックされるため、スクロールしていたのに、先頭行からの表示になってしまいました。これが通常のWebアプリケーションの動きですね。

 クリックで拡大できます。

　同様に、 「更新」をしたときもポストバックにより、ページ全体が更新されます。Webだから仕方がないとはいえ、できればWindowsアプリケーションのようにフォーカスはそのままにしていてくれると特に編集作業はスムーズで、極力ストレスを感じずに済みますね。

1_Default_UpdatePanels.aspx：
　このページは、ASP.NET AJAXのコントロールを１つだけ使っています。とりあえずは、そんなことは忘れて先ほどと同じ編集作業をやってみましょう。

 

　今度は、「編集」ハイパーリンクをクリックしてもページ全体が更新されませんでした。編集したい40番のレコードも位置も変わっていません。この動作であればWindowsアプリケーションに似た使用感を得られます。では、ここでソースに戻りましょう。0_Default.aspxと1_Default_UpdatePanels.aspxをデザインとして表示して比較すると、1_Default_UpdatePanels.aspxには、ScriptManagerと、UpdatePanelというコントロールがあります。違いはどうもこれだけのようです。

 

　ScriptManagerは、このページでAJAXを実現するためのお膳立てのようなものです（ここではその程度にとどめておきます）。UpdatePanelは、部分ページ更新を実現することができる肝ともいっていいコントロールです。UpdatePanel上にGridView配置しただけでページ全体ではなく、部分的な更新を実現してくれました。要するにこれだけを行うのであれば、大雑把にいうと、既存のASP.NETで作成したページ中のコントロールをUpdatePanelに配置してあげればサーバーサイドでしかもコーディングなしで部分更新を実現できるわけですね（※実際には、移行するためにはいくつかの移行作業もありますし、UpdatePanelの設定もあります。もちろんなんでもUpdatePanelに配置し、機能するわけでもありません。）。

2_Default_AutoCompleate.aspx:
　これは、1_Default_UpdatePanel.aspxに加えて、ASP.NET AJAX Control Toolkit 内のAutoCompleteExtenderコントロールを使用しています。ページ下部の「Add New Contact:」内の「Location:」でインテリセンスのように候補を表示してくれます。

　では、ソースを見てみましょう。2_Default_AutoCompleate.aspxのソース中に、

        <toolkit:AutoCompleteExtender ID="autoComplete1" runat="server"
TargetControlID="LocationTextBox2"
ServicePath="UIService.asmx"
ServiceMethod="GetCities" />

という記述があります。これがAutoCompleteExtenderです。簡単に説明すると、TargetControlIDで指定されたLocationTextBox2でAutoCompleteするように拡張してあり、候補は、UIService.asmxというWebサービスのGetCitiesメソッドから取得してきているということになります。

3_Default_DragAndDrop.aspx:
　これは、先ほどの「Add New Contact:」というパネルをドラッグ＆ドロップでページ上のどこへでも移動することができるというものになります。例えば、レコード追加したいけど、既存のレコードを参照しながら入力したいといったときに、ページ上をスクロールしながら行ったり来たりして入力するのは効率が悪いですよね。ということで、ドラッグ＆ドロップで下の絵のように位置をずらして入力ができます（＾＾

 

　これは、Furtures CTPのDragOverlayExtender コントロールによって実現しています。いろいろと設定していますが、TargetControlID="panel1"で、「Add New Contact:」パネルであるpanel1を指定しています。

　以上、提供されているSample ApplicationsのContactsというプロジェクトを見てきましたが、0_default.aspxにASP.NET AJAX関連コントロールを組み合わせるだけで、AJAXによるユーザビリティを得ることができることがわかりました。またこれらは、サーバーサイドのプログラミング（今回の例だとコーディングもしていませんが）で実現しています。JavaScriptも書いていませんね。また、上記Webブラウザのスクリーンショットは、FireFoxのものを使用しています。もちろんIEでも同じように表示し、動作します。

 ながさわ

Comments

  • Anonymous
    February 07, 2007
    （１） 、 （２） では、Sample Applications の Contact を見てみました。今回は、 SimpleList を見てみたいと思います。 Visual Studio 2005 での開き方は、