我的ASP.NET AJAX控件——PopupNotificationExtender：实现OWA或Messenger样式的信息提示窗口

前几天有朋友说希望能用ASP.NET AJAX实现类似OWA或Messenger样式的信息提示窗口，当系统有新消息的时候，可以在屏幕右下角弹出一个提示面板，其中放置自定义的消息。就像下面图示的这样：

今天上午抽时间作了一个，以ASP.NET AJAX Control Toolkit Extender的形式发布。限于HTTP协议的局限性，只能采取客户端pull的方法，每隔一段时间查询一下某个Web Service，如果有新消息，则在客户端以动画形式显示出来。如下面两张图，左边的刚刚显示一半，右边已经完整显示了出来（点击查看大图）：

      

 

PopupNotificationExtender功能介绍

1. 提示窗口以动画形式出现/消失
2. 可指定提示窗口在屏幕中的位置（左上、左下、右上、右下）
3. 可指定提示窗口相对于四种位置（左上、左下、右上、右下）的偏移量
4. 提示窗口的内容、样式完全可自定义
5. 窗口缩放之后提示窗口将自动调整位置，保持相对位置不变
6. 可以定制提示窗口显示和消失时动画的时间长度
7. 可以定制提示窗口保持显示的时间
8. 鼠标悬停于提示窗口上时，该窗口将永远不会消失
9. 可以指定某个Web Service中的某个Web Method，并指定两次查询的时间间隔，用来取得新消息。
10. 如果查询得到新消息，则提示窗口将自动出现

 

PopupNotificationExtender下载

下载、使用本软件之前，请仔细阅读如下Microsoft Permissive License (Ms-PL)版权协议。如果你使用本软件，说明你无条件接受该协议中的条款。如果你不接受该协议，请不要使用本软件。

Microsoft Permissive License (Ms-PL)

This license governs use of the accompanying software. If you use the software, you accept this license. If you do not accept the license, do not use the software.

1. Definitions

The terms “reproduce,” “reproduction” and “distribution” have the same meaning here as under U.S. copyright law.

“You” means the licensee of the software.

“Licensed patents” means any Microsoft patent claims which read directly on the software as distributed by Microsoft under this license.

2. Grant of Rights

(A) Copyright Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, Microsoft grants you a non-exclusive, worldwide, royalty-free copyright license to reproduce the software, prepare derivative works of the software and distribute the software or any derivative works that you create.

(B) Patent Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, Microsoft grants you a non-exclusive, worldwide, royalty-free patent license under licensed patents to make, have made, use, practice, sell, and offer for sale, and/or otherwise dispose of the software or derivative works of the software.

3. Conditions and Limitations

(A) No Trademark License- This license does not grant you any rights to use Microsoft’s name, logo, or trademarks.

(B) If you begin patent litigation against Microsoft over patents that you think may apply to the software (including a cross-claim or counterclaim in a lawsuit), your license to the software ends automatically.

(C) If you distribute copies of the software or derivative works, you must retain all copyright, patent, trademark, and attribution notices that are present in the software.

(D) If you distribute the software or derivative works in source code form you may do so only under this license (i.e., you must include a complete copy of this license with your distribution), and if you distribute the software or derivative works in compiled or object code form you may only do so under a license that complies with this license.

(E) The software is licensed “as-is.” You bear the risk of using it. Microsoft gives no express warranties, guarantees or conditions. You may have additional consumer rights under your local laws which this license cannot change. To the extent permitted under your local laws, Microsoft excludes the implied warranties of merchantability, fitness for a particular purpose and non-infringement.

1. 该控件的DLL在这里下载：Dflying.Ajax.PopupNotificationExtender.zip
2. 示例程序在这里下载：PopupNotificationTest.zip

 

PopupNotificationExtender示例程序

本控件基于ASP.NET AJAX开发，且继承于ASP.NET AJAX Control Toolkit中的AlwaysVisibleControlExtender。所以若要在程序中使用该控件，则必须配置好ASP.NET AJAX并添加好ASP.NET AJAX Control Toolkit程序集的引用（请参考《拥抱变化——从Atlas到ASP.NET AJAX（1）：下载安装总览》）。

然后将控件的DLL（Dflying.Ajax.PopupNotificationExtender.zip）解压缩至Web站点的bin目录下，添加好对该DLL的引用。

在需要使用的页面头部添上如下注册代码：

<%@ Register Assembly="Dflying.Ajax.PopupNotificationExtender" Namespace="Dflying.Ajax"
    TagPrefix="dflying" %>

当然，ScriptManager也是必须的：

<asp:ScriptManager ID="ScriptManager1" runat="server" />

然后定义一个Panel，用来表示提示窗口，当然其中布局样式朋友们可以随心所欲地改变：

<asp:Panel ID="thePanel" CssClass="panel" runat="server">
    <div style="border: 1px solid black; height: 98px;">
        <div style="padding: 3px; background-color: Silver;">
            <strong>New Messages:</strong>
        </div>
        <img src="icon.gif" style="float: left; display: block; margin: 3px;" />
        <div id="result" style="padding: 3px; margin-left: 40px;" />
    </div>
</asp:Panel>

注意：该Panel中还包含了一个id为result的HTML <div>标签。注意这个<div>，等会服务器端返回的消息将填充到该<div>中。

该Panel应用的CSS Class为panel，定义如下：（注意不可以定义border、margin、padding三个属性，如果需要，可以在内部标签<div>中使用）

.panel
{
    font-size: 80%;
    background-color: white;
    width: 200px;
    height: 100px;
    overflow: hidden;
}

然后是PopupNotificationExtender控件的代码：

<dflying:PopupNotificationExtender ID="pne" TargetControlID="thePanel" runat="server"
    VerticalSide="Bottom" HorizontalSide="Right" HorizontalOffset="20" VerticalOffset="20"
    ServicePath="NotificationService.asmx" ServiceMethod="GetNotification" QueryServiceInterval="6000"
    ResultLabelID="result" />

其中：

1. HorizontalSide和VerticalSide指定提示窗口将在页面的右下角弹出。
2. HorizontalOffset和VerticalOffset指定了弹出窗口离浏览边框的距离。
3. ServicePath和ServiceMethod指定了服务器端查询新消息用的Web Service以及其中定义的Web Method。
4. QueryServiceInterval指定了每隔6000毫秒（6秒钟）查询一次服务器，这里仅仅用来演示，通常我们不应该这样频繁地进行查询。
5. ResultLabelID指定了用来显示服务器端的新消息的客户端HTML元素的id，这里就是上面我们定义的id为result的<div>。

再看看服务器端Web Service的代码：

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[Microsoft.Web.Script.Services.ScriptService()]
public class NotificationService  : System.Web.Services.WebService {

    private static int m_count = 0;

    [WebMethod]
    public string GetNotification()
    {
        if (checkNewMessage())
        {
            // return the HTML message content.
            return string.Format("<a href=\"#\">You've received a new message #{0}.</a>", m_count++);
        }
        else
        {
            // if there's no new meesage, just return an empty string.
            return string.Empty;
        }
    }

    private bool checkNewMessage()
    {
        // TODO: whatever you want to check if there's a message.
        return true;
    }
}

很简单不多说了，GetNotification()方法没有任何传入参数，在该方法中，我们可以随便用什么方法看看是否有新的消息需要传递给客户端。如果有的话，那么返回代表该消息的HTML字符串，如果没有，则返回空字符串即可。之后客户端如果收到的是一个非空字符串，则将弹出窗口显示出来，如果受到空字符串，那么不会显示任何东西。

程序运行界面就和本文开始的两幅图像一样，你也可以下载示例程序（PopupNotificationTest.zip）亲自体验一下。

 

PopupNotificationExtender属性列表

1. TargetControlID：该扩展器目标Panel控件ID，即将要作为提示面板的Panel控件的ID。
2. ResizeEffectDuration：提示面板弹出/消失动画的时间长度，单位为秒，默认0.3秒。
3. ShowNotificationDuration：提示面板停留显示在页面上的时间长度，单位为秒，默认为3秒。
4. ResultLabelID：从服务器端取得新消息之后，将填入到提示面板中的id为该值的客户端HTML元素中。
5. ServicePath：服务器段取得消息的Web Service地址。
6. ServiceMethod：服务器段取得消息的Web Method名称。
7. QueryServiceInterval：两次查询服务器的时间间隔，单位为毫秒，默认值为60000。
8. HorizontalOffset：提示面板距离浏览器左右边框的水平边距，单位为像素（px）。默认值为0。
9. HorizontalSide：提示面板的水平停靠方向，Left（默认值）代表靠左边停靠，Right代表靠右边停靠。
10. VerticalOffset：提示面板距离浏览器上下边框的垂直边距，单位为像素（px）。默认值为0。
11. VerticalSide：提示面板的垂直停靠方向，Top（默认值）代表靠上边停靠，Bottom代表靠下边停靠。
12. ScrollEffectDuration：当用户滚动浏览器滚动条时，调整提示面板位置的时间间隔。单位为秒。默认值为0.1。

 

其他

1. 是否有必要开放源代码？
2. 是否有必要写篇文章讲一下控件开发过程、原理？
3. 如果有Bug，希望朋友们提出
4. 如果有新的功能建议，也希望朋友们提出。