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

來源:互聯網
上載者:User

在 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>



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。