HTML Markup
In this article I will explain how to make an ASP.Net Button to do PostBack to the server in jQuery Dialog. As soon as you place your ASP.Net Button inside the jQuery Dialog DIV it stops doing PostBack. Hence following technique can be used to tackle this situation.
<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
