AJAX可折叠面板扩展器代码背后

时间:2013-12-27 13:24:51

标签: c# asp.net ajax collapsiblepanelextender

我在AJAX可折叠面板扩展器方面遇到了一些问题。目前我想要做的是当某些面板被扩展时,它会执行一些sql语句。除了在Page Load方法中挤压所有代码之外,我不知道如何编写代码。以下是我设置可折叠面板扩展器的方法:

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

任何相关的研究链接将不胜感激。提前谢谢。

1 个答案:

答案 0 :(得分:0)

这是可能的。

在gist中,您应该使用ajax客户端页面生命周期。就像你的服务器端aspx页面中有一个页面加载;在客户端(即在浏览器中呈现的网页)中有一个页面加载,这是在所有asp.net客户端ajax js库全部加载后发生的。

因为你应该做类似的事情:

//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'); });

此处有更多详情:http://forums.asp.net/p/1112899/1717195.aspx

您需要执行一些服务器端逻辑来填充变得可见的容器中的内容。为此,您需要一些AJAJ。这只是一些以这种方式编写的aspx页面,可以将JSON响应呈现给您的浏览器。但是它们将通过XMLHttpRequest对象调用。

或者,您可以依赖asmx Web服务,甚至是页面方法来为您完成工作。他们将作为脚本服务运行,为您完成工作。

请看一下这个帖子:http://forums.asp.net/t/1729092.aspx?loading+data+in+the+target+control+panel+of+collapsible+extender+when+Collapse+Expand+control+panel+is+clicked+