In this article I will explain with an example, how to display (show) jQuery UI Dialog Modal Popup box after ASP.Net AJAX UpdatePanel Partial PostBack is completed in ASP.Net using C# and VB.Net.
The jQuery UI Dialog Modal Popup box will be displayed from Server Side after the ASP.Net AJAX UpdatePanel Partial PostBack is completed in ASP.Net.
HTML Markup
The following HTML Markup consists of an HTML DIV which is the body or content of the jQuery UI Modal Dialog Popup Window and an ASP.Net Button placed inside ASP.Net AJAX UpdatePanel control.
There’s a ShowPopup JavaScript function which opens jQuery UI Modal Dialog Popup Window. This function accepts the message as parameter that will be displayed inside the Popup Window.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#dialog").html(message);
$("#dialog").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
};
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="dialog" style="display: none">
</div>
<asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" OnClick="btnShowPopup_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Display (Show) jQuery UI Dialog Modal Popup after Partial PostBack in ASP.Net
When the Button is clicked, the following event handler is executed. Using the RegisterStartupScript function of the ScriptManager class, the ShowPopup JavaScript function is called.
Thus as soon as the ASP.Net AJAX Partial PostBack is completed, the jQuery UI Dialog Modal Popup box is shown.
C#
protected void btnShowPopup_Click(object sender, EventArgs e)
{
string message = "Message from server side";
ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
}
VB.Net
Protected Sub btnShowPopup_Click(sender As Object, e As System.EventArgs)
Dim message As String = "Message from server side"
ScriptManager.RegisterStartupScript(CType(sender, Control), Me.GetType(), "Popup", "ShowPopup('" + message + "');", True)
End Sub
Screenshot
![Display (Show) jQuery UI Dialog Modal Popup after Partial PostBack in ASP.Net]()
Demo
Downloads
