ASP.NET 2.0中實現彈窗警示提示

在 web應用中，比如OA中，經常要用到一些提示，比如EMAIL到達了，就做個象MSN那樣的提示框，彈出給使用者提示，然後再關閉。在asp.net 2.0的ajax中，這個現在不難做到了，剛好看到老外的一篇文章，講解到，下面小結

比如有個資料庫表，是存放EMAIL的，當資料庫表中的EMAIL一有的時候，就提示使用者，首先簡單寫一個WEBSERVICE如下

以下為引用的內容： [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;     } }

這裡要注意要在用戶端通過AJAX調用WEBSERICE，要加上[ScriptService]

2 在default.aspx中，首先加入一個updateprogress控制項，如下

以下為引用的內容： <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=close_vista.gif" border="0" />              </span>          </div>             <div class="modalBody">                 You received <strong><span id="modalBody"></span></strong>  Email(s).             </div>         </div>     </ProgressTemplate>     </asp:UpdateProgress>

這裡的關閉X按鈕，調用javascript的指令碼，等陣再說

然後當然要加scriptmanager控制項了，如下

以下為引用的內容：  <asp:ScriptManager ID="ScriptManager1" runat="server">             <Services>                 <asp:ServiceReference Path="~/InboxService.asmx" />             </Services>         </asp:ScriptManager>

這裡調用了我們剛才寫的webservice

之後是寫script了

以下為引用的內容： <script type="text/javascript">             var numberOfEmails_original= 0;                         var app = Sys.Application;             app.add_init(applicationInitHandler);                         function applicationInitHandler(sender, args) {                 InboxService.GetLatestNumberOfEmails(OnCurrentNumberOfEmailsReady);       }

首先，預設的當然是0封郵件了，有變數來存放當前郵件數量，之後是在ajax中的初始化事件中調用webserice的方法了，並且回調OnCurrentNumberOfEmailsReady方法，

以下為引用的內容：      function OnCurrentNumberOfEmailsReady(result, userContext, methodName) {                 numberOfEmails_original= result;                 // Start Checking                 StartChecking();             } OnCurrentNumberOfEmailsReady方法將WEBSERVICE調用的結果（目前狀態下有多少封信RESULT）返回給變數，然後調用sartchecking()方法       function StartChecking() {           InboxService.GetLatestNumberOfEmails(OnLastestNumberOfEmailsReady);       } startchecking方法，繼續回調OnLastestNumberOfEmailsReady方法             function OnLastestNumberOfEmailsReady(result, userContext, methodName) {                 var numberOfEmails_new= result;                 if (numberOfEmails_new > numberOfEmails_original) {                     ShowPopup();                     $get("modalBody").innerHTML= numberOfEmails_new - numberOfEmails_original;                                         // Update the count here                     numberOfEmails_original= numberOfEmails_new;                 }                 // Start checking again                 window.setTimeout(StartChecking, 10000);             }

這個方法，用當前郵件數-原來郵件數，就得出新增了多少封郵件了，再將結果賦值給顯示地區的modalbody，並且記得把當前郵件數量的,變數更新哦（numberOfEmails_original= numberOfEmails_new;）

然後再用setimeout來設定每隔10000毫秒檢查一次了

以下為引用的內容：             function ShowPopup() {                 $get("UpdateProgress1").style.visibility= "visible";                 $get("UpdateProgress1").style.display= "block";             }             function HidePopup() {                 $get("UpdateProgress1").style.visibility= "hidden";                 $get("UpdateProgress1").style.display= "none";             }         </script>