来源：CSDN 作者：BraveHeart 发布时间：2007-11-12 人气：227
UpdateProgress控件：
在实际使用过程中，由于网络速度和服务器响应能力的影响，异步回发有的时候并不是想象的那么快，有时需要用户等待一段时间。在等待的过程中，用户可能不知道服务器处理完成了没有，让用户感觉有些迷茫。这时候如果我们在服务器处理数据的时候加入一个GIF动画，告诉用户稍等，等服务器处理完数据的时候GID动画消失，就会让用户感觉体贴很多。
我们可以使用UpdateProgress控件来实现这个功能。
Timer控件：
一个定时器控件，在指定的时间引发指定的操作。可替代JavaScript中的window.setTimeout()和window.setInterval()两个方法。
一、UpdateProgress控件的属性：
1、DynamicLayout：设置UpdateProgress控件的显示方式。
true--当UpdateProgress控件不显示的时候不占用空间（默认）。
false--当UpdateProgress控件不显示的时候仍然占用空间。
2、AssociateUpdatePanelID：设置哪个UpdatePanel内的控件产生的回送会显示UpdateProgress的内容。
3、DisplayAfter：当引发回送后多少毫秒会显示UpdateProgress控件的内容。
二、UpdateProgress控件的显示规则：
1、如果没有设定UpdateProgress控件的AssociateUpdatePanelID属性，则任何一个异步回送都回会使UpdateProgress控件显示出来。
2、如果将UpdateProgress控件的AssociateUpdatePanelID属性设为某个UpdatePanel控件的ID，那只有该UpdatePanel内的控件引发的异步回送会使相关联的UpdateProgress控件显示出来。
3、如果UpdatePanel控件的ChildrenAsTriggers属性设为false，那该UpdatePanel内的控件引发的异步回送仍会使相关联的UpdateProgress控件显示出来。
4、如果UpdatePanel控件以嵌套方式存在的话，那内部UpdatePanel控件引发的回送会使外部UpdatePanel相关联的UpdateProgress控件显示出来。
5、全页面回送不会对UpdatePanel产生效果
6、位于UpdatePanel外的控件引发了异步回送，要想让UpdateProgress控件与之相关联显示的话，那只能使用PageRequestManager对象的客户端编码来实现。
三、UpdateProgress案例：
1、由UpdatePanel内控件引发的回送，显示与其相关联的UpdateProgress。
这是一个产品查询的界面，点击"查询"按钮，列出该汽车厂商的旗下产品;点击每一种产品后的"查看详情"，显示该产品的详细信息。为了拉长服务器处理时间，我在服务器的事件中加入5秒的延迟时间。
当点击"查询"按钮时，由于服务器端延迟5秒，我使用了一个UpdateProgress控件，显示"正在查询相关数据，请稍候..."的字样;
当点击"查看详情"按钮时，同样也延迟了5秒，我使用了另外一个UpdateProgress控件，提示用户"正在生成产品的详细信息..."。
界面设计：
HTML代码：
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" SelectCommand = "......" ConnectionString="<%$ ConnectionStrings:mydbConnectionString %>"></asp:SqlDataSource>
请选择汽车厂商：<asp:DropDownList ID="prodList" runat="server" Width="193px" DataSourceID="SqlDataSource2" DataTextField="prod_name" DataValueField="prod_code">
</asp:DropDownList>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" ChildrenAsTriggers="False" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="查询" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpSelect" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="gif/Loading1.gif" />正在查询相关数据，请稍候......
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
<img src="gif/Loading2.gif" /><br>正在生成产品的详细信息......
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" Width="800px" OnSelectedIndexChanged="DataList1_SelectedIndexChanged" DataKeyField="code">
.......
</asp:DataList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="DataList1" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:mydbConnectionString %>" SelectCommand = "......"
ProviderName="<%$ ConnectionStrings:mydbConnectionString.ProviderName %>">
......
</asp:SqlDataSource>
服务器端的CS代码：
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
SqlDataSource1.Select(DataSourceSelectArguments.Empty);
}
protected void DataList1_SelectedIndexChanged(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
......
SqlDataSource1.Select(DataSourceSelectArguments.Empty);
}
2、由UpdatePanel外的控件引发回送，并显示相关的UpdateProgress，并可以中止异步请求。
当点击"查询"按钮的时候，在服务器端产生5秒的延迟时间。如果此时的UpdateProgress控件没有设置AssociateUpdatePanelID的话，那此时会显示UpdateProgress中的内容。如果指定了UpdateProgress控件的AssociateUpdatePanelID的话，那只能相应的UpdatePanel引发UpdateProgress的显示，而"查询"按钮没有在相应的UpdatePanel控件内，无法显示UpdateProgress，要想显示它必须用PageRequestManger对象的事件操作。
界面设计：
HTML代码：
请选择水果名称：<asp:DropDownList ID="ddlFruit" runat="server" DataSourceID="SqlDataSource1"
DataTextField="name" DataValueField="ids" Width="159px">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="查询" OnClick="Button1_Click" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:mydbConnectionString %>"
SelectCommand="SELECT * FROM [fruit]"></asp:SqlDataSource>
<asp:UpdateProgress ID="UpSelect" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<img src="gif/Loading3.gif" />正在查询中......<br />
<input id="Button2" type="button" value="取消" onclick="abortAsync()"/>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gridFruit" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" Width="500px">
......
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:mydbConnectionString %>"
ProviderName="<%$ ConnectionStrings:mydbConnectionString.ProviderName %>"></asp:SqlDataSource>
服务器端CS代码：
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button1);
}
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
SqlDataSource2.SelectCommand = "select * from fruit where ids = @ids";
SqlDataSource2.SelectParameters.Clear();
SqlDataSource2.SelectParameters.Add(new ControlParameter("ids","ddlFruit"));
SqlDataSource2.Select(DataSourceSelectArguments.Empty);
gridFruit.DataSourceID = SqlDataSource2.ID;
UpdatePanel1.Update();
}
客户端的JS代码：
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(initRequest);
prm.add_endRequest(endRequest);
function initRequest(sender,args)
{
if(prm.get_isInAsyncPostBack())
{
args.set_cancel(true);
}
var pe = args.get_postBackElement();
if(pe.id=="Button1"&&!prm.get_isInAsyncPostBack())
{
$get("UpSelect").style.display="block";
}
}
function endRequest(sender,args)
{
$get("UpSelect").style.display = "none";
}
function abortAsync()
{
if(prm.get_isInAsyncPostBack())
{
prm.abortPostBack();
}
}
四、Timer控件运行规则：
Timer控件使用之前必须向页面添加一个ScriptManager控件。
1、当Timer控件放在UpdatePanel之内：
a、当UpdatePanel控件的ChildrenAsTriggers属性设为True，这时Timer控件会自动引发异步更新它所在的UpdatePanel的内容。
b、当UpdatePanel控件的ChildrenAsTriggers属性设为False，你可以为UpdatePanel设置指向Timer控件的Tick()方法触发器，或者在Timer控件的Tick()方法代码中调用所属的UpdatePanel的Update()方法实现更新。
2、当Timer控件放在UpdatePanel之外：
a、为相应的UpdatePanel控件定久一个指向Timer控件的Tick()方法的触发器。
b、在PageLoad中用ScriptManager的RegisterAsyncPostBackControl()方法将Timer控件注册为一个异步回送的控件。如果UpdatePanel控件的UpdateMode设为Conditional的话，那还得在Tick()方法中调用UpdatePanel控件的Update()方法来实现。
五、Timer控件案例：
两个UpdatePanel控件中各有一个Label。两个Timer控件，一个在UpdatePanel内，另一个在UpdatePanel外，分别在各自的Tick()事件中更新相应的Label的内容