ASP.NET Popup Control

Introduction

 

这篇文章介绍的是一个ASP.NET popup control。这个 control模仿了MSN Messenger alert，只不过它是用于web page上的。 我们可以通过事先定义好的styles或直接更改颜色来变换它的界面。另外，这个control还支持拖拽，你可以将它移动到页面的任何地方。

这个control的一个非常重要的特性是它可以用于大部分浏览器。在最新版本的Mozilla、Internet Explorer和Opera上都做过测试，在那些不支持filters的浏览器上的显示可能不尽相同（只有MS最新版本的IE才支持filters）。

 

Actions

 

这个control有两个events， LinkClicked (当popup中的link被点击时) 和PopupClosed (当点击popup右上角的'X'按钮时)。共有三种方法来处理这两个events，具体调用哪种方法，要根据ActionType 属性。下面是这三种行为：

• MessageWindow (默认) – 如果执行这个action，就会新开一个窗口，窗口中显示由Text属性所指定的信息。
• OpenLink – 这种情况下，你可以执行任何JavaScript脚本或者通过打开链接转向其它页面 (Link 属性)。你也可以通过<A> 标记更改target 属性。代码形式如下：<a href="[Link]" target="[LinkTarget]">Link..</a>，不过在使用引号的时候要小心些。 (Target 属性只有当LinkTarget 不为空时才使用。)
• RaiseEvents – 这种情况下，popup control 会在server端触发LinkClicked 或者 PopupClosed 事件。

 

Using this control

 

把这个control加到一个web page中非常简单。在VS.NET中，只需要用Add/Remove Toolbox Items 并且选择control的DLL文件，在toolbox中就会出现这个control了，这样你就可以把它加到一个page中了。

 

Designer

 

这个control为设计者提供了丰富的支持，因此你可以在设计阶段任意更改它的每一个属性。在'Action'里，你可以自己定义当用户点击popup中的link或close时的操作， 可以通过'Texts' 和'Design'中的属性更改control的显示界面。你还可以更改popup显示的时间（即多长时间后消失）。 AutoShow 属性表示是否在页面被load的时候显示。这个对于你想用Anchor control稍后显示control时非常有用。如果你把DragDrop 设成true， 用户就可以在页面上移动control的位置。 你可以通过'Window'下的属性来设置popup窗口的属性当把ActionType 设成MessageWindow 的时候。最后还有一个'Layout' ，来控制popup window的显示位置（窗口的左下或右上等）。

 

 

Code

 

下面的代码演示了如何通过设置一些属性来达到显示不同风格的popup window：

<!-- 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;

 

Using anchor control

 

Designer

 

在设计阶段往page中加anchor control跟加popup control差不多。当添加anchor的时候，你可以选择server端已经存在的control ID，或者为其它的element添加ID，然后在client端为其添加event来处理。如果你只想重新打开popup，那么就不需要做其它的事情了。只需要保证popup window control会在页面上显示就行了。如果你不想在页面load的时候显示popup window，只要将 AutoShow 设置成 false 就行了。

你可以通过PopupWinAnchor来更改popup control上的texts。不过要先把ChangeTexts 设置成true。 如果是这样，当client端的event被触发时，anchor control 就会把popup的title更改成 NewTitle，message 更改成NewMessage，text更改成NewText。

 

Code

 

下面的代码演示了PopupWinAnchor control 是如何使用的：

<!-- 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 onclick event ..

popupAnchor.HandledEvent="onclick";

// .. 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

 

在runtime时创建controls会出现一些问题，不过这个bug已经在最新版本中解除了，并且还有个在runtime时如何用PopupWinAnchor创建PopupWindow的例子。下面的代码演示了在用户点击spanReopen后创建一个popup window。（假设在页面上有一个spanReopen 的element）。

// 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="onclick";

 

// 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;

 

Who can use it ?

 

这个control 可以用于通知用户一些重要的信息。比如，在一个email客户端，就可以通知用户一些新的消息等。在那些用户可以在系统内交流的应用程序中，也可以用这个control来提示用户，有人想和你交谈等。这个control的好处是，它不需要任何固定的空间而且是可标记的，因此用户可以注意到它。另一个用途是可以用它来代替大的Flash动画展示广告信息。(参看 online demo CodeProject banner广告)。

Anchor control 可以使减少页面的加载时间。例如，你可以用它来显示一些快速帮助信息，就象 这个例子。 另一种方式是在每一个textbox上面加按钮，当用户点击按钮时再显示popup window。

 

History

• 20/04/2004 – 增加 PopupSpeed (可以更改popup window的显示和隐去的速度)。
• 20/04/2004 – 修改了一些小bugs。象在runtime时创建control时出错等。
• 26/02/2004 – 增加 ShowLink 属性。
• 11/30/2003 – 实现可以在 .NET 1.0 和 .NET 1.1下编译，修正OpenLink错误，增加Drag & drop support, VB.NET(1.2)。
• 11/18/2003 – 增加 PopupWinAnchor (1.1)。

11/15/2003 – 第一个版本 (1.0)

原文地址：http://www.codeproject.com/aspnet/asppopup.asp