In this article I will explain with an example, how to solve the problem of
Bootstrap Modal Popup Auto Closes on PostBack in ASP.Net using C# and VB.Net.
Bootstrap Modal Popup is opened from Client-Side and hence when PostBack happens and Page refreshes, the
Bootstrap Modal Popup disappears.
In order to keep the
Bootstrap Modal Popup across PostBacks, it has to be re-opened after PostBack from Server-Side (Code-Behind) using
RegisterStartupScript method.
HTML Markup
Inside the HTML Markup, the following CSS file is inherited.
1. bootstrap.min.css
And then, the following script files are inherited.
1. jquery.min.js
2. bootstrap.min.js
The HTML Markup also consists of following elements:
Button – For opening
Bootstrap Modal Popup Window.
div – For displaying Modal Popup content.
The HTML DIV consisting of Sub DIVs which will be used to display
Title,
Body and
Close Buttons of
Bootstrap Modal Popup Window.
DropDownList – For displaying the fruit names.
The DropDownList has been assigned with an OnSelectedIndexChanged event handler.
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Bootstrap -->
<center>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MyPopup">Open Modal</button>
</center>
<!-- Modal Popup -->
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Select Fruit</h4>
<button type="button" class="close" data-dismiss="modal">
× </button>
</div>
<div class="modal-body">
<asp:DropDownList ID="ddlFruits" runat="server" AutoPostBack="true" OnSelectedIndexChanged="OnSelectedIndexChanged">
<asp:ListItem Text="Select Fruit" Value="0" />
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Banana" Value="3" />
</asp:DropDownList>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Popup -->
Keeping Bootstrap Modal Popup open across PostBacks in ASP.Net
Inside the
OnSelectedIndexChanged event handler, the
Bootstrap Modal Popup is re-opened by calling the
modal function with parameter value
show using
RegisterStartupScript method.
C#
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "$('#MyPopup').modal('show')", true);
}
VB.Net
Protected Sub OnSelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "$('#MyPopup').modal('show')", True)
End Sub
Screenshot
![[Solution] Bootstrap Modal Popup Auto Closes on PostBack in ASP.Net](https://www.aspsnippets.com/Handlers/DownloadFile.ashx?File=001488e2-3fca-4220-9f2e-18d32f8ba0ac.gif)
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
