안녕하세요? 웹지니입니다.

ASP.NET AJAX 개발자를 위한 웹지니의 "ASP.NET AJAX가 궁금해?" 시리즈 강좌 제 4 탄! 이번 시간에는 ScriptManager 클래스에 대해 좀 더 자세히 알아보는 기회를 가져보겠습니다.

예제 코드 다운로드: AJAXScriptManagerEx.zip (7.77 kb)

ASP.NET AJAX가 궁금해? Part 4: ScriptManager 지대로 사용하기

일반적으로 ASP.NET AJAX 1.0을 이용해서 AJAX 스타일의 웹 응용 프로그램을 개발하는 경우 <asp:ScriptManager> 태그를 거의 습관처럼 페이지에 추가하게 됩니다. 하지만 그런 후에는 거의 UpdatePanel 컨트롤을 이용해서 프로그래밍을 하게 되지요. 그래서 대부분의 개발자들이 대수롭지 않게 생각하고 넘어갈 수 있는 것이 바로 ScriptManager 컨트롤입니다.

하지만 이 ScriptManager 컨트롤에는 생각보다 다양한 기능들이 숨어있는데요. 오늘은 이 ScriptManager 클래스의 비밀을 한꺼풀 벗겨보겠습니다.

ScriptManager 클래스의 역할

ASP.NET 웹 폼 페이지에서 ASP.NET AJAX의 기능을 이용하기 위해서는 ScriptManager 클래스가 반드시 필요합니다. 만일 웹 폼 페이지에 ScriptManager 클래스를 추가하지 않고 UpdatePanel 컨트롤을 사용하면 아래 그림과 같이 ScriptManager 클래스가 필요하다는 예외가 발생하게 됩니다.

그림 1: ScriptManager 클래스가 누락된 경우 발생하는 예외

img1

ScriptManager 클래스를 웹 폼 페이지에 추가하려면 아래와 같은 구문을 이용합니다. 물론 도구 상자에서 드래그 & 드롭으로 편리하게 추가할 수도 있지만 말이지요.

<asp:ScriptManager ID="scriptManager1" runat="server" />

그런데 주의할 것인 이 ScriptManager 컨트롤은 반드시 서버 측 폼 태그 내부에 위치해야 한다는 것입니다. 즉, 아래와 같은 형태여야 합니다.

<asp:form ID="form1" runat="server">

    <asp:ScriptManager ID="scriptManager1" runat="server" />

</asp:form>

만일 ScriptManager 클래스가 <FORM>태그 바깥에 위치한다면 역시 아래 그림과 같은 예외가 발생하게 됩니다.

그림 2: ScriptManager가 <FORM>태그 내부에 있지 않은 경우 발생하는 예외

img2

자, 그럼 간단한 예제 페이지를 만들어 보겠습니다. 이 예제는 ScriptManagerEx1.aspx 페이지에 작성합니다.

그림 3: ScriptManagerEx1.aspx 페이지의 소스

img3

그림에서 보는 것과 같이 14번 라인에 <% = ... %>태그를 이용하여 현재 날짜를 출력하도록 하였고 12번 라인의 UpdatePanel 컨트롤이 15번 라인의 Button 컨트롤에 의해 PostBack이 발생할 때마다 자동으로 업데이트 될 것입니다. 왜 자동으로 업데이트가 되는지는 앞서의 UpdatePanel 관련 강좌를 참고하시면 되겠지요?

예제를 실행하면 아래 그림과 같은 화면이 나타날 것입니다. 물론 버튼을 클릭하면 화면 깜박임 없이 날짜와 시간도 업데이트 되지요.

그림 4: ScriptManagerEx1.aspx 페이지를 실행한 모습

img4

여기서 우리는 "오~ UpdatePanel 컨트롤이 제대로 동작하는군. 기깔나는데?"하고 넘어가서는 안됩니다. 이제 우리는 적어도 ScriptManager 컨트롤이 대체 어떤 마술을 부렸기에 이것이 가능해 지는지에 대해 한 번쯤 고민을 하고 넘어가야 합니다. 그래서 초고수들만이 사용할 수 있다는 "오른쪽 버튼 클릭 후 소스 보기 메뉴 클릭하기" 신공을 펼쳐 페이지의 렌더링 된 소스를 살펴보겠습니다.

그림 5: ScriptManagerEx1.aspx 페이지의 소스

img5

이 소스의 36번 라인쯤을 보시면 그림에 표시된 것과 같이 ScriptResource.axd 파일을 이용하는 두 개의 <script>태그를 보실 수 있습니다. 이 파일은 각각 ASP.NET AJAX의 클라이언트 라이브러리를 구성하는 스크립트 파일 중 MicrosoftAjax.js 파일과 MicrosoftAjaxWebForms.js 파일을 임포트하는 코드입니다.

이 중에 MicrosoftAjax.js 파일은 ASP.NET AJAX가 제공하는 기본 스크립트 엔진으로 ASP.NET AJAX의 클라이언트 측 기능은 모두 이 파일에 정의된 코드들을 기본으로 만들어져 있습니다. 물론 앞으로 우리가 ASP.NET AJAX용 스크립트를 작성할 때도 이 코드들을 이용해야 합니다.

그리고 MicrosoftAjaxWebForms.js 파일에는 ASP.NET AJAX의 스크립트측 프레임워크가 웹 폼 페이지와 함께 동작하기 위해 필요한 몇 가지 기능들이 구현되어 있습니다.

이 스크립트 파일들은 $Program Files$\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025\ 폴더 아래에 있는 (덴장... 디럽게 기네 ㅡㅡ;;) Debug 폴더나 Release 폴더에 위치하고 있으니 시간이 되실 때 한 번 살펴보시기 바랍니다.

EnablePartialRendering 속성

ScriptManager 클래스는 ASP.NET AJAX가 동작하는데 필요한 필수적인 스크립트 엔진을 웹 폼 페이지로 가져오는 역할 외에도 웹 폼 페이지에 AJAX 스타일의 적용 여부를 선택할 수 있도록 하는데 그 역할을 하는 속성이 바로 EnablePartialRendering 속성입니다. 이 속성은 기본적으로 true로 지정되어 있어 UpdatePanel 컨트롤을 이용하여 웹 폼 페이지의 일부 영역만을 비동기적으로 업데이트 하는 것이 가능합니다.

그러나 EnablePartialRendering 속성을 false로 지정하면 웹 폼 페이지에 UpdatePanel 컨트롤이 있어도 웹 폼 페이지가 AJAX 스타일로 동작하지 않습니다. 앞서 ScriptManagerEx1.aspx 예제에서 ScriptManager 컨트롤에 EnablePartialRendering="false" 속성을 추가하고 실행해보면 웹 폼 페이지의 동작에 UpdatePanel 컨트롤이 영향을 미치지 못하는 것을 볼 수 있습니다.

EnabledPartialRendering 속성을 true로 지정한다는 것은 대체 어떤 의미를 갖는 것일까요? 일반적으로 웹 폼 페이지는 Init -> Load -> PreRender -> Unload 순서로 실행 주기를 갖습니다. (물론 중간중간에 PostBack 데이터 처리나 ViewState 관리를 위한 절차들이 있지만 생략하겠습니다 ^^)

하지만 ScriptManager 클래스가 웹 폼 페이지에 얹혀지면 웹 폼 페이지의 동작이 달라지게 됩니다. ScriptManager 컨트롤은 자신을 가지고 있는 웹 폼 페이지의 렌더링 동작을 오버라이딩 하여 웹 폼 페이지가 PostBack을 발생시키는 대신 XMLHttpRequest 객체를 이용하여 비동기적으로 현재 페이지의 데이터를 서버로 전송하고 그 결과를 전달받는 방식으로 바꿔 버립니다.

다 알고 계시다구요? 췌... ㅡㅡ;;

사실 ScriptManager 클래스의 동작의 이면에 숨어있는 정보들은 우리가 생각하는 것 이상으로 다양하고 복잡합니다. 이번 강좌에서 그것들을 모두 설명하기는 조금 무리일 듯 싶고 앞으로 기회가 있을 때마다 빠뜨리지 않고 소개하겠습니다. 일단은 ScriptManager 클래스를 이용하면 웹 폼 페이지가 PostBack 대신 XMLHttpRequest를 이용한다는 것만 알아두자고요!!

ScriptManager 컨트롤의 자식 태그들

ScriptManager 클래스는 몇 개의 자식 태그를 제공하여 다양한 기능을 수행할 수 있도록 구현되어 있습니다. ScriptManager 클래스가 제공하는 자식 태그는 아래와 같습니다.

<Scripts>: 추가적인 클라이언트 스크립트에 대한 참조를 지정합니다. 즉, 개발자가 직접 작성하거나 ASP.NET AJAX의 클라이언트 라이브러리에 포함된 다른 자바 스크립트 파일을 가져와 웹 폼 페이지에 추가합니다.

<Services>: XML 웹 서비스에 대한 참조를 지정합니다. 이를 이용해서 XML 웹 서비스를 구현한 후 클라이언트 측에서 웹 서비스를 이용한 프로그래밍이 가능해 집니다.

<AuthenticationService>: ASP.NET AJAX가 적용된 웹 폼 페이지에 클라이언트 측에서 ASP.NET의 Forms 인증 모드를 사용할 수 있도록 합니다.

<ProfileService>: ASP.NET AJAX가 적용된 웹 폼 페이지에 클라이언트 측에서 ASP.NET의 Profile 서비스를 사용할 수 있도록 합니다.

이 중에서 AuthenticationService와 ProfileService에 대한 소개는 다음으로 미루고 일단 Scripts와 Services 자식 태그의 사용 방법에 대해 알아보겠습니다.

ScriptManager 컨트롤을 이용하여 커스텀 자바 스크립트 포함하기

먼저 개발자가 직접 구현한 자바 스크립트 파일을 웹 폼 페이지에 포함하고 실행하는 방법을 알아보겠습니다. 예제 프로젝트에 UsingScriptsCollection.aspx 페이지를 열어보면 아래 그림과 같은 코드가 작성되어 있습니다.

그림 6: UsingScriptsCollection.aspx 페이지의 소스

img6

그림을 보면 12번 라인에 <asp:ScriptReference> 태그가 작성되어 있습니다. 이 ScriptReference 컨트롤의 Path 속성에는 "~/Utils/My.js" 파일이 지정되어 있으며 이 파일의 소스는 아래와 같습니다.

그림 7: My.js 파일의 소스

img7

이 자바 스크립트의 sayHello 함수는 UsingScriptsCollection.aspx 페이지의 17번 라인의 버튼에 의해 호출되며 16번 라인의 텍스트 상자에 입력된 값을 읽어 alert 메시지를 표시하는 간단한 코드로 이루어져 있습니다. 이 소스의 3번 라인에서 사용된 $get 함수는 ASP.NET AJAX에 정의되어 있는 함수로 document.getElementById 함수를 이용하여 지정된 ID를 갖는 요소를 찾아 그 참조를 리턴하는 함수입니다.  이제 예제를 실행해 보겠습니다.

그림 8: UsingScriptsCollection.aspx 페이지를 실행한 모습

img8

오~ 예제가 잘 동작하는군요. 우리가 작성한 자바 스크립트 파일이 올바르게 페이지에 포함되었음은 물론 ASP.NET AJAX의 클라이언트 프레임워크에 구현된 함수나 클래스들을 모두 이용하여 커스텀 자바 스크립트 함수를 작성할 수 있다는 것을 알 수 있습니다.

XML 웹 서비스 이용하기

이번에는 XML 웹 서비스가 제공하는 메서드를 클라이언트 측에서 호출하는 방법을 알아보겠습니다. 이 예제는 조금 복잡합니다만 하나씩 순서대로 살펴보면 그다지 어렵지는 않을 것입니다.

1. 웹 서비스 구현하기

먼저 예제 프로젝트에서 CalcService.asmx 파일과 App_Code/CalcService.cs 파일의 소스를 살펴보겠습니다.

그림 9. CalcService.cs 파일의 소스

img9

이 소스를 보면 몇 가지 추가된 사항이 있는데 먼저 7번 라인에서 System.Web.Script.Service 네임 스페이스 선언이 추가된 것입니다. ASP.NET AJAX에서 클라이언트 스크립트가 웹 서비스를 참조할 수 있도록 하려면 웹 서비스에 [ScriptService] 특성이 웹 서비스에 반드시 지정되어 있어야 합니다. ScriptService 특성 클래스는 System.Web.Script.Service 네임 스페이스에 구현되어 있기 때문에 7번 라인이 필요한 것입니다. 그리고 ScriptService 특성은 15번 라인에 선언되어 있습니다.

다음으로 24번 라인부터 클라이언트로부터 호출될 웹 서비스 메서드를 구현합니다. 이 Add 메서드는 두 개의 숫자를 받아 이를 더한 값을 리턴하는 간단한 메서드입니다. 마지막으로 9번 줄에서 웹 서비스를 클라이언트 측에서 조금 더 쉽게 인식하도록 하기 위해 네임 스페이스를 추가했으므로 CalcService.asmx 파일의 <@WebService> 지시문에서 Class="Webgenie.Example.CalcService" 특성을 추가해 주어야 합니다.

2. 웹 서비스를 호출하는 자바 스크립트 코드 작성하기

다음으로 웹 서비스를 호출할 자바 스크립트 코드를 작성해 보겠습니다. 예제 프로젝트의 Utils/UseService.js 파일의 소스는 아래와 같습니다.

그림 10: UseService.js 파일의 소스

img10

그림을 보면 7번 줄에 CalcService의 Add 메서드를 호출하는 코드가 보입니다. 이 때 Add 메서드가 요구하는 두 개의 매개 변수 외에 onAddComplete라는 자바 스크립트 함수 포인터를 이용하여 12번 라인의 onAddComplete라는 함수를 지정하고 있습니다. 이렇게 지정된 자바 스크립트 함수는 ASP.NET AJAX가 XMLHttpRequest 객체를 이용하여 웹 서비스 메서드 호출이 정상적으로 이루어진 경우에 호출됩니다.

3. 웹 폼 페이지 구현하기

그러면 이제 이 웹 서비스를 사용하는 웹 폼 페이지를 구현해 보겠습니다. 예제 프로젝트의 UsingServicesCollectionEx.aspx 파일의 소스는 아래 그림과 같습니다.

그림 11: UsingServicesCollectionEx.aspx 파일의 소스

img11

먼저 ScriptManager 클래스가 앞서 작성한 웹 서비스와 자바 스크립트 파일을 참조할 수 있도록 해야 합니다. 따라서 12번 라인의 ScriptReference와 15번 라인의 ServiceReference 컨트롤을 이용하여 각각 자바 스크립트 파일과 웹 서비스 파일을 참조로 지정해 줍니다.

그리고 19번 라인부터 23번 라인까지의 코드와 같이 웹 서비스 호출에 필요한 웹 폼 UI를 구성해 줍니다. 21번 라인의 버튼을 클릭하면 UseService.js 파일의 add 함수가 호출되어 두 텍스트 상자에 입력된 숫자를 웹 서비스로 전달하고 웹 서비스로부터 전달된 결과는 23번 라인의 <SPAN>태그에 출력될 것입니다. 예제를 실행한 결과는 아래 그림과 같습니다.

그림 12: UsingServicesCollectionsEx.aspx 페이지를 실행한 모습

img12

이와 같이 XML 웹 서비스를 클라이언트 측에서 직접 호출하여 사용할 수 있습니다. 다만 이 기능이 올바르게 동작하려면 Web.config 파일에 아래와 같이 httpHandler가 설정되어 있어야 합니다.

그림 13: Web.config의 설정

 img13

결론

이상으로 ScriptManager 컨트롤의 일부 기능에 대해 알아보았습니다. ScriptManager의 기능을 요약하자면

1. 웹 폼 페이지가 UpdatePanel 컨트롤을 이용하여 화면 깜박임 없이 UI를 업데이트할 수 있도록 해 줍니다.

2. 개발자가 추가로 필요한 자바 스크립트나 XML 웹 서비스에 대한 참조를 쉽게 웹 폼 페이지에 추가할 수 있습니다.

다음 시간에는 ASP.NET AJAX의 서버 컨트롤 중 아직 다루지 않았던 몇 가지를 소개해 드리도록 하겠습니다.

그럼 즐거운 월요일, 행복한 한 주 되세요~

Posted by 웹지니 트랙백 0 : 댓글 4