Bootstrap 4 Modal Popup Window doesnt sow from Server Side (Code Behind) in ASP.Net C#

Question

User309122571 posted

Hello,

I am trying to fire up Modal Popup in Bootstrap 4.3 using click event from ASP.Net button but without success.

The problem is that $("#myModal") scripts makes the whole page to load the Popup until I move it to <asp:Content ID="Content1" ContentPlaceHolderID="StyleSection" runat="server"> but then the button doesn't trigger anything,

I use Master page.

On aspx page I have

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<asp:Content ID="Content1" ContentPlaceHolderID="StyleSection" runat="server">

<script type="text/javascript">
$(document).ready(function () {
$("#myModal").modal();

});

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<asp:TextBox ID="Testbox" class="form-control form-control"  runat="server" Width="270px"
Height="31px" ></asp:TextBox>

<asp:Button ID="Button1" Class="btn btn-outline-primary" Text="Test" runat="server" OnClick="testpopup_Click" />

</asp:Content>

On .cs page I have:

protected void testpopup_Click(object sender, EventArgs e)
{

if (Testbox.Text == "N")
{
ClientScript.RegisterStartupScript(this.GetType(), "Pop", "$('#myModal').modal('show')", true);
}

}

Thank you!

Answer 1

User1535942433 posted

Hi dsultanov,

Accroding to your description and codes,I create a test and it works fine.

In your codes,you don't post the codes about modal to us.And you could check if the modal id is right.

Since you don't post full codes to us.I create a demo.

More details,you could refer to below codes:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="bodycontent" runat="server">
    <asp:TextBox ID="Testbox" class="form-control form-control"  runat="server" Width="270px"
Height="31px" ></asp:TextBox>

<asp:Button ID="Button1" Class="btn btn-outline-primary" Text="Test" runat="server" OnClick="testpopup_Click" />
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
      
</asp:Content>

Code-behind:

 protected void testpopup_Click(object sender, EventArgs e)
        {
            if (Testbox.Text == "N")
            {
                ClientScript.RegisterStartupScript(this.GetType(), "Pop", "$('#myModal').modal('show')", true);
            }
        }

Result:

Best regards,

Yijing Sun

Answer 2

User309122571 posted

Hi Yij Sun,

Sorry, somehow I missed the code about the modal.

But you suggestion works for me now.

Thank you!