보통 웹 사이트에서 우편번호를 검색할 때 팝업 창으로 많이 활용합니다.
이런 식으로 주소창이 뜨게 되죠.
요즘같이 브라우저에 팝업 차단기능이 있는 시대에는 굉장히 뒤떨어진다고나 할까요...
이 기능을 AJAX Toolkit의 Modal 팝업을 이용하여, 만들어 보겠습니다.
뭐...그리드 뷰에 데이터베이스 바인딩하고 이런 문제는 생략하겠습니다.
아신다는 가정하에..ㅋ
나중에 시간이 나면 포스팅 하도록 하죠.
일단 업데이트 패널을 2가지 만듭니다.
위쪽 사진이 보여질 화면(최초 페이지 로딩 시)
아래쪽 화면이 검색하면 보여질 모달 윈도우 입니다.
두 가지를 각각Update Panel 로 묶어 주시고
아래쪽 패널은 Visible 속성을 False 로 하여 보이지 않게 합니다.
다음 과정으로 우편번호 검색 버튼에 Extender 를 추가해주시면 되겠습니다.
그 다음에 속성에서 사진에서 진한색으로 표현되어 있는 부분을 고쳐주시면 되겠습니다.
Modal_Back 부분은 스타일입니다.
배경이 아무래도 검은색 투명으로 하면 간지나기 때문에 적용했습니다.
이 부분이 cs파일 소스입니다.
우편번호 검색에서 중요한건 클릭할때 뿐이기 때문에 클릭할때의 소스 빼고는 중요한 점이 없죠.
업데이트할 폼뷰의 텍스트 박스 컨트롤을 가져와서 넣어 줍니다.
이제 굉장히 중요한 부분입니다.
위쪽 패널. 그러니까 팝업으로 뜰 패널 말고 회원 가입 패널은 UpdateMode에서 Conditional로 바꾸어야 합니다.
이걸 안해주면 모달 창에서 버튼을 누를 때마다 페이지가 PostBack 되어서 페이지가 새로 로드되게 되므로...망합니다. 모달창이 꺼져버리게 되죠.
마지막으로 트리거 속성을 선택해보면, [...]이라는 버튼이 있습니다. 이 버튼을 클릭해서 이벤트를 선택해주면...주소를 클릭했을 때 페이지가 PostBack 되면서 모달 윈도우가 꺼지게 됩니다.
이제 결과를 보면....
이런 페이지가 완성되었습니다!
ASP.NET를 하면서 처음 만들어 본 컨트롤이라 굉장히 보람차네요.
앞으로 개발하면서 자주 업데이트 해야겟습니다. 한국에는 의외로 ASP.NET자료가 적어서...
