ASP.NET Ajax UpdatePanel 刷新時的淡出淡入效果
近日老婆為了準備考試，在網路上找尋考古題時，偶然訪問了一個某教授的網站，這個網站在切換頁面時，以淡出淡入效果來取代頁面的刷新，雖然以 前早就看過這類效果，不過由於最近在寫ASP.NET Ajax的書籍，突然想到這也可以用在UpdatePanel的刷新過程！遂寫下一個小範例，這個例子可以在UpdatePanel刷新時，呈現淡出及淡 入的效果，更有趣的是，這個淡出及淡入的效果是利用Ajax Control Toolkit的Animation來達成的，這意味著其它如Resize、Move、Color等Animation也可以與此技巧合用，例子本身並不 複雜，概念也很簡單，不過若你仔細看裡面的程式碼，我想你會得到一些使用ASP.NET Ajax的啟發，當然！這只是我的猜想，哈~~~。
PS:話說回來.......我週日得陪考，8點到下午3點，看來得抱筆記電腦去試場寫書了，>"<！！
Default.aspx
|
<%
@
Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%
@
Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!
DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<
html
xmlns="http://www.w3.org/1999/xhtml">
<
head
runat="server">
<title>Untitled Page</title>
</
head
>
<
body
>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<asp:Panel ID="hiddenPanel" runat=server Height="0px" Width="0px" Style="position:absolute; left:0px; top:0px; z-index:100; display:none">
<div id=hiddenInnerPanel></div>
</asp:Panel>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax] FROM [Customers]">
</asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server"
AllowPaging
="True"
AutoGenerateColumns="False"
BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth
="1px"
CellPadding="2"
DataKeyNames="CustomerID" DataSourceID="SqlDataSource1"
ForeColor
="Black"
GridLines="None" PageSize="20">
<FooterStyle BackColor="Tan" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="CustomerID"
HeaderText
="CustomerID"
ReadOnly="True"
SortExpression
="CustomerID"
/>
<asp:BoundField DataField="CompanyName"
HeaderText
="CompanyName"
SortExpression
="CompanyName"
/>
<asp:BoundField DataField="ContactName"
HeaderText
="ContactName"
SortExpression
="ContactName"
/>
<asp:BoundField DataField="ContactTitle"
HeaderText
="ContactTitle"
SortExpression
="ContactTitle"
/>
<asp:BoundField DataField="Address"
HeaderText
="Address"
SortExpression="Address" />
<asp:BoundField DataField="City" HeaderText="City"
SortExpression
="City"
/>
<asp:BoundField DataField="Region" HeaderText="Region"
SortExpression
="Region"
/>
<asp:BoundField DataField="PostalCode"
HeaderText
="PostalCode"
SortExpression="PostalCode" />
<asp:BoundField DataField="Country" HeaderText="Country"
SortExpression
="Country"
/>
<asp:BoundField DataField="Phone" HeaderText="Phone"
SortExpression="Phone" />
<asp:BoundField DataField="Fax" HeaderText="Fax"
SortExpression
="Fax"
/>
</Columns>
<SelectedRowStyle BackColor="DarkSlateBlue"
ForeColor
="GhostWhite"
/>
<PagerStyle BackColor="PaleGoldenrod"
ForeColor
="DarkSlateBlue"
HorizontalAlign="Center" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<script language=javascript>
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequest);
prm.add_endRequest(EndRequest);
//will,not just FadeIn/FadeOut,you can use other animation,like resize.
var ani = $create(
AjaxControlToolkit.Animation.FadeOutAnimation,
{target: $get('hiddenPanel'), duration: .5, fps :25});
function BeginRequest(sender,args)
{
//only playing animation at grid page-switching
if(args.get_postBackElement().id == "GridView1" &&
theForm.__EVENTARGUMENT.value.indexOf('Page') != -1)
{
//set visible and playing animation
var hiddenPanel = $get('hiddenPanel');
var updatePanel = $get('UpdatePanel1');
var bounds = Sys.UI.DomElement.getBounds(updatePanel);
if(Sys.Browser.agent == Sys.Browser.Firefox)
{
//for firefox,px is need.
hiddenPanel.style.width = bounds.width+"px";
hiddenPanel.style.height = bounds.height+"px";
}
else
{
hiddenPanel.style.width = bounds.width;
hiddenPanel.style.height = bounds.height;
}
Sys.UI.DomElement.setLocation(hiddenPanel,bounds.x,bounds.y);
//the key point,remove it will raise exception.
hiddenPanel.innerHTML =
updatePanel.innerHTML.replace(//id=temp_/g, "id=");
hiddenPanel.style.display = "block";
ani.add_ended(AniStop);
ani.play();
}
}
function AniStop()
{
//set hidden.
var hiddenPanel = $get('hiddenPanel');
hiddenPanel.style.left = "0px";
hiddenPanel.style.top = "0px";
hiddenPanel.style.height = "0px";
hiddenPanel.style.width = "0px";
hiddenPanel.style.display = "none";
hiddenPanel.innerHTML = "";
}
function EndRequest(sender,args)
{
//you can un-mark below code at async-postback ended,
//but we want user can see animation play to end ^_^
//ani.stop();
}
</script>
<cc1:AnimationExtender ID="AnimationExtender1"
runat
="server"
TargetControlID="hiddenPanel">
</cc1:AnimationExtender>
</div>
</form>
</
body
>
</
html
>
|
效果圖
PS:不是糊掉哦，是淡入的交會點。