ASP.NET 2.0 AJAX 實作彈出式通知視窗：像 MSN 一樣的即時提醒

在 Web 應用程式（如 OA 系統）中，即時通知功能不可或缺。ASP.NET 2.0 配合 AJAX 技術，讓我們能輕鬆實作類似 MSN 的彈出式提醒視窗。本文透過一個「收信通知」範例，示範如何結合 Web Service、UpdateProgress 控件與客戶端腳本達成此目標。

步驟 1：建立 Web Service 取得未讀郵件數

首先建立一個標記為 [ScriptService] 的 Web Service，允許客戶端透過 AJAX 呼叫。此服務查詢資料庫中的未讀郵件數量：

[ScriptService]
public class InboxService : System.Web.Services.WebService
{
  [WebMethod]
  public int GetLatestNumberOfEmails()
  {
    int numberOfEmails = 0;
    using (SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings[0].ConnectionString))
    {
      using (SqlCommand cmd = new SqlCommand("GetLatestNumberOfEmails", conn))
      {
        cmd.CommandType = CommandType.StoredProcedure;
        conn.Open();
        numberOfEmails = (int)cmd.ExecuteScalar();
      }
    }
    return numberOfEmails;
  }
}

關鍵點：[ScriptService] 屬性必須加在類別上，才能讓客戶端腳本透過 AJAX 呼叫此 Web Service。

步驟 2：頁面配置 UpdateProgress 控件

在 Default.aspx 中加入 UpdateProgress 控件，其 ProgressTemplate 定義彈出視窗的 HTML 結構：

<asp:UpdateProgress DynamicLayout="False" ID="UpdateProgress1" runat="server">
  <ProgressTemplate>
    <div id="modal" class="modal">
      <div class="modalTop">
        <div class="modalTitle">My Inbox</div>
        <span style="CURSOR: hand" onclick="javascript:HidePopup();">
          <img alt="Hide Popup" src="App_Themes/Default/images/close_vista.gif" border="0" />
        </span>
      </div>
      <div class="modalBody">
        You received <strong><span id="modalBody"></span></strong>&nbsp; Email(s).
      </div>
    </div>
  </ProgressTemplate>
</asp:UpdateProgress>

此模板包含標題列、關閉按鈕與訊息內容區塊，配合 CSS 即可呈現漂浮視窗效果。

後續整合

完整實作還需：

1. 使用 ScriptManager 註冊 Web Service 參考。
2. 撰寫 JavaScript 定時輪詢 InboxService.GetLatestNumberOfEmails()。
3. 當回傳數量 > 0 時，動態填入 modalBody 並顯示彈出視窗。
4. 實作 HidePopup() 函式隱藏視窗。

透過 ASP.NET AJAX 的非同步回傳機制，配合 UpdateProgress 的視覺化模板，即可打造流暢的即時通知體驗。