updateprogress加入Cancel功能

updateprogress加入Cancel功能

updateprogress用于显示异步更新的进度提示,比如在提交数据时显示“正在提交数据....”,给用户更好的体验，但是有时提交的数据量太大，用户想取消提交，也就是说在updateprogress中加入Cancel功能

新建ajax页面，代码如下：
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdateProgress ID="UpdateProgress1" runat="server"
            AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                更新中<input ID="Button2" type="button" value="取消"  οnclick="CancelClick()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>

相应的js
<script language="javascript">
    var prm=Sys.WebForms.PageRequestManager.getInstance();
   
    prm.add_initializeRequest(InitRequest);//初始化请求
    prm.add_endRequest(EndR);//结束请求
   
    function InitRequest(sender,args)
    {
    document.getElementById("UpdateProgress1").style.display="block";
    }
    function EndR(sender,args)
    {
     document.getElementById("UpdateProgress1").style.display="none";
    }
    //取消
    function CancelClick()
    {
    if(prm.get_isInAsyncPostBack())
    prm.abortPostBack();//取消
   
    }
 
    </script>
模拟测试：
添加Button1的click事件
        Button1.Text = DateTime.Now.ToString
        System.Threading.Thread.Sleep(2000)'添加延时2秒