Hi lunix11,
My last sample demonstrated how to dopostback after the Animation is ended. The LinkButton had no the PostBackUrl property. If you would like to let the LinkButton redirect the page to other URL. The key is find the LinkButton’s UniqueID from the Link’s href and then post back to another page at the server side.
We know the UniqueID is always displayed as the first parameter of the LinkButton’s href.
For example,
Only Post Back
javascript:__doPostBack('ctl05$LinkButton2','')
With PostBackURL
javascript:WebForm_DoPostBackWithOptions(new%20WebForm_PostBackOptions("ctl03$LinkButton1",%20"",%20false,%20"",%20"Default.aspx",%20false,%20true))
So, to find the UniqueID, this code is great:
//get the Link's uniqueID from the href
var href = link.href;
var startIndex;
var endIndex;
if (href.indexOf('"', 0) == -1) {
//the style of the href is javascript:__doPostBack('ctl05$LinkButton2','')
startIndex = href.indexOf("'", 0) + 1;
endIndex = href.indexOf("'", startIndex);
} else {
//the style of the href is javascript:WebForm_DoPostBackWithOptions(new%20WebForm_PostBackOptions("ctl03$LinkButton1",%20"",%20false,%20"",%20"Default.aspx",%20false,%20true))
startIndex = href.indexOf('"', 0) + 1;
endIndex = href.indexOf('"', startIndex);
}
currentLink = href.substring(startIndex, endIndex);
Now, let’s finish the solution. Please refer to my code here:
.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(paneIndex, link) {
//To handle the animation ended event
accordion._getAnimation(accordion._panes[paneIndex])._animations[0].add_ended(animationEndedHandler);
//get the Link's uniqueID from the href
var href = link.href;
var startIndex;
var endIndex;
if (href.indexOf('"', 0) == -1) {
//the style of the href is javascript:__doPostBack('ctl05$LinkButton2','')
startIndex = href.indexOf("'", 0) + 1;
endIndex = href.indexOf("'", startIndex);
} else {
//the style of the href is javascript:WebForm_DoPostBackWithOptions(new%20WebForm_PostBackOptions("ctl03$LinkButton1",%20"",%20false,%20"",%20"Default.aspx",%20false,%20true))
startIndex = href.indexOf('"', 0) + 1;
endIndex = href.indexOf('"', startIndex);
}
currentLink = href.substring(startIndex, endIndex);
}
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" PostBackUrl="~/Default.aspx" OnClientClick="linkClientClick(0,this);return false;"
runat="server">LinkButton1</asp:LinkButton>
<%-- return false to disable the server event--%>
<%--Notice that the paneIndex is 0--%>
</Header>
<Content>
<p>
This is the content area!</p>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane2" runat="server">
<Header>
<p>
Click the LinkButton with animation but no redirection</p>
<asp:LinkButton ID="LinkButton2" runat="server" OnClientClick="linkClientClick(1,this);return false;">LinkButton2</asp:LinkButton>
<%--Notice that the paneIndex is 1--%>
</Header>
<Content>
<p>
This is the content area!</p>
</Content>
</cc1:AccordionPane>
<cc1:AccordionPane ID="AccordionPane3" runat="server">
<Header>
<p>
Click the LinkButton with redirection but no animation</p>
<asp:LinkButton ID="LinkButton3" PostBackUrl="~/Default.aspx" runat="server">LinkButton3</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
Inherits System.Web.UI.Page
Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles LinkButton1.Click
Response.Redirect("Default.aspx")
'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
Have my suggestion helped?
Best regards,
Zhi-Qiang Ni