In this article I will explain with an example, how to open (show) Bootstrap Modal Popup Window from Server Side (Code Behind) in ASP.Net using C# and VB.Net.
When the Button is clicked, the Server Side Button Click event handler is triggered in Code Behind and then using RegisterStartupScript method of ClientScript class, the Bootstrap Modal Popup Window is opened (shown) on Client Side using jQuery.
HTML Markup
The following HTML Markup consists of an ASP.Net Button assigned with a Server Side Click event handler and an HTML DIV which will be displayed as Modal Popup Window using Bootstrap.
<center>
<asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" OnClick="ShowPopup"
CssClass="btn btn-info btn-lg" />
</center>
<!-- Bootstrap -->
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<!-- Bootstrap -->
<!-- Modal Popup -->
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Popup -->
Open (Show) Bootstrap Modal Popup Window using jQuery
The following JavaScript function will be called from Server Side (Code Behind) using RegisterStartupScript method of ClientScript class when the ASP.Net Button is clicked.
Inside this JavaScript function, first the title and body values are set in their respective HTML DIVs and the Bootstrap Modal Popup Window will be opened (shown) using modal function and passing the parameter value show.
<script type="text/javascript">
function ShowPopup(title, body) {
$("#MyPopup .modal-title").html(title);
$("#MyPopup .modal-body").html(body);
$("#MyPopup").modal("show");
}
</script>
Calling the JavaScript function from Server Side (Code Behind) on Button Click
Inside the Button Click event handler, the ShowPopup JavaScript function is called from Server Side (Code Behind) using RegisterStartupScript method of ClientScript class.
C#
protected void ShowPopup(object sender, EventArgs e)
{
string title = "Greetings";
string body = "Welcome to ASPSnippets.com";
ClientScript.RegisterStartupScript(this.GetType(), "Popup", "ShowPopup('" + title + "', '" + body + "');", true);
}
VB.Net
Protected Sub ShowPopup(ByVal sender As Object, ByVal e As EventArgs)
Dim title As String = "Greetings"
Dim body As String = "Welcome to ASPSnippets.com"
ClientScript.RegisterStartupScript(Me.GetType(), "Popup", "ShowPopup('" & title & "', '" & body & "');", True)
End Sub
Screenshot
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads