我的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字串，如果沒有，則返回Null 字元串即可。之後用戶端如果收到的是一個非Null 字元串，則將快顯視窗顯示出來，如果受到Null 字元串，那麼不會顯示任何東西。

程式運行介面就和本文開始的兩幅映像一樣，你也可以下載樣本程式（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. 如果有新的功能建議，也希望朋友們提出。