例如提交注册信息时,需要链接数据库和发送邮件等操作,点击提交按钮后会有几秒钟等待时间,此时无响应,只有浏览器的状态栏有个进度条在走。想在执行的时候插入一个loading的提示,执行完操作后再替换为提交成功的信息。protected void Button1_Click(object sender, EventArgs e)
{
    //调用aspx中插入loading的js
    
    //这里执行一段比较耗时的操作    //调用插入提示信息的js}我原本的想法是一点击提交按钮,先插入loading的提示动画,然后执行操作,执行完成后,再替换为提交成功的信息。可是这样不行,好像不是按照顺序一行行执行的。提交后,仍然是漫长的等待,然后就直接执行完毕了.是否需要用到多线程之类来实现?该如何实现呢,请举个简单例子学习下,谢谢了。

解决方案 »

  1.   

    <script language="javascript" type="text/javascript">   
      document.write(" <div id='loadDiv' style='padding-top: 250px; padding-left: 350px;font-size:x-large;height:400px'> <span id='loading'> <img src=\"../Images/loader2.gif\"/>正在加载数据,请稍候··· </span> </div>");   
      window.onload = function()   
      {   
      document.getElementById("hiddenDiv").style.display="";   
      document.getElementById("loadDiv").parentNode.removeChild(document.getElementById("loadDiv"));   
        
      }   
      </script> 
    AJAX中的UpdateProgress,弹出等待窗体
      

  2.   

    谢谢楼上热心帮忙。js部分我知道如何实现,也可以调用成功。主要是ajax这里不熟悉,
    我只是偶然有几个地方用到ICallbackEventHandler而已,一定要用AJAX控件吗?
      

  3.   

    如果不需要详细的进度条.完全不需要ajax. 直接弹出一个js框.电脑提交的时候因为页面没执行完,所以直接有这个框存在.等提交完毕了. 页面调转了.这个框自然不在了.
      

  4.   

    AJAX中的UpdateProgress,弹出等待窗体
      

  5.   


    是的,不需要进度条,关键是提交完毕后,不需要跳转,还是停留在本页,所以现在要么那个loading一直存在,要么就直接提交后被后插入的信息覆盖掉。我是想在按钮提交事件等待过程中出现loading,提交后隐藏掉。不用AJAX能够实现吗?
      

  6.   

    最后用了种笨方法
    function addBbs(){
    LoaDing("Is Submit...");
        document.getElementById("btnSave").click();
    }
    <asp:Button ID="btnSave" CssClass="adminButtonBlue" runat="server" Text="Save" onclick="btnSave_Click" OnClientClick="return addBbs();" />&nbsp;
      

  7.   

    function ShowResult() {
      if (xmlHttp.readyState == 4) {
      if (xmlHttp.status == 200) {
      var s;
      s = xmlHttp.responseText;
      if (s== "OK")
      document.getElementById("msg").innerHTML = "<img src='images/correct.gif' align='absMiddle'>";
      else
      document.getElementById("msg").innerHTML = "<img src='images/error.gif' align='absMiddle'>";
        
      }
      else {
      document.getElementById("msg").innerHTML = "<img src='images/error.gif' align='absMiddle'> 错误:" + xmlHttp.status;
      }
      }
    button设置为enable=false
    或为其他按钮
      

  8.   

    先看看你是否刷新页面.如果是一般提交,刷新页面
    一般提交是提交到一个页面, 提交完成了,页面输出成功.如果不希望刷新页面
    在页面放置一个ifream. 提交到这个ifream,提交成功了返回一个成功标记.
      

  9.   

    我具体点。就一个页面,提交后不跳转下面代码提交后,不插入loading,直接浏览器进度等待,然后显示完成后的信息。不知道该怎么改
    ASPX<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Loading实现</title>
        
        <script type="text/javascript">
        test = function(msg){
            var area = document.getElementById('test_area');
            area.innerHTML = msg;
        }
        
        loading = function(){
            var area = document.getElementById('test_area');
            area.innerHTML = '<img src=\"images/loading.gif\" /> 正在执行操作,请稍候...';
        }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div id="test_area">
                默认状态,未执行操作!
            </div>
            
            <asp:Button ID="Button1" runat="server" Text="运行一个耗时的任务" onclick="Button1_Click" />
        
        </div>
        </form>
    </body>
    </html>ASPX.CS    protected void Button1_Click(object sender, EventArgs e)
        {
    //插入loading
    Response.Write("<script>loading();</script>");

            for (int i = 0; i < 200000; i++)
            {
                Response.Write(i);
            }

    //插入任务完成提示信息
    ClientScript.RegisterStartupScript(this.GetType(), "sucess", "<script>test('完成提交');</script>");    }
      

  10.   

    如梦说的那个后台设enable=false根本不行,服务器端更改在显示在客户端,不刷新怎么搞的定,而要刷新整个提交动作都做完了,按钮在不可用,有什么意义