从关闭ASP停止Bootstrap手风琴:按钮单击

时间:2017-01-14 17:26:09

标签: c# html asp.net bootstrap-accordion

下面是在我的ASPX页面上显示手风琴的代码:

单击手风琴中的项目时,该面板会按预期展开。该面板包含许多ASP控件(按钮等)。单击该按钮时,代码隐藏成功执行。

但是,页面也会刷新,手风琴也会关闭。

有人能告诉我如何在点击按钮时停止手风琴的关闭吗?

<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>

以下是Code-Behind:

    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();
}

1 个答案:

答案 0 :(得分:1)

最简单的方法是使用UpdatePanel将内容包装在手风琴中。现在,如果单击btnSaveNews,您可以在没有完整PostBack的情况下更改myTextarea的内容,从而手风琴将在同一个地方保持打开状态

<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>

如果没有ScriptManager,你需要在该页面上放置一个ScriptManager。

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

PS而不是textarea我推荐带有TextMode MultiLine的ASP TextBox。

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