작성자: 웹지니™
작성일: 2006년 12월 26일
적용범위: ASP.NET AJAX 1.0 RC
예제 다운로드: AJAXEnabledWebSite1.zip (6KB)
안녕하세요? 웹지니입니다.
25일 크리스마스 잘 보내셨나요? 전 그날 당직 근무가 걸려서 회사에 출근했더니 이번 한 주가 너어~무 길게 느껴지네요 쩝...ㅡㅡ;;
각설하고, 웹지니가 야심차게 준비한 새 강좌 "ASP.NET AJAX가 궁금해?" 그 두 번째 시간!
오늘은 UpdatePanel 컨트롤에 대해서 알아보도록 하겠습니다.
1. ASP.NET AJAX의 핵심 - UpdatePanel 컨트롤
오늘의 주인공은 ASP.NET AJAX에 조금이라도 관심이 있으신 분들은 너도나도 들어보셨을 법한 UpdatePanel 컨트롤입니다. UpdatePanel 컨트롤의 역할은 자신이 보여주는 컨텐츠 영역을 AJAX를 이용해서 화면 깜박임 없이 업데이트 시켜주는 것입니다.
즉, 웹 폼 페이지에서 원하는 영역에 AJAX 스타일을 적용하는 컨트롤이라고 이해하시면 될 듯 하고요, 이런 역할을 하다보니 당연지사 ASP.NET AJAX에서도 중요한 위치를 차지하는 서버 측 컨트롤입니다.
UpdatePanel 컨트롤을 사용하는 방법은 매우 간단합니다. 아래와 같이 AJAX 스타일로 깜박임 없이 업데이트 되어야 하는 영역을 UpdatePanel 컨트롤로 둘러싸 주기만 하면 됩니다.
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:GridView ID="gridView1" runat="server"/>
</ContentTemplate>
</asp:UpdatePanel>
이와 같이 GridView 컨트롤을 UpdatePanel 컨트롤의 <ContentTemplaet> 템플릿으로 한 번 감싸주기만 하면 GridView 상에서 여러분이 어떤 작업을 하더라도 이 GridView는 AJAX 스타일이 적용되어 라운드 트립 없이 업데이트가 가능하게 됩니다.
2. UpdatePanel 컨트롤을 이용한 심플한 예제 만들기
자, 그럼 UpdatePanel 컨트롤 예제를 한 번 만들어 보도록 하겠습니다. 앞서 강좌에서 ASP.NET AJAX를 이미 다운로드 해서 설치했다면 여러분의 Visual Studio 2005의 새 웹사이트 대화 상자에는 이미 아래 그림과 같이 AJAX-Enabled Web Site라는 프로젝트 템플릿이 존재할 것입니다.
그림 1: Visual Studio 2005의 새 웹사이트 대화 상자 (그림을 클릭하면 크게 보입니다.)
)
새 프로젝트를 생성하면 기본적으로 Default.aspx 페이지가 열리지요? 이 페이지는 아래와 같은 소스를 가지고 있을 것입니다.
<%@ 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>
</div>
</form>
</body>
</html>
여기서 눈여겨 보실 부분은 굵게 표시된 <asp:ScriptManager> 컨트롤입니다. 이 컨트롤은 ASP.NET 웹 폼 페이지가 ASP.NET AJAX의 기능을 활용하기 위해 필수적으로 필요한 자바스크립트 파일을 관리하는 컨트롤입니다. 자세한 얘기는 다음 강좌에서 진행하도록 하고 오늘은 일단 이런 넘이 꼭! 있어야 한다는 것만 알아두고 패~~~~~~쓰!!
이제 웹 폼 디자이너 뷰로 전환하고 도구 상자를 보면 아래 그림과 같이 도구 상자에 이미 AJAX Extensions라는 탭이 추가되어 있는 것을 보실 수 있습니다.
그림 2: Visual Studio 2005의 도구 상자
그림에 UpdatePanel 컨트롤을 드래그해서 웹 폼 디자이너에 올려두시면 아래와 같이 Default.aspx 파일의 소스가 변경될 것입니다.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
</asp:UpdatePanel>
</div>
이제 이 UpdatePanel 컨트롤 안에 아래와 같이 Label 컨트롤과 Button 컨트롤을 배치해 볼까요?
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lbCurrentTime" runat="Server" />
<asp:Button ID="button1" runat="server" Text="Show Current Time /w AJAX"
onclick="button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="button2" runat="server" Text="Show Current Time without AJAX"
onclick="button2_Click" />
예제에서 보시면 UpdatePanel 컨트롤의 ContentTemplate 내에 Label 컨트롤과 Button 컨트롤이 각각 배치되어 있고 UpdatePanel 컨트롤의 바깥에 Button 컨트롤이 배치되어 있습니다. 이 두 개의 Button 컨트롤은 포스트 백을 발생시키는 컨트롤이 UpdatePanel 컨트롤 내부에 위치할 때와 그렇지 않을 때의 동작을 구분하기 위해 배치한 것입니다. 이제 Default.aspx.cs 파일을 열고 아래와 같이 이벤트 핸들러 메서드를 작성합니다.
protected void button1_Click(object sender, EventArgs e) {
this.lbCurrentTime.Text = DateTime.Now.ToString();
}
protected void button2_Click(object sender, EventArgs e) {
this.lbCurrentTime.Text = DateTime.Now.ToString();
}
보시다시피 두 메서드는 모두 Label 컨트롤에 현재 시간을 표시하는 코드를 실행합니다. 이제 페이지를 실행해 볼까요? Visual Studio 2005에서 F5키를 누르거나 Ctrl + F5를 누르면 아래 그림과 같이 웹브라우저가 실행됩니다.
그림 3: 예제를 실행한 모습
그림과 같이 예제가 실행되면 두 개의 버튼을 차례대로 클릭해 보시기 바랍니다. 당연히 짐작하신 대로 위쪽의 버튼을 클릭하면 화면 깜박임 없이 Label 컨트롤에 현재 날짜가 표시되지만 아래쪽의 버튼은 라운드 트립을 발생시키게 됩니다.
그렇다면 여기서 알 수 있는 사실 하나! ASP.NET에서는 UpdatePanel 컨트롤만 잘 쓰면 AJAX 스타일의 웹 응용 프로그램을 쉽게 만들 수 있다!! 단, 포스트 백을 발생시키는 컨트롤도 UpdatePanel 컨트롤 안에 들어 있어야 한다는거~
3. UpdatePanel 컨트롤의 트리거
자, 뭔가 좀 이상합니다. 솔직히 웹 폼 페이지 안에 있는 어떤 버튼을 클릭해도 AJAX 스타일로 동작해 줘야 맞는거 아닌가요? 꼭 UpdatePanel 컨트롤 안에 있는 컨트롤을 클릭할 때만 AJAX 스타일이 적용된다니 이건 아니자나~ 이건 아니자나~ T^T
이 문제를 해결하기 위해서 우리는 UpdatePanel 컨트롤의 트리거에 대해 알아야 합니다. ASP.NET AJAX는 두 가지 형식의 UpdatePanel 컨트롤 트리거를 제공하는데 그 사용법은 아래와 같습니다.
<asp:UpdatePanel ID="up1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="컨트롤ID" EventName="이벤트명"/>
<asp:PostBackTrigger ControlID="컨트롤ID" />
</Triggers>
</asp:UpdatePanel>
바로 AsyncPostBackTrigger와 PostBackTrigger입니다. 이 두 가지 트리거의 차이점은 아래와 같습니다.
AsyncPostBackTrigger: UpdatePanel 컨트롤을 프스트 백 없이 비동기식으로 업데이트할 컨트롤과 이벤트를 지정합니다.
PostBackTrigger: UpdatePanel 컨트롤을 기존과 마찬가지로 포스트 백을 이용하여 업데이트할 컨트롤을 지정합니다.
이상에서 알 수 있듯이 AsyncPostBackTrigger와 PostBackTrigger는 각각 비동기식, 동기식 업데이트를 수행할 컨트롤을 지정하도록 되어 있습니다. 이들을 활용하면 UpdatePanel 컨트롤을 업데이트 할 컨트롤을 지정할 수 있음은 물론 UpdatePanel 컨트롤을 동기식으로 업데이트할 것인지, 아니면 비동기식으로 업데이트할 것인지도 결정할 수 있습니다.
이제 예제를 만들어 봅시다! 먼저 새로운 웹 폼 페이지를 추가하고 이름은 Default2.aspx라고 하겠습니다. 그리고 앞서 만들었던 Default.aspx 페이지의 소스와 Default.aspx.cs 소스를 모두 가져와 Default2.aspx와 Default2.aspx.cs 파일에 복사해 넣고 아래와 같이 Default2.aspx의 UpdatePanel 컨트롤의 소스만 살짝 수정합니다.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lbCurrentTime" runat="server" />
<asp:Button ID="button1" runat="server" Text="Show Current Time /w AJAX"
onclick="button1_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="button2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="button2" runat="server" Text="Show Current Time without AJAX"
onclick="button2_Click" />
앞서 Default.aspx 페이지의 소스 중 추가된 부분은 굵게 표시된 부분 뿐입니다. 이 코드를 보면 AsyncPostBackTrigger를 등록하는데 ControlID는 button2이고 EventName은 Click으로 지정하였습니다. 즉, 맨 아래에 추가된 button2 버튼에서 Click 이벤트가 발생하면 UpdatePanel 컨트롤을 업데이트하라는 의미가 됩니다. 이렇게 해서 예제를 실행해보면 그 결과는 아래 그림과 같습니다.
그림 4: 예제2를 실행한 모습
앞서 예제와 차이점이 무엇일까요? 이제는 둘 중 어떤 버튼을 클릭해도 UpdatePanel 컨트롤에 포함된 Label 컨트롤이 화면 깜박임 없이 AJAX 스타일로 업데이트가 됩니다!!!
4. ChildrenAsTriggers 속성
앞서 살펴본 AsycPostBackTrigger 외에 UpdatePanel 컨트롤은 PostBackTrigger 트리거를 지원합니다. 이것은 UpdatePanel 내부에 위치한 컨트롤들 중 UpdatePanel을 업데이트 시켜야 하는 컨트롤을 지정하기 위한 것인데 사실 이 트리거는 UpdatePanel 컨트롤의 ChildrenAsTriggers 속성 값과 연관이 있습니다.
ChildrenAsTriggers 속성은 UpdatePanel 컨트롤 내부의 자식 컨트롤들에서 어떤 이벤트가 발생하면 UpdatePanel을 업데이트 할 것인지를 지정하는 속성으로 기본값이 true입니다. 따라서 UpdatePanel 내부의 어떤 컨트롤을 클릭해도 UpdatePanel이 업데이트 되게 됩니다.
즉, 다시 말하면 ChildrenAsTriggers 속성을 false로 지정하고 UpdatePanel 내의 일부 컨트롤을 클릭할 경우에만 UpdatePanel 컨트롤이 Update되어야 할 경우 PostBackTrigger 트리거를 이용해서 어떤 컨트롤이 UpdatePanel 컨트롤을 업데이트 할 것인지를 지정하여 사용할 수 있는 것입니다.
그리고 가장 중요한 사실 하나, UpdatePanel 컨트롤은 ScriptManager 컨트롤의 EnablePartialRendering 속성이 반드시 true로 설정되어 있어야만 AJAX 스타일로 업데이트 됩니다. 하지만 EnablePartialRendering 속성은 이미 기본값이 true라는거~
다음 강좌에서는 UpdatePanel 컨트롤의 나머지 속성과 메서드에 대한 이야기들을 풀어나가 보겠습니다. 그럼 다음 시간에 또 만나욧~
