CodeZine(コードジン)

特集ページ一覧

触ってみようASP.NET 2.0 AJAX Extensions

Microsoft ASP.NET AJAXの利用方法を学習する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2006/12/25 00:00
目次

UpdateProgressコントロールを使ったUpdatePanelコントロール活用方法

 Webページで何らかのイベントが発生してポストバックが起こった際、通常、ブラウザの下部にはプログレスバーと呼ばれるゲージが現れ、画面がリフレッシュするまでの待ち時間の目安を表示します。AJAX Extensionsで提供されているUpdateProgressコントロールもほぼ同様の機能で、UpdatePanelコントロールがサーバと通信している間だけ表示されます。UpdateProgressコントロールの表示させることによって、待ち時間が何も表示されない時よりもユーザーエクスペリエンスを向上させることができます。

 なお、UpdateProgressコントロールは、UpdatePanelコントロールがWebページ上にある時に使用可能となります。

UpdateProgressコントロールの基本的な使い方(サンプル3)

 サンプル1の最後に同一のWebページ内でUpdatePanelコントロールを2つ配置しました。それぞれのUpdatePanelコントロール内にあるButtonをクリックしてからLabelに「Hello,Ajax」と「Hello,World」と表示されるまでの間、UpdateProgressコントロールを表示させる加工をしていきます。

1.UpdateProgressコントロールを配置する

 ツールボックスからUpdateProgressコントロールをWebページ上に貼り付けてください。デザイン画面から開始します。UpdateProgressコントロールの中にフォーカスを当てた後、直接[Now Loading…]という文字を入力します(図21)。今回はUpdateProgressコントロールに直接文字を入力していますが、他にもイメージファイルまたはImgやLabelなどのコントロールを表示させることも可能です。これだけでUpdateProgressコントロールの基本的な使い方は完了です。HTMLソース画面上では次のように表示されています。

図21 UpdateProgressコントロールに文字を直接入力
図21 UpdateProgressコントロールに文字を直接入力
default.aspx(一部)
<asp:UpdateProgress ID="UpdateProgress1" 
   runat="server">
    <ProgressTemplate>
        Now Loading...
    </ProgressTemplate>
</asp:UpdateProgress>

2.UpdateProgressコントロールの動作確認と改良

 それでは実行してみましょう。Button1とButton2のそれぞれを押した際に[Now Loading…]の文字が瞬間的に表示されるのが確認できます。瞬間的に表示されているのは、サーバーサイドの処理がほぼ即座に終了してしまっているからです。そこで、Button1とButton2のそれぞれをクリックした際の処理部分に以下の1行を追加してください。

default.aspx.vb(一部)
System.Threading.Thread.Sleep(3000)

 この1行を追加することで3秒間の遅延を起こすことができます。この状態で実行してみると、3秒間+処理の時間の間[Now Loading…]の文字が表示されます。

 今回は意図的に処理を遅延させることでUpdateProgressコントロールの表示時間を延ばしましたが、実際のアプリケーションを利用する中で、瞬間的にUpdateProgressコントロールが表示されるのはユーザーエクスペリエンスが高いと言えるでしょうか? わずか一瞬見えることで気になってしまったり、コントロールの配置によっては、せっかくUpdatePanelコントロールを使っているにも関わらず、一瞬表示されるUpdateProgressコントロールによって、画面がちらついて見えたりしてしまうかもしれません。

 UpdateProgressコントロールにはちらつき防止のためにUpdatePanelコントロールの通信が始まってから数秒後に表示をさせる機能があります。その実装方法をデザイン画面から紹介していきます。

3.UpdatePanelコントロール内のボタンをクリックした2秒後にUpdateProgressコントロールが表示されるように設定をする

 UpdateProgressコントロールのプロパティを設定します。プロパティウィンドウ内に表示されているDisplayAfterプロパティは1000で1秒となりますので、2000と入力してください(図22)。これだけで完了です。

図22 UpdateProgressコントロールのDisplayAfterプロパティ
図22 UpdateProgressコントロールのDisplayAfterプロパティ

 HTMLソース画面上では次のように記述されています。

default.aspx(一部)
<asp:UpdateProgress ID="UpdateProgress1" 
    runat="server" DisplayAfter="2000">

 実行すると先程とは違い、2秒経ってから[Now Loading…]が表示されるようになります。つまり、2秒以内に処理が終了してしまうと[Now Loading…]は表示されません。

 この状態でも十分に使いやすいコントロールですが、UpdateProgressコントロールにはもう1つ使いやすさを向上させるプロパティがあります。それは、UpdatePanelコントロールごとに表示させるUpdateProgressコントロールを指定する機能です。今の状態ではどちらのボタンが押されても同じUpdateProgressコントロールが表示されますが、プロパティの設定を行うことでUpdatePanel1の時はUpdateProgress1を表示させ、UpdatePanel2の時はUpdateProgress2を表示させることが可能になります。その機能の実装方法をデザイン画面から紹介します。

4.それぞれのUpdatePanelコントロールに対応したUpdateProgressコントロールを表示する

 UpdateProgressコントロールを1つ追加してください。それぞれのUpdateProgressコントロールのプロパティを設定します。プロパティウィンドウ内に表示されているAssociatedUpdatePanelIDプロパティにUpdatePanel1と入力してください(図23)。今回は、違いを分かりやすくするためにAJAXのページでよく利用される画像を挿入します。画像は、ajaxload.infoからダウンロードできます。追加したUpdateProgress2はUpdateProgressコントロール1と同じくDisplayAfterプロパティを2000に、AssociatedUpdatePanelIDプロパティはUpdatePanel2と入力してください。これで完了です。

図23 UpdateProgressコントロールのAssociatedUpdatePanelIDプロパティ
図23 UpdateProgressコントロールのAssociatedUpdatePanelIDプロパティ

 HTMLソース画面上では次のように記述されています。

default.aspx(一部)
<asp:UpdateProgress ID="UpdateProgress1" runat="server" 
    DisplayAfter="2000" AssociatedUpdatePanelID="UpdatePanel1">
    <中略>
</asp:UpdateProgress>
<asp:UpdateProgress ID="UpdateProgress2" runat="server" 
    DisplayAfter="2000" AssociatedUpdatePanelID="UpdatePanel2">
    <中略>
</asp:UpdateProgress>

 実行すると、Button1を押した場合とButton2を押した場合で表示されるUpdateProgressコントロールが違うことが確認できます。なお、AssociatedUpdatePanelIDプロパティを指定する際には、そのTriggerとなるコントロールはUpdatePanelコントロールの中に格納されていないとUpdateProgressコントロール自体が表示されない、という仕様になっているのでご注意ください。

 以上の機能を活用することで、作成するWebサイトに簡単にAJAXを実装することができます。

UpdatePanelコントロールとUpdateProgressコントロールが生成されるソースは?
 AJAX Extensionsのコントロールの中で唯一、UpdatePanelコントロールだけHTML上で生成されるソースを選択することができます。UpdatePanelコントロールのRenderModeプロパティでデフォルトはBlockとなっていて生成されるHTMLソースは<div>ですが、Inlineに設定すると<span>が生成されます。UpdateProgressコントロールは生成されるHTMLソースは選択出来ず、<div>が生成されます。UpdatePanelコントロールを組み込む際に少しでもページにあった方を設定することができるので活用しましょう。
 

Timerコントロールによる定期的なページの部分更新

 これまでサーバーコントロールのイベント発生をトリガーにして部分更新を行うUpdatePanelコントロールの説明をしてきました。ほとんどのサーバーコントロールは何かきっかけとなるイベントが必要です。しかし、Webアプリケーションを構築していく中で、一定時間ごとに表示を切り替えたい時が出てくると思います。その時にはTimerコントロールを使うことで設定した時間ごとにUpdatePanelコントロールの部分更新を行うことができます。Timerコントロールの特徴は設定された時間ごとにイベントを発生させて、ポストバックを起こすことです。そのため、Timerコントロールを配置する場所はUpdatePanelコントロール内にする必要があります。UpdatePanelコントロール外に配置してしまうと、設定した時間ごとにポストバックが発生してページ全体の更新が行われてしまうからです。

Timerコントロールの基本的な使い方(サンプル4)

 サンプル3で作成したフォームにTimerコントロールを追加します。そして6秒ごとにイベントを発生させてLabel1に「Hello,Timer」と表示させます。

1.Timerコントロールを配置して、イベント発生時間を設定する

 UpdatePanelコントロール内にTimerコントロールを貼り付けます。続いてTimerコントロールのIntervalプロパティがデフォルトでは60000ms(60秒)に設定されているのですが、これを6000ms(6秒)に設定し直します(図24)。

図24 UpdatePanelコントロール内に配置されたTimerコントロールと6000に設定されたIntervalプロパティ
図24 UpdatePanelコントロール内に配置されたTimerコントロールと6000に設定されたIntervalプロパティ

2.Labelに「Hello,Timer」と表示させるコードを書く

 デザイン画面に戻った後、Timerコントロールをダブルクリックして次のコードを入力します。

default.aspx(一部)
Protected Sub Timer1_Tick(ByVal sender As Object, _
                      ByVal e As System.EventArgs) Handles Timer1.Tick
    Label1.Text = "Hello,Timer"
End Sub

3.定期的なページの部分更新を確認する

 2.までの手順でサンプルは完成です。実行すると、6秒ごとに「Hello,Timer」と表示されることが確認できます。Button1やButton2をクリックしてLabel1の表示を「Hello,Ajax」、「Hello,World」に切り替えても、その6秒後には再び「Hello,Timer」と表示されます。このTimerコントロールは設定した時間ごとの部分更新であるという点に注意して利用してください。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2006/12/26 13:58 誤字修正:Page3 ソース部分 UpdateProgressコントロール→UpdateProgress

著者プロフィール

  • WINGSプロジェクト ナオキ(ナオキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5