ASP.NET WebForm中可折叠元素结合ASP.NET HTML控件问题求助

问题概述 #

在Visual Studio中用ASP.NET HTML和C#开发WebForm时，实现可折叠元素碰到两个问题：

• 问题A：折叠按钮和动画显示正常，但点击后无法实现元素隐藏/显示（对应第一段自定义折叠代码）
• 问题B：隐藏/显示功能生效，但标签和文本框仅隐藏一秒后就重新显示，尝试用容器包裹控件未解决

问题代码 #

自定义折叠代码 #

<button type="button" class="collapsible">Personal Information</button>
    <div class="body-content">
        <container>
        <asp:Label ID="lbl_firstName" runat="server" Text="First Name: "></asp:Label>
        <asp:TextBox ID="box_firstName" runat="server"></asp:TextBox>
            </container>
        <br />

        <asp:Label ID="lbl_lastName" runat="server" Text="Last Name: "></asp:Label>
        <asp:TextBox ID="box_lastName" runat="server"></asp:TextBox>
        <br />

        <asp:Label ID="lbl_email" runat="server" Text="Email: "></asp:Label>
        <asp:TextBox ID="box_email" runat="server"></asp:TextBox>
        <br />

        <asp:Label ID="lbl_phone" runat="server" Text="Phone: "></asp:Label>
        <asp:TextBox ID="box_phone" runat="server"></asp:TextBox>
        <br />
    </div>

            <!-- STYLE -->

            <style>
                .collapsible {
                    background-color: #777;
                    color: white;
                    cursor: pointer;
                    padding: 18px;
                    width: 100%;
                    border: none;
                    text-align: left;
                    outline: none;
                    font-size: 15px;
                }

                    .active, .collapsible:hover {
                        background-color: #555;
                    }

                    .collapsible:after {
                        content: '\002B';
                        color: white;
                        font-weight: bold;
                        float: right;
                        margin-left: 5px;
                    }

                .active:after {
                    content: "\2212";
                }

                .content {
                    padding: 0 18px;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.2s ease-out;
                    background-color: #f1f1f1;
                }
            </style>

            <!-- SCRIPT -->
            <script>
                var coll = document.getElementsByClassName("collapsible");
                var i;

                for (i = 0; i < coll.length; i++) {
                    coll[i].addEventListener("click", function () {
                        this.classList.toggle("active");
                        var content = this.nextElementSibling;
                        if (content.style.maxHeight) {
                            content.style.maxHeight = null;
                        } else {
                            content.style.maxHeight = content.scrollHeight + "px";
                        }
                    });
                }
            </script>

    <style>
.accordion {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>

    <script>
var coll = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

Bootstrap折叠代码 #

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
          <container>
          <label for="fname">First Name:</label>
          <input type="text" id="fname" name="fname"><br><br>
          <label for="lname">Last name:</label>
          <input type="text" id="lname" name="lname"><br><br>
              </container>
      </div>
    </div>
  </div>
</html>

问题解决方法 #

问题A的修复 #

核心问题是类名不匹配：内容容器用的是body-content，但CSS和JS逻辑都是针对.content编写的，修改类名并清理重复代码即可：

修改后的自定义折叠代码：

<button type="button" class="collapsible">Personal Information</button>
<div class="content">
    <container>
        <asp:Label ID="lbl_firstName" runat="server" Text="First Name: "></asp:Label>
        <asp:TextBox ID="box_firstName" runat="server"></asp:TextBox>
    </container>
    <br />
    <asp:Label ID="lbl_lastName" runat="server" Text="Last Name: "></asp:Label>
    <asp:TextBox ID="box_lastName" runat="server"></asp:TextBox>
    <br />
    <asp:Label ID="lbl_email" runat="server" Text="Email: "></asp:Label>
    <asp:TextBox ID="box_email" runat="server"></asp:TextBox>
    <br />
    <asp:Label ID="lbl_phone" runat="server" Text="Phone: "></asp:Label>
    <asp:TextBox ID="box_phone" runat="server"></asp:TextBox>
    <br />
</div>

<style>
    .collapsible {
        background-color: #777;
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
    }

    .active, .collapsible:hover {
        background-color: #555;
    }

    .collapsible:after {
        content: '\002B';
        color: white;
        font-weight: bold;
        float: right;
        margin-left: 5px;
    }

    .active:after {
        content: "\2212";
    }

    .content {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: #f1f1f1;
    }
</style>

<script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }
        });
    }
</script>

问题B的修复 #

元素自动恢复显示是ASP.NET页面回发导致DOM重置，解决步骤：

1. 确保按钮为type="button"（使用<asp:Button>时设置UseSubmitBehavior="false"），避免触发回发
2. 确认Bootstrap的JS和jQuery已正确引入（Bootstrap折叠依赖jQuery）
3. 用ViewState记录折叠状态，回发后自动恢复：

前端代码

<div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </button>
            </h2>
        </div>

        <div id="collapseOne" class="<%= ViewState["CollapseOneState"] != null && ViewState["CollapseOneState"].ToString() == "collapsed" ? "collapse" : "collapse show" %>" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                <container>
                    <asp:Label ID="lbl_fname" runat="server" Text="First Name:"></asp:Label>
                    <asp:TextBox ID="box_fname" runat="server"></asp:TextBox><br><br>
                    <asp:Label ID="lbl_lname" runat="server" Text="Last name:"></asp:Label>
                    <asp:TextBox ID="box_lname" runat="server"></asp:TextBox><br><br>
                </container>
            </div>
        </div>
    </div>
</div>

<script>
    // 监听折叠事件，更新ViewState
    $('#collapseOne').on('hidden.bs.collapse', function () {
        <%= Page.ClientScript.GetPostBackEventReference(this, "CollapseOneHidden") %>;
    });

    $('#collapseOne').on('shown.bs.collapse', function () {
        <%= Page.ClientScript.GetPostBackEventReference(this, "CollapseOneShown") %>;
    });
</script>

后台C#代码

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 初始状态设为展开
        ViewState["CollapseOneState"] = "show";
    }
}

protected override void RaisePostBackEvent(IPostBackEventHandler sourceControl, string eventArgument)
{
    base.RaisePostBackEvent(sourceControl, eventArgument);
    // 更新折叠状态到ViewState
    if (eventArgument == "CollapseOneHidden")
    {
        ViewState["CollapseOneState"] = "collapsed";
    }
    else if (eventArgument == "CollapseOneShown")
    {
        ViewState["CollapseOneState"] = "show";
    }
}

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