ASP.NET Popup Control

All Topics, .NET, C#, ASP.NET >> ASP.NET >> Custom Controls http://www.codeproject.com/aspnet/asppopup.asp ASP.NET Popup Control By Tomas Petricek Highly customizable xxxxJavaScript popup control for web page wrapped in ASP.NET custom control.   ASP.NET, C#, JScript Windows, .NET (.NET 1.1) Win32, VS Dev   Posted 15 Nov 2003   Updated 22 Apr 2004 239,305 views Download demo project (C# and VB.NET) - 38.1 Kb Download control with source - 37.7 Kb Download control documentation - 71.1 Kb 소개 이 기사는 ASP.NET 팝업 컨트롤을 설명합니다. 이 컨트롤은 MSN Messenger alert을 모방합니다. 그러나 이것은 웹페이지를 위해서 디지인되어 있습니다. 이 컨트롤의 그래픽적인 표현은 컨트롤의 모든 색상을 이용해서 바꾸거나 미리 정의된 색상의 스타일을 사용함으로써 구현할 수 있습니다. 컨트롤은 Drag&Drap를 지원함으로써 사용자는 페이지에 컨트롤을 원하는 곳으로 이동할 수 있습니다. 이 컨트롤의 매우 중요한 특징은 현재 많이 사용하고 있는 브라우져에서 통용될 수 있다는 겁니다. 모질라(Mozilla), 인터넷익스클로러(Internet Explorer), 오페라(Opera) 버전에서 테스트되었습니다. 이 컨트롤은 필러(MSIE의 새로운 버전만 제공된다)가 제공되지 않는 브라우져에서는 다릅니다. 여러분은 또한 많은 컨트롤의 속성에 HTML을 사용하여 원하는 곳에 아이콘과 함께 팝업을 구현할 수 있습니다. Actions 이 컨트롤은 두개의 이벤트를 가지고 있습니다. LinkClicked은 팝업의 링크를 클릭했을 때 발생하는 것이고, PopupClosed은 사용자가 ‘X’버튼을 클릭했을 때 발생하는 이벤트입니다. 이 이벤트들을 처리하는 방법은 세가지가 있습니다. ActionType속성의 의해서 정해진 메서드를 사용합니다. 세가지 타입의 특징이 있습니다. MessageWindow(default) – 이 액션이 선택되어질 때 컨트롤은 Text속성에 지정되어진 텍스트를 나타내는 새로운 윈도우 브라우져를 열게됩니다. OpenLink – 컨트롤은 xxxxJavascript 기능을 허용하거나 어떤 다른 페이지(Link 속성)를 열게 됩니다. 여러분은 또한 <A>태그를 발생시켜서 바꿀 수도 있습니다. 발생시키는 코드는 아래와 같습니다. <a href=”[Link”] target”[LinkTarget]”>Link…</a> (Target 어트리뷰트는 단지 LinkTarget이 공백이 아닐때만 추가됩니다.) RaiseEvents – 여러분이 이 옵션을 선택할 때, 팝업 컨트롤은 서버사이드에서 LinkClicked이나 혹은 PopupClosed 이벤트를 발생시킬겁니다. 컨트롤의 사용(Using this Control) 웹페이지에 컨트롤을 추가하는 것은 아주 간단합니다. VS.NET에서 툴박스의 추가/제거를 사용하여 컨트롤의 DLL파일을 선택하면 됩니다. 컨트롤은 툴박스에 나타나고 여러분은 페이지에 컨트롤을 추가하변 됩니다. 디자이너(Designer) 컨트롤은 디자이너에서 많은 것을 제공하는데 여러분은 디자인타임(Design-time)에 컨트롤의 많은 속성을 바꿀수 있습니다. ‘Action’카테고리에서 여러분은 사용자가 링크나 클로즈팝업요소를 클릭할 때 컨트롤이 수행해야만 하는 것을 정의할 수 있습니다. ‘Texts’와 ‘Design’ 카테고리의 속성은 여러분이 컨트롤을 수정하거나 메시지를 보여주게끔 해줍니다. ‘Behavior’카테고리에서 컨트롤을 보여줄지 말아야 할지 그 시점을 바꿀 수 있습니다. AutoShow 속성은 컨트롤이 페이지 로드 후에 보여줄지 말아야 될지를 나타냅니다. 만약 여러분이 DragDrop을 true로 설정했다면, 사용자는 컨트롤의 위치를 페이지위에서 바꿀 수 있습니다. ‘Window’ 카테고리는 MessageWindow의 ActionType 설정에 나타나는 윈도우의 속성을 바꿀 수 있게 합니다. 마지막 속성은 ‘Layout’카테고리에 추가됩니다. 그리고 그것은 윈도우가 나타나는 위치를 수정할 수 있게 합니다. – 윈도우 가장자리는 bottom-left나 bottom-right로부터 위치 Code 몇 개의 속성을 바꾸어서 나타나는 팝업 컨트롤의 코드를 보여줍니다. <!-- Popup.aspx --> <%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web"   Assembly="EeekSoft.Web.PopupWin" %> <cc1:popupwin id="popupWin" runat="server" visible="False"   colorstyle="Blue" width="230px" height="100px" dockmode="BottomLeft"   windowscroll="False" windowsize="300, 200"></cc1:popupwin> // Popup.aspx.cs // Change action type popupWin.ActionType=EeekSoft.Web.PopupAction.MessageWindow; // Set popup and window texts popupWin.Title="This is popup"; popupWin.Message="<i>Message</i> displayed in popup"; popupWin.Text="Text to show in new window.."; // Change color style popupWin.ColorStyle=EeekSoft.Web.PopupColorStyle.Green; // Change timing popupWin.HideAfter=5000; popupWin.ShowAfter=500; // Show popup (after page is loaded) popupWin.Visible=true; anchor 컨트롤 사용(Using anchor control) 디자이너(Designer) 디자인타임(Design-time) 페이지에 anchor 컨트롤을 추가하는 것은 팝업 컨트롤을 추가하는 만큼 간단합니다. 여러분인 페이지에 anchor를 추가할 때, 존재하는 서버사이드 컨트롤의 ID르 선택할 수 있습니다. 혹은 다른 어떤 요소에 ID를 쓰거나 여러분이 처리하고자 하는 클라이언트사이드 이벤트를 선택할 수도 있습니다. 만약 여러분이 단지 팝업을 다시 열고 싶다면, 어떤 다른 액션이 필요가 없습니다. 여러분은 팝업윈도우 컨트롤이 아웃풋페이지(보여져야만 하는 페이지)에 랜더되는지 확인해야만 합니다. 만약 페이지가 로드될때 팝업이 오픈되게 하고 싶지 않다면, AutoShow를 false로 설정하게 되면 팝업은 이벤트가 발생한 후에 열릴 것입니다. 여러분은 또한 PopupWinAnchor를 사용하여 팝업 컨트롤의 텍스트를 바꿀 수 있습니다. 이렇게 하기 위해서는 anchor컨트롤의 ChangeText 속성을 true로 설정하십시오. 만약 이것이 선택되었다면 클라이언트사이드 이벤트가 발생될때 anchor 컨트롤은 NewTitle에 팝업제목과 NewMessage의 메시지 그리고 NewText에 새로운 브라우져 윈도우의 텍스트가 바뀔것입니다. code <!-- Anchor.aspx --> <%@ Register TagPrefix="cc1" Namespace="EeekSoft.Web"   Assembly="EeekSoft.Web.PopupWin" %> <cc1:popupwin id="popupWin" runat="server" visible="False"   colorstyle="Blue" width="230px" height="100px" dockmode="BottomLeft"   windowscroll="False" windowsize="300, 200"></cc1:popupwin>   <cc1:popupwinanchor id="popupAnchor" runat="server"   changetexts="False"></cc1:popupwinanchor> <span id="spanReopen"> Click here to reopen popup ! </span> // Anchor.aspx.cs // Handle xxxxonclick event .. popupAnchor.HandledEvent="xxxxonclick"; // .. of spanReopen element popupAnchor.LinkedControl="spanReopen"; // Show popupWin when event occurs popupAnchor.PopupToShow="popupWin"; // Popup win is visible .. popupWin.Visible=true; // .. and will be displayed when page is loaded popupWin.AutoShow=true; 런타임에 컨트롤 만들기(Creating control at runtime) 런타임에 컨트롤을 만들때에 문제점이 있습니다. 이것은 최근 버젼에서 수정되었고, 런타임에 PopupWinAnchor 컨트롤과 함께 PopupWindow를 만드는 방법의 샘플이 잇습니다. 아래의 코드는 xxxxJavascript을 사용해서 보여지게되는 하나의 팝업 윈도우를 만들 것입니다. 그후에 사용자는 spanReopen 요소(element)를 클릭합니다.(이 샘플은 가정한것이고, 여러분은 페이지에서 spanReopen을 호출하는 요소를 가집니다.) // Create popup window and popup win anchor control (in Page_Load) PopupWin popupWin=new PopupWin(); PopupWinAnchor popupAnchor=new PopupWinAnchor(); // Add controls to page placeHolder.Controls.Add(popupAnchor);   placeHolder.Controls.Add(popupWin); // Set anchor properties popupAnchor.PopupToShow=popupWin.ClientID; popupAnchor.LinkedControl="spanReopen"; popupAnchor.HandledEvent="xxxxonclick"; // Set popup win properties popupWin.ActionType=EeekSoft.Web.PopupAction.MessageWindow; popupWin.Title="This is popup"; popupWin.Message="Message displayed in popup"; // Show popup popupWin.Visible=true; popupWin.AutoShow=false;