Hi,
I am using the ajax collapsible panel extender. Is there a way to remember the state of the collapsible panels?...
basically i am using it as part of a side navigation, the sidenavigation is a user control and is used on every webpage of the site. when i click the hyperlinks (contained within the panels that extend) the page navigates to the new page and all the panels collapse. i can see how this can get frustrating to users. so is there a way that it can remember what state it is in??
thanks
Hi,
According to your description, you want to maintain the state of collapsible panels between different pages, isn't it?
In order to implement this, you need to save the state in a place out of the scope of a page, so that it can't be shared among different pages. Cookie, Session, or Profile will be good choices for you.
By default, the state is saved in ViewState or some additional HiddenField. The problem with them is that they are inside a page, and are always transfered to the server with POST http request. When it's redirected to a new page with GET request, those values will not be available in the new page. So, storages that doesn't rely on a specific page should be used.
yes i want it to remember the state across different webpages.
Can you guide me further with what i may need to do?...can i do this by assigning something to a session variable? if so what must i assign?and what must i do to open the new page with the newly assigned state?
thanks
You can save the state in session. For example, Session["cp1State"] = ture; // indicates collapsibelPanel1 is expanded.
Another thing you need to do is use javascript to invoke a web service to save current state in session. This javascript will work as the expanded and collapsed event handler for the corresponding CollapsiblePanelBehavior.
Please can you give further details with the web service i need. i dont really know about web services...are there any examples used in conjunction with collapsiblePanel?
thanks
Here is a sample:
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">[System.Web.Services.WebMethod] public static void SaveState(string state) { HttpSessionState session = HttpContext.Current.Session; session["State"] = state; } protected void Page_Load(object sender, EventArgs e) { string script = @."function pageLoad(sender, args) { {0} $find('cpe2Behavior').add_collapsed(onCollapsed); $find('cpe2Behavior').add_expanded(onExpanded); }"; if (Session["State"] != null && Session["State"].ToString() == "expanded") { script = script.Replace("{0}", "$find('" + CollapsiblePanelExtender2.BehaviorID + "').expandPanel();"); } else { script = script.Replace("{0}", ""); } ScriptManager.RegisterStartupScript(this, this.GetType(), "expand", script, true); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"> </asp:ScriptManager> <asp:Panel ID="panel4" runat="server" > <asp:LinkButton ID="lnk2" runat="server" Text="Show Details"/> </asp:Panel> <!--Content to show--> <asp:Panel id="panel3" runat="server"> Content </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender SuppressPostBack="true" ID="CollapsiblePanelExtender2" BehaviorID="cpe2Behavior" runat="server" TargetControlID="panel3" ExpandControlID="panel4" CollapseControlID="Panel4" Collapsed="True" TextLabelID="lnk2" CollapsedText="Show Details.." ExpandedText="Hide Details.." > </ajaxToolkit:CollapsiblePanelExtender> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default3.aspx">Redirect to me</asp:HyperLink></div> <script type="text/javascript"> function pageLoad(sender, args) { $find("cpe2Behavior").add_collapsed(onCollapsed); $find("cpe2Behavior").add_expanded(onExpanded); } function onCollapsed(sender, args) { PageMethods.SaveState("collpased"); } function onExpanded(sender, args) { PageMethods.SaveState("expanded"); } </script> </form></body></html>
