달력
비동기 방식을 사용하는 ajax 기술을 asp.net 2.0 에서 제공하는 atlas 를
사용해 보죠.
우선 Atlas website (atlas.asp.net) 에 접속하셔서 download and install the April CTP setup (.msi) file. 를 다운받으시기 바랍니다.
atlas 템플릿을 설치하면 visaul studio 2005 을 열어보세요. 웹사이트를 생성 메뉴를 선택하면
다이얼로그 박스에 atlas web site 라는 템플릿이 생성되어 있는 것을 발견하실 수 있습니다.
ms 에서 개발자 분들에게 ajax 기술을 사용하기 편리하게 제공해 줄려고 만들어서 배포한듯 합니다.
우선 선택해서 열어보죠.
그리고 bin 디렉토리를 살펴보죠. Microsoft.Web.Atlas.dll assembly 가 뻘쭘하게 들어가
있는것을 알 수 있습니다. 저희가 넣지 않아도 알아서 어셈블리를 사용하겠다는 의미겠죠.
그뿐만 아니라...환경설정을 하는 Web.config 파일도 한번 살펴보죠. 달라진 부분이 있는지..
atlas 기능이 추가되어 있는것을 목격하실 수 있을 겁니다.
뭔소린지 모르겠다면 http://atlas.asp.net/docs/ 사이트에 접속하셔서 확인해 보시기
바랍니다.
어쨋든... default.aspx 페이지 하나 뻘줌하게 열어놓고 보시면 새로운 서버컨트롤 선언이
추가되어 있는 것을 보실 수 있을겝니다.
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
명심할것은 atlas 기술을 현재 페이지에 사용할 생각이 있다면 위의 컨트롤을
꼭 명시해줘야 한다는 거죠. 다른 페이지 또한 사용할 생각이라면 당연히 그 페이지에
명시를 해줘야 합니다. ScriptManager 컨트롤은 atlas 수행을 관장하며, 페이지 개발자와 컨트롤 개발자 모두에게 기능을 제공하고 부분 리프레시, 점진적 업데이트 등을 가능하도록 합니다.
자... form 태그 안에 아래의 소스를 넣어보죠.
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
<div style="background-color: Yellow; float: left; width: 100px;">
<asp:Label ID="FullPostBackLabel" runat="server" /><br />
<asp:Button ID="FullPostBackButton" runat="server" text="Full Post Back" On Click="FullPostBackButton_OnClick" />
</div>
<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
<div style="background-color: Lime; width: 100px;">
<asp:Label ID="PartialPostBackLabel" runat="server" /><br />
<asp:Button ID="PartialPostBackButton" runat="server" text="Partial Post Back" On Click="PartialPostBackButton_OnClick" />
</div>
</ContentTemplate>
</atlas:UpdatePanel>
위에 기술한 내용을 간단하게 설명하자면.. 버튼을 누르면 해당 날짜를 현재시간으로 업데이트해서
화면에 보여주는 겁니다. 하나는 기본적으로 postback 이 일어나서 깜박거리는 현상을 보여주고,
또 하나의 버튼은 postback 현상이 없고, atlas 기술을 사용하는 것을 보여줍니다.
EnablePartialRendering 은 페이지의 어느 부분이 렌더링 되는지 디자인할 수 있도록
합니다. UpdatePanel 컨트롤은 페이지의 특정 부분의 렌더링(postback) 주기를 줄 수 있으며, ScriptManager 컨트롤에서 이 기능을 활성화할 수 있습니다.
그리고 데이터는 ContentTemplate 엘리먼트에 포함되어 보이고 업데이트 됩니다.
이는 비동기로 웹서버에서 데이터를 가지고 post back 을 핸들링 할 수 있다는 겁니다.
자바스크립트는 아래와 같습니다.
void FullPostBackButton_On Click(object sender, EventArgs e)
{
FullPostBackLabel.Text = DateTime.Now.ToString();
}
void PartialPostBackButton_On Click(object sender, EventArgs e)
{
PartialPostBackLabel.Text = DateTime.Now.ToString();
}
실행해볼까요?
Partial Post Back 의 버튼을 클릭하면, postback 없이 날짜가 update 되는것을
확인하실 수 있을 겁니다.
다른 버튼들에게 해방을 주지 않고 말이죠.
이는 XMLHttpRequest 오브젝트를 사용해서 웹서버에서 비동기 postback 으로 실행
했다는 점입니다.
간단한 예제를 가지고 설명했는데요.
이해를 다들 하셨을거라 생각이 드네요. 설명한 파일은 첨부해 놓겠습니다.
감사합니다.
=======================================
사이트 : http://cafe.daum.net/aspdotnet
작성자 : 심재운
메일 : shimpark@gmail.com
=======================================