CollapsiblePanelExtender：我可以从客户端 JavaScript 启动折叠/展开吗？（AJAX 控制工具包）答案

【问题标题】：CollapsiblePanelExtender: Can I initiate collapse/expand from client-side javascript? (AJAX Control Toolkit)CollapsiblePanelExtender：我可以从客户端 JavaScript 启动折叠/展开吗？（AJAX 控制工具包）
【发布时间】：2009-06-30 20:02:42
【问题描述】：

CollapsiblePanelExtender 似乎主要设计用于折叠/展开以响应用户鼠标事件。是否还有一种好方法可以让扩展器折叠/展开内容以响应客户端 javascript？

在我的特殊情况下，我在一个页面上有许多 CollapsiblePanelExtenders（及其相应的面板），我想知道是否可以通过在客户端严格执行类似的操作来实现“展开所有面板”按钮：

for each CollapsiblePanelExtender on this page, call somethingOrOther(extender)

如果我进行完整的回发，我可以在服务器端实现这个逻辑，但是我的页面需要很长时间才能加载，所以这似乎不会提供非常流畅的用户体验。因此我有兴趣做展开/折叠客户端。

这似乎不是 AJAX 控制工具包人们想到的用例，但我想我会检查一下。

【问题讨论】：

如果它最初是在 javascript 中完成的，那绝对是可能的。但是，我不想翻遍源代码，所以也许发布有问题的功能？

标签： ajaxcontroltoolkit collapsiblepanelextender

【解决方案1】：

在Image/button的OnClick事件中编写如下代码

<asp:Image ID="img1" runat="server" OnClick="ExpandCollapse()"/>  

function ExpandCollapse() {
    $find("collapsibleBehavior1").set_Collapsed(true);
    $find("collapsibleBehavior2").set_Collapsed(true);
}

希望这会有所帮助！

【讨论】：

【解决方案2】：

我现在有一个部分可行的解决方案。

我按照 Ian 的建议查看了工具包源代码。在CollapsiblePanelBehavior.debug.js 中，您可以看到expandPanel() 显然是作为行为的公共接口的一部分。还有一个get_Collapsed()。在 javascript 中访问这些行为的关键似乎是在 ASP.NET 中的 CollapsiblePanelExtender 标记上设置 BehaviorID 属性。

我修改了我页面上的转发器，以便BehaviorIDs 是可预测的，如下所示：

<ajaxToolkit:CollapsiblePanelExtender 
    BehaviorID="<%#'collapsebehavior'+DataBinder.Eval(Container.DataItem,'id')%>"
    ID="CollapsiblePanelExtender" runat="server" />

这会导致名为 collapsebehavior1、collapsebehavior2、collapsebehavior3 等的行为。

完成后，我可以展开客户端上的所有可折叠面板，如下所示：

function expandAll() {
    var i = 0;
    while (true) {
        i++;
        var name = 'collapsebehavior' + i;
        var theBehavior = $find(name);
        if (theBehavior) {
            var isCollapsed = theBehavior.get_Collapsed();
            if (isCollapsed) {
                theBehavior.expandPanel();
            }             
        } else {
            // No more more panels to examine
            break;
        }
    }
}

我确信在这样的循环中使用 $find 确实效率很低，但这就是我目前所拥有的。

此外，由于某种原因，它在 Firefox 上不起作用。（在 FF 上只有第一个元素展开，然后在 Control Toolkit 代码中出现 Javascript 错误。）

对于所有 javascript 专业人士来说，这一切看起来都非常难看。也许我稍后会收拾东西，或者你可以帮帮我。

【讨论】：

【解决方案3】：

您也可以只切换面板以在折叠/展开状态之间切换：

    function toggle() {
        var MenuCollapser = $find("name");
        MenuCollapser.togglePanel();
    }

【讨论】：

当然，虽然在这种情况下我想要“全部展开”，而不是“全部切换”，所以我仍然需要调用 theBehavior.get_Collapsed 并且仅在此条件下切换。