choong's blog [ #02. Upgrade Skills ] :: #05. Timer Control Overview

#05. Timer Control Overview

programming/ajax.net 2007/02/22 09:40

시작하기전에..

이 포스트는 http://ajax.asp.net/docs/overview/UsingTimerControlTutorial.aspx 한글화 한것임을 알려드립니다.
(영어실력의 부재로 인해 매끄러운 해석이 나오지 않음을 이해해주시기 바랍니다. ^^;;)

Introduction

Timer 컨트롤은 정해진 기간마다 포스트백을 발생시킵니다. UpdatePanel 컨트롤과 함께 Timer 컨트롤을 사용한다면, 정해진 기간마다 부분 페이지 업데이트를 가능하게 할 것입니다. 또한 전체 페이지에서도 Timer 컨트롤을 사용할 수 있습니다.

이 글은 다음의 부분을 포함합니다.

Timer Control Scenarios

다음과 같은 것을 하길 원할때 Timer 컨트롤을 사용하십시요.

전체 웹 페이지의 새로고침 없이 한개 이상의 UpdatePanel 컨트롤의 내용을 주기적으로 업데이트 할 경우.
Timer 컨트롤이 포스트백을 발생하는 매 시각마다 서버측의 코드를 실행할 경우.
정해진 기간마다 웹 서버의 전체 웹페이지를 비동기적으로 보내는 경우.

Background

Timer 컨트롤은 웹페이지의 자바스크립트 콤포넌트를 끼워 넣은 서버 컨트롤입니다. 자바스크립트 콤포넌트는 Interval 프로퍼티의 값이 elapsed으로 정의된 기간마다 브라우저로부터 포스트백을 일으킵니다. 서버에서 실행되는 코드 내에 있는 Timer 컨트롤을 위한 프로퍼티를 설정하고 이 프로퍼티에 의해 자바스크립트 콤포넌트로 넘어갑니다.

ScriptManager 클래스의 인스턴스는 Timer 컨트롤이 사용되는 웹페이지내에 반드시 포함되어야 합니다.

Timer 컨트롤에 의해 포스트백이 초기화 되어질때, Timer 컨트롤은 서버상에서 Tick 이벤트를 증가시킵니다. 페이지가 서버로 보내어질때 액션을 실행하는 Tick 이벤트를 위한 이벤트 핸들러를 생성할 수 있습니다.

얼마나 자주 포스트백이 발생하는가를 지정하는 Interval 프로퍼티를 설정하고, Timer를 키고 끄는 Enabled 프로퍼티를 설정합니다. Interval 프로퍼티는 밀리세컨드에 정의되어지고 기본값으로 60000 밀리초(60초)의 값을 가집니다.

note

웹서버의 중요한 트래픽을 발생시킬수 있는 작은 값을 위해 Timer 컨트롤의 Interval 프로퍼티를 설정하십시요. 필요한 만큼 자주 콘텐츠를 새로고침 하기 위해서 Timer 컨트롤을 사용하십시요.

다른 기간마다 다른 UpdatePanel 컨트롤이 업데이트 되어야 한다면 웹페이지에 하나 이상의 Timer 컨트롤을 포함할 수 있습니다. 대신에, Timer 컨트롤의 하나의 인스턴스는 웹페이지내에서 한개이상의 UpdatePanel 컨트롤를 위해 일을 일으킬 수 있습니다.

Using a Timer Control Inside an UpdatePanel Control

Timer 컨트롤이 UpdatePanel 컨트롤 내부에 포함되어질때, Timer 컨트롤은 자동적으로 UpdatePanel 컨트롤을 위한 트리거와 같이 작동합니다. UpdatePanel 컨트롤의 ChildrenAsTriggers 프로퍼티를 false로 설정하면 이 비헤이비어를 오버라이드 할 수 있습니다.

UpdatePanel 컨트롤 내부의 Timer 컨트롤을 위해 자바스크립트 타이밍 컴포넌트는 각 포스트백이 끝날시에 재생성되어 집니다. 그러므로, 일정 시간 후 작동하도록 한 기간은 페이지가 포스트백으로 부터 돌려받을때까지 시작하지 않습니다. 예를 들자면, Interval 프로퍼티를 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>

Using a Timer Control Outside an UpdatePanel Control

UpdatePanel 컨트롤 외부에 Timer 컨트롤이 있다면, 업데이트 해야하는 UpdatePanel 컨트롤을 위한 트리거와 같이 Timer 컨트롤을 명백하게 정의하여야 합니다.

만약 UpdatePanel 컨트롤 외부에 Timer 컨트롤이 있다면, 자바스크립트 타이밍 콤포넌트는 동작중인 포스트백과 같이 계속 실행됩니다. 예를 들면, Interval 프로퍼티를 60초로 설정하고 포스트백이 3초가 걸린다면, 다음 포스트 백은 이전 포스트백이후 60초 후에 발생할 것입니다. 사용자는 대략 57 초마다 UpdatePanel 컨트롤의 새로 고쳐진 내용을 볼 수 있을 것입니다.

다음 포스트백이 일어나가 이전에 하나의 비동기적 포스트백을 마치는 것을 가능하게 하려면 Interval 프로퍼티를 설정하여야 합니다. 이전 포스트백이 동작중에 있을때 새로운 포스트 백이 시작되어 진다면, 첫번째 포스트 백은 취소되어 집니다.

다음의 예제는 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>

Code Examples

다음의 예제는 주식 가격이 생성되는 시간과 주식 가격이 랜덤으로 생성되는 것을 보여주는 UpdatePanel 컨트롤을 보여줍니다. 기본적으로, Timer 컨트롤은 UpdatePanel의 내용을 매 10초마다 업데이트 합니다. 사용자는 주식 가격의 업데이트를 매10초, 매 60초, 간격없음 으로 결정할 수 있습니다. 사용자가 주식 가격의 업데이트 되지 않음을 선택하였을때, Enabled 프로퍼티는 false로 설정되어 집니다.

cs

<%@ 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>

vb

<%@ 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 />
         Page originally created at <asp:Label ID="OriginalTime" runat="server"></asp:Label>
        </div>
    </form>
</body>
</html>

Tutorials

Introduction to the Timer Control

Using Timer Control with More Than One UpdatePanel Control

Class Reference

다음 테이블에서 Timer 컨트롤의 중요한 서버 클래스를 볼 수 있습니다.

Timer: 정의된 기간마다 비동기적으로 또는 동기적으로 웹페이지의 포스트백을 발생시킨다.

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

#05. Timer Control Overview

시작하기전에..

Introduction

Timer Control Scenarios

Background

Using a Timer Control Inside an UpdatePanel Control

Using a Timer Control Outside an UpdatePanel Control

Code Examples

cs

vb

Tutorials

Class Reference

See Also

tracback address :: http://choong.tistory.com/trackback/43

category

tags

recent posts

recent comments

recent trackbacks

archive

calendar

link