AJAX 带有 取消功能的 UpdateProgress


aspx 页 :
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>无标题页</title>
<script language="javascript" type="text/javascript"> 
<!-- 
function CancelAsyncPostBack() { 
var prm 
= Sys.WebForms.PageRequestManager.getInstance(); 
if (prm.get_isInAsyncPostBack()) { 

prm.abortPostBack(); 



// --> 
</script> 
<style type="text/css">

#UpdatePanel1 {}{

  200px; height:100px;

  border: 1px solid gray;

}

#UpdateProgress1 {}{

  200px; background
-color: #FFC080;

  bottom: 
0%; left: 0px; position: absolute;

}

</style>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        
<table style=" 835px; height: 391px">
            
<tr>
                
<td style=" 100px">
                
</td>
                
<td style=" 100px">
                
</td>
                
<td style=" 100px">
                
</td>
            
</tr>
            
<tr>
                
<td style=" 100px">
                
</td>
                
<td style=" 100px">
                    
<asp:ScriptManager ID="ScriptManager1" runat="server">
                    
</asp:ScriptManager>
                    
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        
<ContentTemplate>
                            
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                            
<asp:Label ID="Label1" runat="server" Text="页面初始化"></asp:Label>
                        
</ContentTemplate>
                    
</asp:UpdatePanel>
                    
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
                        
<ProgressTemplate>
                            正在处理数据,请稍候.
<br />
                            
<input id="input1" type="button" value="取消" onclick="CancelAsyncPostBack()"/>
                        
</ProgressTemplate>
                    
</asp:UpdateProgress>
                
</td>
                
<td style=" 100px">
                
</td>
            
</tr>
            
<tr>
                
<td style=" 100px">
                
</td>
                
<td style=" 100px">
                
</td>
                
<td style=" 100px">
                
</td>
            
</tr>
        
</table>
    
    
</div>
    
</form>
</body>
</html>

aspx.CS :
 protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(
3000); //人为的创建一个3秒钟的延迟并显示当前时间

        Label1.Text 
= "Page refreshed at " +

            DateTime.Now.ToString();

    }
原文地址:https://www.cnblogs.com/tiger8000/p/939520.html