ASP.NET AJAX 프레임워크를 사용하여 HTML Map 컨트롤 확장

이제 웹 메소드를 작성하세요.

인용문은 다음과 같습니다.
[웹방법]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
공개 문자열 GetAreaInfo(문자열 영역)
{
반환 지역;
}

권위 있는 출처의 조언에 따르면 보안상의 이유로 우리는 일반적으로 HttpPost(또는 HttpGet= false)를 사용하여 웹 메서드에 액세스합니다. 그런 다음 반환된 데이터 형식을 JSON 형식(기본 모드는 JSON 모드)으로 구성합니다.

단순화를 위해 여기서 GetAreaInfo 메서드는 입력 매개 변수와 동일한 값을 반환하지만 실제 개발에서는 데이터베이스에서 데이터를 검색하기 위해 여기를 바꿔야 합니다.

지금까지 우리는 AJAX를 사용하여 클라이언트에서 호출되는 웹 서비스를 성공적으로 만들었습니다.

그러나 아래와 같이 페이지의 서버 제어 ScriptManager에 대한 몇 가지 적절한 구성도 수행해야 합니다.

다음은 인용된 부분입니다.

<서비스>

여기서는 노드 아래에 서비스 참조만 추가했지만 그 역할은 무엇입니까?

생성된 HTML 소스 코드를 분석하면 위 구성은 다음 콘텐츠를 생성합니다.

다음은 참조 조각입니다.

여기의 스크립트 태그는 JavaScript 파일 LocationService.asmx/jsdebug를 참조합니다. 실제로 이것은 웹 서비스 프록시 클래스입니다. 이 프록시 클래스를 통해 클라이언트에서 서버측 웹 서비스를 비동기적으로 호출할 수 있습니다.

더 흥미로운 점은 위에 표시된 경로를 브라우저에 복사하면 런타임 시 AJAX 환경에서 생성된 JavaScript 파일을 볼 수 있다는 것입니다. 이 파일을 사용하면 스크립트 서비스 호출을 사용할 수 있습니다. 프록시 클래스에 대해서는 심도 있게 논의하지 않겠습니다.

다음으로 사용자 정의 클라이언트 클래스를 생성하는 방법을 살펴보겠습니다.

4. 클라이언트 측 사용자 정의 클래스 생성

우리는 ASP.NET AJAX 프레임워크의 주요 "발명" 중 하나가 개체 지향 JavaScript 프로그래밍 모델을 도입했다는 점을 알고 있습니다. 이제 JavaScript 디자인 패턴의 도움으로 우리는 쉽게 자신만의 템플릿이나 클래스를 만들고, 상속 개념을 추가하고, 인터페이스와 열거형을 만드는 등의 작업을 할 수 있습니다.

이 기사에서는 이 예제에 필요한 모든 기능을 캡슐화하는 클라이언트 클래스를 개발할 것입니다.

이제 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 ImageMap이라는 새 JavaScript 파일을 추가합니다. 이 파일에서는 새로운 네임스페이스 MyServices를 정의합니다. 이 네임스페이스에는 우리가 개발할 클라이언트 클래스가 포함됩니다. 아래와 같이:

다음은 인용문의 일부입니다.
Type.registerNamespace("MyServices");

다음으로 생성하려는 클라이언트 클래스의 생성자를 정의합니다.

참조 조각은 다음과 같습니다.

MyServices.Location = function (uiElement, uiBody) {
MyServices.Location.initializeBase(this);
this._uiElement = uiElement;
this._uiBody = uiBody;
this._xAxis = 0;
this._yAxis = 0;
}

템플릿이나 클래스 생성자는 일반적인 JavaScript 함수에 지나지 않습니다. 이 생성자에는 uiElement와 uiBody라는 두 개의 매개변수가 있습니다.

두 매개변수 모두 페이지에 표시되는 팝업 창을 설명하는 데 사용됩니다. 다른 두 개인 변수 _xAxis 및 _yAxis는 팝업 창의 표시 위치를 설명하는 데 사용됩니다. 일반적으로 생성자에서 모든 전용 멤버를 선언하는 것이 가장 좋습니다.

다음으로 프로토타입 디자인 패턴을 사용하여 이 클래스의 멤버 함수와 속성을 작성합니다.

참조 부분은 다음과 같습니다.

MyServices.Location.prototype =
{
get_uiElement: 함수()
{
this._uiElement를 반환합니다.
},
set_uiElement: 함수(값)
{
this._uiElement = 값;
},
get_uiBody: 함수()
{
this._uiBody를 반환합니다.
},
set_uiBody: 함수(값)
{
this._uiBody = 값;
},

여기서 UI 요소 속성 메서드의 정의는 .NET의 다양한 언어의 정의 형식과 매우 유사합니다.

다음 멤버 함수는 우리의 초점이며 원격 웹 서비스 호출을 담당합니다.

다음은 참조 부분입니다.
ShowPopupinfo: 함수(이벤트, 지역 이름)
{
MyServices.LocationService.GetAreaInfo(areaName,
Function.createDelegate(this, this.OnCompleted),
this.OnError, //오류 처리를 담당하는 콜백 함수
this.OnTimeOut); //타임아웃 처리를 담당하는 콜백 함수
this._xAxis = event.clientX;
this._yAxis = event.clientY;
}

위의 코드는 클라이언트에서 웹 서비스를 호출하는 매우 일반적인 방법을 보여줍니다.

1) 이 양식은 일반 로컬 메서드를 호출하는 것만큼 편리합니다.

2) Function.createDelegate 함수는 ASP.NET AJAX 클라이언트 개발 전역에서 매우 중요합니다. 기능. 이 함수를 만든 원래 목적 중 하나는 이 키워드의 문제를 해결하는 것이었습니다. DOM 요소에 의해 트리거되는 이벤트 핸들러에서 this 키워드는 항상 클래스 자체가 아닌 DOM 요소를 참조합니다. 하지만 여기서 이 함수를 사용하는 이유는 AJAX 환경이 웹 서비스를 트리거한 동일한 클래스 인스턴스에서 성공 시 콜백 함수를 호출하기 때문입니다. 이는 클라이언트 클래스의 속성과 메서드를 참조해야 할 때 매우 중요합니다. 즉, 이 기능을 사용하면 웹 서비스를 호출하는 클라이언트 클래스의 속성과 메서드에 안전하고 정확하게 액세스할 수 있습니다. 그렇지 않으면 웹 서비스의 응답이 다른 컨텍스트에서 실행되기 때문에 비동기 호출을 수행하는 클라이언트 클래스 인스턴스는 null이 됩니다. 이 컨텍스트는 더 이상 비동기 웹 호출 요청이 이루어진 컨텍스트와 동일하지 않습니다.

3) 흥미롭게도 여기서 GetAreaInfo 메서드는 이전에 만든 웹 서비스의 메서드가 아니라 런타임에 생성된 웹 서비스 프록시 클래스에 속합니다. 이 프록시 클래스는 서버 측에서 ASMX 웹 서비스에 액세스하기 위한 클라이언트 프록시 역할을 합니다. .

위 ShowPopupInfo 함수의 코드 마지막 두 줄에서는 이벤트의 입력 매개변수를 사용하여 두 개의 개인 변수 xAxis 및 yAxis의 값을 설정합니다. 여기서 우리의 목표는 사용자가 클릭한 위치에 최대한 가깝게 팝업을 표시하는 것입니다.

다음은 호출 성공 시 해당 콜백 함수의 구현 코드입니다.

다음은 참조 조각입니다.

OnCompleted: function(result, userContext, methodName)
{
var uiElement = $get(this.get_uiElement());
var uiBody = $get(this.get_uiBody());
if (uiBody != null)
{
var textNode = uiBody.firstChild;
if (!textNode)
{
textNode = document.createTextNode(결과);
uiBody.appendChild(textNode);
}
또 다른
{
textNode.nodeValue = 결과;
}
if (uiElement != null)
{
uiElement.style.visibility = "표시";
uiElement.style.display = "인라인";
uiElement.style.left = this._xAxis + "px";
uiElement.style.top = this._yAxis + "px";
}
}
},

내용은 매우 간단합니다. 서버에서 반환된 데이터를 팝업 창의 표시 내용으로 설정하고 이 창이 상황에 따라 표시되는지 확인합니다.

클라이언트 클래스 생성이 끝나면 클라이언트에서 액세스할 수 있도록 AJAX 프레임워크에 이를 클라이언트 측에 등록하도록 지시해야 합니다.

인용문은 다음과 같습니다.
MyServices.Location.registerClass("MyServices.Location");

이 시점에서 클라이언트 클래스 MyServices.Location이 성공적으로 생성되었습니다. 그렇다면 어떻게 사용하나요?

먼저 페이지가 로드될 때 클라이언트 클래스의 새 인스턴스를 정의해야 합니다. 이렇게 하려면 pageLoad 함수를 프로그래밍해야 합니다.

다음은 인용문입니다.
var 위치 = null;
function pageLoad(sender, args) {
location = new MyServices.Location("modal", "modalBody");
위치.HidePopupInfo();
}

위 코드는 단순히 MyServices.Location 클래스의 새 인스턴스를 만듭니다. 그런 다음 클라이언트 클래스의 멤버 함수 중 하나를 호출하여 페이지에서 팝업 창을 숨깁니다. pageLoad 함수에서 클라이언트 클래스의 인스턴스를 생성하는 이유는 AJAX 환경 제어 흐름이 pageLoad 함수에 도달하면 모든 AJAX 클라이언트 및 사용자 정의 JavaScript 코드가 성공적으로 로드되었기 때문입니다. 따라서 현재 우리는 모든 사용자 또는 시스템 정의 JavaScript 코드에 안전하게 액세스할 수 있습니다.

몇 가지 다른 도구 기능은 상대적으로 간단하므로 여기서는 자세히 설명하지 않습니다.

5. 요약

이 기사에서는 AJAX 서비스를 생성하고 사용자 정의 클라이언트 클래스를 생성하여 HTML 맵 컨트롤을 확장하는 방법을 보여주었습니다. 확장된 컨트롤에서는 이미지의 특정 영역을 클릭하면 전체 웹 페이지를 새로 고치지 않고도 새로운 AJAX 방식을 통해 관련 세부 정보를 제공할 수 있습니다. 대부분의 웹 애플리케이션에서는 이 Map 컨트롤을 거의 사용하지 않지만(이 때문에 VS2005 도구 모음에서는 생략됨) 많은 수의 그림, 이미지 및 지도 작업과 관련된 웹 애플리케이션을 개발하는 경우 AJAX 변환 후 Map 컨트롤이 이 기사에 따르면 컨트롤은 확실히 웹 애플리케이션을 더욱 다채롭게 만들어줄 것입니다.

[첨부] 본 글의 소스코드 디버깅 환경: Windows XP Professional Edition + Visual Studio 2005 + ASP.NET AJAX 1.0.