Ajax的按钮事件效果

当点击按钮之后,先执行OnClientClick事件,将span的内容更改为图片.
OnClick事件执行结束之后,把结果输出给span.
<% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Raw_Default" Debug="true"  %>
<% @ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
    
< title > 未命名頁面 </ title >
    
< script  language ="javascript" >
        
function get_back()
        
{
            
var msg= document.getElementById("<%=message.ClientID%>");
            msg.innerHTML
="<img src=\"../images/indicator.gif\" border=\"0\" alt=\"Processing\" width=\"16px\" height=\"16px\" />";
        }

    
</ script >

</ head >
< body >
< form  id ="form1"  runat ="server" >
< asp:ScriptManager  ID ="ScriptManager1"  runat ="server" ></ asp:ScriptManager >
< asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
    
< ContentTemplate >
        
< div >
            
< span  id ="message"  runat ="server" > default </ span >< br  />
            
< br  />
            
< br  />
            
< br  />
            
< asp:Button  ID ="Button1"  runat ="server"  Text ="Button"  OnClientClick ="get_back()"  OnClick ="Button1_Click"   /></ div >
    
</ ContentTemplate >
</ asp:UpdatePanel >
<!-- 提交后按钮灰化 -->
< ajaxtoolkit:UpdatePanelAnimationExtender  ID ="UpdatePanelAnimationExtender1"  runat ="server"  TargetControlID ="UpdatePanel1" >
    
< Animations >
        
< OnUpdating >
            
< Sequence >
                
< Parallel  duration ="0" >
                    
< EnableAction  AnimationTarget ="Button1"  Enabled ="false"   />
                
</ Parallel >
            
</ Sequence >
        
</ OnUpdating >
        
< OnUpdated >
            
< Sequence >
                
< Parallel  duration ="0" >
                    
< EnableAction  AnimationTarget ="Button1"  Enabled ="true"   />
                
</ Parallel >
            
</ Sequence >
        
</ OnUpdated >         
    
</ Animations >
</ ajaxtoolkit:UpdatePanelAnimationExtender >
</ form >
</ body >
</ html >

CodeBehind代码:
using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public   partial   class  Raw_Default : System.Web.UI.Page
{
    
protected void Page_Load(object sender, EventArgs e)
    
{

    }

    
protected void Button1_Click(object sender, EventArgs e)
    
{
        System.Threading.Thread.Sleep(
8000);
        
this.message.InnerText = "Finished";
    }

}


效果如图:


你可能感兴趣的:(Ajax)