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

ASP.NET AJAX가 궁금해? 8번째 시간! 오늘은 Microsoft AJAX Library의 개략적인 특징을 살펴보고 Microsoft AJAX Library가 Array나 String, Number 등 기본 자바스크립트 객체들을 어떻게 확장하는지에 대해 살펴 보겠습니다.

목차

1. JSON: Microsoft AJAX Library를 이해하기 위한 필수 코스

2. Microsoft AJAX Library의 특징과 자바스크립트 확장

3. Microsoft AJAX Library의 기본 네임스페이스와 클래스 소개 1

4. Microsoft AJAX Library의 기본 네임스페이스와 클래스 소개 2

5. Microsoft AJAX Library를 활용한 객체지향 자바스크립트 프로그래밍 1

6. Microsoft AJAX Library를 활용한 객체지향 자바스크립트 프로그래밍 2

7. Microsoft AJAX Library를 활용한 비동기 네트워크 프로그래밍 1

8. Microsoft AJAX Library를 활용한 비동기 네트워크 프로그래밍

Microsoft AJAX Library의 특징

지금까지의 ASP.NET AJAX 강좌는 UpdatePanel 컨트롤로 대변되는 ASP.NET AJAX의 서버 측 프레임워크를 통해 얻을 수 있는 편의성과 강력한 생산성에 대한 내용이 위주였으며 지난 강좌를 시작으로 ASP.NET AJAX의 클라이언트 측 프레임워크에 대한 이야기를 풀어보고 있습니다.

Microsoft AJAX Library는 ASP.NET AJAX의 클라이언트 스크립트 지원을 위한 프레임워크입니다. 이 프레임워크의 특징은 아래와 같습니다.

1. 완벽한 크로스 브라우저 환경 지원

Microsoft AJAX Library (이하 MSAL)는 크로스 브라우저 환경을 완벽하게 지원합니다. 즉, Windows 운영체제 상에서 실행되는 IE, FireFox, Opera 및 Safari 브라우저를 공식적으로 지원하며 매킨토시 환경에서도 동일한 환경이 지원됩니다.

2. 객체 지향 스크립트 프로그래밍이 가능

MSAL은 자바스크립트를 확장하여 자바스크립트에 객체지향적 특징을 구현했습니다. 예를 들어 여러분은 MSAL을 이용하여 자바스크립트 클래스를 구현하거나 이를 상속하는 파생 클래스를 생성하거나 또는 인터페이스를 설계하고 이 인터페이스를 구현하는 클래스를 별도로 구현하는 등 지금까지 C#이나 VB.NET을 이용하여 진행했던 객체 지향 프로그래밍의 특징을 자바스크립트에서도 고스란히 재현할 수 있습니다.

3. ASP.NET 응용 프로그램 서비스와의 연동

MSAL은 ASP.NET의 응용 프로그램 서비스인 Membership 서비스 및 Profile 서비스와의 연동이 가능합니다. 즉, 클라이언트 스크립트를 통해 Membership 서비스에 기반한 로그인이나 로그아웃, Profile 서비스에 기반한 사용자 프로필 정도의 Load 및 Save가 가능합니다.

4. 클라이언트 컴포넌트 지원

MSAL은 클라이언트 스크립트에서 활용 가능한 다양한 컨트롤 및 컴포넌트를 제공합니다. 예를 들어 타이머 컴포넌트를 이용하면 일정 간격으로 특정 작업을 반복하는 코드를 손쉽게 개발할 수 있습니다. 또한 2번 항목의 OOP적 특징을 이용하여 직접 이런 컨트롤이나 컴포넌트를 구현하는 것도 가능합니다.

Microsoft AJAX Library의 구성

MSAL은 자바스크립트로 구현된 프레임워크이며 총 3개의 자바스크립트 파일로 구현되어 있습니다. 이 파일들은 C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\MicrosoftAjaxLibrary\System.Web.Extensions\1.0.61025.0 폴더에 위치하고 있으며 아래와 같은 역할을 담당합니다.

1. MicrosoftAjax.js / MicrosoftAjax.Debug.js

파일은 Microsoft AJAX Library 거의 모든 기능이 구현된 자바스크립트 파일입니다. ScriptManager 컨트롤을 페이지에 추가하면 기본적으로 추가되는 스크립트 파일 하나입니다. 파일명에 debug 붙은 파일은 파일의 디버그 버전 스크립트로 우리가 흔히 작성하는 스타일의 자바스크립트가 구현되어 있습니다. Debug가 생략된 파일은 프로젝트를 Release 모드로 컴파일할 때 사용되는 파일로 파일의 크기를 줄이기 위해 공백 및 줄바꿈 문자가 제거되어 있습니다.

2. MicrosoftAjaxTimer.js / MicrosoftAjaxTimer.Debug.js

파일은 클라이언트 타이머 컨트롤이 구현된 자바스크립트 파일입니다. 파일을 열어보면 Sys.UI._Timer 라는 이름의 객체가 구현되어 있는 것을 있으며 기본적으로 ScriptManager 컨트롤에 의해 페이지에 포함되지는 않습니다. 또한 클래스 이름 앞에 언더 스코프 문자(_)가 있는 것으로 미루어볼 때 내부적으로 사용되는 private 클래스로서 구현되어 있음을 알 수 있습니다.

3. MicrosoftAjaxWebForms.js / MicrosoftAjaxWebForms.Debug.js

파일에는 페이지가 비동기 요청을 수행하는데 사용하는 PageRequestManager 클라이언트 클래스가 구현되어 있으며 페이지의 클라이언트 라이프 사이클을 지원하기 위한 이벤트 매개 변수 클래스들(~EventArgs 클래스들) 구현되어 있습니다. 파일 역시 ScriptManager 컨트롤에 의해 페이지에 기본적으로 포함됩니다.

MSAL을 구성하는 자바스크립트 파일은 위의 세 가지이며 이 중 MicrosoftAjax.js 파일과 MicrosoftAjaxWebForms.js 파일이 MSAL의 핵심 구현 파일이므로 시간이 되시면 이 파일들의 내용을 한 번 살펴보시는 것이 좋을 것입니다.

Micrsoft AJAX Library의 자바스크립트 확장

MSAL은 기본적으로 자바스크립트의 기본 객체를 확장하여 사용합니다. 예를 들면 자바스크립트의 기본 내장 객체인 Array 객체에 CLR과 유사한 add 및 addRange 등의 메서드가 추가되어 있습니다. MSAL이 궁극적으로 추구하는 것은 자바스크립트 코드를 마치 C#이나 VB.NET과 동일하게 사용할 수 있도록 하는 것입니다. 그러면 MSAL이 자바스크립트에 어떤 마법을 부렸는지 한 번 살펴볼까요?

1. 타입 시스템의 정의

기본적으로 자바스크립트는 객체에 대한 타입이 정의되어 있지 않습니다. 물론 String이나 Number, Date 객체 등은 기본적으로 typeof 연산자를 통해 해당 객체의 타입을 알아낼 수 있으나 개발자가 직접 구현한 객체는 단순히 Object로 표시됩니다. 따라서 특정 객체의 명확한 타입을 알아낼 수는 없습니다.

MSAL은 이런 자바스크립트의 단점을 극복하기 위해 자바스크립트의 모든 객체에 타입 정보를 추가했습니다. 예를 들어 Sys.UI.DomElement 클래스의 타입 정보는 "Sys.UI.DomElement"라는 문자열로 표현됩니다. 이를 통해 각 객체의 명확한 타입을 알아낼 수 있으며 이를 이용하여 간단한 수준의 리플렉션 코드를 작성할 수도 있습니다.

2. 자바스크립트 기본 객체의 확장

MSAL은 자바스크립트의 기본 객체 (String, Object, Number, Array, Date, Function, Boolean, Error 등)에 확장 메서드를 추가로 구현해 두었습니다. 각 객체별로 추가된 메서드 및 그에 대한 설명은 아래와 같습니다. 참고로 이 강좌에서는 MSAL이 새롭게 추가한 메서드를 소개만 할 뿐이며 자세한 사용법은 MSAL 도움말 웹사이트 (http://ajax.asp.net/docs)를 참고 하시기 바랍니다.

2.1 Array 객체에 추가된 메서드

  • add 메서드: 배열에 새로운 원소를 추가합니다. 기존의 push 메서드와 동일한 기능을 수행합니다.
  • addRange 메서드: 지정된 배열에 다른 배열의 원소들을 모두 추가합니다.
  • clear 메서드: 배열 내의 모든 원소를 제거합니다.
  • clone 메서드: 현재의 배열과 동일한 원소를 가지는 별도의 배열을 생성하여 리턴합니다.
  • contains 메서드: 배열이 지정된 원소를 가지고 있는지를 나타내는 Boolean 값을 리턴합니다.
  • dequeue 메서드: 배열의 첫 번째 원소를 리턴하고 배열에서 해당 원소를 제거합니다.
  • enqueue 메서드: 배열에 새로운 원소를 추가합니다. 이는 MSAL의 내부에서 사용하는 메서드이며 일반 개발자에게는 add 메서드의 사용을 권장합니다.
  • forEach 메서드: 배열의 각 원소에 대해 지정된 함수를 수행합니다.
  • indexOf 메서드: 배열에서 지정된 원소의 인덱스를 가져옵니다.
  • insert 메서드: 배열의 지정된 위치에 새로운 원소를 삽입합니다.
  • parse 메서드: 배열 표현식 문자열을 파싱하여 동일한 배열 객체를 만들어 리턴합니다.
  • remove 메서드: 배열에서 지정된 원소를 제거합니다.
  • removeAt 메서드: 배열에서 지정된 위치의 원소를 제거합니다.

2.2 Date 객체에 추가된 메서드

  • format 메서드: Date 객체가 표시하는 날짜와 시간을 지정된 형식의 문자열로 변환합니다.
  • localeFormat 메서드: format 메서드와 동일하지만 현재 시스템의 로캐일을 적용합니다.
  • parseLocale 메서드: 특정 로캐일 형식의 날짜 및 시간 문자열을 Date 객체로 변환합니다.
  • parseInvarient 메서드: 일반적인 날짜 및 시간 문자열을 Date 객체로 변환합니다.

2.3 Number 객체에 추가된 메서드

  • format 메서드: Number 객체의 값을 지정된 형식의 문자열로 변환합니다.
  • localeFormat 메서드: Number 객체의 값을 현재 시스템 로케일을 이용하여 문자열로 변환합니다.
  • parseLocale 메서드: 지정된 로케일 형식의 숫자 문자열을 Number 객체로 변환합니다.
  • parseInvarient 메서드: 로케일이 적용되지 않은 형식의 숫자 문자열을 Number 객체로 변환합니다.

2.4 Object 객체에 추가된 메서드

  • getType 메서드: 특정 객체를 문자열로 가져옵니다.
  • getTypeName 메서드: 특정 객체의 타입을 표현하는 문자열을 가져옵니다.

2.5 String 객체에 추가된 메서드

  • endsWith 메서드: 문자열이  지정된 문자열로 끝나는지를 표시하는 Boolean 값을 리턴합니다.
  • format 메서드: C#에서의 String.Format 메서드와 동일한 기능을 수행합니다.
  • localeFormat 메서드: 형식 문자열 내에 숫자나 날짜 등에 대해 현재 시스템의 로케일을 적용합니다.
  • startsWith 메서드: 문자열이 지정된 문자열로 시작하는지를 표시하는 Boolean 값을 리턴합니다.
  • trim, trimEnd, trimStart 메서드: 각각 문자열의 양 끝, 오른쪽 끝, 왼쪽 끝의 공백을 제거합니다.

2.6 Error 개체에 추가된 메서드

  • argument 메서드: .NET의 ArgumentException 예외와 동일한 의미를 가지는 에러를 발생시킵니다.
  • argumentNull 메서드: .NET의 ArgumentNullException 예외와 동일한 의미를 가지는 에러를 발생시킵니다.
  • argumentType 메서드: 매개 변수가 undefined 타입인 경우 사용할 수 있는 에러를 발생시킵니다.
  • create 메서드: 새로운 Error 객체를 생성합니다.
  • invalidOperation 메서드: .NET의 InvalidOperationException 예외와 동일한 의미를 가지는 에러를 발생시킵니다.
  • notImplemented 메서드: .NET의 NotImplementedException 예외와 동일한 의미를 가지는 에러를 발생시킵니다.
  • parameterCount 메서드: 매개 변수의 개수가 틀린 경우 사용할 수 있는 에러를 발생시킵니다.
  • popStatckFrame 메서드: Error 객체가 에러가 생성된 위치가 아닌 에러가 발생한 위치에 대한 정보를 가지도록 수정합니다.

이상으로 MSAL의 특징과 자바스크립트의 기본 객체를 어떻게 확장하고 있는지에 대해 알아보았습니다. 다음 강좌에서는 MSAL을 이용한 객체 지향 자바스크립트 프로그래밍의 기초에 대해 알아보겠습니다.

다음 이 시간에... ^^

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

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

페이지 메서드를 마지막으로 서버 측 라이브러리에 대한 소개를 마치면서 잠시, 아주 잠시 (ㅡㅡ;;) 중단되었던 ASP.NET AJAX가 궁금해? 강좌를 다시 이어가고 있습니다.

이번 강좌부터는 ASP.NET AJAX의 클라이언트 측 라이브러리인 Microsoft AJAX Library에 대해 소개할 예정입니다. 우선 예상 목차를 잡아보자면...

1. JSON: Microsoft AJAX Library를 이해하기 위한 필수 코스

2. Microsoft AJAX Library의 특징과 자바스크립트 확장

3. Microsoft AJAX Library의 기본 네임스페이스와 클래스 소개 1

4. Microsoft AJAX Library의 기본 네임스페이스와 클래스 소개 2

5. Microsoft AJAX Library를 활용한 객체지향 자바스크립트 프로그래밍 1

6. Microsoft AJAX Library를 활용한 객체지향 자바스크립트 프로그래밍 2

7. Microsoft AJAX Library를 활용한 비동기 네트워크 프로그래밍 1

8. Microsoft AJAX Library를 활용한 비동기 네트워크 프로그래밍 2

이와 같이 대략적인 목차를 설정해 봤습니다. 물론 뭐 저대로 강좌가 진행되면 얼마나 좋겠습니까마는 강좌를 진행해 가는 과정에서 다소나마 목차의 변동이 있을 수 있다는 사실을 미리 밝혀 드립니다. ^^;;

JSON: Microsoft AJAX Library를 이해하기 위한 필수 코스

여러분도 이미 아시다시피 대부분의 Ajax 라이브러리들은 아직 우리에게 익숙하지 않은 이상한(?) 형태의 자바스크립트 코드로 구현되어 있는 경우가 많습니다. 그 이상한 형태의 코드가 바로 JSON 표현식이라는 것은 이제 많은 개발자들이 인지하고 있을 것입니다.

이번 강좌에서는 Microsoft AJAX Library를 이해하기 위한 필수적인 지식인 JSON 표현식에 대해 알아보는 시간을 가져보겠습니다.

JSON, 영화 13일의 금요일의 그 머더라(Murderer)?

조금만 움직여도 땀이 줄줄 흐르는 이맘때쯤이면 TV에서 너도나도 공포 영화를 내보내곤 합니다. 영화 "13일의 금요일"에 보면 "제이슨"이라는 이름의 살인마가 나오지요. 나름 애처로운 과거를 간직한 이 살인마의 이름과 발음상 동일한 JSON, 왠지 이름만으로는 절대 친하고 싶지 않은 녀석이지만 Ajax가 판을 치는 세대를 살아가는 우리들은 어쩔 수 없이 친해져야 하는 녀석이기도 합니다.

JSON은 Javascript Object Notation의 약자로 한글로 풀어보면 "자바스크립트 객체 표현식" 정도로 해석할 수 있겠습니다. 이름에서 알 수 있듯이 자바스크립트 객체를 표현하기 위한 하나의 문법인 셈이지요. JSON 표현식은 Duglas Crockford라는 개발자가 넷스케이프에 제안하여 채택된 문법으로 사실은 매우 오래전부터 자바스크립트에서 제공되던 표현식입니다. Ajax 덕분에 뒤늦게 빛을 보게 된 셈이지요.

일반적으로 여러분은 지금까지 자바스크립트에서 객체를 구현하기 위해 아래와 유사한 코드를 사용했을 것입니다.

예제 1: 전통적인 자바스크립트 객체 표현식

function JsObject() {

    this.property1 = 0;

    this.property2 = "Hello!";

 

    this.method1 = function( ) {
    }

 

    this.method2 = function( ) {

    }
}

위의 예제 코드는 여러분에게 이미 상당히 익숙하지요? 물론 자바스크립트를 단지 함수 수준에서만 활용한 정도에 그친 개발자들도 있기 때문에 위의 예제 코드마저 생소한 분이 계실지도 모르겠습니다만 어쨌든 위의 예제는 property1과 property2라는 필드와 method1, method2라는 메서드를 가진 JsObject라는 이름의 객체를 정의하는 코드입니다.

위의 예제에서 구현된 객체를 사용하는 코드는 어떤가요? 대략 아래와 같을 것입니다.

var myObj = new JsObject();

alert(myObj.property1);

예, 대략 이와 같이 사용했었지요. 위의 예제가 무슨 문제가 있느냐? 그렇지는 않습니다. 다만 JSON 표현식을 이용하면 조금 더 간단하게 이와 동일한 객체를 표현할 수 있다는 것이지요. 그렇다면 JSON 표현식으로는 이 객체를 어떻게 표현하는지 한 번 살펴볼까요?

예제 2: JSON 객체 표현식

var JsObject = {

    property1: 0,

    property2: "Hello",

    method1: function( ) {

    },

    method2: function( ) {

    }

}

어떤가요? 앞서 예제 1의 코드에 비하면 조금, 아~~~주 조금 간단해졌지요? 하지만 이 때문에 JSON 표현식을 "별 것 아닌" 것으로 치부해 버리면 안됩니다. 왜냐하면 JSON 표현식은 많은 장점을 가지고 있기 때문이지요.

JSON 표현식을 굳이 써야 하는 이유는 뭔가요?

언뜻 보기에 JSON 표현식을 써야 하는 이유를 잘 알 수가 없습니다. 대체 왜 JSON 표현식을 이해하고 사용해야 할까요? 또 왜 많은 Ajax 라이브러리들이 JSON 표현식을 고집할까요? (쓸데없이 말야 쯧...ㅡㅡ;;) 제 나름대로 그 이유를 아래와 같이 정리해 봤습니다.

1. XML에 비해 간편하게 데이터 교환이 가능하다.

Ajax가 Asynchronous Javascript And Xml의 약자임은 이제 다들 알고 계실 것입니다. 여기서 XML의 역할이 바로 데이터 교환 수단으로서의 역할이었지요. Jess James Garett의 에세이를 보시면 아시겠지만 Ajax 웹 응용 프로그램에서 서버와 클라이언트 사이의 데이터 교환을 XML이 담당하고 있습니다. 그렇다면 대략 아래와 같은 형식이겠군요.

예제 3: Ajax에서 데이터 교환 수단으로서의 XML의 활용 예시

<user>

    <id>webgenie</id>

    <age>100</age>

    <gender>M</gender>

</user>

그러면 이와 동일한 표현을 JSON 형식으로 바꿔보겠습니다.

var JsonObject = {

    id: "webgenie",

    age: 100,

    gender: "M"

}

이와 같이 표현할 수 있겠네요. 자, 어떤 차이가 있을까요? 우선 눈으로 확인하기에도 JSON 표현식을 위한 문자열의 크기가 훨씬 적다는 것을 알 수 있습니다. 따라서 서버 측의 응답으로 XML을 사용하는 것보다 JSON 표현식을 사용하는 것이 네트워크 대역폭 측면에서 조금 더 유리하겠지요? 예제의 JsonObject 객체의 멤버에 액세스하는 방법은 아래와 같습니다.

alert(JsonObject.id);                   // "webgenie"가 출력됩니다.

2. XML에 비해 사용이 편리하다.

앞서 1번 항목의 연장선상에서 생각해 보면 서버의 응답으로 XML을 사용하는 것보다는 JSON 표현식을 사용하는 것이 더 편리할 것입니다. 왜 그런지 살펴볼까요? 우선 XML을 응답 데이터 로 전달하면 클라이언트 측, 즉 자바스크립트에서는 XMLHttpRequest 객체의 responseXml 속성을 이용하여 IXMLDomDocument 인터페이스를 조작하는 코드를 작성해야 합니다.

반면 JSON 표현식을 사용할 경우 아래와 같이 responseText 속성에 전달된 응답 데이터를 eval 함수를 이용하여 간단하게 자바스크립트 객체로 변환할 수 있습니다.

var user = eval("(" + xmlHttpReqObject.responseText + ")");

이렇게 하면 아래와 같이 user 객체를 사용할 수 있습니다.

alert(user.id);                    // "webgenie"가 출력됩니다.

언뜻 보기에도 상당히 쉬워 보입니다. 이 외에도 몇 가지 장점이 있지만 아마도 가장 큰 장점은 이 두 가지가 아닌가 생각이 됩니다. 그러면 JSON 표현식에 대해 본격적으로 알아볼까요?

JSON 표현식 살펴보기

앞서 살펴본 것과 같이 JSON 표현식은 중괄호( {와 } )로 객체를 표현하며 콤마를 이용하여 멤버를 구분합니다. 또한 멤버와 값 사이는 콜론(:)으로 구분합니다. 즉 대략 아래와 같은 형식을 가집니다.

{ member1: value1 [, member2: value2 [, member3: value3]]] }

물론 앞서 예제에서 볼 수 있듯이 멤버는 일반적인 자바스크립트의 내장 객체 (Number, String 등) 뿐만 아니라 함수도 멤버가 될 수 있습니다.

{

    function1: function() {

    },

 

    function2: function(param1) {

    }

}

당연한 이야기겠지만 자바스크립트의 내장 객체를 멤버로 가질 수 있으므로 배열 역시 JSON 객체의 멤버가 될 수 있습니다.

{

    numericArrayMember: [1, 2, 3],

    stringArrayMember: ["1", "2", "3"]

}

그렇다면 특정 객체의 배열도 가능할까요? 물론 가능합니다.

{

    objectArrayMember: [

         { prop1: value1 },

         { prop1: value2 },

         { prop1: value3 }

    ],

    dateMember: new Date()

}

예제에서 보듯이 객체의 배열은 물론 new 연산자를 이용하여 새로운 객체의 인스턴스를 멤버에 할당할 수도 있습니다. 이상의 내용으로 미루어 볼 때 JSON 객체는 자바스크립트에서 사용 가능한 모든 객체를 간단하게 하나의 객체로 그룹화할 수 있다는 장점이 있습니다. 또한 이를 잘 활용한다면 데이터베이스가 리턴한 결과 데이터 셋을 하나의 JSON 객체로 표현할 수도 있습니다.

지금까지 JSON 표현식에 대해 알아보았습니다. 언급한 내용이 그다지 많지는 않았지만 사실 그만큼 JSON 표현식이 쉽게 사용할 수 있는 것이기에 이번 강좌의 내용만으로도 개략적인 감을 잡는데는 큰 무리가 없을 것 같습니다.

다음 강좌에서는 Microsoft AJAX Library의 특징에 대해 알아보고 기본 자바스크립트 객체들을 어떻게 확장하고 있는지 살펴보도록 하겠습니다.

참고 자료

JSON Official Website: http://www.json.org

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

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

잠시 뜸했던 (사실 조낸 오래 뜸했던 ㅡㅡ;;) ASP.NET AJAX가 궁금해? 제 6 탄! 오늘은 페이지 메서드에 대해 소개할까 합니다.

예제 다운로드: AjaxPageMethodsEx.zip (4.89 kb)

페이지가 메서드가 뭔데요??

페이지 메서드란 웹 폼 페이지를 표현하는 클래스인 Page 클래스에 정의된 static 메서드를 클라이언트 스크립트에서 호출하는, 잘만 사용하면 조낸 멋진 그런 기능입니다. 일단 예제 하나 만들어 보겠습니다. Visual Studio 2005에서 AJAX-Enabled WebSite 프로젝트를 생성한 후 아래와 같이 컨트롤을 배치합니다.

코드 1: 웹 폼 페이지의 컨트롤들

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
    <div>
        <input id="txtNum1" type="text" />
        +
        <input id="txtNum2" type="text" />
        <input id="Button1" type="button" value="Calculate!" onclick="doCalc()" />
</div>

눈 여겨 볼 것은 ScriptManager 컨트롤의 EnablePageMethods 속성에 true를 지정한 것입니다. 이 속성을 true로 지정하면 ScriptManager 컨트롤은 웹 폼 페이지에 PageMethods라는 이름의 객체를 생성하는 자바스크립트 코드를 렌더링 합니다.

이제 웹 폼 페이지의 코드 비하인드 파일을 열고 아래와 같이 코드를 작성합니다.

코드 2: 페이지 메서드

using System.Web.Services;      //WebMethod 특성 클래스 사용을 위해 선언합니다.

[WebMethod]
public static int Calculate(int a, int b) {
    return a + b;
}

보시는 것과 같이 Calculate 메서드는 두 개의 int형 파라미터를 전달받아 이 둘을 더한 값을 리턴하는 매우 씸플한 메서드입니다. 여기서는 두 가지를 주목해야 하는데 첫째로 이 메서드에 WebMethod 특성이 지정되어 있다는 점입니다. WebMethod 특성을 지정하면 ScriptManager 컨트롤이 PageMethods 클라이언트 객체를 생성할 때 이 메서드를 호출할 수 있는 코드를 자동으로 추가해 줍니다. 따라서 이제 클라이언트 측에서도 이 메서드를 호출할 수 있는 준비를 마친 셈이지요.

두 번째로 주목할 것은 이 메서드가 static 메서드라는 점입니다. PageMethods 객체에 의해 호출될 메서드는 반드시 인스턴스 메서드가 아닌 static 메서드여야 합니다. 왜냐하면 static 메서드는 메서드를 가지고 있는 클래스의 타입만 알면 호출할 수 있기 때문이지요. 반면 인스턴스 메서드는 해당 클래스의 인스턴스를 반드시 생성한 후에 호출할 수 있기 때문에 지금과 같이 메서드 하나를 달랑 호출하기 위해서 새로운 Page 클래스의 인스턴스를 생성하는 것보다는 static 메서드를 사용하는 편이 훨씬 나았을 것입니다.

그러면 앞서 코드 1에서 Calculate 버튼을 클릭하면 호출될 doCalc 스크립트 함수를 작성하여 예제를 완성해 보겠습니다.

코드 3: doCalc 함수

<script language="javascript" type="text/javascript">
    function doCalc() {
        var objNum1 = $get("txtNum1");
        var objNum2 = $get("txtNum2");
   
        PageMethods.Calculate(objNum1.value, objNum2.value,

           onCalcCompleted, onCalcFailed);
    }
  
    function onCalcCompleted(result) {
        alert(result);
    }
  
    function onCalcFailed(result) {
       alert(result.get_message());
    }
</script>

코드 3을 보면 총 3개의 함수가 작성되어 있는 것을 볼 수 있습니다. 먼저 doCalc 함수부터 살펴볼까요? 이 함수는 Microsoft AJAX Library가 제공하는 $get 함수를 이용하여 두 개의 텍스트 상자에 대한 객체 참조를 각각 objNum1과 objNum2 변수에 대입합니다.

$get 함수는 document.getElementById 메서드를 대신 실행해주는 함수로 페이지 내의 HTML 요소에 대한 객체 참조를 가져오는 코드를 줄이기 위해 제공되는 함수입니다. 따라서 당연히 ScriptManager 컨트롤이 포함된 웹 폼 페이지에서만 사용할 수 있겠지요?

다음으로 PageMethods 객체의 Calculate 메서드를 호출하는 코드가 등장합니다. 여기서 PageMethods 객체는 ScriptManager 컨트롤이 렌더링 해 준 스크립트 객체이며 Calculate 메서드는 앞서 코드 2에서 작성했던 Calculate 메서드에 대한 클라이언트 측 프록시 메서드입니다.

서버 측에서 작성했던 Calculate 메서드는 두 개의 int형 파라미터를 요구하는 메서드였지요? 따라서 클라이언트 프록시 메서드인 Calculate 메서드 역시 두 개의 파라미터를 전달해 주어야 합니다. 그런데 실제 코드에서는 총 4개의 파라미터를 전달하고 있지요? 이는 PageMethods 클래스가 비동기 방식으로 Calculate 메서드를 호출하기 때문입니다. 따라서 Calculate 메서드의 실행이 성공했는지 혹은 실패했는지에 따라 선택적으로 호출될 콜백 메서드를 지정하여 메서드의 실행 결과를 처리할 수 있도록 하고 있습니다.

즉, 아래와 같은 형식으로 사용합니다.

PageMethods.Calculate([대상 메서드의 매개 변수], 성공시 콜백 함수, 실패시 콜백함수);

이 경우 대상 메서드의 매개 변수를 나열하고 성공 및 실패 시 호출될 콜백 함수를 지정하면 해당 메서드의 실행 결과에 따라 각기 다른 콜백 함수가 호출됩니다. 예제의 경우 Calculate 메서드 호출이 성공하면 onCalcCompleted 메서드가, 실패하면 OnCalcFailed 메서드가 호출됩니다.

이제 F5 키를 눌러 예제를 실행해 볼까요? 아래 그림과 같이 텍스트 상자에 적당한 값을 입력하고 [Calculate] 버튼을 클릭하면 서버 측 Calcuate 메서드의 실행 결과를 정확하게 가져오는 것을 볼 수 있습니다.

그림 1: 페이지 메서드의 실행 결과

 img1

반면 아래와 같이 숫자가 아닌 다른 값을 입력하여 서버 측 코드에서 오류를 유발시키면 아래 그림과 같이 서버 측에서 던져진 예외 메시지가 출력되는 것을 볼 수 있습니다.

그림 2: 예외가 발생한 경우

img2

어떤가요? 쓸만해 보이시나요? 앞서 onCalcFailed 자바 스크립트 함수를 다시 살펴보면 아래와 같은 코드를 보실 수 있을 것입니다.

function onCalcFailed(result) {

    alert(result.get_message());

}

이 메서드에는 Microsoft AJAX Library가 전달해 주는 객체가 result라는 이름으로 전달되는데 이 객체는 Microsoft AJAX Library가 정의해 둔 클라이언트 측 예외 클래스의 인스턴스입니다. 이 예외 클래스들은 모두 get_message()라는 이름의 함수를 통해 예외 메시지를 가져올 수 있습니다. 클라이언트 측 예외 클래스에 대한 자세한 내용은 차후에 ASP.NET AJAX의 클라이언트 측 라이브러리인 Microsoft AJAX Library에 대한 강좌에서 소개하도록 하겠습니다. 오늘은 일단 여기까지~!

이상으로 페이지 메서드에 대해 알아보았습니다. 이번 강좌는 무척이나 짧네요. 아! 그리고 한 가지 중요한 사실이 있는데 간혹 ScriptManager 컨트롤의 EnablePageMethods 속성에 true를 지정하고 코드 비하인드 파일의 static 메서드에 [WebMethod] 특성을 지정한 후 컴파일을 해도 PageMethods 클라이언트 객체가 생성되지 못하고 스크립트 오류가 발생하는 경우가 있었습니다. 혹시 여러분도 이런 경우가 있는지 피드백 주시면 감사하겠습니다. ^^

즐거운 하루 되세요~

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

안녕하세요? 웹지니입니다. 오늘은 ASP.NET AJAX가 제공하는 서버 컨트롤 중에서 UpdateProgress 컨트롤과 Timer 컨트롤에 대해 알아보겠습니다. 오늘 강좌를 끝으로 ASP.NET AJAX의 주요 서버 측 컨트롤들에 대한 소개는 대략 마무리가 될 듯 합니다.

예제 코드 다운로드: ASPNETAJAXPart5.zip (6.84 kb)

UpdateProgress 컨트롤

UpdateProgress 컨트롤은 UpdatePanel 컨트롤이 비동기 식으로 업데이트 되는 동안 사용자에게 무언가 작업이 진행되고 있음을 보여주기 위한 컨트롤입니다. 비동기식으로 동작하는 웹 폼 페이지의 경우 사용자 입장에서는 지금 내가 어떤 버튼을 클릭했는데 대체 이 페이지가 내가 원하는 작업을 하고 있는지 아닌지에 대해 판단할 수가 없지요.

Ajax가 처음 등장했을 때 대두되었던 그닥 크리티컬하지는 않지만 그렇다고 무시할 수도 없는 이 문제를 ASP.NET AJAX는 UpdateProgressEx 컨트롤을 통해 해소하고 있습니다. UpdateProgress 컨트롤이 제공하는 속성이나 메서드 중에서 여러분이 반드시 알아두어야 할 속성은 아래와 같습니다.

DisplayAfter 속성: 이 속성은 UpdatePanel 컨트롤이 비동기 업데이트를 시작한 후 얼마의 시간이 지났을 때 UpdateProgress 컨트롤이 보여질 것인지를 지정하는 속성입니다. 기본 값은 500 밀리초입니다.

AssociatedUpdatePanelID 속성: 이 속성은 어떤 UpdatePanel 컨트롤이 비동기 업데이트를 진행할 때 UpdateProgress 컨트롤이 보여질 것인지를 결정하는 속성입니다. 이 속성에 UpdatePanel 컨트롤의 ID를 지정하면 그 UpdatePanel 컨트롤이 업데이트 될 때 UpdateProgress 컨트롤이 화면에 보여지게 되며, 만일 이 속성에 아무런 값도 지정하지 않으면 웹 폼 페이지에 있는 UpdatePanel 컨트롤의 개수와 관계없이 어떤 UpdatePanel 컨트롤이 동작하든 UpdateProgress 컨트롤이 보여지게 됩니다.

그러면 예제 프로젝트의 UpdateProgressEx.aspx 페이지를 통해 UpdateProgress 컨트롤의 사용법을 알아보겠습니다. 아래 그림은 UpdateProgressEx.aspx의 소스 코드입니다.

그림 1: UpdateProgressEx.aspx 페이지의 소스

img1  

예제 코드를 보면 10번 라인에 UpdatePanel 컨트롤이 배치되어 있고 17번 라인에는 UpdateProgress 컨트롤이 배치되어 있습니다. 예제에서 보시는 것과 같이 DisplayAfter 속성 값을 200으로 지정하여 10번 라인의 UpdatePanel 컨트롤이 비동기 업데이트를 시작한 후 0.2초 후에 UpdateProgress 컨트롤이 화면에 보여지도록 했습니다.

UpdateProgress 컨트롤은 UpdatePanel 컨트롤과 마찬가지로 <ProgressTemplate> 태그 내에 UpdatePanel 컨트롤이 비동기 업데이트를 진행하는 동안 보여질 컨텐츠를 지정할 수 있습니다. 예제에서는 간단한 텍스트 메시지를 보여지도록 했습니다.

10번 라인의 UpdatePanel 컨트롤은 13번 라인의 Button 컨트롤에 의해 비동기 업데이트를 진행합니다. UpdateProgressEx.aspx.cs 파일에 작성된 Button1 컨트롤의 Click 이벤트 핸들러 함수 소스는 아래 그림과 같습니다.

그림 2: UpdateProgressEx.aspx.cs 파일의 소스

img2

Button1_Click 함수는 18번 라인과 같이 System.Threading.Thread.Sleep 메서드를 이용해서 2초간 대기한 후 Label 컨트롤에 현재 시간을 표시합니다. 그러면 예제를 실행해 볼까요?

그림 3: 예제를 실행하고 Button 컨트롤을 클릭한 모습

img3

그림에서 보는 것과 같이 버튼을 클릭하면 UpdateProgress 컨트롤의 <ProgressTemplate> 템플릿에 지정한 컨텐츠가 보여지는 것을 볼 수 있습니다. UpdatePanel 컨트롤의 업데이트가 완료되면 아래 그림과 같이 UpdateProgress 컨트롤이 숨겨집니다.

그림 4: UpdatePanel 컨트롤의 업데이트가 완료된 이후의 모습

img4

여러 개의 UpdateProgress 컨트롤 사용하기

UpdateProgress 컨트롤은 AssociatedUpatePanelID 속성을 통해 특정 UpdatePanel과 자신을 연결할 수 있습니다. 즉, 지정된 UpdatePanel 컨트롤이 업데이트 되는 동안에만 UpdateProgress 컨트롤이 보여지는 것이지요. 예제 프로젝트의 MultipleUpdateProgressEx.aspx 페이지가 여러 개의 UpdateProgress 컨트롤을 사용하는 방법을 보여줍니다.

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

img5  

그림에서 보듯이 이 웹 폼 페이지는 두 개의 UpdatePanel 컨트롤이 배치되어 있으며 각각의 ID는 UpdatePanel1과 UpdatePanel2 입니다. 그리고 역시 두 개의 UpdateProgress 컨트롤을 가지고 있는데 이 두 UpdateProgress 컨트롤의 AssociatedUpdatePanelID 속성에 각각 UpdatePanel1과 UpdatePanel2가 지정되어 있습니다.

다음으로 각각의 UpdatePanel 컨트롤에 배치된 Button 컨트롤의 Click 이벤트 핸들러 함수가 아래 그림과 같이 작성되어 있습니다.

그림 6: MultipleUpdateProgressEx.aspx.cs 파일의 소스

img6  

그림에서 보듯이 Button1 버튼을 클릭하면 Label 컨트롤에 날짜가 표시되고 Button2 버튼을 클릭하면 Label 컨트롤에 시간이 표시됩니다. 이제 예제를 실행해 볼까요?

그림 7: 첫 번째 버튼을 클릭한 경우

 img7

그림 8: 두 번째 버튼을 클릭한 경우

 img8

위의 두 그림에서 보듯이 UpdateProgress 컨트롤은 AssociatedUpdatePanelD 속성에 지정된 UpdatePanel 컨트롤의 업데이트에만 반응하게 되는 것을 볼 수 있습니다.

Timer 컨트롤

ASP.NET AJAX는 기존의 자바 스크립트에서의 window.setTimeout이나 window.setInterval 메서드를 대체하는 Timer 컨트롤을 제공합니다. 게다가 예전에 Visual Basic이나 C#에서 Timer 컨트롤을 이용해 보셨다면 아무런 무리 없이 사용할 수 있을 정도로 우리에게 익숙한 Timer 컨트롤과 동일한 인터페이스를 제공합니다. Timer 컨트롤에 대해 알아둘 멤버는 아래와 같습니다.

Interval 속성: Timer 컨트롤이 Tick 이벤트를 발생하는 시간 간격을 밀리 초 단위로 가져오거나 지정합니다. 기본값은 60,000으로 60초를 의미합니다.

Tick 이벤트: Interval 속성에 지정된 시간이 지날 때 마다 발생하는 이벤트 입니다.

그러면 예제를 살펴볼까요? 예제 프로젝트의 TimerEx.aspx 페이지의 소스는 아래와 같습니다.

그림 9: TimerEx.aspx 페이지의 소스

img9

그림에서 보듯이 22번 라인에는 Timer 컨트롤이 배치되어 있으며 12번 라인의 UpdatePanel 컨트롤에는 AsyncPostBackTrigger에 Timer1 컨트롤의 Tick 이벤트에 의해 업데이트 되도록 지정되어 있습니다. Timer 컨트롤의 Interval 속성에 2000을 지정하였기 때문에 예제를 실행해 보면 2초마다 UpdatePanel 컨트롤에 표시되는 시간이 업데이트 되는 것을 볼 수 있습니다.

그림 10: 예제를 실행한 모습

img10

지금까지 UpdateProgress 컨트롤과 Timer 컨트롤에 대해 알아보았습니다. 개인적으로는 UpdateProgress 컨트롤과 Timer 컨트롤 모두 요긴하게 사용될 컨트롤인 듯 싶네요. 지금까지의 강좌를 통해 ASP.NET AJAX가 제공하는 주요 서버 측 컨트롤들에 대해 어느 정도 이해를 하셨을 듯 싶습니다.

다음 강좌에서는 ASP.NET AJAX의 클라이언트 측 프레임워크와 관련된 이야기를 풀어볼지, 아니면 서버 측 컨트롤들에 대한 더 심도깊은 이야기를 풀어볼지 고민이 되네요.

즐거운 주말입니다. 그런데 집사람이 시골에 내려가고 혼자 지내는 주말은 영~ 기분이 안나네요. ^^;; 주말 편히 쉬시기 바랍니다.

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

안녕하세요? 웹지니입니다. 2006년을 마감하게 야심차게!! 시작한 ASP.NET AJAX 강좌 그 세번째 시간입니다. 원래는 네번째 시간이어야 하는데 토요일에 강좌를 다 작성하고 올리기 버튼을 클릭한 순간의 런타임 에러로 강좌가 날아갔다는.. 쿨럭. ㅡㅡ;;

그래서 다시금 쓰고 있는 세번째 강좌입니다. 오늘은 UpdatePanel의 이런 저런 기능들에 대해서 소개를 해볼까 합니다.

예제 코드 다운로드: UpdatePanel2nd.zip (7.09 kb)

UpdatePanel의 UpdateMode 속성에 대하여

UpdatePanel 컨트롤에는 UpdateMode라는 속성이 존재하는데 이 속성 값에 따라 UpdatePanel 컨트롤이 업데이트 되는 방식이 달라집니다. 일단 이 UpdateMode 속성에 지정할 수 있는 값이 어떤 것들이 있는지 알아볼까요?

UpdatePanelUpdateMode.Always: 기본 값이며 UpdatePanel 내부에 존재하는 컨트롤이 PostBack을 발생시키면 매번 UpdatePanel 컨트롤이 업데이트 됩니다.

UpdatePanelUpdateMode.Conditional: UpdatePanel의 <triggers> 태그에 지정된 트리거에 의해 특정 컨트롤이 PostBack되거나 UpdatePanel 컨트롤의 Update 메서드를 호출하면 UpdatePanel 컨트롤이 업데이트 됩니다.

UpdateMode 속성의 동작은 지난 강좌에서 언급했던 UpdatePanel 컨트롤의 ChildrenAsTriggers 속성 값과 연관이 있습니다. 차례대로 설명을 해보자면...

1. UpdateMode 속성이 Always인 경우 ChildrenAsTriggers 속성을 false로 지정하면 런타임에 Exception이 발생하게 됩니다. 당연히 그럴 수 밖에 없는 것이 ChildrenAsTriggers 속성을 false로 지정한다는 것은 UpdatePanel 컨트롤을 업데이트 시킬 컨트롤을 직접 <triggers>태그를 이용해서 지정하겠다는 뜻이지요? 그런데 UpdateMode 속성이 Always이면 UpdatePanel 컨트롤 내의 어떤 컨트롤이 PostBack을 발생시키더라도 UpdatePanel 컨트롤이 업데이트 되어야 하기 때문에 이 두 조건은 서로 상반된 의미를 갖게 되는 것이지요. 그래서 UpdateMode 속성이 Always인 경우에는 반드시 ChildrenAsTriggers 속성도 true 여야 한다는 것!! 잊지 마세요.

2. UpdateMode 속성이 Conditional 인 경우 ChildrenAsTriggers 속성을 true로 지정하면 UpdateMode 속성이 Always인 경우와 동일하게 동작합니다. 왜냐하면 UpdateMode 속성이 Conditional인 경우에는 UpdatePanel 컨트롤을 업데이트할 트리거를 발생시킬 컨트롤을 지정해 주어야 하는데 ChildrenAsTriggers 속성이 true이면 모든 컨트롤이 트리거 컨트롤로 등록되기 때문이지요.

3. UpdateMode 속성이 Conditional인 경우 ChildrenAsTriggers 속성을 false로 지정하면 UpdatePanel 컨트롤에 <triggers> 태그를 이용해서 UpdatePanel 컨트롤을 업데이트 시킬 컨트롤을 명시적으로 지정해 주거나 또는 서버 측 코드에서 Update 메서드를 명시적으로 호출해 주어야 합니다.

지금까지 설명한 내용을 기준으로 예제를 하나 만들어 보겠습니다. 예제 파일에서 UpdateModeEx.aspx 파일을 열어보면 아래와 같이 소스가 작성되어 있습니다.

img1

14번 라인의 UpdatePanel 컨트롤은 UpdateMode 속성이 Always로 지정되어 있으며 앞서 강좌에서 사용하던 방식입니다. 26번 줄의 두 번째 UpdatePanel 컨트롤은 UpdateMode 속성을 Conditional로, ChildrenAsTriggers 속성을 false로 지정한 상태입니다. 이 UpdatePanel 컨트롤은 33번 라인의 <Triggers>태그에서 지정한 컨트롤이 클릭된 경우에만 업데이트가 발생합니다. 만일 33번 라인의 <Triggers>태그를 삭제하면 UpdatePanel 컨트롤은 30번 라인의 버튼을 아무리 클릭해도 아무런 반응이 없게 됩니다.

예제를 실행한 모습은 아래 그림과 같습니다.

 img2

UpdateMode 속성이 Conditional 인 경우 UpdatePanel 컨트롤이 업데이트 될 수 있는 상황은 아래와 같습니다.

  • UpdatePanel 컨트롤에 트리거로 지정된 컨트롤이 PostBack을 발생시킨 경우
  • 서버 측에서 UpdatePanel 컨트롤의 Update 메서드를 명시적으로 호출한 경우
  • ChildrenAsTriggers 속성이 true인 경우에는 UpdatePanel 컨트롤 내의 모든 자식 컨트롤 중 하나가 PostBack을 발생시킨 경우

이상입니다. 각각의 상황에 따라 UpdatePanel 컨트롤을 적절하게 사용하시기 바랍니다. ^^

중첩된 UpdatePanel 컨트롤 사용하기

당연한 이야기겠지만 UpdatePanel 컨트롤은 중첩하여 사용할 수 있습니다. UpdatePanel 이 중첩된 경우 동작은 역시 UpdateMode 속성의 값에 따라 서로 달라지게 됩니다. 어떻게 달라지는지 한 번 확인해 볼까요?

UpdateMode가 Always인 경우: 바깥쪽의 UpdatePanel이나 안쪽의 UpdatePanel 중 하나가 업데이트되면 나머지 하나도 함께 업데이트 됩니다.

UpdateMode가 Conditional인 경우: 바깥쪽의 UpdatePanel이 업데이트되면 안쪽의 UpdatePanel도 업데이트 되지만 안쪽의 UpdatePanel이 업데이트 되면 바깥쪽의 UpdatePanel은 업데이트 되지 않습니다.

예제를 살펴볼까요? NestedUpdatePanelEx.aspx 파일을 열어보면 아래 그림과 같은 소스가 보일 것입니다.

 img3

그림과 같이 15번 라인과 22번 라인의 UpdatePanel 컨트롤들은 UpdateMode 속성이 모두 Conditional로 지정되어 있습니다. 따라서 22번 라인의 UpdatePanel 컨트롤은 15번 라인의 UpdatePanel 컨트롤을 업데이트 하지 않습니다. 아래와 같이 예제를 실행해 보고 각 버튼을 클릭하여 어떤 변화가 있는지 살펴보시기 바랍니다.

img4

프로그래밍적으로 UpdatePanel을 업데이트 하기

UpdatePanel 컨트롤은 프로그래밍 코드를 이용해서도 업데이트 할 수 있습니다. 이 경우에는 UpdatePanel 컨트롤의 Update 메서드를 호출하면 되는데 그러기 위해서는 그 전에 UpdatePanel 컨트롤을 업데이트 시킬 컨트롤을 미리 등록해야 합니다. 이 때 필요한 메서드들은 아래와 같습니다.

ScriptManager.RegisterAsyncPostBackControl 메서드: 이 메서드는 지정된 컨트롤을 UpdatePanel 컨트롤을 비동기방식으로 업데이트 할 트리거 컨트롤로 등록합니다.

UpdatePanel.Update 메서드: 이 메서드는 UpdatePanel 컨트롤의 내용을 업데이트합니다.

이 두 메서드를 이용하여 만들어 진 예제는 다음과 같습니다. 먼저 Programmatic.aspx 파일의 소스는 아래 그림과 같습니다.

 img5

그림을 보면 15번 라인에 RadioButtonList 컨트롤이 배치되어 있고 23번 라인에 UpdatePanel 컨트롤이 배치되어 있습니다. UpdatePanel 컨트롤의 UpdateMode 속성은 Conditional이지만 자식 컨트롤 중에 PostBack을 발생시키는 컨트롤이 없다는 것에 주목하세요. 이제 Programmatic.aspx.cs 파일을 열고 아래와 같이 코드를 작성합니다.

 img6

예제의 16번 라인에서는 ScriptManager 클래스의 RegisterAsyncPostBackControl 메서드를 이용하여 RadioButtonList 컨트롤을 UpdatePanel 컨트롤의 트리거 컨트롤로 등록합니다. 그리고 19번 라인의 메서드는 RadioButtonList 컨트롤의 아이템을 선택했을 때 UpdatePanel 컨트롤의 Update 메서드를 호출하여 UpdatePanel 컨트롤을 업데이트 합니다. 예제가 실행된 모습은 아래 그림과 같습니다.

img7

위의 그림에서 아래쪽의 Label 컨트롤이 보이는 부분이 바로 UpdatePanel 컨트롤이 동작하는 부분입니다. 이와 같이 프로그래밍 코드를 통해 동적으로 UpdatePanel 컨트롤의 기능을 정의하는 것이 가능합니다.

UpdatePanel 컨트롤과 함께 사용할 수 없는 컨트롤들

지금까지 UpdatePanel 컨트롤에 대해 알아보았는데 사실 UpdatePanel 컨트롤이 모든 ASP.NET 서버 컨트롤과 호환이 되는 것은 아닙니다. 경우에 따라서는 UpdatePanel 컨트롤과 함께 사용할 수 없는 컨트롤들이 있는데요. 어떤 것들이 있는지 알아봅시다.

  • TreeView 컨트롤과 Menu 컨트롤은 UpdatePanel 컨트롤과 함께 사용할 수 없습니다.
  • WebParts 컨트롤들 역시 UpdatePanel 컨트롤과 함께 사용할 수 없습니다.
  • Sustitution 컨트롤도 UpdatePanel 컨트롤과 함께 사용할 수 없습니다.
  • FileUpload 컨트롤을 이용하여 비동기식으로 UpdatePanel 컨트롤 안에서 파일 업로드를 구현할 수 없습니다.
  • GridView 컨트롤과 DetailsView 컨트롤의 EnableSortingAndPagingCallback 속성이 true로 설정된 경우 UpdatePanel 컨트롤과 함께 사용할 수 없습니다.
  • Login, PasswordRecovery, ChangePassword, CreateUserWizard 컨트롤은 편집 가능한 템플릿에 적용되지 않은 경우에는 사용할 수 없습니다. 즉, UpdatePanel 컨트롤과 이 컨트롤들을 함께 사용하려면 각 컨트롤들을 템플릿 형식으로 변환해야 합니다.

마치며...

지금까지 UpdatePanel 컨트롤에 대해 알아보았습니다. UpdatePanel 컨트롤은 웹 폼 페이지의 특정 영역을 비동기식으로 업데이트 할 수 있다는 점에서 ASP.NET AJAX의 핵심 역할을 담당하는 컨트롤입니다. 또한 기존의 ASP.NET 웹 폼 페이지와의 호환성을 최대한 보장해 주고 있으므로 짧은 시간과 노력으로 ASP.NET 웹 폼 페이지를 AJAX 스타일로 변환하기에 매우 효과적인 도구가 될 것입니다.

이번 강좌가 여러분이 UpdatePanel 컨트롤의 동작을 이해하는데 조금이나마 도움이 되었기를 바라면서 다음 강좌에서는 또 다른 ASP.NET AJAX의 양대 산맥 중 하나라고 할 수 있는 ScriptManager 컨트롤에 대해 알아보도록 하겠습니다.

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

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

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

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

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의 새 웹사이트 대화 상자

img1

새 프로젝트를 생성하면 기본적으로 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의 도구 상자

img2

그림에 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: 예제를 실행한 모습

img3

그림과 같이 예제가 실행되면 두 개의 버튼을 차례대로 클릭해 보시기 바랍니다. 당연히 짐작하신 대로 위쪽의 버튼을 클릭하면 화면 깜박임 없이 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를 실행한 모습

img4

앞서 예제와 차이점이 무엇일까요? 이제는 둘 중 어떤 버튼을 클릭해도 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 컨트롤의 나머지 속성과 메서드에 대한 이야기들을 풀어나가 보겠습니다. 그럼 다음 시간에 또 만나욧~

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

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

찬바람이 부는가 싶더니 어느덧 2006년도 불과 열흘 남짓 남았네요. 올 한해 계획하셨던 일들은 이루셨는지 모르겠네요. 저도 올 한해를 잘 마무리 하고자 늦게나마 ASP.NET AJAX 강좌를 준비했습니다. 2007년 새해와 함께 본격적으로 시작될 차세대 웹 프로그래밍의 대표주자인 ASP.NET AJAX에 대한 지니의 새로운 강좌! 이름하야 "ASP.NET AJAX가 궁금해?"를 지금부터 시작합니다. 흣흣

MS 왈: ASP.NET AJAX는 말이죠~

지난 번 Ajax에 대한 간략한 소개의 글을 통해 Ajax가 무엇이고 어떤 요소들이 융합되어 구현되는지에 대해서는 간단히 소개를 해드렸으며 기타 시중에 이미 출간된 다양한 Ajax 관련 서적들을 통해 이미 Ajax에 대해서는 다들 잘 알고 계시리라고 믿습니다.

Ajax가 기존의 웹 응용 프로그램의 한계를 넘어 다양하고 화려하고 뭔가 간지나는 UI를 만들 수 있는 제법 괜찮은 방법이라는 소문이 인터넷 상에 퍼지자 Windows 운영체제로 개인용 데스크톱 운영체제 시장을 평정하고 이제는 인터넷 세상의 정복을 꿈꾸는 MS또한 가만히 있을 수 없었던지라 Ajax 스타일의 웹 응용 프로그램을 보다 쉽고 빠르게 만들 수 있는 프레임워크를 구상하게 되니 그것이 바로 ASP.NET AJAX더라~ 이것이지요. MS의 ASP.NET AJAX 공식 웹사이트인 ajax.asp.net을 방문해 보면 아래와 같은 문구가 첫 화면에 나타납니다.

Microsoft ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.

자자, 알았다구요. 한글로 써드릴게요~

Microsoft ASP.NET AJAX는 보다 효율적이며 더욱 인터렉티브하고 고도로 개인화되며 대부분의 웹브라우저에서 동작하는 차세대 웹 응용 프로그램을 빠르게 개발할 수 있는 무료 프레임워크이다

라고 하네요. 그렇습니다!! ASP.NET AJAX는 무료인 것입니다!! 그러나 우리가 간과하지 말아야 할 중요한 단어들이 줄줄이 나열되어 있지요. 바로 효율적, 인터렉티브, 개인화 이 세 가지 입니다.

Ajax는 사용자가 어떤 액션을 취할 때 클라이언트와 서버 사이에서 발생하는 비효율적인 라운드 트립을 없앨 수 있는 매우 효율적인 대안입니다. 이를 통해 사용자와 보다 유연하게 대화할 수 있는 웹페이지를 만들 수 있음은 당연지사겠지요.

Ajax 스타일의 웹페이지를 개발해 보신 분들은 아시겠지만 실제로 이런 Ajax의 장점을 잘 살린 좋은 Ajax 스타일의 웹페이지를 만들기란 쉬운 일은 아닙니다. 하지만 ASP.NET AJAX는 Ajax의 장점을 잘 살리는 동시에 개발자에게 편의성과 생산성, 효율성을 동시에 안겨줍니다.

ASP.NET AJAX의 속살이 보고잡다!

ASP.NET AJAX의 겉모습을 살펴보았으니 이제 그 속살을 한 번 들여다 볼까요? 뭐 사실 겉이 중요한가요? 속이 더 중요하지요. ㅎㅎ 아래 그림은 ASP.NET AJAX의 구조를 보여줍니다.

그림 1: ASP.NET AJAX Architecture

img1

그림에서 보듯이 ASP.NET AJAX는 크게 두 부분으로 나누어져 있습니다. 왼쪽은 Microsoft AJAX Library라는 이름으로 제공될 클라이언트 측 라이브러리입니다. 즉, 자바 스크립트를 이용해서 만들어진 클라이언트 스크립트 라이브러리이지요.

이 클라이언트 라이브러리는 자바 스크립트 코드에서 사용할 수 있는 컨트롤과 컴포넌트는 물론 다양한 클래스 라이브러리와 자바 스크립트의 기본 데이터 형을 확장한 핵심 런타임 엔진, 그리고 크로스 브라우저 지원을 위한 다양한 기능들이 제공됩니다.

특히 XML 스타일의 선언적 프로그래밍 모델을 채택한 새로운 클라이언트 스크립트 개발 방법을 제공하고 있는데 이를 이용하면 ASP.NET 이나 XAML (eXtensible Application Markup Language)과 같이 자바 스크립트도 선언적 모델에 따라 구현할 수 있습니다.

오른쪽은 ASP.NET 2.0 AJAX Extensions라는 이름으로 제공되는 서버 측 프레임워크로서 Ajax 스타일의 웹 응용 프로그램 개발을 위한 서버 컨트롤과 기존 ASP.NET 2.0의 웹 폼 페이지 프레임워크 및 Membership 서비스나 Profile 서비스와의 연동을 위한 기능들이 추가되어 있습니다. 

또한 이런 페이지 프레임워크나 다양한 응용 프로그램 서비스들이 서버와 클라이언트 사이에서 서로 묶여서 동작할 수 있도록 하기 위한 응용 프로그램 브릿지나 웹 서비스 브릿지 등이 포함되어 있습니다.

ASP.NET AJAX 설치하기

그럼 이제 ASP.NET AJAX를 설치해 볼까요? 방법은 매우 간단합니다. ASP.NET AJAX 공식 웹사이트를 방문해서 다운로드 링크를 클릭하기만 하면 됩니다. 다운로드 된 파일을 더블 클릭해서 설치를 진행하신 후 늘 그랬듯이 [Next] 버튼만 눌러주시면 알아서 설치가 완료됩니다.

ASP.NET AJAX의 설치가 완료되면 이제 우리의 친구 Visual Studio 2005를 실행해 볼 차례군요. Visual Studio 2005를 실행해 보면 아래 그림과 같이 Visual Studio 2005의 새 웹 프로젝트 대화 상자에 "ASP.NET AJAX-Enabled Website"라는 이름의 템플릿이 생성된 것을 보실 수 있습니다.

그림 2: 새 웹 사이트 대화 상자의 템플릿

img2

ASP.NET AJAX Futures CTP

ASP.NET AJAX의 RC 버전이 발표되면서 갑작스레 나타난 녀석이 있었으니 그넘이 바로 ASP.NET AJAX Futures 입니다. 이는 현재 개발이 거의 완료된 부분과 아직 그렇지 못한 부분을 서로 분리하기 위해 생겨난 녀석입니다. ASP.NET AJAX의 공식 웹사이트를 보면 Futures는 ASP.NET AJAX 1.0의 핵심 컴포넌트를 확장하는 기능으로 아직 개발이 진행 중인 부분이라고 나와 있습니다. 이 녀석도 당연히 다운로드 해서 같이 설치해 두면 좋겠지요?

ASP.NET AJAX 도움말 사이트의 Features Matrix를 보시면 ASP.NET AJAX 1.0의 기능과 ASP.NET AJAX Futures에 어떤 기능상의 차이가 있는지를 한 눈에 보실 수 있는 표가 있습니다.

ASP.NET AJAX Control Toolkit

ASP.NET AJAX Control Toolkit은 MS의 커뮤니티 사이트인 CodePlex에서 진행되는 오픈 소스 프로젝트입니다. 이 프로젝트는 ASP.NET AJAX를 기반으로 여러 가지 기능을 담당할 ASP.NET AJAX 서버 컨트롤들을 구현하는 프로젝트로 완전히 새롭게 만들어진 컨트롤들과 기존의 ASP.NET 서버 컨트롤의 기능을 확장하는 Extender들이 구현되어 있습니다.

더군다나 소스까지 착하게 공개하고 있으므로 다운로드해서 살펴보시면 ASP.NET AJAX를 이해하는데 많은 도움이 될 것입니다.

다음 시간에는 간단한 ASP.NET AJAX 웹사이트를 구현해 보면서 ASP.NET AJAX를 한걸음씩 따라잡아 보겠습니다.

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