In this article I will explain with an example, how to call
(execute) Server Side (Code Behind) method from jQuery UI Dialog Modal Popup in ASP.Net.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<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 () {
$("#dialog").dialog({
buttons: {
Ok: function () {
$("[id*=Button1]").click();
},
Close: function () {
$(this).dialog('close');
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dialog" style="display:none">
Click OK to do PostBack!
</div>
<asp:Button ID="Button1" runat="server" Text="Button" style = "display:none" OnClick = "Button1_Click" />
</form>
</body>
</html>
Above I have a simple jQuery Dialog dialog which opens up as soon as the page is loaded. Just after the jQuery dialog I have placed a hidden ASP.Net Button Button1 which has a Click event handler assigned to it.
In the jQuery Dialog Initialization, I have specified two buttons
1. OK – Which when clicked makes the ASP.Net Button click and thus making a PostBack to the server which normally was not happening
2. Close – Which as the name suggests is a simple jQuery Dialog Button to close the Dialog.
Server side I have registered a script which will raise an alert when the Click event handler is executed.
protected void Button1_Click(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(Page.GetType(), "key", "alert('Button Clicked')", true);
}
Demo
Downloads
