ASP.NET 2.0中实现弹窗报警提示

80酷酷网    80kuku.com

  

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

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: