チュートリアル : Timer コントロールの概要

更新 : 2007 年 11 月

このチュートリアルでは、3 つの ASP.NET AJAX サーバー コントロール、ScriptManager、UpdatePanel、および Timer の各コントロールを使用して、一定の間隔で Web ページの一部を更新します。これらのコントロールをページに追加すると、ポストバックのたびにページ全体を更新する必要がなくなります。UpdatePanel コントロールのコンテンツのみ更新されます。

部分ページ レンダリングの詳細については、「部分ページ レンダリングの概要」を参照してください。

前提条件

このチュートリアルの手順を実行するには、以下が必要です。

• Microsoft Visual Studio 2005 または Visual Web Developer Express Edition。

• AJAX 対応の ASP.NET Web サイト。

一定の間隔で UpdatePanel コントロールを更新するには

1. Microsoft Visual Studio 2005 または Visual Web Developer Express Edition で、新しい AJAX 対応の ASP.NET Web ページを作成し、デザイン ビューに切り替えます。

2. ページに ScriptManager コントロールが含まれていない場合は、ツールボックスの [AJAX Extensions] タブで、ScriptManager コントロールをダブルクリックしてページに追加します。

   

3. ツールボックスで、UpdatePanel コントロールをダブルクリックしてページに追加します。

   

4. UpdatePanel コントロールの内部をクリックし、Timer コントロールをダブルクリックして UpdatePanel コントロールに追加します。

   

   メモ :
   Timer コントロールは、UpdatePanel コントロールの中または外のどちらでもトリガとして機能します。この例では、UpdatePanel コントロールの内側で Timer コントロールを使用する方法を示します。UpdatePanel コントロールの外側で Timer コントロールをトリガとして使用する例については、「チュートリアル : 複数の UpdatePanel コントロールとの ASP.NET Timer コントロールの使用」を参照してください。

5. Timer コントロールの Interval プロパティを 10000 に設定します。

   Interval プロパティはミリ秒単位で定義されるため、Interval プロパティを 10,000 ミリ秒に設定すると、UpdatePanel コントロールが 10 秒ごとに更新されます。

   メモ :
   この例では、タイマ間隔は 10 秒に設定されます。これにより、例を実行するときに、結果を確認するために長い時間待機する必要がありません。ただし、各タイマ間隔により、サーバーへのポストバックとネットワーク トラフィックが発生します。したがって、実際のアプリケーションでは、そのアプリケーションにおいて実用的な最長時間を設定する必要があります。

6. UpdatePanel コントロールの内部をクリックし、ツールボックスの [標準] タブで、Label コントロールをダブルクリックして UpdatePanel コントロールに追加します。

   メモ :
   この Label コントロールは、UpdatePanel コントロールの内側に追加する必要があります。

   

7. ラベルの Text プロパティを Panel not refreshed yet に設定します。

8. UpdatePanel コントロールの外側をクリックし、Label コントロールをダブルクリックして 2 番目のラベルを UpdatePanel コントロールの外側に追加します。

   メモ :
   2 番目の Label コントロールは UpdatePanel コントロールの外側に追加する必要があります。

   

9. Timer コントロールをダブルクリックして、Tick イベントのハンドラを作成します。

10. Label1 コントロールの Text プロパティを現在の時刻に設定するコードを追加します。

11. Page_Load ハンドラを作成し、Label2 コントロールの Text プロパティをページが作成されたときの時刻に設定するコードを追加します。

12. ソース ビューに切り替えます。

    ページのマークアップが次のようになっているか確認してください。

    Partial Class _Default
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Label2.Text = "Page created at: " & _
              DateTime.Now.ToLongTimeString()
        End Sub
    
        Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs)
            Label1.Text = "Panel refreshed at: " & _
              DateTime.Now.ToLongTimeString()
    
        End Sub
    End Class
    

    public partial class _Default : System.Web.UI.Page 
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Label2.Text = "Page created at: " +
              DateTime.Now.ToLongTimeString();
        }
        protected void Timer1_Tick(object sender, EventArgs e)
        {
            Label1.Text = "Panel refreshed at: " +
              DateTime.Now.ToLongTimeString();
        }
    }
    

13. 変更内容を保存し、Ctrl キーを押しながら F5 キーを押して、ブラウザでページを表示します。

14. パネルが更新されるまで、10 秒以上待機します。

    パネルの内側のテキストが変更され、パネルのコンテンツが最後に更新されたときの時刻が表示されます。ただし、パネルの外側のテキストは更新されません。

レビュー

このチュートリアルでは、Timer コントロールと UpdatePanel コントロールを使用して部分ページ更新を有効にすることに関する基本概念を説明しました。ScriptManager コントロールは、UpdatePanel コントロールまたは Timer コントロールを含むページに追加する必要があります。既定では、パネルの内側の Timer コントロールは、そのパネルの更新のみを非同期ポストバック時に発生させます。パネルの外側の Timer コントロールは、パネルのトリガとして構成されている場合、UpdatePanel の更新を発生させることができます。

次の段階として学習する必要があるのは、UpdatePanel コントロールの外側で Timer コントロールを使用する方法と、タイマを使用して複数の UpdatePanel コントロールを更新する方法です。これらのタスクの詳細については、「チュートリアル : 複数の UpdatePanel コントロールとの ASP.NET Timer コントロールの使用」を参照してください。

参照

概念

Timer コントロールの概要

部分ページ レンダリングの概要

参照

Timer

UpdatePanel

ScriptManager