ASP.NET 弹出控件

• 下载演示项目 (C# 和 VB.NET) - 38.2 KB
• 下载带源代码的控件 - 37.7 KB
• 下载控件文档 - 71.1 Kb

• 在线示例 [^]。

引言

本文介绍了一个 ASP.NET 弹出控件。该控件模仿 MSN Messenger 的提示，但它是为在网页中使用而设计的。可以通过使用预定义的样式之一或修改控件中使用的所有颜色来完全更改该控件的图形外观。控件支持拖放，因此用户可以将其移动到页面上的任何位置。

此控件的一个非常重要的特性是，它可以用于当前大多数浏览器。已在最新版本的 Mozilla、Internet Explorer 和 Opera 上进行了测试。在不支持滤镜的浏览器上，控件的外观会有所不同（滤镜仅支持较新版本的 MSIE）。您还可以将 HTML 用于控件的许多属性，因此您可以获得带有图标或其他任何内容的弹出窗口。

Actions

控件有两个事件：LinkClicked（点击了弹出窗口中的链接）和 PopupClosed（用户点击了弹出窗口中的“X”按钮）。可以通过三种方式处理这些事件。使用哪种方法取决于 ActionType 属性。可以有以下三种类型的操作：

• MessageWindow（默认）- 如果选择了此操作，控件将使用 Text 属性指定的文本打开一个新的浏览器窗口。
• OpenLink - 在这种情况下，控件允许您执行任何 JavaScript 操作或打开指向任何其他页面的链接（Link 属性）。您还可以更改生成的 <A> 标签的 target 属性。生成的代码将如下所示：<a href="[Link]" target="[LinkTarget]">Link..</a>，因此在使用 Link 中的引号时要小心。（仅当 LinkTarget 不是空字符串时，才会添加 Target 属性。）
• RaiseEvents - 选择此选项后，弹出控件将在服务器端引发 LinkClicked 或 PopupClosed 事件。

使用此控件

将控件添加到网页非常简单。在 VS.NET 中，您可以使用“添加/删除工具箱项”，然后选择控件的 DLL 文件。控件将出现在工具箱中，然后您可以将其添加到页面。

设计器

控件对设计器具有丰富的支持，因此您可以在设计时更改控件的每个属性。在“Action”类别中，您可以定义用户单击链接或关闭弹出元素时控件应执行的操作。在“Texts”和“Design”类别中的属性允许您修改控件的外观和显示的文本。在“Behavior”中，您可以更改计时（弹出窗口显示和隐藏的时间）。AutoShow 属性指示控件是否在页面加载后显示。这在您希望稍后使用 Anchor 控件显示控件时很有用。如果将 DragDrop 设置为 true，用户可以更改控件的位置并在页面上移动它。“Window”类别允许您更改在将 ActionType 设置为 MessageWindow 时出现的窗口的属性。最后一个属性添加到“Layout”类别，这使得修改窗口显示的位置成为可能（从窗口的左下角或右下角偏移）。

代码

以下代码描述了如何更改一些属性并从代码中显示弹出控件

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

使用锚点控件

设计器

在设计时将锚点控件添加到页面与添加弹出控件类似。当您将锚点添加到页面时，可以选择现有服务器端控件的 ID，或写入任何其他元素的 ID，并选择您要处理的客户端事件。如果您只想重新打开弹出窗口，则无需执行其他任何操作。您只需确保弹出窗口控件会呈现到输出页面（它必须可见）。如果您不想在页面加载时打开弹出窗口，请将 AutoShow 设置为 false，则在发生指定事件后弹出窗口将打开。

您还可以使用 PopupWinAnchor 更改弹出控件上的文本。要执行此操作，请将锚点控件的 ChangeTexts 属性设置为 true。如果选中此项，当客户端事件被引发时，锚点控件将把弹出窗口的标题更改为 NewTitle，消息更改为 NewMessage，新浏览器窗口中的文本更改为 NewText。

代码

以下示例显示了如何使用 PopupWinAnchor 控件重新打开已关闭的弹出控件

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

在运行时创建控件

在运行时创建控件时曾出现过问题。这在最新版本中已修复，这里有一个示例，说明如何创建带 PopupWinAnchor 控件的 PopupWindow 控件。以下代码将创建一个弹出窗口，该窗口将在用户点击 spanReopen 元素后显示（使用 JavaScript）。（此示例假定您的页面上有一个名为 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="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;

谁可以使用它？

此控件非常适合通知用户重要信息。例如，在 Web 电子邮件客户端中，您可能希望通知用户有新消息。在用户可以在系统内通信的应用程序中，您可以使用此控件来提醒用户有人想与他交谈。此控件的好处在于它不需要在网页上占用固定空间，而且非常醒目，用户一定会注意到它。另一种使用方式是在其中显示广告信息，而不是使用大型 Flash 动画（请参阅 CodeProject 横幅的在线演示）。

锚点控件使得弹出控件的使用速度更快，页面刷新次数更少。例如，您可以使用弹出控件在表单字段上显示快速帮助，就像在此示例中一样。当文本框获得焦点时会显示快速帮助。另一种使用快速帮助的方法是在每个文本框后面添加一个按钮，当用户单击该按钮时，将显示弹出窗口。

历史

• 20/04/2004 - 添加了 PopupSpeed（您可以更改弹出窗口的滑动速度）。
• 20/04/2004 - 修复了几个小的 bug。添加了一个展示如何在运行时生成控件的示例。
• 26/02/2004 - 添加了 ShowLink 属性（允许不在弹出控件中生成链接）。
• 11/30/2003 - DLL 编译了 .NET 1.0 和 .NET 1.1 版本，修复了 OpenLink 错误，添加了拖放支持，添加了 VB.NET 示例（1.2）。
• 11/18/2003 - 添加了 PopupWinAnchor（1.1）。感谢 Oskar Austegard 的建议。
• 11/15/2003 - 第一个版本（1.0）