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" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title ></ title >
     < style  type ="text/css" >
        .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 >

     < script  type ="text/javascript" >
        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 >
     < form  id ="form1"  runat ="server" >
     < div >
         < asp:ScriptManager  ID ="ScriptManager1"  runat ="server"   />
         < asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
             < ContentTemplate >
                 < 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" >
                             < Header >
                                 < 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 >
                             < Content >
                                 < p >
                                    This is the content area! </ p >
                             </ Content >
                         </ cc1:AccordionPane >
                         < cc1:AccordionPane  ID ="AccordionPane2"  runat ="server" >
                             < Header >
                                 < p >
                                    Click the LinkButton with no animation </ p >
                                 < asp:LinkButton  ID ="LinkButton2"  runat ="server" > LinkButton2 </ asp:LinkButton >
                             </ Header >
                             < Content >
                                 < 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 Class Test1
    Inherits System.Web.UI.Page

    Protected Sub LinkButton1_Click()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()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

转载于:https://www.cnblogs.com/Zhi-QiangNi/archive/2009/01/13/1374708.html