C#按钮点击切换Div显示状态异常问题排查与解决

问题根源 #

你定义的bool bShow = true;是页面类的字段，ASP.NET每次按钮回发时都会重新创建页面实例，这个变量会被重置为初始值true。第一次点击后你把它改成false，但回发完成后页面实例销毁，下次点击又会重新初始化bShow为true，导致永远只会执行显示Div的逻辑，无法切换隐藏。

解决方案一：服务器端用ViewState保存状态 #

通过ViewState跨回发保存切换状态，修改后台代码如下：

protected void Button1_Click(object sender, EventArgs e)
{
    // 从ViewState读取状态，默认初始为true（对应Div默认隐藏）
    bool bShow = ViewState["bShow"] != null ? (bool)ViewState["bShow"] : true;

    if (bShow)
    {
        Button1.Text = "cancelLimits";
        child1.Style["display"] = "block";
        ViewState["bShow"] = false;
    }
    else
    {
        Button1.Text = "moreLimits";
        child1.Style["display"] = "none";
        ViewState["bShow"] = true;
    }
}

解决方案二：客户端JavaScript处理（推荐） #

不需要服务器回发，直接在客户端完成切换，体验更流畅，修改.aspx页面代码：

<asp:Button ID="Button1" runat="server" Text="moreLimits" OnClientClick="toggleDiv(); return false;" />
<div id="child1" class="childl" style="display: none;"></div>

<script type="text/javascript">
    function toggleDiv() {
        var divElement = document.getElementById('child1');
        var btnElement = document.getElementById('<%= Button1.ClientID %>');
        
        if (divElement.style.display === 'none') {
            divElement.style.display = 'block';
            btnElement.textContent = 'cancelLimits';
        } else {
            divElement.style.display = 'none';
            btnElement.textContent = 'moreLimits';
        }
    }
</script>

OnClientClick中的return false;用于阻止按钮默认的回发行为，完全在客户端完成状态切换，无需后台代码参与。

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