OWA或Messenger樣式的資訊提示視窗——編寫ASP.NET AJAX Extender控制項（下）：使用該控制項（樣本程式）

 

在前面兩篇（OWA或Messenger樣式的資訊提示視窗——編寫ASP.NET AJAX Extender控制項（上）：用戶端Behavior和OWA或Messenger樣式的資訊提示視窗——編寫ASP.NET AJAX Extender控制項（中）：封裝成伺服器端控制項）中，我們建立了自己的ASP.NET AJAX Extender控制項，這一篇將介紹如何在實際項目中使用該控制項。

關於該控制項的詳細功能、實際運行時的介面效果以及詳細屬性列表，請參考我的ASP.NET AJAX控制項——PopupNotificationExtender：實現OWA或Messenger樣式的資訊提示視窗這篇文章。不過代碼下載和樣本程式請看本文接下來的介紹，上文中的內容已經過時。

 

預先需求

本控制項基於ASP.NET AJAX開發，且繼承於ASP.NET AJAX Control Toolkit中的AlwaysVisibleControlExtender。所以若要在程式中使用該控制項，則必須配置好ASP.NET AJAX並添加好ASP.NET AJAX Control Toolkit程式集的引用（請參考《擁抱變化——從Atlas到ASP.NET AJAX（1）：下載安裝總覽》）。

 

添加PopupNotificationExtender的引用

然後將控制項的DLL（Dflying.Ajax.PopupNotificationExtender.zip）解壓縮至Web網站的bin目錄下，添加好對該DLL的引用。

 

註冊控制項首碼

在需要使用的頁面頭部添上如下註冊代碼：

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

    TagPrefix="dflying" %>

 

添加ScriptManager

當然，頁面中還需要一個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控制項

然後是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

再看看伺服器端Web Service的代碼：

using System;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.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 字元串，那麼不會顯示任何東西。

程式運行介面就和本文開始的兩幅映像一樣，你也可以下載完整的源檔案（代碼+樣本程式，PopupNotification.zip）親自體驗一下。

 

運行時的程式介面

請參考我的ASP.NET AJAX控制項——PopupNotificationExtender：實現OWA或Messenger樣式的資訊提示視窗這篇文章。

 

代碼下載

完整的源檔案+樣本程式：PopupNotification.zip

PopupNotificationExtender編譯好的程式集：Dflying.Ajax.PopupNotificationExtender.zip。

 

隨便再說兩句

實際上，這個Extender所做的事情就是在服務期端封裝了ASP.NET AJAX用戶端的行為（Behavior）組件，整個控制項開發過程中的大頭部分仍然是那個JavaScript檔案。之所以要這樣封裝，是為了方便熟悉ASP.NET伺服器端開發模型的程式員使用，並提高組件的可重用性。

查看頁面的源檔案，可以看到在源檔案的末尾部分有如下幾行（為清晰起見，代碼經過格式化）：

<script type="text/javascript">

<!--

Sys.Application.initialize();

Sys.Application.add_init(

  function() {

    $create(Dflying.Ajax.PopupNotificationBehavior, 

      {

        "HorizontalOffset":20,

        "HorizontalSide":2,

        "QueryServiceInterval":6000,

        "ResultLabelID":"result",

        "ServiceMethod":"GetNotification",

        "ServicePath":"NotificationService.asmx",

        "VerticalOffset":20,

        "VerticalSide":2,

        "id":"pne"

      }, 

      null, 

      null, 

      $get("thePanel")

    );

  }

);

// -->

</script>

這也正是ASP.NET AJAX用戶端的行為的聲明方法。

ASP.NET AJAX的用戶端部分設計極為巧妙，非常值得我們去仔細研究。