Asp.Net and Colorbox: Creating a ‘delete’ confirmation dialog

This article was inspired by a friend of mine who wanted to implement a delete confirmation dialog in his website, and I thought it might be a useful little tutorial to write about.

These days, I like to use the excellent Colorbox for this sort of thing. In case you haven’t heard of it or used it before, it’s simply a brilliant jack-of-all-trades Javascript pop-up library based on the even more awesome jQuery. It can display anything in a pop-up, from arbitrary Html content, flash video and an image gallery depending on how you set it up. In the past I’ve used Thickbox for this sort of thing, but as it’s not maintained any more (not to mention Colorbox looks a lot nicer) I prefer this.

For this tutorial, imagine the following scenario:

  • You have some sort of form you use to add/edit some data
  • This form has the usual ‘Save’, ‘Cancel’ and ‘Delete’ buttons hanging off the bottom of it
  • When the user clicks ‘Delete’, you want to show them a dialog asking the user if the really want to delete

For the delete confirmation you could just redirect the user to another page and show the confirmation there, but this method is cooler, not to mention ludicrously easy. Best of all, it doesn’t interfere too much with the .Net code you would have had to write anyway. So let’s get going.

1. Creating the Visual Studio Project

For this tutorial I am using the Asp.net Website project template from Visual Studio 2010. If you’re using VS2008, the website project template in there will also do fine, but you won’t get all the jQuery files you need. You can download them separately using the links below.

Create a standard Web Site project, choose a location to save your files and hit ‘Ok’:

2. Grab Colorbox & jQuery

Grab the latest version of Colorbox from their site (1.3.9 at the time of writing). Extract the archive to somewhere temporary on your hard-drive – the file structure inside the .zip file isn’t quite suited to just being plonked into a website, so we’ll need to sort that out first.

Basically for the purposes of this demo you will want to create a simple file layout for this stuff. As I’m using Visual Studio 2010 and the ‘Website’ project template, I already have a ‘Scripts’ folder set up for me. I’m just going to shove my Colorbox files in there in a sub-folder named ‘Colorbox’. I’ll put all the images and css files in there also. So, just grab the relevant files and folders from the archive you just downloaded and copy them into your website project so that you end up with a structure that looks like this:

You will also need to download jQuery, although if you’re using Visual Studio 2010 you will already have the appropriate libraries there ready for you when you create a new website project. If you need to download it, just save in the ‘Scripts’ folder as in the image above.

3. Register jQuery and Colorbox on the page

Now to register jQuery and Colorbox on our page. For now, I’m going to work entirely within Default.aspx, so we will just register our scripts in there instead of the master page (which is where this might normally go). Include jQuery, Colorbox and the Colorbox css files at the top of Default.aspx. Again, because I’ve used the new VS2010 website templates, it has already created me a nice project with a master page and so on. On Default.aspx, it’s also created references to content placeholders, including a HeadContent which will end up in the <head> tag on the page when it is rendered. I’m going to include my JS references in there, but really at the end of the day they just need to go somewhere on your page:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script src="/Scripts/Colorbox/jquery.colorbox-min.js" type="text/javascript"></script>

<link href="/Scripts/Colorbox/colorbox.css" rel="stylesheet" type="text/css" />

</asp:Content>

By the way, the paths here assume that you’re running the website outside of a virtual directory – Visual Studio has a habit of creating website projects in virtual directories and not at the root of the URL. If you fire up the article source code, load it into VS and find that none of the scripts can be found when you test it out, that’s probably why. Simply click on the website project node in Solution Explorer, hit the F4 key to bring up the properties window and set the VirtualPath setting to just ‘/’ (without the quotes).

4. Create the dummy form

Imagine here that we have a form which is set up to edit the details of a piece of fruit from market (for the sake of the demo). I’m going to have a field which allows the user to edit the name of the fruit, and two buttons which perform a Save and a Delete operation. The only thing which is of importance to this demo is the Delete button; the rest of it is just fluff that I’m adding to give more ambience to the demo.

The form which I have created looks like this (I just created this under all the stuff that VS2010 gives you by default on default.aspx when you create a new web site project):

<div>
  <asp:Label runat="server" AssociatedControlID="FruitNameTextbox">Fruit name:</asp:Label>
  <asp:TextBox runat="server" ID="FruitNameTextbox" />
</div>

<div>
  <asp:Button Text="Save" ID="SaveButton" runat="server" />
  <asp:Button Text="Delete" ID="DeleteButton" runat="server" ClientIDMode="Static" />
</div>

5. Create the Colorbox dialog

Now for the first meaty parts of the demo. To create the dialog which will be shown by Colorbox, we simply define an area of Html which is to be shown inside the dialog when it is opened, and wrap the whole thing inside a div tag with display: none defined as its style. This is so that the dialog will not be displayed when the page is being viewed under normal circumstances. Furthermore, we attribute this area of Html with an Id so that Colorbox can pick it out.

For our dialog demo, we’re just going to ask the user to make sure that they really want to delete this item of fruit:

<div style="display: none;">
  <div id="dialog">

    <h1>Are you sure?</h1>
    <p>Are you sure you want to delete this fruit?</p>
    <p><strong>Note:</strong> This cannot be undone!</p>

    <asp:Button Text="Delete" ID="ConfirmDeleteButton" runat="server" ClientIDMode="Static" />
    <asp:Button Text="Cancel" Id="CancelDeleteButton" runat="server" ClientIDMode="Static" />

  </div>
</div>

In here you’ll notice that we’ve put another two buttons – one for actually deleting something, and one for cancelling the dialog. We’ve also given the inner div tag an ID of ‘dialog’ so that we can reference it when setting up Colorbox.

6. Making the buttons work!

Now that (almost!) everything is in place, we can work on the client-side stuff which will actually show the dialog and enable us to cancel out of it. First of all, showing the dialog takes only a few lines. Underneath the above code, we’ll open a new script tag and handle the click event of the DeleteButton to show the dialog box:

<script type="text/javascript">
  $(function ()
  {
    // 1. Wire up the delete button to show Colorbox:
    $("#DeleteButton").colorbox({ inline: true, href: "#dialog" });

    // 2. Handle the 'actual' delete button:
    $("#ConfirmDeleteButton").click(function()
    {
      $.fn.colorbox.close();
    });

    // 3. Handle the dialog cancel button:
    $("#CancelDeleteButton").click(function()
    {
      $.fn.colorbox.close();
      return false;
    });
  });
</script>

Here I am using some jQuery to pick up the page’s ‘load’ event using the short-hand $(function() {} );. Next, I’m using the selector of #DeleteButton to assign Colorbox to, so when that button is clicked, it will activate the Colorbox dialog. You can see as one of the parameters I’m passing the ID of our dialog code and I’m also setting the inline property to ‘true’, meaning that we want Colorbox to display content which is inline with our page, and not a piece of content hosted elsewhere (another URL for example).

Next, in step 2 we’re wiring up the dialog’s Delete and Cancel buttons. The two handlers look very similar in that all they really do is close Colorbox. However, the fundamental difference is that the handler for the Cancel button returns ‘false’, preventing the default action from happening. The ConfirmDeleteButton however will continue on and the page will post back as normal and fire the click handler for that button (we will create this in a moment), whilst still closing the dialog.

A Quick Note

You’ll notice that the buttons are attributed with ClientIdMode=”Static”. In case you haven’t seen it before, this is a new feature in .Net 4 which allows us to ensure that the Html output for a .Net control will have the same ID value as the one we give it when writing the code. This means that .Net won’t ‘mangle’ the name when used inside naming containers any more, and we can safely use the control ID from client-side code. Scott Guthrie has a detailed account ClientIdMode on his tech blog.

If you are using .Net 3.5, change the jQuery selector to instead:

$("input[id$=_DeleteButton]")

.. which basically says “Select any input element whose ID attribute value ends with _DeleteButton”, and you will get the same reliable result. You will also need to follow this for the buttons in the next section, which deal with cancelling and closing the dialog. Rick Strahl writes more about this on his blog.

7. The ConfirmDeleteButton handler

The last thing we need to do is wire up a server-side event handler for the actual delete button. This is done as normal in your code-behind (or inline if you prefer) and is no different to how you would normally handle this elsewhere. For my demo, I don’t actually have anything to delete, but I will handle it just the same way.

If we step back to the ConfirmDeleteButton for a second, and modify the mark-up to add in the name of the click handler:

<asp:Button Text="Delete" ID="ConfirmDeleteButton" runat="server" 
ClientIDMode="Static" OnClick="ConfirmDeleteButton_Click" />

Then include the appropriate server-side handler in the code-behind:

protected void ConfirmDeleteButton_Click(object sender, EventArgs e)
{
  Response.Write("Fruit deleted!");
}

In my case I’m not deleting anything, but in your case this would be the place to kick off any database deletes or file modifications/changes required, then redirect the user somewhere useful.

Now, if you run the application you should be able to click on the initial delete button, have the dialog appear to reveal another delete button and a cancel button. Clicking this delete button will close the dialog but also display a message at the top of the screen (thanks to the click handler being executed). Clicking the cancel button will also close the dialog but should not refresh the page or perform any server-side postback (thanks to the ‘return false;’ in the Javascript click handler.

Download article source code

Articles , , , ,

18 responses to Asp.Net and Colorbox: Creating a ‘delete’ confirmation dialog


  1. Pingback: Asp.Net and Colorbox: Creating a 'delete' confirmation dialog … | Neorack Tutorials

  2. Pingback: Webmaster Crap » Blog Archive » Asp.Net and Colorbox: Creating a 'delete' confirmation dialog …

  3. Pingback: Tweets that mention Asp.Net and Colorbox: Creating a ‘delete’ confirmation dialog « stevescodingblog.co.uk -- Topsy.com

  4. Prashant

    Hi Steve,

    Thanks a ton ! You saved my day !

    Prashant

  5. Travis

    The example works great. But it doesn’t work when using the latest JQuery 1.4.4. :-( (I can’t get it to post back!)

    Also, is there a reason why (in this example) when it posts back, the whole page shifts to the left as opposed to staying aligned in the centre?

    Thanks for the article!

    • Steve

      Interesting.. thanks for pointing it out – I’ll look into it and provide an update.

      I haven’t experienced the page shifting, could be a browser-specific issue. I’ll look into this too!

  6. Travis

    That’d be fantastic!! Thanks!!

    • Steve

      Hi Travis,

      1) The issue with jQuery 1.4.4 is just that the sample uses an older version of Colorbox. If you download the latest version of Colorbox and replace the two script files in /scripts/colorbox with the new ones from the download, it should now work.

      2) The thing with shifting to the left seems to be an IE issue and seems to be caused by the fact that I’m doing a Response.Write() in the click handler. I fixed this by having that click handler update a label on the page instead of writing directly into the response stream

      I will post an updated sample and tutorial text over the next couple of days, but at least you should be able to get yours working using the above.

      Thanks!

  7. Travis

    I just made another attempt. I replaced the colorbox js files, and substituted in a new jquery.min.js script (version 1.4.4):

    …but it still didn’t post back! :-(

    I eagerly await your new version! Thanks again!!

    • Steve

      Hi Travis,

      Unfortunately I haven’t found a fix for this yet. However, during my initial testing I found that actually it seems to be a problem with the latest version of the Colorbox script. If you use the one from the downloadable code on this post, you will probably find it will work fine.

      Apologies if you’ve already sorted this!

  8. Jon

    mvc project awesome has a confirm dialog helper for asp.net mvc
    http://awesome.codeplex.com

  9. Wow..thank you, thank you. Was struggling the Lightbox plugin to achieve what you have demonstrated here. I stumbled on the ColorBox on IMDB, their movie rating thingy deploys on of these if you are not authenticated.

    Long story short; you saved the day!!

  10. Ryan

    Worked great. Thanks so much!

    And like Travis posted above, I also had an issue posting back after clicking Delete. As you said, it turned out to be an issue with Colorbox. I then installed the “jquery.colorbox.js” you included in your sample code, and was able to get it to post back successfully :)

  11. Hi Steve,

    I finally managed to get this working. Check out Jack’s comments

    You could have also moved colorbox inside of the form: $(‘#colorbox’).appendTo(‘form’); This is a problem because you aren’t loading the entire form element into colorbox, just the form fields. This causes your form to break because colorbox’s markup exists outside of the form element

    http://stackoverflow.com/questions/6424638/asp-net-form-fields-not-posting-from-colorbox

    Anyway that worked for me! Thanks for the original post.

    Steve #1

    • Steve

      That’s brilliant Steve, thanks for letting us know! I will update the original article to incorporate your comments.

      Thanks again!

  12. Denise

    This is easy if it is an ordinary button. What if the delete button is in a listview or gridview though?

    I was able to do achieve this problem but had to use a hidden field to pass the id of the element i wanted to delete in the listview.

    I can use a session on ItemCommand event to store the ID but the confirmation dialog box using colorbox will be shown after a postback event. I also don’t like that.

    Is there a better way of doing this?

  13. Richard

    Hi Steve,
    I did a simple example following your tutorial and everything worked fine! Thanks!
    But now, i’m trying to put this confirm button into a asp.net gridview row.
    Everything works fine… i can see de confirmation box… the cancel button works too…
    The confirmation button closes the colorbox but not fires the server code of the asp.net button in gridview.
    I’ve tried gridview rowcommand event and onclick button event, but both had the same behavior.
    Do you have any idea what’s wrong?
    Thanks!

  14. Pingback: Fix Colorbox.js Errors - Windows XP, Vista, 7 & 8

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>