Panneau ASP.Net JQuery SlideToggle Postback

J'ai un panneau asp.net avec un style qui le cache et j'utilise JQuery pour glisserToggle le panneau en utilisant un hyperlien. Cela fonctionne bien. Cependant, si j'ajoute un bouton sur la page qui provoque une publication, le panneau reviendra par défaut à masqué. Je comprends pourquoi cela se produit mais quelle est la meilleure façon de garder l'état de visibilité des panneaux quand une publication se produit?Panneau ASP.Net JQuery SlideToggle Postback

<head runat="server"> 
    <title></title> 

    <script type='text/javascript' src="jquery-1.4.1.min.js"> 
    </script> 

    <style type="text/css"> 
     .panel 
     { 
      display: none; 
     } 
    </style> 

    <script type="text/javascript"> 
     $(function() { 
      $("#Link1").click(function(evt) { 
       evt.preventDefault(); 
       $('#panelText').slideToggle('slow'); 
      }); 
     }); 
    </script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
    <asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle 
    </asp:HyperLink><br /> 
    <asp:Panel ID="panelText" runat="server" CssClass="panel"> 
     Some text</asp:Panel> 
    <asp:Button ID="button1" runat="server" Text="Postback" /> 
    </form> 
</body> 
</html>

Source

2010-04-14 Germ

Voilà comment je résolu mon problème ...

<head runat="server"> 
    <title></title> 

    <script type='text/javascript' src="jquery-1.4.1.min.js"> 
    </script> 

    <style type="text/css"> 
     .panel 
     { 
      display: none; 
     } 
    </style> 

    <script type="text/javascript"> 
     $(function() { 
      $("#Link1").click(function(evt) { 
       evt.preventDefault(); 
       $('#panelText').slideToggle('slow'); 
       if ($('#panelText').hasClass('panel')) { 
        $('#PanelState').attr('value', 'true'); 
       } else { 
        $('#PanelState').attr('value', 'false'); 
       }     
      }); 
     }); 

     $(document).ready(function() { 
      if ($('#PanelState').attr('value') == 'false') { 
       $('#panelText').addClass('panel'); 
      } 
     }); 
    </script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
    <asp:HiddenField ID="PanelState" runat="server" Value="false" /> 
    <asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle 
    </asp:HyperLink><br /> 
    <asp:Panel ID="panelText" runat="server"> 
     Some text</asp:Panel> 
    <asp:Button ID="button1" runat="server" Text="Postback" /> 
    </form> 
</body> 
</html>

Source

2010-04-14 17:57:14 Germ

J'ai essayé la même chose. Mais je veux que le panneau soit caché au chargement du formulaire. J'ai essayé quelques petites choses, je n'ai pas travaillé. Pouvez-vous me dire ce que je dois changer? Excellente réponse btw. – Partha

Ajouter un champ caché sous forme:

<asp:HiddenField id="hdnPanelState" runat="Server" value="false" />

et modifier la fonction JS:

<script type="text/javascript"> 
    $(function() { 
     $("#Link1").click(function(evt) { 
      evt.preventDefault(); 
      $('#panelText').slideToggle('slow'); 
      //YOU WILL ALSO NEED TO CALCULATE IF SHOWING PANEL OR HIDING 
      $("#hdnPanelState").attr("value","true");//Store Value 
     }); 
    }); 
</script>

Source

2010-04-14 17:34:27 TheVillageIdiot

Merci pour l'idée @TheVillageIdiot – Germ

Panneau ASP.Net JQuery SlideToggle Postback

Répondre

Questions connexes