다음을 통해 공유

연습: Timer 컨트롤 소개

  • 아티클

업데이트: 2007년 11월

이 연습에서는 세 개의 ASP.NET AJAX 서버 컨트롤인 ScriptManager 컨트롤, UpdatePanel 컨트롤 및 Timer 컨트롤을 사용하여 일정 시간 간격으로 웹 페이지의 일부를 업데이트합니다. 페이지에 이 컨트롤을 추가하면 각 포스트백마다 전체 페이지를 새로 고쳐야 할 필요가 없습니다. UpdatePanel 컨트롤의 내용만 업데이트됩니다.

부분 페이지 렌더링에 대한 자세한 내용은 부분 페이지 렌더링 개요를 참조하십시오.

사전 요구 사항

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

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

  • AJAX 사용 ASP.NET 웹 사이트

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

  1. Microsoft Visual Studio 2005 또는 Visual Web Developer Express Edition에서 새 AJAX 사용 ASP.NET 웹 페이지를 만들고 디자인 뷰로 전환합니다.

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

  3. 도구 상자에서 UpdatePanel 컨트롤을 두 번 클릭하여 페이지에 추가합니다.

  4. UpdatePanel 컨트롤 내부를 클릭한 다음 Timer 컨트롤을 두 번 클릭하여 UpdatePanel 컨트롤에 추가합니다.

    참고:

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

  5. Timer 컨트롤의 Interval 속성을 10000으로 설정합니다.

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

    참고:

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

  6. UpdatePanel 컨트롤 내부를 클릭한 다음 도구 상자의 표준 탭에서 Label 컨트롤을 두 번 클릭하여 UpdatePanel 컨트롤에 추가합니다.

    참고:

    Label 컨트롤이 UpdatePanel 컨트롤 내부에 추가되었는지 확인하십시오.

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

  8. UpdatePanel 컨트롤 외부를 클릭하고 Label 컨트롤을 두 번 클릭하여 두 번째 레이블을 UpdatePanel 컨트롤 외부에 추가합니다.

    참고:

    두 번째 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 컨트롤을 사용하여 부분 페이지 업데이트를 설정하는 방법에 대한 기본 개념을 소개했습니다. UpdatePanel 컨트롤 또는 Timer 컨트롤이 포함된 페이지에 ScriptManager 컨트롤을 추가해야 합니다. 기본적으로 패널 내부의 Timer 컨트롤은 비동기 포스트백 동안 패널을 새로 고칩니다. 패널 외부의 Timer 컨트롤은 패널에 대한 트리거로 구성된 경우 UpdatePanel을 새로 고칠 수 있습니다.

다음 단계에서는 UpdatePanel 컨트롤 외부에서 Timer 컨트롤을 사용하는 방법과 타이머를 사용하여 두 개 이상의 UpdatePanel 컨트롤을 업데이트하는 방법을 배웁니다. 이러한 작업에 대한 자세한 내용은 연습: 여러 UpdatePanel 컨트롤에서 ASP.NET Timer 컨트롤 사용을 참조하십시오.

참고 항목

개념

Timer 컨트롤 개요

부분 페이지 렌더링 개요

참조

Timer

UpdatePanel

ScriptManager