javascript - 单击事件后 Bootstrap 折叠不保留状态

Question

我正在使用 Bootstrap 崩溃。我设置了 3 个不同的面板，每个面板都有添加按钮。当我单击“添加”按钮(面板 2)时，页面会刷新，并且不会保留其状态，因此显示面板 1。

<div class="panel panel-default">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" id="col1">Stock Detail</a>
    </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse in">
    <div class="panel-body">
      <table class="table">
        <tr>
          <td>Stock Name</td>
          <td>
            <asp:TextBox ID="tbstockname" runat="server" CssClass="form-control"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator5" ValidationGroup="gp2" runat="server" ControlToValidate="tbstockname" ErrorMessage="Stock Name Required"></asp:RequiredFieldValidator>
          </td>
          <td>Client Name</td>
          <td>
            <asp:DropDownList ID="ddclientname" runat="server" CssClass="form-control">
            </asp:DropDownList>
          </td>
          <td>
            <asp:Button ID="btnaddstock" runat="server" ValidationGroup="gp2" Class="btn btn-primary" Text="ADD" OnClick="btnaddstock_Click" />
          </td>
        </tr>
        <tr>
          <td>
          </td>
        </tr>
      </table>
      <asp:GridView ID="gvstockdetail" class="table" runat="server" Width="500px">
      </asp:GridView>
    </div>
  </div>
</div>

Answer 1

您的问题是您正在使用服务器控件。这样，总会有一个帖子返回到服务器。尽管有些人很幸运

OnClientClick="return false;" 

为了防止发生这种刷新，您需要使用 html 元素，而不是服务器元素，并使用 ajax 调用您的函数。像这样的东西:

<input type="button" onclick="doAction()" />

然后对您的服务器操作进行一些 ajax 调用:

var doAction = function() {
    //ajax call to your server
};

有关 ajax 调用的更多信息，请参阅文档:

http://api.jquery.com/jquery.ajax/