Share via

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

  • Article

（１） 、 （２） では、Sample Applications の Contact を見てみました。今回は、SimpleList を見てみたいと思います。

Visual Studio 2005 での開き方は、 （１） をご覧ください。開いたら、まずは、Default.aspx を右クリックして、[ブラウザで表示(B)] にて表示してしまいましょう。ブラウザに下記の３つのハイパーリンクが表示されます。とりあえず３つともクリックして違いをみてみましょう。

  • Standard Server Page
    AJAXテクノロジーを使っていないページです（0_SimpleList.aspx）。
    EDITやAdd、Update を行うとページ全体が更新します。
  • Partial Rendering
    AJAXテクノジーのUpdatePanelのみを使っています（1_SimpleList_UpdatePanel.aspx）。
    EDITやAdd、Update を行ってもページ全体を更新しないため画面がちらついたりしません。
  • Enhanced Interface
    上記のほかにいくつか技を使っています（2_SimpleList_AutoComplete_DragandDrop.aspx）。
    ずいぶんと見栄えがよくなっていますよね？

Enhanced Interface で何をやっているのかを見ていきましょう。まず右上に表示されている「SERVER TIME:」が上記２つのページでは[Update]ボタンを押すことで時間が更新されてましたが、勝手に更新されています（＾＾

 

これは Timer コントロールによるものです。Visual Studio に戻って2_SimpleList_AutoComplete_DragandDrop.aspxをデザイン表示で開いてみましょう。Timer コントロールの Interval プロパティが 1000 と設定されています。これは1000ミリ秒＝1秒ごとに Timer コントロールが貼り付けられている UpdatePanel （panel1）を部分更新しているわけです。「n/a」と表示されている Label （TimerMessage）は、PageLoad 時にDateTime() によって現在の時間が設定されています。したがって毎秒更新されて表示される時計が表現されているわけです。

昔から JavaScript でクライアントの時間をブラウザに表示するというのはよくありました（ 「ただいま○○時○○分です。おはようございます」と表示するとか）が、ここに表示されているのは文字通りサーバー側の時間なのです。これは、1秒単位でサーバーと非同期通信をしていることになります。サーバーとネットワーク帯域負荷を考えるとこのサンプルは現実的ではないのではないかと思いますが、Timer コントロールを体験するにはよいサンプルではないでしょうか（＾＾ 現実的な使い方としては、チャットや株価表示などを1分ごとに自動更新するとかになると思います。

dragOverlayExtender、AutoCompleteExtender については、 （２） でもでてきましたのでここでは割愛しましょう。

ながさわ