[Ajax.Net] 업데이트 패널(Update Panel) 샘플

asp.net에서는 아작스(ajax)와 관련된 모듈들이 있습니다.
이것들을 Ajax.net이라고 부릅니다.
이 모듈들중 가장 많이 사용되면서도 유용한 업데이트 패널을 간단하게 다뤄보겠습니다.

업데이트 패널은 Ajax의 주요기능인 부분 새로고침의 영역입니다.

1.프로젝트에 추가

프로젝트는 ASP.Nat로 생성하시면 됩니다.
도구 모음 > AJAX 확장
에서 스크립매니저(ScriptManager)를 추가합니다.
업데이트패널(UpdatePanel) 2개를 추가하고 각각에 래이블과 버튼을 하나씩 추가 합니다.

여기서  조심해야 할것은 업데이트패널안에 컨트롤을 추가하려면 
<ContentTemplate></ContentTemplate>
사이에 추가하셔야 합니다.

업데이트패널을 사용하기위해서는 스크립트매니저가 꼭 먼저 선언이되어 있어야 합니다.
스크립트매니저는 비하인드와 클라이언트를 연결해주는 역활을 합니다.

샘플이라고 했으니 친절하게 디자인 코드를 드리겠습니다.
ㅋ

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
        <ContentTemplate>
            <asp:Label runat="server" id="DateTimeLabel1" />
            <asp:Button runat="server" id="UpdateButton1" onclick="UpdateButton_Click" text="Update" />               
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">           
        <ContentTemplate>
            <asp:Label runat="server" id="DateTimeLabel2" />
            <asp:Button runat="server" id="UpdateButton2" onclick="UpdateButton_Click" text="Update" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

2.코드를 넣어봅시다.

protected void UpdateButton_Click(object sender, EventArgs e)
{
	DateTimeLabel1.Text = DateTime.Now.ToString();
	DateTimeLabel2.Text = DateTime.Now.ToString();
}

...
끝입니다 ㅎㅎㅎㅎ

왜이렇게 간단한지는 다음단계에서 설명하겠습니다.

3.테스트

 테스트를 해보면 버튼을 누르면 해당줄에 내용이 변하는 것을 알수 있습니다.

이것은 아이프래임(ifame)과 마찬가지로 Ajax도 해당영역만 새로고침을 하기 때문입니다.
비하인드 코드를 보면 양쪽 패널을 같이 업데이트 하지만 적용은 버튼을 누른곳만 되는것을 볼수 있는데 이것은 asp버튼은 클릭시 포스트백이 일어나기 때문입니다.
포스트백이 일어나면 해당 업데이트패널이 자동으로 새로고침됩니다.

참~암 기득합니다 ㅋㅋㅋ

샘플프로젝트

WebApplication2.zip