ASP.NET于web页面上弹出窗口

Highly customizable JavaScript popup control for web page wrapped in ASP.NET custom control.

remex1980 翻译于 2007-5-6 20:23:37

原作者： Tomas Petricek

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

ASP.NET弹出窗口
一个使用javascript编写的，用于在ASP.NET中弹出对话框的用户控件
 

介绍
这篇文章介绍了一个ASP.NET的窗口弹出控件。该控件模仿MSN 消息警告框的样式，但，它是运行于ASP.NET中的。该窗口的样式可以由用户完全控制，通过设置其颜色或预定义的窗口模式就可修改。该控件还支持窗口拖动，用户可以在窗口上的任一位置移动它。

另外一个很重要的特性是：该控件适用于多种浏览器。它已经在Microsoft IE，Mozilla Firefox和Opera上进行过测试。但它在不同浏览器上的外观并不完全一样，所以它还不支持filters （filters 仅仅在Microsoft IE最新版中才得到支持。）你可以得到它的HTML属性，因此，可以通过各种属性控制该控件。

以下使用popup代表弹出的对话框控件。

行为事件
该控件有两个事件， LinkClicked (当popup窗口被鼠标点击时的动作) 和PopupClosed (用户单击关闭按钮时的动作)。有三种方式如何处理这些事件。具体使用哪种是由ActionType 决定的。三种行为是：
1，MessageWindow (default) ，在这种情况下，用户控件会打开一个新的浏览窗口，在新的窗口中显示指定在Text 属性中的文字。
2， OpenLink，在这种情况下，控件允许你做任何 JavaScript 操作或打开链接导任何其它网页 (Link property). 你还可以改变<A>标签内的Target 属性。产生的代码如：<a href="[Link]" target="[LinkTarget]">Link..</a>，因此在链接中小心地使用双引号。（Target 属性只有在 LinkTarget 为空的时候才被加上去）
3，RaiseEvents 当你选择了这种模式，该控件的LinkClicked 或PopupClosed 事件将会被提升到服务器端执行。

使用方法
添加这个控件到网页上是很容易的，在Visual studio 开发环境中，你可以仅仅通过在控件工具栏上添加/删除新控件，然后选择本控件的DLL文件。这样，控件就会如普通的按钮、文本框一样，显示在toolbox 中，接下来的使用就是拖到页面上就可以了。

设计
控件对进一步的设计提供了很丰富的支持，你可以在设计过程中改变它的每一个属性。在Action属性目录下，你可以定义当控件被点击之后的具体动作。在Texts和Design属性目录中，你可以修改popup对话框的样式和显示的内容。在Behavior属性中，你可以改变控件被显示或隐藏的时间。AutoShow属性表明是否控件将在页面一被加载的时候就显示。如果你设置DragDrop为true用户还可以改变控件的位置，在页面上拖动该窗口。如果你把ActionType设置成MessageWindow，你可以通过Window属性目录改变最终显示的消息框的属性。最后一些属性位于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

// 改变动作类型

popupWin.ActionType=EeekSoft.Web.PopupAction.MessageWindow;

// 设置popup窗口文本

popupWin.Title="This is popup";

popupWin.Message="Message displayed in popup";

popupWin.Text="Text to show in new window..";

// 改变颜色

popupWin.ColorStyle=EeekSoft.Web.PopupColorStyle.Green;

// 改变时间

popupWin.HideAfter=5000;

popupWin.ShowAfter=500;

// 显示类型（页面加载时显示）

popupWin.Visible=true;

使用anchor控件
设计

添加anchor控件到页面上的方法和添加popup控 件到页面上非常相似。当你添加了一个anchor控件到页面上之后，你可以选择任何已经存在于服务端的控件ID，或选择一个你想处理的客户端事件。如果你 只是想重新打开popup控件，你只需要保证popup窗口控件会被传到客户端，并且是可见的就行。如果你不希望popup窗口在页面一载入的时候就显 示，可以设置AutoShow属性为false。
你还可以选择使用PopupWinAnchor来改变popup窗口中的文字。设置anchor控件的ChangeTexts属性为True，然后anchor控件会通过NewTitle，NewMessage和NewText设置新的popup窗口文字。

代码
下面的例子描述了如何使用PopupWinAnchor控件重新打开刚被关闭的popup窗口。
<!-- 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

// 处理鼠标单击事件

popupAnchor.HandledEvent="onclick";

// .. of spanReopen 元素

popupAnchor.LinkedControl="spanReopen";

// 当事件存在时，显示popup窗口

popupAnchor.PopupToShow="popupWin";

// Popup win is visible ..

popupWin.Visible=true;

// .. and will be displayed when page is loaded

popupWin.AutoShow=true;

在执行时动态加载控件
以前在动态加载控件是有问题的，不过已经被修改了；） 这里是一个动态创建popup窗口的例子。 该例子将会演示当用户单击spanReopen 元素时，动态创建popup窗口。（假设，你的页面上有一个叫spanReopen 的元素）

// Create popup window and popup win anchor control (in Page_Load)

PopupWin popupWin=new PopupWin();

PopupWinAnchor popupAnchor=new PopupWinAnchor();

// 添加控件到页面

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了。
Anchor控件可以使popup控件更快，并且减少页面的重新加载。比如，你可以使用popup控件为一些页面控件显示快速帮助。快速帮助在文本框被聚焦的时候显示，或在文本框后面加一个按钮，当按钮执行时显示。

尊重版权，请从原文出处下载源代码：

演示程序（C# VB.NET）http://www.codeproject.com/aspnet/asppopup/demo.zip

弹出对话框控件的源代码http://www.codeproject.com/aspnet/asppopup/source.zip

文档http://www.codeproject.com/aspnet/asppopup/doc.zip

微信公众号 weisico-com

转载请注明:微思考学习网-关注技术，分享知识 >> PopupWin应用ASP.NET在web页面上弹出窗口