패왕넷

AJAX Dirty-Panel

머리말

긴 데이터 항목 폼에 입력을 다했는데 갑작스럽게 브라우저가 닫혔다거나 다른 페이지로 이동되어버려 저장 버튼을 누르는 걸 잊어버렸다고 매번 말하는 사용자들을 경험해본 적이 있는가? 이러한 상황에 대해서는 하도 여러 번 들어서, 사용자에게 "그러게, 폼에 입력할 때에는 좀더 주의를 기울였어야지요."라는 식으로 말하라고 종종 그러곤 한다. 물론, 그들의 용어를 사용하여 말하지는 않았지만, 이게 그들이 대답할 수 있는 유일한 방식이다.

사실, 고전적인 ASP.NET 폼에서 변경된 필드의 트랙을 유지하는 건 쉬운 작업이 아니다. 포스트백(postback)은 onbeforeunload 이벤트를 매번 발생시켰지만, 포스트백이 의도적이든 그렇지 않든 간에 해결책의 일반적인 방식은 아니다. 그래서 이를 관리하는 사용자지정 자바스크립트를 많이 작성해야만 했다.

지금의 AJAX 세상에서는 제한이란 옛 말이다. 100% "ajaxfied" 페이지를 가지고 있다면, onbeforeunload 이벤트는 사용자가 실제로 페이지를 떠났을 때에만 발생한다. 이는 우리의 삶을 매우 편하게 해준다.

이 Panel은 컨트롤이 변경되고 데이터를 저장하기 전에 페이지를 떠나려고 하면 자동적으로 감지하여 경고창을 보여주도록 한다.

샘플 페이지를 보려면 여길 눌러라.

코드사용

여기서도 AJAX 기능을 부여하기 위해 Anthem.NET 라이브러리를 사용하였다. 이 웹컨트롤은 Anthem Panel에서 상속받는다. 그래서 어떤 작업을 해야 한다면 panel안에 모든 데이터 항목 컨트롤을 집어넣고 속성 OnLeaveMessage을 설정해야 한다. 이 속성은 사용자가 내용을 변경하지 않고 페이지를 떠나려고 할 때 보게 되는 메시지에 부합한다. 사용자가 실제로 저장 버튼을 누를 때 panel에 새로운 값을 저장했다고 알려줄 필요가 있다 그래야 사용자가 페이지를 떠나도 경고창을 보여주지 않는다. 이 작업은 데이터가 저장될 때 panel의 Reset 메서드를 호출하여 완료한다.

다운로드 파일은 웹컨트롤과 샘플 페이지를 포함하고 있다.
 

맺는말

이건 사용하는데 간편하게 해주면서 웹 어플리케이션의 사용성을 강화시킬 수 있는 매우 유용한 웹컨트롤이다.

이걸로 즐기기를 바란다.

출처 : http://www.codeproject.com/Ajax/AJAXdirty-panel.asp

관련 파일 :

DirtyPanel.zip

이 글은 고수닷넷, 데브피아, 훈스닷넷에도 게시되었습니다.