Bootstrap Modal refreshes page in web forms

Question

I am struggling to make this to work. All I want is to open a bootstrap modal to open on the click of a button without refreshing the page.

Following is the modal

 <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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"><asp:Label ID="lblModalTitle" runat="server" Text="Send Confirmation"></asp:Label></h4>
                </div>
                <div class="modal-body">
                    <asp:Label ID="lblModalBody" runat="server" Text="Are you sure?"></asp:Label>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="SendToBillingBtn" runat="server" CssClass="btn btn-primary" Text="Yes" OnClick="SendToBillingBtn_Click" /> &nbsp;&nbsp;&nbsp;
                    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">No</button>
                </div>
            </div>
</div>

The button is

 <asp:Button ID="TransferFileBtn" runat="server" CssClass="btn btn-primary" Text="Transfer file" OnClick="TransferFileBtn_Click" />

and in codebehind I have

 protected void TransferFileBtn_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);

    }

I have used the following link as a reference Display Bootstrap Modal from Asp.Net Webforms

On the button click, I do see the modal popup but the page reloads. How can I avoid page to reload?

Thank you

Because the core mechanism in WebForms is a `POST`back. The Q&A you referenced suggested an UpdatePanel (it's "flavor" of Ajax so there is no "refresh"). IMHO, based on above, you're not really doing anything "server side" (in "code behind") so, just do it all without using asp controls (use standard html elements and handle the event in JavaScript). — EdSF, Feb 12 '16 at 21:30

score 0 · Answer 1 · answered Feb 12 '16 at 21:45

0

As I'm not an expert on ASP. so im not sure about this but try removing runat="server" from your button.

answered Feb 12 '16 at 21:45

saadeez

1,588
3
11
17

Win · Accepted Answer · 2016-02-12T22:16:22.233

If you do not need to postback to server, you can simply use standard input or button tag.

<button type="button" class="btn btn-primary" 
   data-toggle="modal" data-target="#myModal"> Launch demo modal </button>

Or just return false in client click event.

 <asp:Button ID="TransferFileBtn" runat="server" 
      CssClass="btn btn-primary" Text="Transfer file" 
      OnClientClick="$('#myModal').modal(); return false;" />

How I tested

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoWebForm.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <button type="button" class="btn btn-primary"
            data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>

        <asp:Button ID="TransferFileBtn" runat="server"
            CssClass="btn btn-primary" Text="Transfer file"
            OnClientClick="$('#myModal').modal(); return false;" />

        <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <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">
                            <asp:Label ID="lblModalTitle" runat="server" Text="Send Confirmation"></asp:Label></h4>
                    </div>
                    <div class="modal-body">
                        <asp:Label ID="lblModalBody" runat="server" Text="Are you sure?"></asp:Label>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="SendToBillingBtn" runat="server" CssClass="btn btn-primary"
                            Text="Yes" OnClick="SendToBillingBtn_Click" />
                        &nbsp;&nbsp;&nbsp;
                    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">No</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Hi Win, I did exactly the same 5 mins back but at execution it complained that the aspx is not well formed on this button line. Do I need to change something over here OnClientClick="$('#myModal').modal(); return false;" ?? — blue piranha, Feb 12 '16 at 22:05

score 0 · Answer 3 · answered Feb 13 '16 at 07:23

Please find the code,Hope this will help you.

    **//Button**
   <asp:Button ID="TransferFileBtn" runat="server" CssClass="btn btn-primary" Text="Transfer file" OnClientClick="onTest();return false;" />

    **//Popup code:** 

   <div class="modal fade" id="modalTest" tabindex="-1" role="dialog"
            aria-labelledby="exampleModalLabel" aria-hidden="true" style="width: 100%; height: 100%;">
            <div class="modal-dialog">
                <div class="modal-content" style="height: 700px">
                    <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" id="H2">
                            <asp:Label runat="server" ID="lblRSF" Text=""></asp:Label></h4>
                    </div>
                    <div class="modal-body">
                     **//Used Iframe**
                        <iframe runat="server" frameborder="0" id="frmExample" runat="server" style="width: 100%; height: 600px; overflow: hidden;"></iframe>
                    </div>
                </div>
            </div>
        </div>


   **//Js function
       function onTest() {
                   $("#<%=lblRSF.ClientID%>").text("Demo");
                 //Admin/Example.aspx (write whatever you want to show in the popup)
                   $("#<%=frmMapExample.ClientID%>").attr("src", "../Admin/Example.aspx);
                   $('#modalTest').modal('show');
                   }

Bootstrap Modal refreshes page in web forms

3 Answers3

How I tested