how do i stop refreshing page in bootstrap modal with asp.net button click

Question

i am trying to show data in modal view of bootstrap, the data is retrieved from the database. The problem is it shows the data but for a fraction of second and the page gets refreshed automatically. this is my html

<div class="col-md-4" style="margin-left: 5px;">
 <br />
 Invoice #<asp:TextBox ID="txt_Invoiceno" runat="server"></asp:TextBox><br />
 <asp:LinkButton ID="lnk_showInvoice" runat="server" OnClick="ShowUserPass_Click" OnClientClick="showModel()">Show Last Five Invoices</asp:LinkButton>
 </div>
<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Last five invoices </h4>
            </div>
            <div class="modal-body">
               <asp:GridView runat="server" ID="gvInvoices"></asp:GridView>
            </div>
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>

this is my .cs file

protected void ShowUserPass_Click(object sender, EventArgs e)
{
    SQLHelper objSql = new SQLHelper();
    objSql.SqlText = "select FirstName,LastName,Email from tblUserDetail";
    DataTable dt = objSql.getDataTable(false);
    gvInvoices.DataSource = dt;
    gvInvoices.DataBind();
    objSql.Close();
    objSql.Dispose();

}

jquery:

 <script>
    function showModel() {
        $('.modal').modal();
    }

</script>

So my question is, how do i stop the page refreshing automatically?

Answer 1

try below code by changing both ASP code and script

<asp:LinkButton ID="lnk_showInvoice" runat="server" OnClick="ShowUserPass_Click" OnClientClick="showModel(); return false">Show Last Five Invoices</asp:LinkButton>


    <script>
        function showModel() {
            $('.modal').modal();

        }

    </script>

Answer 2

I had same problem. using ajax it solved

html

 <a OnClick="showModel()" >Show Last Five Invoices</a>

Jquery

   function showModel() {
   $('.modal').modal();


    $.ajax({
    type: "POST",
    url: "filename.aspx/ShowUserPass_Click",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    datatype: "jsondata",
    async: "true",
    success: function (t) {
         //set value to gridview or use normal table
    },
    error: function (t) { }
   })
 }

Answer 3

Such problem happens when you are using input type submit but that's not valid for this case.

The second reason is you are using an anchor having a blank href in it. And I think this is happening with you.

To overcome with this problem we can use:

<a href="javascript:void(0)" id="..." class="...">Link</a>

This will not redirect or refresh the page, just act like a button.

Answer 4

Use UpdatePanel as below:

<div class="modal fade" tabindex="-1" role="dialog" id="mdlShowUserPass">
    <div class="modal-dialog" role="document">
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        Your Content. Ex form
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <asp:Button ID="btnUpdate" runat="server" Text="Update" />
                    </div>
                </div>
                <!-- /.modal-content -->
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Surround the 'modal-content' class with an UpdatePanel control. You can also open the modal from code behind using the scriptmanager like below.

protected void ShowUserPass_Click(object sender, EventArgs e)
{
    SQLHelper objSql = new SQLHelper();
    objSql.SqlText = "select FirstName,LastName,Email from tblUserDetail";
    DataTable dt = objSql.getDataTable(false);
    gvInvoices.DataSource = dt;
    gvInvoices.DataBind();
    objSql.Close();
    objSql.Dispose();
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", "<script>$(function () {$('#mdlShowUserPass').modal({show:true,keyboard: false, backdrop: 'static'});});</script>", false); 
    // note the #mdlShowUserPass id which assigned to the modal
}

If you wish to close the modal from server side, add a LinkButton and assign a click event, use the scriptmanager again to hide the modal by changing to show:false from true.

Edit

I missunderstood your question. If you want to prevent the modal from closing when pressing a button inside the modal, for ex, submit the modal, etc., you can use the aforesaid solution.

However, if you want to open the modal after postback, you can just add the scriptmanager line to the linkbutton click event. No need to add updatepanel to the modal.