Friday, August 17, 2007

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:不是糊掉哦,是淡入的交會點。

4 comments:

Anonymous said...

[u][b]Xrumer[/b][/u]

[b]Xrumer SEO Professionals

As Xrumer experts, we possess been using [url=http://www.xrumer-seo.com]Xrumer[/url] for the benefit of a long time now and grasp how to harness the enormous power of Xrumer and go off it into a Bills machine.

We also provide the cheapest prices on the market. Diverse competitors see fit cost 2x or even 3x and a end of the time 5x what we charge you. But we maintain in providing gigantic accommodation at a low affordable rate. The entire incidental of purchasing Xrumer blasts is because it is a cheaper substitute to buying Xrumer. So we focusing to abide by that bit in recollection and afford you with the cheapest censure possible.

Not just do we be suffering with the greatest prices but our turnaround heyday for your Xrumer posting is wonderful fast. We will pull someone's leg your posting done ahead of you certain it.

We also outfit you with a sated log of affluent posts on manifold forums. So that you can see also in behalf of yourself the power of Xrumer and how we get harnessed it to gain your site.[/b]


[b]Search Engine Optimization

Using Xrumer you can wish to see thousands upon thousands of backlinks exchange for your site. Many of the forums that your Location you intent be posted on oblige exalted PageRank. Having your join on these sites can categorically serve strengthen up some cover dignity endorse links and genuinely as well your Alexa Rating and Google PageRank rating utterly the roof.

This is making your site more and more popular. And with this developing in popularity as familiarly as PageRank you can think to appreciate your milieu really downright high in those Search Engine Results.
Conveyance

The amount of traffic that can be obtained nearby harnessing the power of Xrumer is enormous. You are publishing your plat to tens of thousands of forums. With our higher packages you may equivalent be publishing your site to HUNDREDS of THOUSANDS of forums. Visualize 1 brief on a popular forum drive usually enter 1000 or so views, with announce ' 100 of those people visiting your site. At once devise tens of thousands of posts on fashionable forums all getting 1000 views each. Your shipping ordain function at the end of one's tether with the roof.

These are all targeted visitors that are interested or bizarre in the matter of your site. Envision how innumerable sales or leads you can fulfil with this great gang of targeted visitors. You are truly stumbling upon a goldmine bright to be picked and profited from.

Remember, Transport is Money.
[/b]

BECOME ENTHUSIASTIC ABOUT YOUR TWOPENNY BURST TODAY:


http://www.xrumer-seo.com

Anonymous said...

[B]NZBsRus.com[/B]
Dont Bother With Sluggish Downloads With NZB Downloads You Can Quickly Search High Quality Movies, PC Games, MP3 Singles, Applications & Download Them @ Rapid Rates

[URL=http://www.nzbsrus.com][B]Newsgroup[/B][/URL]

Anonymous said...

Predilection casinos? vouch on this advanced [url=http://www.realcazinoz.com]casino[/url] advisor and wing it denigrate online casino games like slots, blackjack, roulette, baccarat and more at www.realcazinoz.com .
you can also jerk our sorceress [url=http://freecasinogames2010.webs.com]casino[/url] box withdrawing of at http://freecasinogames2010.webs.com and spoil chief compressed legit skiff !
another late-model [url=http://www.ttittancasino.com]casino spiele[/url] on the give access to is www.ttittancasino.com , in secure loam german gamblers, angle past unrestrained online casino bonus.

Anonymous said...

Go over every accuracy of the OD for the pay for their needs aside from pledging any collateral with the loan lender. Las Vegas abscind is known as: the account fast and easy. It actually depends on the affiliation you have with borrowers for 3-D span of time. [url=http://paydayloanscoolp.co.uk]payday loans[/url] A checking account current is called for in which the account of bad credit payday loans will be realized. If your next emolument is defective to pay off the loan, go back to step one the add up and the added financial charges distributively. These loans can be very Agnus Dei and analysis. The academic dean abstraction as for why this kind of mortgage is known as fax less is for the admissibility that there will have to have an activistic checking account above they can affix for the loan. Typing a text ESP on in your handset's message box and get a anatomy out of a accidental financial adversity.