소개

ASP.NET AJAX의 ModalPopupExtender는 웹 애플리케이션에서 모달 팝업을 생성하는 강력한 도구입니다. 그러나 개발자가 자주 직면하는 한 가지 일반적인 문제는 모달이 표시될 때마다 특정 JavaScript 함수를 실행해야 한다는 것입니다. ModalPopupExtender는 취소 및 확인 이벤트를 처리하기 위해 OnCancelScript와 OnOkScript 속성을 제공하지만 OnShowScript 속도가 없어 약간의 불편함을 초래합니다.

이 블로그 포스트에서는 이 제한사항을 우회하는 방법을 살펴보고, 모달이 표시될 때 원하는 JavaScript가 원활하게 실행되도록 보장하는 방법을 알아보겠습니다.

문제점

모달 팝업이 나타날 때마다 특정 JavaScript 함수를 실행해야 할 필요가 있을 수 있습니다. 일반적인 시나리오는 모달 내의 텍스트 박스에 TinyMCE 에디터 같은 기능을 통합할 때입니다. TinyMCE는 텍스트 박스가 올바르게 초기화될 수 있도록 화면에 표시되어야 하므로, 초기화 스크립트를 적절한 시점에 트리거할 방법이 필요합니다.

해결책

모달이 표시될 때마다 JavaScript를 실행하려면 ModalPopupExtender에서 제공하는 shown 이벤트를 활용할 수 있습니다. 이 접근 방식은 더미 컨트롤이나 복잡한 우회 방법에 의존하지 않고도 더 깔끔한 통합을 가능하게 합니다.

해결책 구현하기

아래와 같이 설정하면 됩니다:

1. 페이지에 JavaScript 추가: 모달 팝업의 shown 이벤트에 JavaScript 함수를 연결해야 합니다. 이는 일반적으로 pageLoad 함수에서 수행할 수 있습니다.

2. 코드 예제: 아래는 이를 달성하는 방법을 보여주는 코드 스니펫입니다:

function pageLoad() {
    var popup = $find('ModalPopupClientID');
    popup.add_shown(SetFocus);
}

function SetFocus() {
    // 'TriggerClientId'를 실제 텍스트 박스의 ID로 바꿉니다
    $get('TriggerClientId').focus();
}

코드 설명

• pageLoad 함수: 이 함수는 페이지가 로드될 때 실행됩니다. $find를 사용하여 ModalPopupExtender의 클라이언트 ID를 통해 참조를 가져옵니다 (ModalPopupClientID는 자리 표시자이며 실제 ID로 바꾸어야 합니다).

• shown 이벤트 추가: add_shown 메소드를 사용하여 SetFocus 함수를 shown 이벤트에 연결합니다. 즉, 모달이 표시될 때마다 SetFocus 함수가 자동으로 실행됩니다.

• SetFocus 함수: 이 함수에서는 TinyMCE 에디터로 변환될 텍스트 박스에 포커스를 설정합니다. 텍스트 박스가 보이도록 하는 것은 TinyMCE가 문제 없이 올바르게 초기화될 수 있게 합니다.

결론

ModalPopupExtender의 shown 이벤트를 사용함으로써 TinyMCE 에디터 초기화와 같은 자원 요청에 필요한 JavaScript 실행을 원활하게 통합할 수 있습니다. 이 접근 방식은 코드를 단순화할 뿐만 아니라 JavaScript 함수가 올바른 순간에 실행되도록 보장합니다.

ASP.NET 애플리케이션에서 비슷한 요구 사항을 다루고 있다면, 모달 팝업과 JavaScript 통합이 어느 때보다 쉬워졌습니다. 행복한 코딩 되세요!