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>