AJAX Collapsible Panel Extender Code Behind

Question

I am having some problem with AJAX Collapsible Panel Extender. Currently what I am trying to do is when certain panel is extended, then it will perform some sql statement. I have no idea on how to write the code other than just squeeze all of them in the Page Load method. Here is how I set up my collapsible panel extender:

<!-- FIRST COLLAPSIBLE PANEL EXTENDER -->
                <asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
                    <!-- First collapsible panel extender header -->
                    <div class="form-group" style="background-color:#ffb848; height: 30px; vertical-align: middle">
                        <div class="col-md-3">
                        <div style="float: left; color: White; padding: 5px 5px 0 0">
                            Collapsible Panel
                        </div>
                        </div>
                        <div class="col-md-9">
                        <div style="float: right; color: White; padding: 5px 5px 0 0">
                            <asp:Label ID="lblHeaderText1" runat="server" />
                            <asp:Image ID="imgArrows1" Text = "IMAGE" runat="server" />
                        </div>
                            </div>
                        <div style="clear: both"></div>
                    </div>
                </asp:Panel>
                <!-- First collapsible panel extender body -->
                <asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
                    <asp:Label ID="lblBodyText1" runat="server" />
                    Hey there
                </asp:Panel>
                <asp:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
                    ExpandControlID="pHeader1" Collapsed="true" ImageControlID="imgArrows1"
                    CollapsedImage="~/Images/downarrow.jpg"
                    ExpandedImage="~/Images/uparrow.jpg" TextLabelID="lblHeaderText1" CollapsedText="Show"
                    ExpandedText="Hide" CollapsedSize="0" ExpandedSize="200"
                    ScrollContents="true">
                </asp:CollapsiblePanelExtender>

Any related research link would be appreciated. Thanks in advance.

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

This is possible.

In gist you are supposed to work with the ajax client-side page life-cycle. Like there is a page load in your server-side aspx page; there is a page load in the client (i.e. the web page rendered in the browser) which happens after all the asp.net client ajax js libraries are all loaded.

In that you are supposed to do something like:

//this would be <%=myExtender.ClientID%> when using a master page
var extender = $find('myExtender_ClientId'); 
extender.add_collapsed( function() { alert('collapsed'); });
extender.add_expanded( function() { alert('expanded'); });

More details here: http://forums.asp.net/p/1112899/1717195.aspx

You'd want to execute some server side logic to populate stuff in the container that becomes visible. For this you need some AJAJ. This is nothing but some aspx pages written in such a way to render JSON responses back to your browser. But they will be invoked via an XMLHttpRequest object.

Alternatively you can rely on asmx web services, or even page methods to do the work for you. They've to run as script services to do the work for you.

Have a look at this thread for that: http://forums.asp.net/t/1729092.aspx?loading+data+in+the+target+control+panel+of+collapsible+extender+when+Collapse+Expand+control+panel+is+clicked+

AJAX Collapsible Panel Extender Code Behind

1 Answers1