IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

ASP.NET Discussion :

Menu rétractible Ajax


Sujet :

ASP.NET

  1. #1
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Août 2004
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2004
    Messages : 282
    Par défaut Menu rétractible Ajax
    Bonjour,
    Voici ma question : mon site web dispose d'un menu, intégré à une MasterPage. Ce menu peut être caché ou déployé à l'aide d'un bouton et d'un CollapsiblePanelExtender Ajax. Le code est ci-dessous :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
     
     
                          <asp:Panel ID="PanelHeaderMenu" runat="server" Height="20px">
                                        <table class="style1">
                                            <tr>
                                                <td align="left" class="style19" valign="middle" width="0px">
                                                    <asp:Image ID="ImageHeaderMenu" runat="server" 
                                                        ImageUrl='<%= this.ResolveUrl("./Images/expand_arrow.JPG") %>' />
                                                </td>
                                                <td align="left">
                                                    <asp:Label ID="LabelHeaderPanelMenu" runat="server" Font-Bold="True" 
                                                        Font-Size="9px" style="margin-left: 0px" Width="0px" 
                                                        Font-Names="Verdana" ForeColor="White"></asp:Label>
                                                   </td>
                                            </tr>
                                        </table>
                                    </asp:Panel>
                            <asp:Panel ID="PanelMenu" runat="server" 
                            HorizontalAlign="Center" Width="98%" BorderStyle="Solid"
                            BorderColor="White" BorderWidth="1px">
     
                                <asp:Menu ID="MenuAccueil" runat="server" BackColor="#002E7D" 
                                    DisappearAfter="200" Enabled="False" 
                                    <Items>
                                        <asp:MenuItem NavigateUrl="~/Accueil.aspx" Text="Accueil" Value="Accueil">
                                        </asp:MenuItem>
                                    </Items>
                                </asp:Menu>
     
     
                               <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtenderPanelMenu"
                                runat="server" CollapseControlID="PanelHeaderMenu"
                                CollapsedImage="~/Images/collapse_arrow.jpg"
                                ExpandControlID="PanelHeaderMenu" ExpandDirection="Horizontal"   
                                ExpandedImage="~/Images/expand_arrow.jpg"
                                ExpandedSize="200"
                                ImageControlID="ImageHeaderMenu" 
                                SuppressPostBack="true"
                                TargetControlID="PanelMenu"
                                ScrollContents="false"
                                CollapsedText=" "
                                ExpandedText="Menu"
                                TextLabelID="LabelHeaderPanelMenu">
                            </ajaxToolkit:CollapsiblePanelExtender>
    Le problème est qu'à tout changement de page sur le site, on recharge la MasterPage (normal...), donc le menu revient dans son état par défaut (montré).
    Je souhaite garder en session l'état courant de mon menu (caché ou montré), mais je ne sais pas si c'est faisable avec le panel Ajax... impossible de gérer le "clic" sur l' ImageHeaderMenu ou le LabelHeaderPanelMenu...

    Pourriez-vous me dire comment conserver l'état courant ?
    Merci d'avance !

  2. #2
    Membre Expert
    Avatar de Nicolas Esprit
    Homme Profil pro
    Consultant en technologies
    Inscrit en
    Février 2010
    Messages
    1 467
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Consultant en technologies
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2010
    Messages : 1 467
    Par défaut
    Bonjour TheReturnOfMuton,

    Une solution simple consiste à stocker en Session le statut du CollapsiblePanel (caché ou non) et lors du chargement de ta MasterPage, tu initialises l'état du CollapsiblePanel avec ce que tu as en Session.

    En espérant t'avoir aidé.

  3. #3
    Membre Expert
    Avatar de Nicolas Esprit
    Homme Profil pro
    Consultant en technologies
    Inscrit en
    Février 2010
    Messages
    1 467
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Consultant en technologies
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2010
    Messages : 1 467
    Par défaut
    Sinon tu peux faire cela en Javascript, comme expliqué dans le code suivant :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    <%@ Page Language="C#" %>
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     
    <script runat="server">
     
    </script>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>ClickEvent</title>
        <style type="text/css">
            .collapsePanel {
    	        background-color:white;
    	        overflow:hidden;
            }
     
            .collapsePanelHeader{
    	        width:100%;
    	        height:30px;
    	        background-image: url(../pic/bg-menu-main.png);
    	        background-repeat:repeat-x;
    	        color:#FFF;
    	        font-weight:bold;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:TextBox ID="TextBox1" runat="server" Width="300"></asp:TextBox>
            <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanelHeader" Height="30px">
                <div style="padding: 5px; cursor: pointer; vertical-align: middle;" onclick="getCollapsibleState()">
                    <div style="float: left;">
                        What is ASP.NET AJAX?</div>
                    <div style="float: left; margin-left: 20px;">
                        <asp:Label ID="Label1" runat="server">(Show Details...)</asp:Label>
                    </div>
                    <div style="float: right; vertical-align: middle;">
                        <asp:ImageButton ID="Image1" runat="server" ImageUrl="../pic/expand_blue.jpg" AlternateText="(Show Details...)" />
                    </div>
                </div>
            </asp:Panel>
            <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel" Height="0">
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <%=DateTime.Now.ToString() %>
                        <div style="display: none">
                            <asp:Button ID="Button1" runat="server" Text="Button" />
                        </div>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                    </Triggers>
                </asp:UpdatePanel>
            </asp:Panel>
            <ajaxToolkit:CollapsiblePanelExtender ID="cpeDemo" runat="Server" TargetControlID="Panel1"
                ExpandControlID="Panel2" CollapseControlID="Panel2" Collapsed="False" TextLabelID="Label1"
                ImageControlID="Image1" ExpandedText="(Hide Details...)" CollapsedText="(Show Details...)"
                ExpandedImage="../pic/collapse_blue.jpg" CollapsedImage="../pic/expand_blue.jpg"
                SuppressPostBack="true"/>
     
            <script type="text/javascript" language="javascript">
     
            var objExtender;
     
            // this will run automatically when the page has finished loading
            function pageLoad(sender, args)
            {
                objExtender = $find("<%=cpeDemo.ClientID%>");
                objExtender.add_expandComplete(getCollapsibleState);
                objExtender.add_collapseComplete(getCollapsibleState);
            }
     
            function getCollapsibleState()
            {
                if(objExtender.get_Collapsed())
                {   
                     $get("<%=TextBox1.ClientID%>").value="Now it is getting collapsed!";
                }
                else
                {   
                   $get("<%=TextBox1.ClientID%>").value="Now it is getting expanded!";
                    $get("<%=Button1.ClientID %>").click();
                }
            }  
            </script>
        </form>
    </body>
    </html>

  4. #4
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Août 2004
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2004
    Messages : 282
    Par défaut
    Salut Nicolas,
    J'ai bien lu ton post mais je reste bloqué :
    en appliquant ta méthode JavaScript, je ne peux toujours pas mettre en session l'état courant du menu... pour cela je dois le faire côté serveur...

    En gros mon pb est :
    Je dois enregistrer côté client l'état du menu, et le mettre en session (donc côté serveur)
    Le reste est trivial (charger le menu en fonction de son état en session)

    Typiquement le code suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
            protected void Page_UnLoad(object sender, EventArgs 
                if (((AjaxControlToolkit.CollapsiblePanelExtender)(form1.FindControl("CollapsiblePanelExtenderPanelMenu"))).Collapsed == false)
                    Session.Add("MenuCache", "false");
                else
                    Session.Add("MenuCache", "true");
            }
    ne marche pas, car on regarde l'état du panel côté serveur, mais il ne change jamais ! Car on ne fait jamais de postback lorsqu'on cache le menu sur la page cliente...

  5. #5
    Membre Expert
    Avatar de Nicolas Esprit
    Homme Profil pro
    Consultant en technologies
    Inscrit en
    Février 2010
    Messages
    1 467
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Consultant en technologies
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Février 2010
    Messages : 1 467
    Par défaut
    Oui, c'est normal que côté serveur tu ne puisses pas voir quel est l'état du Panel. Peux-tu essayer de cette façon ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    string ControlPrefix = "ctl00$ContentPlaceHolder1$";
    string ControlSuffix = "_ClientState";
     
    CollapsiblePanelExtenderPanelMenu.Collapsed = (Request.Form[ControlPrefix + CollapsiblePanelExtenderPanelMenu.ID + ControlSuffix] == "true") || (Request.Form[ControlPrefix + CollapsiblePanelExtenderPanelMenu.ID + ControlSuffix] == null);
    En remplaçant bien sûr le ControlPrefix en fonction de ta page. Tu n'es pas obligé non plus d'utiliser l'objet Session. Peut-être qu'un Hidden Field, renseigné côté client serait plus pratique.

  6. #6
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Août 2004
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2004
    Messages : 282
    Par défaut
    Bon Nicolas, tous,
    Pb résolu :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
            protected void Page_Load(object sender, EventArgs e) {
                if (Session["MenuCache"] != null && Session["MenuCache"].ToString().Equals("false")) {
                    ((AjaxControlToolkit.CollapsiblePanelExtender)(form1.FindControl("CollapsiblePanelExtenderPanelMenu"))).Collapsed = false;
                } else if (Session["MenuCache"] != null && Session["MenuCache"].ToString().Equals("true")) {
                    ((AjaxControlToolkit.CollapsiblePanelExtender)(form1.FindControl("CollapsiblePanelExtenderPanelMenu"))).Collapsed = true;
                }
            }
     
            protected void Page_UnLoad(object sender, EventArgs e) {
                if (CollapsiblePanelExtenderPanelMenu.ClientState != null)
                    Session.Add("MenuCache", CollapsiblePanelExtenderPanelMenu.ClientState.ToString());
            }
    Il fallait savoir (et moi je débute en Ajax) que les composants Ajax sont accessibles depuis le client ET le serveur, donc je peux voir l'état du menu en temps réel sur le client... et donc mettre l'état en session !
    Merci Nicolas et @ + !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. poster le nom au lieu du id menu deroulant ajax/php
    Par monlou dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 17/06/2010, 20h53
  2. [AJAX] menu déroulant Ajax
    Par loulitta dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 19/06/2008, 13h14
  3. [AJAX] Menu accordeon AJAX
    Par zepload dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 27/02/2008, 13h38
  4. [AJAX] Menu dynamique AJAX
    Par outlawz dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 04/07/2006, 15h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo