연습: 여러 UpdatePanel 컨트롤에서 ASP.NET Timer 컨트롤 사용

Visual Studio 2010

업데이트: 2007년 11월

이 연습에서는 Timer 컨트롤을 사용하여 두 UpdatePanel 컨트롤의 내용을 업데이트합니다. Timer 컨트롤은 두 UpdatePanel 컨트롤 외부에 위치하며 두 패널 모두에 대한 트리거로 구성됩니다.

이 연습의 절차를 구현하려면 다음이 필요합니다.

  • Microsoft Visual Studio 2005 또는 Microsoft Visual Web Developer Express Edition

  • AJAX 사용 ASP.NET 웹 사이트

일정 시간 간격으로 UpdatePanel 컨트롤을 새로 고치려면

  1. 새 페이지를 만들고 디자인 뷰로 전환합니다.

  2. 페이지에 ScriptManager 컨트롤이 아직 포함되어 있지 않은 경우 도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤을 두 번 클릭하여 페이지에 추가합니다.

    타이머 컨트롤 자습서 단계 1
  3. 도구 상자에서 Timer 컨트롤을 두 번 클릭하여 웹 페이지에 추가합니다.

    타이머 컨트롤 자습서 단계 2
    Bb386404.alert_note(ko-kr,VS.100).gif참고:

    Timer 컨트롤은 UpdatePanel 컨트롤 내부 또는 외부에서 트리거로 작동할 수 있습니다. 이 예제에서는 UpdatePanel 외부에서 Timer 컨트롤을 사용하는 방법을 보여 줍니다. UpdatePanel 컨트롤 내부에서 Timer 컨트롤을 사용하는 예제는 연습: Timer 컨트롤 소개를 참조하십시오.

  4. 도구 상자에서 UpdatePanel 컨트롤을 두 번 클릭하여 페이지에 한 패널을 추가한 다음 해당 UpdateMode 속성을 Conditional로 설정합니다.

    타이머 컨트롤 자습서 단계 3
  5. UpdatePanel 컨트롤을 다시 두 번 클릭하여 페이지에 두 번째 패널을 추가한 다음 해당 UpdateMode 속성을 Conditional로 설정합니다.

    타이머 컨트롤 자습서 단계 4
  6. UpdatePanel1이라는 UpdatePanel 컨트롤 내부를 클릭하고 도구 상자의 표준 탭에서 Label 컨트롤을 두 번 클릭하여 UpdatePanel1에 추가합니다.

  7. 레이블의 Text 속성을 UpdatePanel1 not refreshed yet으로 설정합니다.

    타이머 컨트롤 자습서 단계 5
  8. Label 컨트롤을 UpdatePanel2에 추가합니다.

  9. 두 번째 레이블의 Text 속성을 UpdatePanel2 not refreshed yet으로 설정합니다.

    타이머 컨트롤 자습서 단계 6
  10. TimerInterval 속성을 10000으로 설정합니다.

    Interval 속성은 밀리초로 정의되므로 Interval 속성을 10,000밀리초로 설정하면 10초마다 UpdatePanel 컨트롤이 새로 고쳐집니다.

    Bb386404.alert_note(ko-kr,VS.100).gif참고:

    이 예제에서 타이머 간격은 10초로 설정됩니다. 이렇게 할 경우 예제를 실행할 때 결과를 보기 위해 오랜 시간 동안 기다리지 않아도 됩니다. 그러나 각 타이머 간격에서 서버에 대한 포스트백이 발생하며 네트워크 트래픽이 발생합니다. 따라서 프로덕션 환경에서는 응용 프로그램에 여전히 효율적인 가장 긴 시간으로 간격을 설정해야 합니다.

  11. Timer 컨트롤을 두 번 클릭하여 Tick 이벤트에 대한 처리기를 만듭니다.

  12. Label1Label2 컨트롤의 Text 속성을 현재 시간으로 설정하는 코드를 처리기에 추가합니다.

    public partial class _Default : System.Web.UI.Page 
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
        protected void Timer1_Tick(object sender, EventArgs e)
        {
            Label1.Text = "UpdatePanel1 refreshed at: " +
              DateTime.Now.ToLongTimeString();
            Label2.Text = "UpdatePanel2 refreshed at: " +
              DateTime.Now.ToLongTimeString();
        }
    }
    
    
    
  13. AsyncPostBackTrigger 컨트롤을 두 UpdatePanel 컨트롤 모두에 추가함으로써 Timer1UpdatePanel1UpdatePanel2에 대한 트리거로 지정합니다. 이 작업은 다음 코드와 같이 선언적으로 수행할 수 있습니다.

    <Triggers>
      <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
    

    다음 예제에서는 전체 페이지의 태그를 보여 줍니다.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!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 runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div>
                <asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="10000">
                </asp:Timer>
            </div>
            <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="UpdatePanel1 not refreshed yet."></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
                <ContentTemplate>
                    <asp:Label ID="Label2" runat="server" Text="UpdatePanel2 not refreshed yet."></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
    
        </form>
    </body>
    </html>
    
    
    
  14. 변경 내용을 저장하고 Ctrl+F5를 눌러 브라우저에서 페이지를 봅니다.

  15. UpdatePanel 컨트롤이 새로 고쳐질 때까지 10초 이상 기다립니다.

    두 패널 모두에 업데이트된 시간이 표시됩니다.

이 연습에서는 여러 개의 UpdatePanel 컨트롤이 있는 Timer 컨트롤을 사용하여 부분 페이지 업데이트를 사용하는 방법에 대해 설명했습니다. ScriptManager 컨트롤을 추가한 다음 UpdatePanel 컨트롤을 추가해야 합니다. Timer 컨트롤은 패널에 대한 트리거로 구성될 때 패널의 내용을 업데이트합니다.

UpdatePanel 컨트롤 내부에서 Timer 컨트롤을 사용하는 방법에 대한 자세한 내용은 연습: Timer 컨트롤 소개를 참조하십시오.

표시: