我们新建一个Ajax的web窗体页面重命名为：“updateprogress.aspx”，在页面中拖放一个updatepanel1（16-87行），在updatepanel1中放入一个textbox1（19行）和一个button1（21行），button1的text属性未 "…"，在textbox前写入" 联系方式为："然后在updatepanel1中再拖放一个updatepanel2（22-81行），在updatepanel2中用自动连接数据源的方式，拖入tb_info表，VS会自动生成一个连接好的表的数据源控件sqldatasource1（47-76行）和绑定好sqldatasource1的GridView1（24-46行，绑定sqldatasource1在27行），选择GridView1中"启动分页"（24行）、"启动选择"功能，将updatepanel1中的ChildrenAsTriggers属性设为False（16行），UpdateMode设为Conditional（17行），然后将updatepanel1的Triggers（83-86行）中的ControlID属性设为GridView1，Eventname设为SelectedIndexChanged，（如果你对我刚才说描述的有关updatamode属性不了解的话，建议你从我的上一篇： 博客看起，这样更加有助你体会出实例要演示的效果），这个步骤是要完成的效果是， GridView1表是有关求职招聘信息的登记表，当选择到GridView1中任意一行，会引发Updatepanel1的Async-Postback动作，接下来将Updatepanel2控件的UpdateMode（22行）设为Conditional，在Triggers（79行）中加入Button1，Eventname为Click，这个步骤要完成的效果是，当点击Button1， 会引发Updatepanel2的Async-Postback动作。

     下面我们来学习一下UpdateProgress控件的与Updatepanel控件在页面的结合，我们在Updatepanel1的外面拖放一个UpdateProgress1（88-93行）控件，设定AssociatedUpdatepanelID（88行）属性为Updatepanel1， 这个属性的意思是“与UpdateProgress相关联的Updatepanel控件”。（也可以把UpdateProgress控件放到任意的UpdatePanel里面，也可以放到外面。只要他关联的UpdatePanel刷新了，他就会被激活，即使把他放到其他UpdatePanel里面也不例外。）在UpdateProgress1中放入一个label1（90行），text设置为 "请等待，勿操作"，再放入一个html的Button2（91行）控件value属性设为 “取消当前操作”，可能你要问什么选择html控件，我们使用标准控件中的Button可以吗？答案是可以的，但是因为这个Button2不涉及服务器端的事件操作，使用客户端Button控件会更加合理、更优化程序。我们的页面布局好了，下面我们来看一下vs的设计页面中的布局截图，我们对照一下，如下图就是我们想要的效果。

 我们再来看一下源代码，对照步骤看行号会更加有助于我们理解控件的属性和值及各种绑定关系：

 1using System.Web.UI.WebControls; 
 2using System.Web.UI.WebControls.WebParts; 
 3using System.Xml.Linq; 
 4 
 5public partial  class UpdateProgress : System.Web.UI.Page 
 6{ 
 7         protected  void Page_Load( object sender, EventArgs e) 
 8        { 
 9                 if(! this .IsPostBack) 
10                GridView1.Visible =  false; 
11        } 
12         //当点击Button1时GridView显示出来，如果已经显示就隐藏 
13         protected  void Button1_Click( object sender, EventArgs e) 
14        { 
15                 if (!GridView1.Visible) 
16                        GridView1.Visible =  true; 
17                 else 
18                        GridView1.Visible =  false; 
19        } 
20         //当GridView选中行时，textbox的值为选中行的第6个单元格的值，然后GridView再次隐藏 
21         protected  void GridView1_SelectedIndexChanged( object sender, EventArgs e) 
22        { 
23                TextBox1.Text = GridView1.SelectedRow.Cells[5].Text.ToString(); 
24                GridView1.Visible =  false; 
25        } 
26}

1  //当GridView选中行时，textbox的值为选中行的第6个单元格的值，然后GridView再次隐藏 
2         protected  void GridView1_SelectedIndexChanged( object sender, EventArgs e) 
3        {         //选中后等待10秒，10秒后再获取值 
4                System.Threading.Thread.Sleep(10000); 
5                TextBox1.Text = GridView1.SelectedRow.Cells[5].Text.ToString(); 
6                GridView1.Visible =  false; 
7        }

    1 < %@ Page  Language ="C#"  AutoEventWireup ="true"  CodeFile ="UpdateProgress.aspx.cs"  Inherits ="UpdateProgress" % > 
    2 
    3 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 
    4 
    5 < html  xmlns ="http://www.w3.org/1999/xhtml" > 
    6 < head  runat ="server" > 
    7         < title >无标题页 </title> 
    8         < script  type ="text/javascript" > 
    9         
10            function pageLoad() { 
11            } 
12         
13         </script> 
14 </head> 
15 < body > 
16         < form  id ="form1"  runat ="server" > 
17         < div > 
18                 < asp:ScriptManager  ID ="ScriptManager1"  runat ="server"  /> 
19                 < script language  ="javascript"  > 
20                //取得PageRequestManager对象，每一个Asp.net Ajax页面中会右唯一一个这种对象负责处理所有的Async-Postback要求 
21                var prm=Sys .WebForms .PageRequestManager.getInstance(); 
22                //新增事件处理至PageRequestManager的initializeRequest事件，当Async-Postback发生时，此事件会被触发，我们的InitRequest函数便会被运行 
23                prm.add_initializeRequest(InitRequest); 
24                //新增事件处理至PageRequestManager的endRequest事件，当Async-Postback完成时，此事件会被触发，我们的EndRequest函数便会被运行 
25                prm.add_endRequest(EndRequest); 
26                function InitRequest(sender,args) 
27                { 
28                //显示出UpdateProgress1控件 
29                document .getElementById ("UpdateProgress1").style.display="block"; 
30                } 
31                 function EndRequest(sender,args) 
32                { 
33                //隐藏UpdateProgress1控件 
34                document .getElementById ("UpdateProgress1").style.display="none"; 
35                } 
36                //用于取消Async-Postback动作 
37                function CancelClick() 
38                { 
39                //当处于Async-Postback动作时，get_isInAsyncPostBack函数会回传true，此时调用abortPostBack 函数便会取消Async-Postback动作。 
40                if(prm.get_isInAsyncPostBack()) 
41                { 
42                prm.abortPostBack (); 
43                } 
44                 
45                } 
46                 
47                 </script> 
48         </div> 
49        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False"    
50                UpdateMode="Conditional"> 
51                 < ContentTemplate > 
52                        联系方式为： < asp:TextBox  ID ="TextBox1"  runat ="server" > </asp:TextBox> 
53                        <asp:Button ID="Button1" runat="server" Font-Bold="True" Font-Size="Medium"    
54                                Height="26px" Text="…" /> 
55                         < asp:UpdatePanel  ID ="UpdatePanel2"  runat ="server"  UpdateMode ="Conditional" > 
56                                 < ContentTemplate > 
57                                        <asp:GridView ID="GridView1" runat="server" AllowPaging="True"    
58                                                AutoGenerateColumns="False" BackColor="White" BorderColor="White"    
59                                                BorderStyle="Ridge" BorderWidth="2px" CellPadding="3" CellSpacing="1"    
60                                                DataKeyNames="ID" DataSourceID="SqlDataSource1" EmptyDataText="没有可显示的数据记录。"    
61                                                GridLines="None" onselectedindexchanged="GridView1_SelectedIndexChanged"> 
62                                                 < FooterStyle  BackColor ="#C6C3C6"  ForeColor ="Black"  /> 
63                                                 < RowStyle  BackColor ="#DEDFDE"  ForeColor ="Black"  /> 
64                                                 < Columns > 
65                                                         < asp:CommandField  ShowSelectButton ="True"  /> 
66                                                         < asp:BoundField  DataField ="type"  HeaderText ="type"  SortExpression ="type"  /> 
67                                                         < asp:BoundField  DataField ="title"  HeaderText ="title"  SortExpression ="title"  /> 
68                                                         < asp:BoundField  DataField ="info"  HeaderText ="info"  SortExpression ="info"  /> 
69                                                        <asp:BoundField DataField="linkman" HeaderText="linkman"    
70                                                                SortExpression="linkman" /> 
71                                                         < asp:BoundField  DataField ="tel"  HeaderText ="tel"  SortExpression ="tel" /> 
72                                                        <asp:CheckBoxField DataField="checkState" HeaderText="checkState"    
73                                                                SortExpression="checkState" /> 
74                                                         < asp:BoundField  DataField ="date"  HeaderText ="date"  SortExpression ="date"  /> 
75                                                 </Columns> 
76                                                 < PagerStyle  BackColor ="#C6C3C6"  ForeColor ="Black"  HorizontalAlign ="Right"  /> 
77                                                 < SelectedRowStyle  BackColor ="#9471DE"  Font-Bold ="True"  ForeColor ="White"  /> 
78                                                 < HeaderStyle  BackColor ="#4A3C8C"  Font-Bold ="True"  ForeColor ="#E7E7FF" /> 
79                                         </asp:GridView> 
80                                        <asp:SqlDataSource ID="SqlDataSource1" runat="server"    
81                                                ConnectionString=" < %$ ConnectionStrings:db_SISConnectionString1 % >"    
82                                                DeleteCommand="DELETE FROM [tb_info] WHERE [ID] = @ID"    
83                                                InsertCommand="INSERT INTO [tb_info] ([type], [title], [info], [linkman], [tel], [checkState], [date]) VALUES (@type, @title, @info, @linkman, @tel, @checkState, @date)"    
84                                                ProviderName=" < %$ ConnectionStrings:db_SISConnectionString1.ProviderName % >"    
85                                                SelectCommand="SELECT [ID], [type], [title], [info], [linkman], [tel], [checkState], [date] FROM [tb_info]"    
86                                                UpdateCommand="UPDATE [tb_info] SET [type] = @type, [title] = @title, [info] = @info, [linkman] = @linkman, [tel] = @tel, [checkState] = @checkState, [date] = @date WHERE [ID] = @ID"> 
87                                                 < DeleteParameters > 
88                                                         < asp:Parameter  Name ="ID"  Type ="Int32"  /> 
89                                                 </DeleteParameters> 
90                                                 < InsertParameters > 
91                                                         < asp:Parameter  Name ="type"  Type ="String"  /> 
92                                                         < asp:Parameter  Name ="title"  Type ="String"  /> 
93                                                         < asp:Parameter  Name ="info"  Type ="String"  /> 
94                                                         < asp:Parameter  Name ="linkman"  Type ="String"  /> 
95                                                         < asp:Parameter  Name ="tel"  Type ="String"  /> 
96                                                         < asp:Parameter  Name ="checkState"  Type ="Boolean"  /> 
97                                                         < asp:Parameter  Name ="date"  Type ="DateTime"  /> 
98                                                 </InsertParameters> 
99                                                 < UpdateParameters > 
100                                                         < asp:Parameter  Name ="type"  Type ="String"  /> 
101                                                         < asp:Parameter  Name ="title"  Type ="String"  /> 
102                                                         < asp:Parameter  Name ="info"  Type ="String"  /> 
103                                                         < asp:Parameter  Name ="linkman"  Type ="String"  /> 
104                                                         < asp:Parameter  Name ="tel"  Type ="String"  /> 
105                                                         < asp:Parameter  Name ="checkState"  Type ="Boolean"  /> 
106                                                         < asp:Parameter  Name ="date"  Type ="DateTime"  /> 
107                                                         < asp:Parameter  Name ="ID"  Type ="Int32"  /> 
108                                                 </UpdateParameters> 
109                                         </asp:SqlDataSource> 
110                                 </ContentTemplate> 
111                                 < Triggers > 
112                                         < asp:AsyncPostBackTrigger  ControlID ="Button1"  EventName ="Click"  /> 
113                                 </Triggers> 
114                         </asp:UpdatePanel> 
115                 </ContentTemplate> 
116                 < Triggers > 
117                        <asp:AsyncPostBackTrigger ControlID="GridView1"    
118                                EventName="SelectedIndexChanged" /> 
119                 </Triggers> 
120         </asp:UpdatePanel> 
121        <asp:UpdateProgress ID="UpdateProgress1" runat="server"    
122                AssociatedUpdatePanelID="UpdatePanel1"> 
123                 < ProgressTemplate > 
124                         < asp:Label  ID ="Label1"  runat ="server"  Text ="请等待，勿操作"  Width ="150px" > </asp:Label> 
125                         < input  ID ="Button2"  type ="button"  value ="取消当前操作"  onclick ="CancelClick()"  /> 
126                 </ProgressTemplate> 
127         </asp:UpdateProgress> 
128         </form> 
129 </body> 
130 </html>