ASP.NET Ajax UpdatePanel 刷新時的淡出淡入效果

 
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:不是糊掉哦,是淡入的交會點。
 
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值