javascript - Ajax CollapsiblePanelExtender 在回发时保持状态

Question

我有一个 GridView 。我在里面有一个包含按钮的 CollapsiblePanelExtender。当我按下一个按钮时，这会导致回发并且 CollapsiblePanelExtender 关闭。我正在尝试编写一个解决方案，使 CollapsiblePanelExtender 在回发后保持打开状态。这是我到目前为止所尝试的:

function pageLoad(sender, args) {
   var objExtender;                
   var retval="";               

   if (document.getElementById(GridView1)) {
      retval = document.getElementById(GridView1);
   }
   var CollapsiblePanelExtender1 = retval.getElementsByTagName("CollapsiblePanelExtender1");

   if(CollapsiblePanelExtender1.get_Collapsed()) {
      CollapsiblePanelExtender1.set_Collapsed(true);
   }
   else {
      CollapsiblePanelExtender1.set_Collapsed(false);
   }
}

Answer 1

基本上，CollapsiblePanelExtender 在回发期间保持其状态。但是在回发期间，我想你执行了数据绑定(bind)(我猜你有)。在数据绑定(bind)期间，将重新创建所有控件，这就是它们失去内部状态的原因。

要解决您的问题，我建议您在执行数据绑定(bind)之前保存 CollapsiblePanelExtender 的状态，然后恢复此状态。这可以在服务器端完成。如果启用了动画，这也有助于避免 UI 闪烁。

因此，要获取 CollapsiblePanelExtender 的状态，您只需记住它的客户端状态值即可。然后您将能够恢复此值。例如，这是可用于在服务器端展开/折叠 CollapsiblePanelExtender 的代码:

// To collapse panel.
this.CollapsiblePanelExtender1.ClientState = "true";

// To Expand panel.
this.CollapsiblePanelExtender1.ClientState = "false";

如果您仍然想在客户端折叠/展开 CollapsiblePanelExtender 而不是您需要类似的代码:

Sys.Application.add_load(function() {
    var extender = $find('<%= this.CollapsiblePanelExtender1.ClientID  %>');

    extender.expandPanel();

    extender.collapsePanel();
});

编辑这无济于事，因为您尝试在点击处理程序中恢复状态。当您调用 GridView 控件的数据绑定(bind)时，不会立即重新创建行。因此，如果您想设置(恢复)可折叠扩展程序控件的状态，最好在网格的 RowCreated 事件处理程序中执行。

例如，您可以使用类似这样的代码:

    protected void GridView_OnRowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow && SomeValueToIdentifyThatThisPanelShouldBeExpanded)
        {
            CollapsiblePanelExtender extender =
                e.Row.FindControl("CollapsiblePanelExtender1") as CollapsiblePanelExtender;
            extender.ClientState = "false";
        }
    }