前幾天有朋友說希望能用ASP.NET AJAX實現類似OWA或Messenger樣式的信息提示窗口，當系統有新消息的時候，可以在屏幕右下角彈出一個提示面板，其中放置自定義的消息。就像下面圖示的這樣：

今天上午抽時間作了一個，以ASP.NET AJAX Control Toolkit Extender的形式發布。限于HTTP協議的局限性，只能采取客戶端pull的方法，每隔一段時間查詢一下某個Web?Service，如果有新消息，則在客戶端以動畫形式顯示出來。如下面兩張圖，左邊的剛剛顯示一半，右邊已經完整顯示了出來（點擊查看大圖）：

??????

?

PopupNotificationExtender功能介紹

提示窗口以動畫形式出現/消失

可指定提示窗口在屏幕中的位置（左上、左下、右上、右下）

可指定提示窗口相對于四種位置（左上、左下、右上、右下）的偏移量

提示窗口的內容、樣式完全可自定義

窗口縮放之后提示窗口將自動調整位置，保持相對位置不變

可以定制提示窗口顯示和消失時動畫的時間長度

可以定制提示窗口保持顯示的時間

鼠標懸停于提示窗口上時，該窗口將永遠不會消失

可以指定某個Web Service中的某個Web Method，并指定兩次查詢的時間間隔，用來取得新消息。

如果查詢得到新消息，則提示窗口將自動出現

?

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.

該控件的DLL在這里下載：Dflying.Ajax.PopupNotificationExtender.zip

示例程序在這里下載：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" />

其中：

HorizontalSide和VerticalSide指定提示窗口將在頁面的右下角彈出。

HorizontalOffset和VerticalOffset指定了彈出窗口離瀏覽邊框的距離。

ServicePath和ServiceMethod指定了服務器端查詢新消息用的Web Service以及其中定義的Web Method。

QueryServiceInterval指定了每隔6000毫秒（6秒鐘）查詢一次服務器，這里僅僅用來演示，通常我們不應該這樣頻繁地進行查詢。

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屬性列表

TargetControlID：該擴展器目標Panel控件ID，即將要作為提示面板的Panel控件的ID。

ResizeEffectDuration：提示面板彈出/消失動畫的時間長度，單位為秒，默認0.3秒。

ShowNotificationDuration：提示面板停留顯示在頁面上的時間長度，單位為秒，默認為3秒。

ResultLabelID：從服務器端取得新消息之后，將填入到提示面板中的id為該值的客戶端HTML元素中。

ServicePath：服務器段取得消息的Web Service地址。

ServiceMethod：服務器段取得消息的Web Method名稱。

QueryServiceInterval：兩次查詢服務器的時間間隔，單位為毫秒，默認值為60000。

HorizontalOffset：提示面板距離瀏覽器左右邊框的水平邊距，單位為像素（px）。默認值為0。

HorizontalSide：提示面板的水平停靠方向，Left（默認值）代表靠左邊停靠，Right代表靠右邊停靠。

VerticalOffset：提示面板距離瀏覽器上下邊框的垂直邊距，單位為像素（px）。默認值為0。

VerticalSide：提示面板的垂直停靠方向，Top（默認值）代表靠上邊停靠，Bottom代表靠下邊停靠。

ScrollEffectDuration：當用戶滾動瀏覽器滾動條時，調整提示面板位置的時間間隔。單位為秒。默認值為0.1。

?

其他

是否有必要開放源代碼？

是否有必要寫篇文章講一下控件開發過程、原理？

如果有Bug，希望朋友們提出

如果有新的功能建議，也希望朋友們提出。

總結

以上是生活随笔為你收集整理的我的ASP.NET AJAX控件——PopupNotificationExtender：实现OWA或Messenger样式的信息提示窗口...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。