Using jQuery Modal Dialog Confirmation with an ASP.NET Server Control
So the other day, I wanted to build a confirmation dialog using jQuery with an existing Asp.Net web forms Button control. I wanted this dialog to be modal; and upon confirmation, I wanted it to postback using the Button’s server-side click event. After toying with the jQuery dialog, I realized that its dialog doesn’t suspend the process while waiting for user input. So it also causes problems with confirmation since clicking the original button will always postback. So with a few tweaks, you can prevent the postback and emulate the click event pretty easily.
Setup the Dialog and Postback Script
In my application, we may click the button multiple times. So you’ll need to initialize it on load and actually open it later. As you can see below, we’re making our dialog modal and setting its autoOpen to false to prevent it from opening during initialization. The dialog contains two buttons, and in this initialization, we can define their handler code. The confirmation button “Yes, I Understand and Agree” runs a chunk of code emulates the server control Click event on Button1. Notice I used the inline server-side script to gain access to the Page.ClientScript object, which contains a nice handful of helper functions for javascript.
$().ready(function() {
$("#ConfirmPanel").dialog(
{ autoOpen: false,
modal: true,
bgiframe: true,
width: 400,
height: 300,
buttons: {
'Youbetcha': function() {
<%=this.Page.ClientScript.GetPostBackEventReference(new PostBackOptions(this.Button1))%>;
},
'No Thanks': function() {
$(this).dialog('close');
}
}
})
});
Open the Dialog with OnClientClick
Next we’ll open the dialog each time our original server control button is clicked. You use the OnClientClick property to do this.
$("#ConfirmPanel").dialog('open'); return false;
We always return false here. Since the dialog doesn’t suspend the process, it will always finish and immediately postback. So by returning false, we’re preventing the button from posting back and allowing the jquery dialog to appear.
Here’s the full Asp.Net markup:
<asp:Label ID="lblClicked" runat="server" />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Test" OnClientClick="javascript: $('#ConfirmPanel').dialog('open'); return false;"/>
<div id="ConfirmPanel" style="width: 400px; height: 200px;">
<h2>Terms and Conditions</h2>
<p>By accepting, you agree to the following:
<ul>
<li>Are you really, really sure???? </li>
</ul>
</p>
</div>
The Result
Clicking Youbetcha fires the Click event for our Button1.
Updated: 2/16/2010
To answer Matt’s question, I setup a simple web forms page with a data grid and a button within its rows. All the buttons are wired to one event handler and their command argument property is used to provide identifying data to the event handler. Having said that, here’s the same solution using dynamic confirmation dialog. If you click OK, it will postback using the original button’s information which is displayed on postback. Noticed I placed a ClientScript.GetPostBackEventReference(uxGrid, string.Empty) within the PageLoad event. Every time the page loads, postback or not, I want it to do this so it will render the __doPostBack client-side function. Without that, it will only work the first time. Subsequent clicks after the first postback will break.
So essentially the solution is to use __doPostBack(clientside_input_name_attribute, ”). Using the javascript function below we rebuild the buttons for the dialog each time and rewire it to the appropriate location. So for this, if you didn’t want to use a grid, you could still use it the same way via OnClientClick with “this.name” and pass that to __doPostBack.
Here’s the markup source. You can also download the full source code here.
Thanks Matt.
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
ClientScript.GetPostBackEventReference(uxGrid, string.Empty);
if (!Page.IsPostBack)
{
List<int> test = new List<int>();
test.Add(2);
test.Add(3);
test.Add(32);
test.Add(223);
test.Add(5);
test.Add(8);
uxGrid.DataSource = test;
uxGrid.DataBind();
}
}
protected void uxRowAction_Click(object sender, EventArgs e)
{
Button b = sender as Button;
if (b != null)
{
uxTest.Text = "clicked " + b.CommandArgument;
}
}
</script>
<link href="smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#dialogContent').dialog({
autoOpen: false,
modal: true,
bgiframe: true,
title: "MySql Membership Config Tool",
width: 800,
height: 600
});
});
function rowAction(uniqueID) {
$('#dialogContent').dialog('option', 'buttons',
{
"OK": function() { __doPostBack(uniqueID, ''); $(this).dialog("close"); },
"Cancel": function() { $(this).dialog("close"); }
});
$('#dialogContent').dialog('open');
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dialogContent">
<h3>confirm</h3>
<p>Click ok to accept</p>
</div>
<asp:Literal ID="uxTest" runat="server" />
<div>
<asp:DataGrid ID="uxGrid" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:Button ID="uxRowAction" runat="server" CommandArgument='<%#Container.DataItem.ToString() %>' Text="Row Action" OnClick="uxRowAction_Click" OnClientClick="javascript:return rowAction(this.name);" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</div>
</form>
</body>
</html>
Hi ,
Can u help be my Server Side Button Click not Executed
Check your email. I replied asking you more information. Thanks
How can I make this dynamic so I do not have to hard code the name “Button1″? I would like for any button I want this functionality to just specify the OnClientClick portion and it will work correctly, much like the standard javascript confirm.
That is a good question. Sorry for the delay. I’m actually working on an answer for this. The jQuery documentation shows that you can set the dialog buttons after initialization, so I’m thinking there’s a way you can take advantage of the OnClientClick attribute on the server controls and dynamically set the button handlers on the fly. The only thing holding me back at the moment is caused by the buttons being within an itemTemplate, so they don’t behave like normal buttons when using my example above.
Here’s the jquery docs for the dialog buttons.
http://docs.jquery.com/UI/Dialog#option-buttons
@Matt
Post updated. Here’s an example of doing a dynamic confirmation dialog. Thanks
Hi Nathan,
Thanks for this, just what I was looking for
Hi,
i used jquery modal box in my project..and i want to make form for registering to website like in the below code block 1..there is no problem until here..and i want to insert user informations into the database in the rgButton_Click event at codebehind..the events codes like in the below code block 2..But when i click the button.the rgButton does not work.i did not insert the informations into the database.how can it fix..Can you help me..? Thanks
P.S:sorry for my bad english and i hope you understad my problem
@ofo
No problem. I’ll shoot you an email directly and see if we can figure it out.
Hi I’m using the jquery dialog and by making the UseSubmitBehavior=”false” on the asp button control I can get the server side code to fire. But the server side code doesnot get the values entered on textbox control.
I will try your method above and see if it works for me
thanks
Hi ,
My Server Side Button Click event is not executed. Can u help me?
@Muds
we’re running into a similar issue on our project. any ideas on how to fix?
Are you all still having problems with this?
It can be helpful to get FireFox w/ the Firebug addon and watch your Net and Console tabs while doing postbacks. If anything shows up red or you get script errors, they’re pretty easy to spot with these tools.
For this, check to make sure the __doPostback() function is rendered in your page. If it’s not, then make sure you register any one of your server controls for postback. This will automatically render the __doPostback() function in your page.
In the example above, I used the grid and registered it in the PageLoad event on all requests, not just postback.
ClientScript.GetPostBackEventReference(uxGrid, string.Empty);
Hope that helps!
how can i use this in page with toolkitscript manager?
Hi – During page_load I want to check some server-side things and depending on the result I want to display the jquery dialog (modal) automatically (i.e., right after the page has rendered). I tried RegisterClientScriptBlock and other variations but can’t get it to work.
The modal does work correctly (I have a button that executes it).
Here’s a snip from the in the page head:
var dlg = $(“#notices”).dialog({
bgiframe: true, autoOpen: false, width: 600, modal: true, height: 300
});
dlg.parent().appendTo($(“form:first”));
Any ideas??
Thanks!
@jonathan
I’m betting your script is being invoked before the DOM is ready causing the dialog not to appear. Try wrapping your startup code with a jquery ready handler.
With my demo here, I added the line below to Page_Load immediately following the line with Page.GetPostBackEventReference.
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), “startup_ready”, “$(document).ready(function(){ /*launch dialog*/ $(‘#dialogContent’).dialog(‘open’); });”, true);
This should cause it to open immediately. You can wrap logic around that server-side if you wish.
Just im looking for.
Thank you.
Nice code, work like a charm, i was looking that code for a project and that fullfil all what was looking.
Thanks for posting this good code.
@Sudhir
You bet! Thanks!