使用AJAX的UpdatePanelAnimationExtender
使用AJAX的UpdatePanelAnimationExtender
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click 
Protected
System.Threading.Thread.Sleep(2000) Me.GridView1.DataBind() 
End Sub
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server">10258</asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="搜尋" /></div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>"
SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID], [OrderDate], [RequiredDate], [ShippedDate], [ShipVia], [Freight], [ShipName], [ShipAddress], [ShipCity], [ShipRegion], [ShipPostalCode], [ShipCountry] FROM [Orders] where OrderID=@OrderID"
CancelSelectOnNullParameter="true">
<SelectParameters>
<asp:ControlParameter ControlID="TextBox1" Name="OrderID" PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="OrderID"
DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。">
<Columns>
<asp:BoundField DataField="OrderID" HeaderText="OrderID" ReadOnly="True" SortExpression="OrderID" />
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID" />
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" SortExpression="EmployeeID" />
<asp:BoundField DataField="OrderDate" HeaderText="OrderDate" SortExpression="OrderDate" />
<asp:BoundField DataField="ShipVia" HeaderText="ShipVia" SortExpression="ShipVia" />
<asp:BoundField DataField="Freight" HeaderText="Freight" SortExpression="Freight" />
<asp:BoundField DataField="ShipName" HeaderText="ShipName" SortExpression="ShipName" />
<asp:BoundField DataField="ShipAddress" HeaderText="ShipAddress" SortExpression="ShipAddress" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UpdatePanel1"
runat="server">
<Animations>
<OnUpdating>
<Parallel Duration="0">
<EnableAction AnimationTarget="Button1" Enabled="false" />
<EnableAction AnimationTarget="GridView1" Enabled="false" />
<FadeOut MinimumOpacity=".5" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel Duration="0">
<FadeIn MinimumOpacity=".5" />
<EnableAction AnimationTarget="Button1" Enabled="true" />
<EnableAction AnimationTarget="GridView1" Enabled="true" />
</Parallel>
</OnUpdated>
</Animations>
</cc1:UpdatePanelAnimationExtender>
</form>
</body>
</html>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TextBox1" runat="server">10258</asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="搜尋" /></div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString1 %>"
ProviderName="<%$ ConnectionStrings:NorthwindConnectionString1.ProviderName %>"
SelectCommand="SELECT [OrderID], [CustomerID], [EmployeeID], [OrderDate], [RequiredDate], [ShippedDate], [ShipVia], [Freight], [ShipName], [ShipAddress], [ShipCity], [ShipRegion], [ShipPostalCode], [ShipCountry] FROM [Orders] where OrderID=@OrderID"
CancelSelectOnNullParameter="true">
<SelectParameters>
<asp:ControlParameter ControlID="TextBox1" Name="OrderID" PropertyName="Text" />
</SelectParameters>
</asp:SqlDataSource>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="OrderID"
DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。">
<Columns>
<asp:BoundField DataField="OrderID" HeaderText="OrderID" ReadOnly="True" SortExpression="OrderID" />
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID" />
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" SortExpression="EmployeeID" />
<asp:BoundField DataField="OrderDate" HeaderText="OrderDate" SortExpression="OrderDate" />
<asp:BoundField DataField="ShipVia" HeaderText="ShipVia" SortExpression="ShipVia" />
<asp:BoundField DataField="Freight" HeaderText="Freight" SortExpression="Freight" />
<asp:BoundField DataField="ShipName" HeaderText="ShipName" SortExpression="ShipName" />
<asp:BoundField DataField="ShipAddress" HeaderText="ShipAddress" SortExpression="ShipAddress" />
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="UpdatePanel1"
runat="server">
<Animations>
<OnUpdating>
<Parallel Duration="0">
<EnableAction AnimationTarget="Button1" Enabled="false" />
<EnableAction AnimationTarget="GridView1" Enabled="false" />
<FadeOut MinimumOpacity=".5" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel Duration="0">
<FadeIn MinimumOpacity=".5" />
<EnableAction AnimationTarget="Button1" Enabled="true" />
<EnableAction AnimationTarget="GridView1" Enabled="true" />
</Parallel>
</OnUpdated>
</Animations>
</cc1:UpdatePanelAnimationExtender>
</form>
</body>
</html>
