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

2024-07-10 13:12:25

字體：大中小

來源：轉載

供稿：網友

在 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=http://chinaz.com/program/.net/"app_themes/default/images/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>