How to stop page refresh in bootstrap modal using asp.net click button

Question

I am trying to show data in bootstrap modal view, data is retrieved from the database. The problem is that it shows data, but for a split second, and the page automatically refreshes. 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 can I automatically stop page refresh?

Answer 1

try making the code below by changing both ASP and script codes

 <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 the same problem. using ajax, he decided

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

This problem occurs if you use input of type submit, but are not valid for this case.

The second reason is because you are using an anchor that has an empty href in it. And I think this is happening to you.

To overcome 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 using the UpdatePanel control. You can also open the modal code with a script manager, as shown 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 want to close modal on the server side, add LinkButton and set the click event, use the scriptmanager again to hide the modality, changing show:false to true.

Edit

I missed your question. If you want the modal not to close when you click the button inside the modal, for example, to present a modal, etc., you can use the above solution.

However, if you want to open the modal after the postback, you can simply add the scriptmanager line to the clickbutton click event. No need to add update to modal.

Answer 5

You can simply stop updating or sending by adding return false

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

You can add this, this should fix your problem.

Else you can use ajax.