Timer コントロールの概要

[アーティクル]
10/22/2014

更新 : 2007 年 11 月

ASP.NET AJAX Timer コントロールは、定義された間隔でポストバックを実行します。Timer コントロールと UpdatePanel コントロールを組み合わせて使用すると、定義された間隔で部分ページ更新を有効にできます。Timer コントロールを使用して、ページ全体をポストすることもできます。

このトピックは、次のセクションで構成されています。

シナリオ
背景
コード例
クラスリファレンス

Timer コントロールのシナリオ

Timer コントロールは、以下の操作を行う場合に使用します。

Web ページ全体を更新せずに、1 つ以上の UpdatePanel コントロールのコンテンツを定期的に更新する。
Timer コントロールでポストバックが発生するたびにサーバー上でコードを実行する。
定義された間隔で Web ページ全体を Web サーバーに同期的にポストする。

背景

Timer コントロールは、JavaScript コンポーネントを Web ページに埋め込むサーバーコントロールです。JavaScript コンポーネントは、Interval プロパティで定義された間隔が経過した時点で、ブラウザからのポストバックを開始します。サーバーで実行されるコードに Timer コントロールのプロパティを設定すると、それらのプロパティが JavaScript コンポーネントに渡されます。

Timer コントロールを使用するときは、ScriptManager クラスのインスタンスを Web ページに含める必要があります。

Timer コントロールによってポストバックが開始されると、Timer コントロールはサーバーで Tick イベントを発生させます。Tick イベントのイベントハンドラを作成して、ページがサーバーにポストされるときにアクションを実行できます。

ポストバックが発生する頻度を指定するには、Interval プロパティを設定します。Timer をオンまたはオフにするには、Enabled プロパティを設定します。Interval プロパティはミリ秒単位で定義され、既定値は 60,000 ミリ秒 (60 秒) です。

メモ :
Timer コントロールの Interval プロパティ値を小さく設定すると、Web サーバーに対するトラフィックが増大する可能性があります。Timer コントロールは、コンテンツを必要な頻度で更新するために使用します。

複数の UpdatePanel コントロールを異なる間隔で更新する必要がある場合は、Web ページに複数の Timer コントロールを含めることができます。または、Timer コントロールの 1 つのインスタンスを、Web ページ内の複数の UpdatePanel コントロールのトリガにすることもできます。

UpdatePanel コントロールの内部での Timer コントロールの使用

UpdatePanel コントロールの内部に Timer コントロールを含めた場合、Timer コントロールは UpdatePanel コントロールのトリガとして自動的に動作します。UpdatePanel コントロールの ChildrenAsTriggers プロパティを false に設定することで、この動作をオーバーライドできます。

UpdatePanel コントロールの内部にある Timer コントロールの場合は、ポストバックが完了するごとにのみ JavaScript タイミングコンポーネントが再作成されます。したがって、指定された間隔はページがポストバックから戻るまで開始されません。たとえば、Interval プロパティが 60,000 ミリ秒 (60 秒) に設定されていて、ポストバックの完了に 3 秒かかる場合、次のポストバックは前のポストバックの 63 秒後に発生します。

UpdatePanel コントロールの内部に Timer コントロールを含める方法のコード例を次に示します。

<asp:ScriptManager runat="server" id="ScriptManager1" />
<asp:UpdatePanel runat="server" id="UpdatePanel1" 
    UpdateMode="Conditional">
  <contenttemplate>
    <asp:Timer id="Timer1" runat="server"
      Interval="120000" 
      OnTick="Timer1_Tick">
    </asp:Timer>
  </contenttemplate>
</asp:UpdatePanel>

UpdatePanel コントロールの外部での Timer コントロールの使用

Timer コントロールが UpdatePanel コントロールの外部にある場合は、Timer コントロールを、更新する UpdatePanel コントロールのトリガとして明示的に定義する必要があります。

Timer コントロールが UpdatePanel コントロールの外部にある場合、JavaScript タイミングコンポーネントはポストバックの処理中も継続して実行されます。たとえば、Interval プロパティが 60,000 ミリ秒 (60 秒) に設定されていて、ポストバックの完了に 3 秒かかる場合、次のポストバックは前のポストバックの 60 秒後に発生します。ユーザーには、UpdatePanel の更新されたコンテンツが 57 秒間しか表示されません。

Interval プロパティ値は、次のポストバックの開始前に 1 つの非同期ポストバックを完了できるだけの間隔に設定する必要があります。ポストバックの処理中に新しいポストバックが開始された場合、最初のポストバックはキャンセルされます。

UpdatePanel コントロールの外部で Timer コントロールを使用する方法の例を次に示します。

<asp:ScriptManager runat="server" id="ScriptManager1" />
<asp:Timer ID="Timer1" runat="server" Interval="120000" 
  OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1" 
        EventName="Tick" />
    </Triggers>
    <ContentTemplate>
      <asp:Label ID="Label1" runat="server" ></asp:Label>
  </ContentTemplate>
</asp:UpdatePanel>

コード例

ランダムに生成された株価と、株価が生成された時間を表示する UpdatePanel コントロールの例を次に示します。既定では、Timer コントロールは UpdatePanel コントロールのコンテンツを 10 秒ごとに更新します。ユーザーは、株価の更新を 10 秒ごと、60 秒ごと、または更新なしに設定できます。ユーザーが株価を更新しないことを選択すると、Enabled プロパティは false に設定されます。

<%@ Page Language="VB" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Timer Example Page</title>
    <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            OriginalTime.Text = DateTime.Now.ToLongTimeString()
        End Sub

        Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs)
            StockPrice.Text = GetStockPrice()
            TimeOfPrice.Text = DateTime.Now.ToLongTimeString()
        End Sub

        Private Function GetStockPrice() As String
            Dim randomStockPrice As Double = 50 + New Random().NextDouble()
            Return randomStockPrice.ToString("C")
        End Function

        Protected Sub RadioButton1_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            Timer1.Interval = 10000
            Timer1.Enabled = True
        End Sub

        Protected Sub RadioButton2_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            Timer1.Interval = 60000
            Timer1.Enabled = True
        End Sub

        Protected Sub RadioButton3_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            Timer1.Enabled = False
        End Sub
</script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000" />

        <asp:UpdatePanel ID="StockPricePanel" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" />
        </Triggers>
        <ContentTemplate>
            Stock price is <asp:Label id="StockPrice" runat="server"></asp:Label><BR />
            as of <asp:Label id="TimeOfPrice" runat="server"></asp:Label>  
        </ContentTemplate>
        </asp:UpdatePanel>
        <div>
            <asp:RadioButton ID="RadioButton1" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="10 seconds" OnCheckedChanged="RadioButton1_CheckedChanged" /><br />
            <asp:RadioButton ID="RadioButton2" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="60 seconds" OnCheckedChanged="RadioButton2_CheckedChanged" /><br />
            <asp:RadioButton ID="RadioButton3" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="Never" OnCheckedChanged="RadioButton3_CheckedChanged" /><br />
            <br />
        Page originally created at <asp:Label ID="OriginalTime" runat="server"></asp:Label>
        </div>
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Timer Example Page</title>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            OriginalTime.Text = DateTime.Now.ToLongTimeString();
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            StockPrice.Text = GetStockPrice();
            TimeOfPrice.Text = DateTime.Now.ToLongTimeString();
        }

        private string GetStockPrice()
        {
            double randomStockPrice = 50 + new Random().NextDouble();
            return randomStockPrice.ToString("C");
        }

        protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
        {
            Timer1.Enabled = true;
            Timer1.Interval = 10000;
        }

        protected void RadioButton2_CheckedChanged(object sender, EventArgs e)
        {
            Timer1.Enabled = true;
            Timer1.Interval = 60000;
        }

        protected void RadioButton3_CheckedChanged(object sender, EventArgs e)
        {
            Timer1.Enabled = false;
        }

</script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000" />

        <asp:UpdatePanel ID="StockPricePanel" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" />
        </Triggers>
        <ContentTemplate>
            Stock price is <asp:Label id="StockPrice" runat="server"></asp:Label><BR />
            as of <asp:Label id="TimeOfPrice" runat="server"></asp:Label>  
            <br />

        </ContentTemplate>
        </asp:UpdatePanel>
        <div>
        <br />
        Update stock price every:<br />
        <asp:RadioButton ID="RadioButton1" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="10 seconds" OnCheckedChanged="RadioButton1_CheckedChanged" /><br />
        <asp:RadioButton ID="RadioButton2" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="60 seconds" OnCheckedChanged="RadioButton2_CheckedChanged" /><br />
        <asp:RadioButton ID="RadioButton3" AutoPostBack="true" GroupName="TimerFrequency" runat="server" Text="Never" OnCheckedChanged="RadioButton3_CheckedChanged" />
        <br />
        Page loaded at <asp:Label ID="OriginalTime" runat="server"></asp:Label>
        </div>
    </form>
</body>
</html>

チュートリアル

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

チュートリアル : 複数の UpdatePanel コントロールとの ASP.NET Timer コントロールの使用

クラスリファレンス

Timer コントロールの主要なサーバークラスを次の表に示します。

Timer
非同期または同期の Web ページのポストバックを定義された間隔で実行します。

参照

概念

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

UpdatePanel コントロールの概要

次の方法で共有

Timer コントロールの概要

Timer コントロールのシナリオ

背景

UpdatePanel コントロールの内部での Timer コントロールの使用

UpdatePanel コントロールの外部での Timer コントロールの使用

コード例

チュートリアル

クラスリファレンス

参照

概念

その他のリソース

次の方法で共有

Timer コントロールの概要

Timer コントロールのシナリオ

背景

UpdatePanel コントロールの内部での Timer コントロールの使用

UpdatePanel コントロールの外部での Timer コントロールの使用

コード例

チュートリアル

クラス リファレンス

参照

概念

その他のリソース

クラスリファレンス