Stay Animation of Accordion When Header Controls Cause PostBack

Every time we use the AccordionExtender of AjaxControlToolkit, we may would like to enable the Header's control to cause post back. To achieve this, simply set the property SuppressHeaderPostbacks with false. (Notice that we need use the latest version.)

But if the service event of the control is fired, the whole page would be refreshed with all the controls be rendered again. Thus the client animations of the Accordion would not be produced, the behavior is indeed an update of the page with the new style of the AccordionPane.

That's not what we want, we need to stay the animation. Now, let's do it.
First, we need to disable the ServiceEvent by adding 'return false' inside the OnClientClick function.

<asp:LinkButton ID="LinkButton1" OnClientClick="linkClientClick(0,this);return false;" runat="server">LinkButton1</asp:LinkButton>

Then, in the ClientClick function, we add an event handler to the Fade Animation's ended event. The AjaxControlToolkit animation provides an function named 'add_ended(handler)' to help us do it.

function linkClientClick(id, link) {
    //To handle the animation ended event
    accordion._getAnimation(accordion._panes[id])._animations[0].add_ended(animationEndedHandler);
    //get the Link's uniqueID from the href
    a = link.href.replace("javascript:__doPostBack('", "");
    currentLink = a.substring(0, a.indexOf("'", 0));
}

In the handler, call the _doPostBack function whose eventTarget is set as the clicked LinkButton.

function animationEndedHandler() {

if (currentLink) {

//do post back

__doPostBack(currentLink, '');

}

Here is the whole code:
.aspx file

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test1.aspx.vb" Inherits="SoluTest_Accordion.Test1"

EnableEventValidation="false" %>

<%@ 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">

.accordionHeader

{

border: 1px solid #2F4F4F;

color: white;

background-color: #2E4d7B;

font-family: Arial, Sans-Serif;

font-size: 12px;

font-weight: bold;

padding: 5px;

margin-top: 5px;

cursor: pointer;

height: 10px;

}

.accordionHeaderSelect

{

border: 1px solid #2F4F4F;

color: red;

background-color: #2E4d7B;

font-family: Arial, Sans-Serif;

font-size: 12px;

font-weight: bold;

padding: 5px;

margin-top: 5px;

cursor: pointer;

height: 10px;

}

.accordionContent

{

background-color: #D3DEEF;

border: 1px dashed #2F4F4F;

border-top: none;

padding: 5px;

padding-top: 10px;

}

</style>

var accordion;

var currentLink;

function linkClientClick(id, link) {

//To handle the animation ended event

accordion._getAnimation(accordion._panes[id])._animations[0].add_ended(animationEndedHandler);

//get the Link's uniqueID from the href

a = link.href.replace("javascript:__doPostBack('", "");

currentLink = a.substring(0, a.indexOf("'", 0));

}

function pageLoad() {

accordion = $find("Accordion2_AccordionExtender");

currentLink = null;

}

function animationEndedHandler() {

if (currentLink) {

//do post back

__doPostBack(currentLink, '');

}

</script>

</head>

<body>

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<cc1:Accordion ID="Accordion2" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"

HeaderSelectedCssClass="accordionHeaderSelect" ContentCssClass="accordionContent"

FadeTransitions="True" FramesPerSecond="40" TransitionDuration="1250" AutoSize="None"

RequireOpenedPane="false" SuppressHeaderPostbacks="false">

<Panes>

<cc1:AccordionPane ID="AccordionPane1" runat="server">

<p>

Run fade animation before Link's service event is fired.</p>

<asp:LinkButton ID="LinkButton1" OnClientClick="linkClientClick(0,this);return false;"

runat="server">LinkButton1</asp:LinkButton><%-- return false to disable the server event--%>

</Header>

<p>

This is the content area!</p>

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane ID="AccordionPane2" runat="server">

<p>

Click the LinkButton with no animation</p>

<asp:LinkButton ID="LinkButton2" runat="server">LinkButton2</asp:LinkButton>

</Header>

<p>

This is the content area!</p>

</Content>

</cc1:AccordionPane>

</Panes>

</cc1:Accordion>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

.aspx.vb file

Public Partial Class Test1

Inherits System.Web.UI.Page

Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles LinkButton1.Click

LinkButton1.Text = "Link1 is clicked!"

End Sub

Protected Sub LinkButton2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles LinkButton2.Click

LinkButton2.Text = "Link2 is clicked!"

End Sub

End Class

Thread url:http://forums.asp.net/p/1367664/2855920.aspx#2855920

posted on 2009-01-13 12:42 Zhi-Qiang Ni 阅读(1383) 评论(3) 编辑收藏举报