Ajax CollapsiblePanelExtender在Postback上保持状态

时间:2013-10-17 11:49:15

标签: javascript asp.net ajax

我有一个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);
   }
}

3 个答案:

答案 0 :(得分:1)

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

要解决您的问题,我可以建议在执行数据绑定之前保存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();
});

修改的 这没有用,因为您尝试在单击处理程序中恢复状态。当您调用网格视图控件的数据绑定时,不会立即重新创建行。因此,如果要设置(恢复)可折叠扩展器控件的状态,最好在网格的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";
        }
    }

答案 1 :(得分:1)

我实际上在我的博客上使用这些因为asp.net让我使用可转换面板拖放转发器控件。

当您打开面板时,诀窍是在内容中使用ajax。您可以轻松地在内容中jquery从Web服务中插入页面或ajax。

这是具有ajaxed内容的可折叠面板示例。面板由web服务加载。单击以展开面板。

http://gosylvester.com/blog.aspx?id=39

答案 2 :(得分:0)

您是否尝试在可折叠面板扩展器上设置SuppressPostBack =“True”