사용자 삽입 이미지

출처 : http://mashupkorea.org



2007 대한민국 매쉬업 경진대회에 도전해야겟다고 생각한지 어느덧 2주가 흘렀습니다.

생각보다 처음 마음가짐처럼 되지 않네요. 2주동안 이상한 일들이 자꾸 벌어지는지라 도통 시간이 나질 않습니다. 처음에 하루동안 네이버와 다음의 API를 테스트하는 정도의 상황까지 온지라 조금은 걱정이 앞섭니다. 아이템만 확실하게 방향을 잡는다면 코드는 그다지 길것 같지 않습니다만.. 역시나 기획이 어렵습니다. -_-;;

오후 5시에 세미나를 시작한다고 해서 조금 여유롭게 출발하였는데 때아닌 교통대란으로 도착하니 정확히 5분전이었습니다. -_-;; 대략 난감하더군요. 1층에선 세미나 도우미 분이 기다리고 계셨습니다. 한동안 엘레베이터를 기다리고 행사장인 3층으로 올라가니 5시가 넘었습니다. 동영상을 시청하고 있던 것 같은데 자세히는 보지 않았습니다. (엘레베이터를 타는데 패스를 가지고 있어야만 층수를 누를 수 있었습니다. 무지하게 난감했다는... -_-)

다음 본사는 처음 들어가본지라 다른층은 가보지 못했지만 건물은 깔끔한 분위기에 포털업체의 느낌이 물씬 풍겨져 나오는 깔끔한 인테리어! 아주 맘에 들었습니다. ^^

저보다 늦게 오신 분들도 꽤 계시더군요. 나중에는 자리가 모자란 느낌이었습니다.

전반적인 세미나의 내용은 네이버와 다음의 openapi를 소개하는 정도(?)라는 느낌을 받았습니다. 대학생분들이 많은 관계로 타겟을 대학생분들에게 맞췃나 봅니다. -_-;;

제가 얻은 정보라고는 아직 오픈되지 않은 준비되고 있는 api들 정도라고 생각합니다. 다른 참석자분들은 많은 정보를 얻었을 수도 얻지 않았을 수도 있지만 그닥 새로운 정보나 산뜻한 아이디어가 떠오르는 시간은 아닌 것 같습니다.

세미나에서 제공하여 주는 OUTBACK 도시락 정말 잘 먹었습니다. 빵두요 ^^

플젝 진행하고 있는게 있어서 세미나가 끝난 후 도망쳐나오듯이 나와 하던일 마져하고 포스팅하려보니 이렇게 시간이 늦어버렸네요.. 벌써 날 다 샛습니다. -_-;; (대략난감)

참가선물로 mashup T-Shirt , DAUM 머그컵, NAVER 모자, DAUM UCC 핸드폰 고리, NAVER 핸드폰 고리 다섯개나 받아 왔네요. 그중엔 티셔츠가 가장 맘에 듭니다. 개인적으로 까만색을 좋아하는 지라.. ^^;;


마지막 세션에 신기배님 제출물 보시려면 여기서 확인하세요.
이전에 봣던 어플리케이션이라 그다지 신기하진 않았지만, 처음볼땐 아이디어 굿! 이라고 생각했던 작품입니다. Layer를 이용해 하단의 박스를 구현하셧고 layer의 위치는 겹치는데 이것은 마우스가 오버될때 해당 Layer가 위쪽으로 올라온답니다. 자세히 살펴보시길 ^^;;



솔직히 MASHUP이라 함은 개발자의 능력보다는 기획자의 기획이 더 큰 빛을 발한다고 생각하고 있습니다. 때문에 기획시간이 생각보다 오랜 기간이 들고 있네요 ^^

오늘 세미나 세션 발표자님들 그리고 도우미님들 감사했습니다. ^^


크리에이티브 커먼즈 라이선스
Creative Commons License

시작하기전에..

이 포스트는 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

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



크리에이티브 커먼즈 라이선스
Creative Commons License
사용자 삽입 이미지

출처 : http://mashupkorea.org



매쉬업 캠프 2007  현재 추가 신청이 가능합니다.

매일매일 확인한 보람이 생겼습니다.

25일 일요일에 하는 실습형으로 신청했다가, 그날 토익셤이 있는 관계로 화요일 실습없는 캠프로 변경하였습니다. -_-;;

대전까지는 도저히 갈 엄두가 안나기에 ㅡ.ㅜ

신청하실 분은 언능 신청하심이 좋을 듯 합니다. 실습없는 캠프는 8명 남았네요..

캠프 참가 신청 페이지 : http://mashupkorea.com/campapply.html


현재 상태 :
2월 25일(일) 서울 연세대학교 상남경영관 (31명 남았습니다.)
2월 27일(화) 서울 다음 커뮤니케이션 동관 3층 (실습 없음, 8명 남았습니다.)
3월 1일(목) 대전 KAIST 오상수 영상관 (48명 남았습니다.)

크리에이티브 커먼즈 라이선스
Creative Commons License

시작하기전에..

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

Introduction

Microsoft AJAX 라이브러리의 PageRequestManager 클래스는 브라우저내에서 부분 페이지 업데이트를 관리합니다. 페이지가 ScriptManager 컨트롤과 하나이상의 UpdatePanel 컨트롤을 포함하고 있을때 페이지는 부분 페이지 렌더링에 의해 자동적으로 가능하게 됩니다. PageRequestManager 클래스는 클라이언트 스크립트로 부분 페이지 업데이트를 커스터마이즈하는 것을 가능하게 하는 프로퍼티, 메소드, 이벤트 등을 제공합니다. PageRequestManager 클래스는 서버페이지 이벤트 모델을 사용하는 방법과 같은 클라이언트 페이지 이벤트를 제공합니다.

이 글이 다음을 포함하고 있습니다.

Scenarios

ScriptManager 와 UpdatePanel 웹 서버컨트롤을 사용함으로서 부분 페이지 업데이트를 가능하게 합니다. 부분 페이지 업데이트는 클라이언트 스크립팅을 필요로 하지 않습니다. 그러나 다음과 같은 것을 하길 원할때 PageRequestManager 클래스와 클라이언트 스크립트를 사용할 수 있습니다.

  • 어떻게 다수의 비동기적 포스트백을 동작시키는가를 컨트롤. 기본 비헤이비어는 우월한 마지막 포스트백입니다.  PageRequestManager 클래스는 특정한 포스트백에 우선권을 주고  진행중인 다른것들에 취소를 가능하게 합니다.
  • 마지막 비동기적 포스트백의 결과와 같은 수정또는 생성되는 페이지의 지역을 표시하는 눈에 보이는 신호나 다른 통지를 제공. 특히 어디서 다수의 UpdatePanel 컨트롤이 어디서 사용되었는지에 대한 사용자 경험을 개선시킬 수 있습니다.
  • 비동기적 포스트백 동안 상태 메세지를 보여줌. 포스트백이 긴 시간의 처리시간이 걸린다면, 움직이는 이미지와 같은 프로그래스바를 보기를 원할 것입니다. 또한 포스트백을 취소할 수 있는 옵션을 사용자에게 제공할 수 있습니다.
  • 부분 페이지 업데이트에서 커스텀 에러 메세지 핸들링을 제공. 비동기적 포스트백이 일어나는 동안 예기치 못한 에러가 발생하였다면, 클라이언트스크립트내에서 에러를 핸들할 수 있습니다.
  • 비동기적 포스트백을 사용하는 객체의 기본적인 응답이나 요청에 접근.

Features

Microsotf AJAX 라이브러리의 부분 페이지 업데이트의 특징을 다음을 포함합니다.

  • 부분 페이지 업데이트가 발생하는 동안 중요한 시간에 발생하는 클라이언트 페이지 라이프 싸이클 이벤트.
  • 비동기적 포스트백동안 삭제, 수정, 생성되는 UpdatePanel 컨트롤에 대한 정보.
  • 페이지가 비동기적 포스트백이 처리중인지 아닌지 클라이언트 스크립트에서 결정을 가능하게 하는 프로퍼티와 메소드.  또한 새로운 포스트백을 취소하거나  진행중인 비동기적 포스트백을 멈출수 있는 메소드를 사용할 수 있습니다.
  • 부분 페이지 업데이트에 관여하지 않는 컨트롤에게 보내지는 서버 데이터에 대한 정보

Background

비동기적 포스트백에 의해 시작하는 부분 페이지 업데이트 동안, PageRequestManager 클래스는 어떻게 브라우저내에서 페이지 내용이  증가하게 업데이트되는지를 조정합니다. UpdatePanel 서버 컨트롤과 PageRequestManager 클라이언트 클래스는 부분 페이지 업데이트의 많은 복잡성을 추출합니다. PageRequestManager 클래스의 멤버와 클라이언트 스크리립트를 사용할때, 브라우저내의 부분 페이지 업데이트 비헤이비어를 커스터마이즈 할 수 있습니다.

Partial-Page Update Event Handling

포스트백과 비동기적 포스트백 두개의 페이지 처리동안, 커스텀 스크립트의 실행으로 DOM 이벤트를 핸들할 수 있습니다. 예를 들면, 브라우저가 페이지를 로드 또는 언로드 할때 스크립트를 실행할 수 있습니다.

그러나, DOM 이벤트는 모든 관련된 정보에 접근을 불가능하게 하고 비동기적 포스트백과 부분 페이지 업데이트가 발생하는 동안에 비헤이비어를 컨트롤하는 것을 불가능하게 합니다. 그러므로 PageRequestMAnager 클래스는 부분 페이지 업데이트를 커스터마이즈 가능하게 하는 다음의 이벤트를 제공합니다.

이벤트에 대한 더 많은 정보를 원하시면 Customizing Partial-Page Rendering with Client Scripting 를 참조하십시요.

Code Examples

다음의 예제는 비동기적 포스트백 이후에 페이지가 업데이트되어 질때의 UpdatePanel 컨트롤에 움직임을 주는 어떻게 PageRequestManager 클래스의 pageLoaded 이벤트가 사용되는가를 보여줍니다. 이 예제는 사용자들이 티켓 요청을 만드는 폼안에 이메일 주소를 넣고 날짜를 선택하게 해 줍니다. 비동기적 포스트백이 발생할때(UpdatePanel 컨트롤 외부의 링크에 의해 유발되는), 패널은 간단히 사용자에게 텍스트박스 안에 날짜 값을 입력하라는 알려주는 움직임을 보여줍니다. 페이지는 Calendar 컨트롤을 보여주는 팝업 윈도우를 포함합니다. 달력은 컨트롤의 Visible 프로퍼티를 사용하여 보여지거나 숨겨지게 됩니다. Calendar컨트롤은 UpdatePanel 컨트롤 안에 있기 때문에 모든 페이지는 달력컨트롤이 보여지거나 숨겨질때나 날짜가 선택되었을때 새로고침 할 수 없습니다.

How-to and Walkthrough Topics

Class Reference

다음 테이블의 항목은 PageRequestManager 클래스와 관련된 클래스들의 목록입니다.

Class Description
Sys.WebForms.PageRequestManager Class 클라이언트 부분 페이지 업데이트를 관리하고 커스텀 클라이언트 스크릅트를 위한 멤버를 제공합니다.
Sys.WebForms.InitializeRequestEventArgs Class 비동기적 요청이 시작되기 이전에 발생하는 initializeRequest 이벤트를 위한 이벤트 데이터를 제공합니다.
Sys.WebForms.BeginRequestEventArgs Class 비동기적 포스트백이 시작된 후와 포스트백이 서버에 보내지기 전에 증가하는 beginRequest 이벤트를 위한 이벤트 데이터를 제공합니다.
Sys.WebForms.PageLoadingEventArgs Class 비동기적 포스트백을 받은 응답 이후에 발생하는 pageLoading 이벤트를 위한 이벤트 데이터를 제공합니다. 그러나 페이지의 어떠한 콘텐츠도 업데이트 되기 이전입니다. 이 이벤트는 포스트백이 멈춰져 있거나 핸들할 수 없는 예외가 서버에서 처리중일때 던져지면 발생할 수 없습니다
Sys.WebForms.PageLoadedEventArgs Class 동기적 포스트백이나 비동기적 포스트백의 결과던지 페이지의 모든 내용이 새로고침되고 난 이후에 발생하는 pageLoaded 이벤트를 위한 이벤트 데이터를 제공합니다. 이 이벤트는 포스트백이 멈춰 있거나 핸들할 수 없는 예외가 서버에서 처리중일때 던져지면 발생할 수 없습니다.
Sys.WebForms.EndRequestEventArgs Class 비동기적 포스트백이 끝난이후에 발생하는 endRequest 이벤트의 이벤트 데이터를 제공합니다.

See Also


크리에이티브 커먼즈 라이선스
Creative Commons License

시작하기전에..

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

Introduction

UpdateProgress 컨트롤은 UpdatePanel 컨트롤 안의 부분 페이지 업데이트에 대한 상태정보를 제공합니다. UpdateProgress 컨트롤의 레이아웃과 기본 콘텐츠를 커스터마이즈 할 수 있습니다. 부분 페이지 업데이트가 매우 빠를때 번쩍임을 예방하기 위해 UpdateProgress 컨트롤을 보여주기 전에 지연시간을 설정하여야 합니다.

이 글은 다음의 정보를 포함합니다.

Scenarios

UpdateProgress 컨트롤은 부분 페이지 렌더링을 위해 한개이상의 UpdatePanel 컨트롤을 웹페이지가 포함하고 있을때 보다 직관력 있는 UI를 디자인할 수 있도록 도와줍니다. 부분 페이지 업데이트가 느릴 경우에 UpdateProgress를 사용함으로서 업데이트의 상태에 대한 비쥬얼한 피드백을 제공합니다. 페이지에 다수의 UpdateProgress 컨트롤을 넣을 수 있고 , 각각을 다른 UpdatePanel 컨트롤과 함께 조합할 수 있습니다. 양자택일로, 한개의 UpdateProgress 컨트롤을 사용할 수 있고 페이지의 모든 UpdatePanel 컨트롤과 함께 조합할 수도 있습니다.

Background

UpdateProgress 컨트롤은 비동기적 포스트백을 야기하는 조합된 UpdatePanel 컨트롤인지 아닌지에 의존해서 보여지거나 숨겨지는 <div>요소를 렌더합니다. 최초로 페이지가 렌더링될때와 비동기적 포스트백이 발생할때 UpdateProgress 컨트롤은 보여지지 않습니다.

Associating an UpdateProgress Control with an UpdatePanel Control

UpdateProgress 컨트롤의 AssociatedUpdatePanelID 프로퍼티 설정에 의해 UpdatePanel 컨트롤과 함께 UpdateProgress 컨트롤을 결합합니다. UpdatePanel 컨트롤에서 포스트백 이벤트가 발생할때 어떠한 결합된 UpdateProgress 컨트롤도 보여지게 됩니다. UpdateProgress 컨트롤이 특정한 UpdatePanel 컨트롤과 결합되지 않는다면, UpdateProgress 컨트롤은 어떠한 비동기적 포스트백에서도 진행상황을 보여줍니다.

UpdatePanel 컨트롤의 ChildrenAsTriggers 프로퍼티가 false로 설정되고 비동기적 포스트백이 UpdatePanel 컨트롤 내부로 부터 발생되었다면, 어떠한 결합된 UpdateProgress 컨트롤도 보여질 것입니다.

Creating Content for the UpdateProgress Control

ProgressTemplate 프로퍼티를 사용하여 UpdateProgress 컨트롤에 의해 보여지는 메세지를 선언적으로 정의할 수 있습니다. <ProgressTemplate> 요소는 HTML과 마크업을 포함할 수 있습니다. 다음의 예제는 UpdateProgress 컨트롤의 메세지를 어떻게 정의하는가를 보여줍니다.

CS

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

VB

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
  An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>

다음의 예제는 두개의 UpdatePanel 컨트롤의 상태를 보여주는 한개의 UpdateProgress 컨트롤을 보여줍니다.

다음의 예제는 두개의 UpdateProgress 컨트롤을 보여줍니다. 각각은 결합된 UpdatePanel 컨트롤의 업데이트 상태를 보여줍니다.

다음의 예제는 사용자가 비동기적 포스트백을 멈추기 위해 클릭 할 수 있는 <ProgressTemplate> 요소의 버튼을 추가하는 방법을 보여줍니다. 다른 포스트백이 발생하는 동안 초기화되는 어떠한 포스트백도 실행을 취소할 수 있습니다.

앞의 예제에서 <ProgressTemplate> 요소 안에있는 HtmlButton 컨트롤의 onClick 속성이 자바스크립트의 AbortPostBack 함수를 호출합니다. 더많은 정보를 원하시면 PageRequestManager 클래스의 abortPostBack 메소드와 isInAsyncPostBack 프로퍼티를 참조하십시요.

Specifying Content Layout

DynamicLayout 프로퍼티가 true 값을 가질때, UpdateProgress 컨트롤은 페이지가 보여지는 어떠한 공간도 차지하지 않습니다. 대신에, 페이지는 필요할때 UpdateProgress 컨트롤 컨텐츠를 보여주는 것을 다이나믹하게 변경합니다. 다이나믹 디스플레이를 지원하는 것은 컨트롤이 초기에 스타일의 display 속성이 none을 가지는 <div> 요소와 같이 렌더되어 질때 입니다.

DynamicLayout 프로퍼티가 false 값을 가질때 컨트롤이 보여지지 않음에도 불구하고 UpdateProgress 컨트롤은 보여지는 페이지의 공간을 차지합니다. 이런 경우에는 컨트롤의 <div> 요소가 스타일의 display 속성이 block이고 visibility가 초기에 hidden으로 설정되어 있습니다.

Putting UpdateProgress Controls on the Page

UpdatePanel 컨트롤 내부나 외부에 UpdateProgress 컨트롤을 삽입할 수 있습니다. UpdateProgress 컨트롤은 비동기적 포스트백의 결과와 같은 업데이트와 함께 UpdatePanel 컨트롤이 결합되는 것과 상관없이 보여지게 됩니다. 이는 다른 UpdatePanel 컨트롤 안에 UpdateProgress 컨트롤이 있음에도 불구하고 보여지게 됩니다.

다른 업데이트 패널 안에 UpdatePanel 컨트롤이 있다면, 자식 패널 내부에서 발생하는 포스트백은 자식 패널과 결합되는 어떠한 업데이트프로그래스 컨트롤도 보여지게 합니다. 이것은 또한 부모패널과 결합되는 어떠한 UpdateProgress 컨트롤도 보여줍니다. 부모 패널의 자식 컨트롤에서 포스트백이 직접 발생하였다면, 부모패널과 결합되는 UpdateProgress 컨트롤 만이 보여질 수 있습니다. 이것은 어떻게 포스트백이 일어나는가에 대한 로직을 수행합니다.

Specifying When UpdateProgress Controls Are Displayed

PageRequestManager 클래스의 beginRequest 자바스크립트 이벤트와 endRequest 자바스크립트 이벤트를 사용함으로서 언제 UpdateProgress 컨트롤이 보여지는가를 프로그래밍적으로 다룰 수 있습니다. beginRequest  이벤트 핸들러에서 UpdateProgress 컨트롤을 나타내는 DOM 엘리먼트를 보여줍니다. endRequest 이벤트 핸들러에선 엘리먼트를 숨깁니다.

다음의 환경에서 UpdateProgress 컨트롤을 보여주고 숨기기 위해선 클라이언트 스크립트를 제공하여야만 합니다.

  • 컨트롤로부터 포스트백이 일어나는 동안 업데이트 패널의 비동기적 포스트백 트리거와 같이 등록되어 집니다. 하지만 UpdateProgress 컨트롤은 결합되지 못합니다.
  • 컨트롤로 부터 포스트백이 일어나는 동안 ScriptManager 컨트롤의 RegisterAsyncPostBackControl(Control) 메소드를 사용하여 비동기적 포스트백 컨트롤과 같이 프로그래밍적으로 등록되어집니다. 이런 경우, UpdateProgress 컨트롤은 자동적으로 비동기적 포스트백을 일으키는 것을 결정할 수 없습니다.

Code Examples

다음의 부분에서 UpdateProgress 컨트롤의 사용과 생성에 대한 코드 예제를 포함합니다.

How-to and Walkthrough Topics

Class Reference

다음 테이블의 목록은 UpdateProgress 클래스의 중요한 클래스 입니다.

Class< Description
UpdateProgress 브라우저내의 UpdatePanel 컨트롤의 콘텐츠가 업데이트 되어질때 비주얼한 반응을 제공합니다.
UpdatePanel 부분 페이지 업데이트에 참여할 수 있는 웹페이지의 부분을 정의합니다.
ScriptManager 부분 페이지 렌더링을 관리합니다. ScriptManager 컨트롤은 브라우저로 보내고 페이지의 특별한 부분을 뿌려주기 위하여 페이지 렌더링을 오버라이드하는 스크립트 컴포넌트를 등록합니다.
PageRequestManager 브라우저내에서 부분 페이지 렌더링이 조화하여 기능합니다. PageRequestManager 클래스는 서버와 커스텀 클라이언트 스크립팅에 드러난 이벤트와 메소드간의 정보를 비동기적으로 교환합니다.

Additional Topics

ASP.NET Page Life Cycle Overview

크리에이티브 커먼즈 라이선스
Creative Commons License
사용자 삽입 이미지

그림 출처 : http://mashupkorea.org/


올블로그를 뚫어지게 쳐다보지 않은 기간동안 공모전이 하나 떳습니다.

뚫어지게 보고있었으면 경진대회 나온것도 알 수 있었을텐데.. 너무 늦어 버렸습니다.

벌써 MASHUP CAMP 2007은 참가신청이 마감되어 버렸습니다. 선착순 100명만 지원해 주는가 봅니다. 다음과 네이버에서 API 사용 방법을 지원해 주는 거 같은데.. 아쉽습니다. 들어보면 대회 참가하는데 유리한 고지를 선점할 것만 같은데 -_-;;

솔직히 naver openapi나 다음의 DNA 둘다 openapi를 제공한지 얼마 되진 않았습니다. 하지만 국내의 대규모 포탈업체에서 이 경진대회를 여는 이유를 곰곰히 생각해 봅니다. 참여자야 상금받고 입사지원시 1차 서류전형을 면제해준다고는 하지만 회사의 입장에서 이 경진대회를 함으로서 얻는 이익이 무엇일까 곰곰히 생각해 보지만 머리가 나쁜것일까요. 그다지 떠오르진 않습니다.

이번에 이 매쉬업경진대회에 일반분야로 한번 도전해 볼 생각입니다. 개발 언어 및 개발 플랫폼의 제한을 두지 않는 관계로 ASP.NET 2.0으로 AJAX 기반으로 개발해 보려고 합니다. 웨젯이나 가젯등등도 많이 있지만 솔직히 공모전은 개발능력보다는 아이디어를 우선시 하기에 아이디어가 매우 중요한데 혹시 힌트주실분 안계십니까 -_-;; (네이버나 다음의 오픈API를 최소한 한개는 사용하여야 한다고 합니다.)

참여하실분은 여기에 가셔서 등록하시면 됩니다. http://mashupkorea.com/apply.html
기간은 2007년 2월 1일 부터 2007년 3월 31일 까지입니다. 등록마감기간과 결과물 접수 기간이 동일하니 반드시 참조하시기 바랍니다.

혹시나 아이디어는 있는데 개발이 문제 되시거나 팀원을 구하시면 댓글 달아주시면 감사하겠습니다. ㅎㅎ

추가글 : 2007-02-14 04:00
이곳에서 대한민국 매쉬업 경진대회의 목적을 볼수 있습니다.
http://channy.creation.net/blog/?p=388

크리에이티브 커먼즈 라이선스
Creative Commons License

시작하기전에..

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

Introduction

ASP.NET UpdatePanel 컨트롤은 리치하고 클라이언트 중심적인 웹 어플리케이션을 만드는 것을 가능하게 합니다. UpdatePanel 컨트롤을 사용함으로서 포스트백과 함께 전체페이지의 새로고침하는 대신에 페이지의 선택된 부분만을 새로고침할 수 있습니다. 이것은 부분 페이지 업데이트 실행이라고 불립니다. UpdatePanel 컨트롤과 하나이상의 UpdatePanel 컨트롤을 포함하고 있는 웹페이지는 커스텀 클라이언트 스크립트없이 부분 페이지 업데이트에 자동으로 관여할 수 있습니다.

이 글은 다음과 같은 내용을 포함합니다.

Scenarios

UpdatePanel 컨트롤은 최종사용자에게 인터랙티브한 웹페이지를 만들수 있게 하는 복잡한 클라이언트 비헤이비어를 가진 웹페이지를 개발할 수 있게 도와주는 서버컨트롤입니다. 항상 ECMAScript(JavaScript)의 상세한 지식을 필요로 하는 웹페이지의 지정된 부분들을 업데이트 하기 위해선 서버와 클라이언트가 조화하여 기능합니다. 그러나 UpdatePanel 컨트롤을 사용함으로서 어떠한 클라이언트 스크립트를 쓰지않고 부분 페이지 업데이트에 참여하는 웹페이지를 가능하게 합니다. 원한다면 클라이언트 사용자경험에 커스텀 클라이언트 스크립트를 더할 수 있습니다. UpdatePanel 컨트롤을 사용하고자 할때 페이지 비헤이비어는 브라우저에 독립적이고 클라이언트와 서버간에 전송되는 많은 데이터량을 잠재적으로 감소시킬 수 있을 것입니다.

Background

페이지의 정의된 부분에 의해 동작하는 UpdatePanel 컨트롤은 전체 페이지의 새로고침 없이 업데이트를 가능하게 합니다. 이 프로세스는 ScriptManager 서버컨트롤과 클라이언트 PageRequestManager 클래스에 의해 상호적으로 기능합니다. 부분 페이지의 업데이트가 가능할때 컨트롤은 비동기적으로 서버로 포스트할 수 있습니다. 비동기적 포스트백은 완성된 페이지와 컨트롤의 생명주기를 실행하는 서버 페이지의 결과로 생기는 일반적인 포스트백 처럼 행동합니다.  그러나 비동기적 포스트백은 UpdatePanel 컨트롤에 포함되고 업데이트되기 위해 표시된 한정된 지역의 페이지만을 업데이트 합니다. 서버는 브라우저로 영향을 받은 HTML 요소들만 보냅니다. 브라우저 내에서 클라이언트 PageRequestManager 클래스는 존재하는 HTML을 업데이트된 마크업으로 변경하는 DOM의 처리를 실행합니다. 다음의 그림은 처음으로 로드되는 페이지와 그 이후에 UpdatePanel 컨트롤의 내용을 리프레쉬하는 비동기적 포스트백을 보여줍니다.

사용자 삽입 이미지

Partial-page rendering overview

 

Enabling Partial-Page Updates

UpdatePanel 컨트롤은 웹페이지내에서 ScriptManager 컨트롤을 필요로 합니다. 기본적으로 ScriptManager 컨트롤의 EnablePartialRendering 프로퍼티가 true인 기본 값을 가지고 있기 때문에 부분 페이지 업데이트가 가능합니다.

다음의 예제는 페이지에서 ScriptManager 컨트롤과 UpdatePanel 컨트롤의 정의된 마크업을 보여줍니다. UpdatePanel 컨트롤은 클릭할때 패널안의 내용을 새로고침하는 Button 컨트롤을 포함하고 있습니다. 기본적으로 ChildrenAsTriggers 프로퍼티의 값은 true입니다. 그렇기 떄문에 Button 컨트롤은 비동기적 포스트백 컨트롤과 같이 행동합니다.

Specifying UpdatePanel Control Content

정의하거나 디자이너환경에서 ContentTemplate 프로퍼티를 사용함으로서 UpdatePanel 컨트롤에 컨텐츠를 추가할 수 있습니다. ContentTemplate 프로퍼티는<ContentTemplate> 요소를 드러내는 프로퍼티 입니다. 프로그래밍 방법으로 컨텐츠를 추가하려면 ContentTemplateContainer 프로퍼티를 사용하여야 합니다.

하나이상의 UpdatePanel 컨트롤을 포함하는 페이지가 첫번째로 화면에 보여질때, UpdatePanel 컨트롤의 모든 컨텐츠는 보여주고 브라우저에 보내지게 됩니다. 그 이후의 비동기적 포스트백은 UpdatePanel 컨트롤의 일부 내용은 업데이트 됩니다. 업데이트는 어떤 요소가 포스트백을 발생할것인가, 각각의 패널에 정의된 코드 또는 패널 설정에 의존합니다.

Specifying UpdatePanel Triggers

기본적으로 UpdatePanel 컨트롤의 내부의 어떠한 포스트백 컨트롤도 비동기적 포스트백을 발생시키고 배널내의 컨텐츠를 리프레쉬 할 수 있습니다. 그러나 UpdatePanel 컨트롤을 리프레시하기위해 페이지의 다른 컨트롤의 설정을 통해 할 수도 있습니다.  UpdatePanel 컨트롤의 트리거의 정의를 통해 이것을 가능하게 합니다. 트리거는 패널을 업데이트하는 포스트백 컨트롤과 이벤트를 정의하여 바인딩 합니다. 트리거 컨트롤의 정의된 이벤트가 증가될때(예를 들면, 버튼 Click 이벤트가 발생되었을때) 업데이트 패널은 리프레쉬됩니다.

다음의 예제는 UpdatePanel컨트롤을 위해 정의된 트리거를 사용하는 방법을 보여줍니다.

트리거는 UpdatePanel 컨트롤의 요소인 <Triggers> 요소의 안에 <asp:AsyncPostBackTrigger> 요소를 사용함으로서 정의됩니다. (비주얼 스튜디오에서 페이지를 수정하기 위해서는 다이얼로그박스의 UpdatePanelTrigger Collection Editor를 사용하여 트리거를 생성하여야 합니다.)

트리거 컨트롤의 이벤트는 조건적입니다. 이벤트를 정의하지 않는다면 트리거 이벤트는 컨트롤의 기본적인 이벤트입니다. 예를 들면 Button 컨트롤에서 기본적인 이벤트는 Click 이벤트입니다.

How UpdatePanel Controls Are Refreshed

다음의 목록은 부분 페이지 렌더링동안 언제 패널의 내용을 고칠것인가를 결정하는 UpdatePanel 컨트롤의 프로퍼티 설정 방법을 설명합니다.

  • UpdateMode 프로퍼티를 Always로 설정하였다면 UpdatePanel 컨트롤의 컨텐츠는 페이지의 어디든지 발생되는 매번 포스트백시마다 업데이트 됩니다. 다른 UpdatePanel 컨트롤의 안과 밖에서 발생되는 비동기적 포스트백을 포함합니다.
  • UpdateMode 프로퍼티를 Conditional로 설정하였다면 UpdatePanel 컨트롤의 컨텐츠는 다음의 한가지가 true 값을 가질때 업데이트 됩니다.
    • UpdatePanel 컨트롤의 트리거에 의해 포스트백이 발생하였을때.
    • UpdatePanel 컨트롤의 Update() 메소드가 명확하게 호출되었을때.  
    • UpdatePanel 컨트롤이 다른 UpdatePanel 안에 중첩되고 부모 패널이 업데이트 되었을때.
    • ChildrenAsTriggers 프로퍼티가 true로 설정되고 UpdatePanel 컨트롤의 자식 컨트롤이 포스트백을 일으켰을때. 중첩된 UpdatePanel 컨트롤의 자식 컨트롤은 부모 패널의 트리거와 같이 명확하게 정의되지 않은 바깥쪽의 UpdatePanel 컨트롤의 업데이트를 발생시키지 않습니다.

ChildrenAsTriggers 프로퍼티를 false로 설정하고 UpdateMode 프로퍼티를 Always로 설정한다면 예외가 발생합니다. ChildrenAsTriggers 프로퍼티는 UpdateMode 프로퍼티를 Conditional로 설정하였을때 사용할 수 있습니다.

Using UpdatePanel Controls in Master Pages

마스터페이지에서 UpdatePanel 컨트롤의 사용은 ScriptManager 컨트롤을 어떻게 포함할 것인가를 결정해야합니다. 마스터 페이지에 ScriptManager 컨트롤을 포함한다면 모든 컨텐츠 페이지의 ScriptManager 컨트롤과 같이 동작할 수 있습니다. (컨텐츠 페이지에 구문적으로 스크립트나 서비스를 등록하길 원한다면 컨텐츠 페이지에 ScriptManagerProxy 컨트롤을 추가할 수 있습니다.)

마스터 페이지에 ScriptManager 컨트롤을 포함하지 않는다면 UpdatePanel 컨트롤을 포함하는 각각의 컨텐츠 페이지에 직접 ScriptManager 컨트롤을 삽입할 수 있습니다. 디자인에서 당신의 어플리케이션에서 클라이언트 스크립트를 어떻게 관리할 것인지에 의존하여 선택됩니다. 클라이언트 스크립트를 관리하는 방법에 대한 더 많은 정보는 ScriptManager Technology Overview 를 참조하십시요. 마스터페이지에 대한 더 많은 정보를 원하시면 ASP.NET Master Pages Overview 를 참조하십시요.

ScriptManager 컨트롤이 마스터 페이지에 있고 컨텐츠 페이지에 부분 페이지 렌더링 능력이 필요하지 않다면 프로그래밍적으로 ScriptManager 컨트롤의 EnablePartialRendering 프로퍼티를 false로 설정하여야 합니다.

다음의 예제는 마스터페이지의 ScriptManager 컨트롤과 컨텐츠 페이지의 UpdatePanel 컨트롤을 위한 마크업을 보여줍니다. 이 예제에서는 LastUpdate라 불리는 프로퍼티를 마스터 페이지에서 정의하였고 UpdatePanel 컨트롤의 내부로부터 참조됩니다.

Using Nested UpdatePanel Controls

UpdatePanel 컨트롤은 중첩될 수 있습니다. 부모 패널이 새로고침되면 모든 중첩된 패널들은 모두 리프레쉬 됩니다.

다음의 예제는 다른 UpdatePanel 컨트롤의 내부에 UpdatePanel 컨트롤을 정의하는 마크업을 보여줍니다.  부모패널의 버튼은 부모패널과 자식패널 두개 모두의 컨텐츠의 업데이트를 유발합니다. 자식패널의 버튼은 자식패널만 업데이트를 유발합니다.

다음의 예제는 GridView 컨트롤과 함께 중첩된 UpdatePanel 컨트롤을 보여줍니다. GridView 컨트롤은 UpdatePanel 컨트롤 내부에 위치하며 각각의 GridView 로우는 다른 UpdatePanel 컨트롤 내부에 중첩된 GridView 컨트롤을 포함합니다.

GridView 컨트롤의 내부가 새로운 데이터를 보여줄때, 바깥쪽의 패널과 GridView 컨트롤의 외부의 다른 로우의 패널들은 리프레쉬 되지 않습니다. GridView 컨트롤의 외부가 새로운 데이터를 보여줄때, 바깥쪽의 패널과 중첩된 패널들은 모두 리프레쉬됩니다.

Refreshing an UpdatePanel Programmatically

다음의 예제는 프로그래밍적으로 UpdatePanel 컨트롤을 리프레쉬하는 방법을 보여줍니다. 예를 들면, RegisterAsyncPostBackControl(Control) 메소드를 호출함으로서 트리거와 같은 컨트롤을 페이지에 등록할 수 있습니다. Update() 메소드를 호출함으로서 프로그래밍적으로 UpdatePanel 컨트롤을 리프레쉬 할 수 있습니다.

Creating UpdatePanel Controls Programmatically

To add an UpdatePanel control to a page programmatically, you create a new instance of the UpdatePanel control. You then add controls to it by using the ContentTemplateContainer property and the Add(Control) method. Do not add controls directly to the ContentTemplate property. 프로그래밍적으로 페이지에 UpdatePanel 컨트롤을 추가하기 위해선 UpdatePanel 컨트롤의 인스턴스를 생성하여야 합니다. 그 이후에ContentTemplateContainer 프로퍼티와 Add(Control) 메소드를 사용하여 컨트롤을 추가할 수 있습니다. ContentTemplate 프로퍼티로 직접적으로 컨트롤을 추가할 수는 없습니다.

프로그래밍적으로 UpdatePanel 컨트롤을 추가할 때, UpdatePanel 컨트롤과 같은 똑같은 이름의 컨테이너 안의 컨트롤의 포스트백만  패널의 트리거와 같이 사용될 수 있습니다.

다음의 예제는 프로그래밍방법으로 페이지에 UpdatePanel 컨트롤을 추가하는 방법을 보여줍니다. 예제는 ContentTemplateContainer 프로퍼티를 사용함으로서 업데이트 패널에 Label 과 Button 을 추가하였습니다. 때문에 ChildrenAsTriggers 프로퍼티는 기본값인 true 값을 가지고 Button 컨트롤은 패널에서 트리거와 같이 작동합니다.