Question

我正在维护一个ASP.NET站点，用户可以登录该站点来注册一些数据集（用于统计目的）。一个用户为一组单元注册数据，并且对于每个单元，将填写一组表单（每种形式中有少量字段，但这在此并不重要）。一种情况是用户有12个单元，并且在每个单元中有25个表单需要填写，这意味着总共有300个表单。

用于注册这些数据的ASP.NET页面按以下方式进行：每个表单都在一个面板中，可以使用AjaxControlToolkit CollapsiblePanelExtender折叠，并且单元中的所有表单都在另一个也可以折叠的面板中。结果是你有一个树状视图结构，顶部有单位，在每个单元下你可以展开一组表格，而且每个表格都可以扩展来填充数据（页面加载所有面板都折叠了默认情况下）。

页面是完全动态生成的（因为表单可以添加到数据库中），为了生成CollapsiblePanelExtenders，我有以下代码：

private CollapsiblePanelExtender GenerateCollapsiblePanelExtender(string id, Panel headerPanel, Panel contentPanel)
{
    CollapsiblePanelExtender collapsiblePanel = new CollapsiblePanelExtender();

    collapsiblePanel.ID = id + ID_COLLAPSIBLE_PANEL_POSTFIX;
    collapsiblePanel.TargetControlID = contentPanel.ID;
    collapsiblePanel.CollapseControlID = headerPanel.ID;
    collapsiblePanel.ExpandControlID = headerPanel.ID;
    collapsiblePanel.Collapsed = true;
    collapsiblePanel.BehaviorID = collapsiblePanel.ID + ID_BEHAVIOUR_POSTFIX;

    return collapsiblePanel;
}

一个用户拥有12个单元，每个单元有25个表单，这意味着总共有312个CollapsiblePanelExtenders。正如我所说，默认情况下它们都会被折叠，但问题出在这里：

当页面加载时，它们似乎都被展开，然后浏览器“开始折叠它们”。然而，这需要非常很长时间（在Firefox中我甚至会收到关于无响应脚本的警告，IE和Chrome只需要永久但没有警告）。当所有“折叠”完成后，它可以平滑地打开和关闭单个面板，但是用户抱怨极慢的初始加载。

所以我的问题很简单：有没有办法优化它，以便加载更顺畅？例如，最初是否只能在每个CollapsiblePanelExtender中加载标题面板，然后以某种方式异步加载内容面板？

最后一个澄清：
我知道我可以简单地将页面的设计更改为仅包含一个单元，从而大大减少内容的大小，但我希望避免这种情况（用户更喜欢在一个页面中使用所有内容的方式）。这也意味着对页面逻辑的一个相当大的改变（是的，我知道 - 那时它是一个糟糕的代码库）

Answer 1

在问other places之后，我终于设法解决了这个问题。解决方案是完全跳过CollapsiblePanelExtenders，而是使用jQuery来处理折叠/扩展。

在我的结构中，所有标题面板都使用css类HeaderPanel，所有内容面板都使用css类ContentPanel（默认情况下所有这些都隐藏）。然后我可以使用以下脚本来处理所有崩溃/扩展逻辑：

<script language="javascript">
    $(document).ready(function() {
        $("div.HeaderPanel").toggle(
        function() {
            $(this).next("div.ContentPanel").show("slow");
        },
        function() {
            $(this).next("div.ContentPanel").hide("slow");
        });
    });
</script>

解决方案非常简单，它就像一个魅力！折叠/扩展比我使用CollapsiblePanelExtenders时看起来更平滑更好，页面加载速度也非常快：）

ASP.NET页面的性能问题，包含许多（数百个）CollapsiblePanelExtenders

1 个答案: