ASP.NET回发时维持Panel折叠状态的无JavaScript实现方案

当然有不用JavaScript的简便方案！核心就是把Panel的折叠状态在服务器端持久化，这样回发的时候就能准确恢复状态了，我给你一步步拆解实现方法：

1. 修正并完善ASPX页面结构 #

首先要注意：ASP.NET控件ID不能以数字开头，所以把你原来的id="1"改成Panel1；另外要给每个Panel添加一个服务器端按钮来触发折叠/展开操作，同时把包裹GridView的table改成服务器端控件（方便后续精准控制显示）：

<asp:Panel ID="Panel1" runat="server">
    <asp:LinkButton ID="lnkTogglePanel1" runat="server" OnClick="lnkTogglePanel1_Click">折叠Panel1</asp:LinkButton>
    <asp:Table ID="Table1" runat="server">
        <asp:TableRow>
            <asp:TableCell>
                <asp:GridView ID="Grid1" runat="server" OnPageIndexChanging="Grid1_PageIndexChanging"></asp:GridView>
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</asp:Panel>

<asp:Panel ID="Panel2" runat="server">
    <asp:LinkButton ID="lnkTogglePanel2" runat="server" OnClick="lnkTogglePanel2_Click">折叠Panel2</asp:LinkButton>
    <asp:Table ID="Table2" runat="server">
        <asp:TableRow>
            <asp:TableCell>
                <asp:GridView ID="Grid2" runat="server" OnPageIndexChanging="Grid2_PageIndexChanging"></asp:GridView>
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</asp:Panel>

2. 后台用ViewState持久化折叠状态 #

ViewState是ASP.NET自带的页面级状态存储，非常适合保存这种和页面绑定的UI状态。我们定义两个属性来封装ViewState，让状态读写更简洁：

// 保存Panel1的折叠状态，默认不折叠（展开）
private bool IsPanel1Collapsed
{
    get => ViewState["IsPanel1Collapsed"] != null ? (bool)ViewState["IsPanel1Collapsed"] : false;
    set => ViewState["IsPanel1Collapsed"] = value;
}

// 保存Panel2的折叠状态，默认不折叠（展开）
private bool IsPanel2Collapsed
{
    get => ViewState["IsPanel2Collapsed"] != null ? (bool)ViewState["IsPanel2Collapsed"] : false;
    set => ViewState["IsPanel2Collapsed"] = value;
}

3. 实现折叠/展开的触发逻辑 #

写按钮的点击事件，切换状态并同步更新Panel的显示和按钮文本：

protected void lnkTogglePanel1_Click(object sender, EventArgs e)
{
    IsPanel1Collapsed = !IsPanel1Collapsed;
    UpdatePanelVisibility(Panel1, Table1, IsPanel1Collapsed, lnkTogglePanel1);
}

protected void lnkTogglePanel2_Click(object sender, EventArgs e)
{
    IsPanel2Collapsed = !IsPanel2Collapsed;
    UpdatePanelVisibility(Panel2, Table2, IsPanel2Collapsed, lnkTogglePanel2);
}

// 封装复用的更新方法，避免重复代码
private void UpdatePanelVisibility(Panel parentPanel, Table contentTable, bool isCollapsed, LinkButton toggleBtn)
{
    if (isCollapsed)
    {
        contentTable.Visible = false; // 只隐藏GridView所在的表格，保留折叠按钮方便后续展开
        toggleBtn.Text = $"展开{parentPanel.ID}";
    }
    else
    {
        contentTable.Visible = true;
        toggleBtn.Text = $"折叠{parentPanel.ID}";
    }
}

4. 回发时自动恢复状态 #

在Page_Load事件里，处理页面初始加载和回发时的状态恢复逻辑：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 初始状态：所有Panel展开
        Table1.Visible = true;
        Table2.Visible = true;
        lnkTogglePanel1.Text = "折叠Panel1";
        lnkTogglePanel2.Text = "折叠Panel2";
    }
    else
    {
        // 回发时，根据ViewState保存的状态自动恢复Panel显示
        UpdatePanelVisibility(Panel1, Table1, IsPanel1Collapsed, lnkTogglePanel1);
        UpdatePanelVisibility(Panel2, Table2, IsPanel2Collapsed, lnkTogglePanel2);
    }
}

5. GridView回发的兼容处理 #

不管是GridView的分页、排序还是其他服务器端回发操作，Page_Load的else分支都会自动读取ViewState里的状态，恢复Panel的折叠/展开状态，不需要额外修改GridView的事件代码。比如分页事件只需要正常绑定数据即可：

protected void Grid1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    Grid1.PageIndex = e.NewPageIndex;
    BindGrid1(); // 你的GridView数据绑定方法
}

protected void Grid2_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    Grid2.PageIndex = e.NewPageIndex;
    BindGrid2(); // 你的GridView数据绑定方法
}

为什么这个方案不需要JavaScript？ #

所有状态都在服务器端的ViewState中存储，每次回发时服务器都会根据ViewState里的状态重新渲染页面UI，完全在服务器端完成状态的保存和恢复，不需要客户端脚本介入。

内容的提问来源于stack exchange，提问作者Programmermid