Держите JQuery аккордеон открытым после обновления

Question

Я создал веб-сайт asp.net, в котором я разместил аккордеон jquery. Моя проблема в том, что после обратной передачи или обновления текущая панель аккордеона закрывается, и страница сбрасывает все. Это мой JQuery код:

jQuery(document).ready(function() { 
    function close_accordion_section() { 
     jQuery('.button').removeClass('active'); 
     jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open'); 
    } 
    jQuery('.button').click(function (e) { 
     var currentAttrValue = jQuery(this).attr('href'); 
     if (jQuery(e.target).is('.active')) { 
      close_accordion_section(); 
     } 
     else { 
      close_accordion_section(); 
      jQuery(this).addClass('active'); 
      jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
      document.getElementById('.accordion ' + currentAttrValue).scrollIntoView(); 

     } 
     e.preventDefault(); 
    }); 
}); 

Что я могу сделать, чтобы мой аккордеон панель открыта после обратной передачи или обновления? Thanks in Advance

Answer 1

Проблема, с которой вы столкнулись, заключается в том, что после обратной передачи asp.net обновляет всю страницу. Решения, которые будут:

1. Использование UpdatePanel для тех мест, которые вы хотите обновить http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel(v=vs.110).aspx, что позволит предотвратить PostBack от обновить страницу
2. Включите информацию в постбэка, который аккордеон в настоящее время открыт и открыть его
   • либо из asp.net backend
   • , либо из javascript с ClientScriptManager.RegisterStartupScript (this.GetType(), "AKey", "MyFunction ('paramToOpenTab');", true);

Answer 2

Благодаря его workes с UpdatePanel; Это решение:

<div id="accordion-1" class="accordion-section-content"> 
       <asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"></asp:ScriptManager> 
       <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
       <ContentTemplate> 
       <table style="width:100%; height: 600px;" border="1"> 
       <tr> 
       <td></td> 
       <td><asp:Button ID="btnChercher" runat="server" Text="Chercher" onclick="btn_Chercher"></asp:Button></td> 
       </tr> 
      <tr> 
       <td> 
       Test 1</td> 
       <td> 
        <asp:Chart ID="ChartDate" runat=server> 
        <Legends> 
       <asp:Legend Alignment="Center" Docking="Top" IsTextAutoFit="False" Name="Default" LegendStyle="Row" /> 
      </Legends> 
        <Series> 
        <asp:Series Name="Nombre documents"></asp:Series> 
        </Series> 
        <ChartAreas><asp:ChartArea Name="ChartArea1"></asp:ChartArea></ChartAreas> 
        </asp:Chart></td> 
      </tr> 
      <tr> 
       <td> 
        Test 3</td> 
       <td> 
        <asp:Chart ID="ChartEtat" runat=server> 
        <Legends> 
       <asp:Legend Alignment="Center" Docking="Top" IsTextAutoFit="False" Name="Default" LegendStyle="Row" /> 
      </Legends> 
        <Series> 
        <asp:Series Name="Etat"></asp:Series> 
        </Series> 
        <ChartAreas><asp:ChartArea Name="ChartAreaHlm"></asp:ChartArea></ChartAreas> 
        </asp:Chart></td> 
      </tr> 
      <tr> 
       <td> 
        Test 5</td> 
       <td> 
        <asp:Chart ID="ChartFormulaire" runat=server> 
        <Legends> 
       <asp:Legend Alignment="Center" Docking="Top" IsTextAutoFit="False" Name="Default" LegendStyle="Row" /> 
      </Legends> 
        <Series> 
        <asp:Series Name="Formulaire"></asp:Series> 
        </Series> 
        <ChartAreas><asp:ChartArea Name="ChartAreaFormulaire"></asp:ChartArea></ChartAreas> 
        </asp:Chart></td> 
      </tr> 
     </table> 
     </ContentTemplate> 
     </asp:UpdatePanel> 
       </div> 

Спасибо n0mercy