September 11th 2008

Modal Delete Confirmation in an ASP.NET ListView Using SimpleModal jQuery Plugin

Updated 28OCT08: Changed code to use a single confirmation instead of one in each row of the table.

Updated 12SEP08: Demo no longer throws error after deleting row. Oops :(

I have been using the ModalPopupExtender from the AjaxControlToolkit for quite some time now to confirm delete requests prior to allowing the page to be posted back to the server. Since I have been spending so much time with jQuery lately I thought I would try to put something together that was jQuery specific.

Live Demo | Download (HTML, CSS, JavaScript)

I started with the idea to port as much as I could from Matt’s post that was specific to Dynamic Data. I had some issues with using the ThickBox Plugin and its callbacks that from what I know now could probably go back and make work. In the process of figuring things out though I came across the SimpleModal Plugin from Eric Martin which works fine for what I am trying to do. Matt used a clever technique that made my job a lot easier. When you click the image, all you are really doing is popping up the dialog. You aren’t issuing the delete command until you click yes in the dialog. This is done by hitting the click event of a hidden button that contains the delete command. Check out the pictures and code below for a better idea. Be sure to checkout the demo if you missed it above.

ListView:

ListView Image

Confirmation Dialog:

Confirmation Image

jQuery:

HTML For Delete TD:

Note: If you looking for good examples of how to do this with the ModalPopupExtender I recommend taking a look at these posts by Matt Berseth http://mattberseth2.com/demo/Default.aspx?Filter=ModalPopup