Menu rétractible Ajax

**TheReturnOfMuton** · 08/03/2010, 12h33

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 !

**Nicolas Esprit** · 08/03/2010, 13h32

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é.

**Nicolas Esprit** · 08/03/2010, 13h34

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>

**TheReturnOfMuton** · 08/03/2010, 14h24

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...

**Nicolas Esprit** · 08/03/2010, 14h43

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.

**TheReturnOfMuton** · 08/03/2010, 15h49

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 @ + !

Menu rétractible Ajax

ASP.NET

Discussions similaires

Partager

Partager