How to use JQuery dialog as Confirm dialog in ASP.NET

Another ASP.NET WebForms post. It seems I'm "stuck" with WebForms for now, so lets make the best out of it. Today's issue: how many times did you have to code some confirmation logic on your website to ensure that your users are (doubly/triply) sure about the action they are about to perform?

A typical example is prompting the user to confirm that they are sure about deleting a record. In typical/boring javascript world, you would do something like this:

HTML

<asp:Button runat="server" ID="btnDelete" Text="Delete"                       OnClick="BtnUDelete_Click" OnClientClick="if ( ! deleteConfirmation()) return false;"/>

Javascript

function deleteConfirmation() {
    return confirm("Are you sure you want to delete this item?");
}

Nothing wrong with this. Plain and simple and easy to code. However, it is plain. You cannot customize it with CSS make it look consistent with your site's colors and identity.

jQuery to the rescue

jQuery UI has the solution for you. You can use the jQuery UI Dialog to present users with customized confirmation/dialog boxes. You can even use the jQuery UI theme or, if you are not using a theme, you can manually overwrite the jquery UI css with your own. In any case, you can totally change the look and feel of the dialog box and this is the real benefit of using this approach. Let's see how you would implement this:

HTML

Firstly, lets add the necessary jQuery libraries to the page. You can use NuGet, I would recommend it, but for the brevity of this article, we will go the CDN route. On the <head/> of your web page, add the necessary script references:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet type="text/css" href="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js" />

NOTE: if you are using a custom theme with jQueryUI, make sure you reference that in the <link/> above.

Next, since we are not going to use the ASP.NET control features (you can still use an asp.net control), I prefer to replace the <asp:button/> with a plain html <button/>.

<input id="btnDelete" type="button" class="button" title="Delete" name="Delete" value="Delete" />

We also need a <div/> for the dialog box. Add one like this:

<div id="dialog-delete" title="Delete confirmation">
	<label class="YourPrettyClass">
		Are you sure you want to delete this record?
	</label>
</div>

Javascript

First, let's instantiate our jQuery dialog box:

$('#dialog-delete').dialog({
	resizable: false,
	height: 200,
	autoOpen: false,
	modal: true,
	buttons: {
		"Delete":function(){
			__doPostBack("delete", "");
            $(this).dialog("close");
            },
        Cancel: function() {
            $(this).dialog("close");
        }
    }
});

The code above instantiates the dialog box and assigns it two buttons. The "Delete" and "Cancel" buttons. The "Delete" is responsible for performing the postback by calling the built-in asp.net __doPostBack() method. The __doPostBack() takes two arguments that correspond to __EVENTTARGET and __EVENTARGUMENT in ASP.NET. Typically, the first one contains the control id and the second one the arguments that you want to pass to the code-behind method. You can, however, pass any arguments you want to the method, like in this case the string "delete" for the control id and an empty string for the arguments.

NOTE: You could, at this point perform an ajax request instead and make the operation more user friendly. However, we will stick with the full postback for now so that you can see how the code behind should process it.

The final piece of code required on the front end is capturing the button click in order to display the dialog box.

$('#btnDelete').click(function (e) {
	e.preventDefault();
	$('#dialog-delete').dialog('open');
});

Code Behind (C#)

Our page needs some code in order to process the postback. Inside the Page_Load() method add the following code:

protected void Page_Load(object sender, EventArgs e)
{
	if (Page.IsPostBack)
	{
		var requestTarget = this.Request["__EVENTTARGET"];
		var requestArgs = this.Request["__EVENTARGUMENT"];

		if (requestTarget == "delete")
		{
			// do you own validation etc
			DeleteRecord();
			return;
		}
	}
}

That's all to it. Admittedly this approach requires a bit more code but you get the benefit of a nicer, fully-customizable dialog box.

Did you find this useful? Do you have a better approach? Feel free to let me know in the comments.