Stop Bootstrap Accordion from Closing on ASP:Button Click

Question

Below is code which displays an accordion on my ASPX page:

When an item within the accordion is clicked, that panel expands as expected. This panel contains a number of ASP controls (buttons, etc.). When the button is clicked, the code-behind is executed successfully.

However, the page is also refreshed, and the accordion is closed.

Can anyone tell me how do I stop the accordion from closing when the button is clicked?

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">News</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <!--Update News Section-->
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3>Post Latest News</h3>
                        </div>

                        <div class="panel-body">
                            <div class="col-lg-12">
                                <textarea id="myTextarea" runat="server"></textarea>
                            </div>
                            <asp:Button Text="Save" OnClick="btnSaveNews_Click" ID="btnSaveNews" runat="server" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is the Code-Behind also:

    protected void btnSaveNews_Click(object sender, EventArgs e)
{
    String strConnString = System.Configuration.ConfigurationManager.ConnectionStrings["BallinoraDBConnectionString1"].ConnectionString;
    SqlConnection con = new SqlConnection(strConnString);
    //====== Getting connection string defined in the web.config file. Pointed to the database we want to use.
    //   SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["EmployeeConnection"].ConnectionString);

    //======= Insert Query.
    string cmdText = "INSERT INTO News (News_Content, News_Date) VALUES (@Content, @Date)";

    //====== Providning information to SQL command object about which query to 
    //====== execute and from where to get database connection information.
    SqlCommand cmd = new SqlCommand(cmdText, con);

    //===== Adding parameters/Values.
    cmd.Parameters.AddWithValue("@Content", myTextarea.Value);
    cmd.Parameters.AddWithValue("@Date", DateTime.Now);


    //===== To check current state of the connection object. If it is closed open the connection
    //===== to execute the insert query.
    if (con.State == ConnectionState.Closed)
    {
        con.Open();
    }

    //===== Execute Query.
    cmd.ExecuteNonQuery();

    //===== close the connection.
    con.Close();

    //===== Clear text from textboxes
    // clearInputControls();

    //===== Bind data to repeater.
    // bindEmployeeDetailsToRepeater();
}

Answer 1

The easiest way is wrapping the content inside the accordion with an UpdatePanel. Now if btnSaveNews is clicked, you can change the content of myTextarea without a full PostBack and thus the accordion will be left open at the same place

<div class="panel panel-default">

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>

            <div class="panel-heading">
                <h3>Post Latest News</h3>
            </div>

            <div class="panel-body">
                <div class="col-lg-12">
                    <textarea id="myTextarea" runat="server"></textarea>
                </div>
                <asp:Button Text="Save" OnClick="btnSaveNews_Click" ID="btnSaveNews" runat="server" />
            </div>

        </ContentTemplate>
    </asp:UpdatePanel>

</div>

And you need to place a ScriptManager on that page if there is none.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

PS instead of a textarea I recommend the ASP TextBox with TextMode MultiLine.

<asp:TextBox ID="myTextarea" runat="server" TextMode="MultiLine"></asp:TextBox>