Javascript working with ASP.NET code behind

Question

I have to make a delete button for a simple intranet forum. I would like to have a javascript alert box (or equivalent) asking for confirmation when deleting posts. However, I've found it difficult to get the result of the javascript confirmation box to feed into the code-behind. Is this even possible? Or do I have to use another sort of design?

Answer 1

You would simply prevent the callback from happening if the user hit cancel

Edit: as Josh Stodola pointed out

<asp:Button runat="server" ID="Save" 
    OnClientClick="if (!confirm('Are you sure?')) return false;" />

Answer 2

You want to do something like:

    <asp:button runat="server" id="mybutton" 
OnClientClick="return confirm('delete?');" />

Answer 3

Hi,

You can check out the following link in which I show how to do a similar action using GridView control.

http://www.highoncoding.com/Articles/138_GridView_Confirm_When_Delete.aspx

Let me know if you need further help!

Answer 4

If you want to go with another design, for confirmation boxes like that I always use ModalPopup in the ASP.NET AJAX Control Toolkit. That way I don't have to touch javascript, and have more control over what's happening since the button click in the modal popup will give me a postback.

Answer 5

You should be able to do something like this - it will only fire the post back if they choose yes:

<asp:Button ID="btnDelete" text="Delete" runat="server" 
OnClick="DoDeleteFunction();"  
OnClientClick="return confirm('Are you sure you want to delete?')">
</asp:Button>

Answer 6

Why do you want to send the response to the code behind? What you can do, is in your button, just make it so if they cancel, it just doesn't postback at all.

Do something like the following:

<asp:button id="mybutton" runat="server" 
 onclientclick="javascript:if(!confirm('Confirm delete?')) return false;" />

That's the basic idea. If you really need it to still postback even when cancelled, and pass the confirm response, then personally, i would add an asp:hidden to the form, and have the javascript set the value of the hidden field appropriately.

Answer 7

You can show a client-side confirmation dialog like this:

<asp:Button ID="btnDelete" runat="server"
   OnClientClick="return confirm('really delete?');"
   OnClick="btnDelete_Click" />

The PostBack will only be executed if the user answers the confirmation dialog with Yes. Otherwise, no postback will happen and the server-side handler (btnDelete_Click) will not be called.

Answer 8

If you have ASP.NET AJAX available, use the ConfirmButtonExtender.

You wire up the code behind for your delete button as normal. Then you attach the confirmation extender to it. It will automatically insert the appropriate JavaScript to give you a modal confirmation (with the bling, not the brower alert style) and will either proceed as normal or cancel out based on the users decision.

Answer 9

I'd recommend subclassing the standard button control for this, so that you can re-use the code again in future.

namespace MyApp.Controls
{
    public class PromptButton
    {
        public string Prompt { get; set; }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            if (!string.IsNullOrEmpty(Prompt))
            {
                // Escape apostrophe's in the prompt message
                string safePrompt = Prompt.Replace("'", "\'");

                // Add the onClick to show the alert box when clicked
                Attributes.Add("onClick", string.Format("return confirm('{0}')", safePrompt));
            }
        }
    }
}

Once you've done this, you can add a reference at the top of your ASPX page or in web.config:

<%@ Register Assembly="MyAssembly" Namespace="MyApp.Controls" TagPrefix="app" %>

In your page, you'd then use the following:

<app:PromptButton ID="PromptButton1" Prompt="Are you sure?" OnClick="PromptButton1_Click" runat="server" />

This would result in the Javascript confirm dialog box being displayed, and if the user clicks 'OK', the postback would occur. If the user clicks 'Cancel', nothing would happen.

It's a little more work on the outset, but the code is a lot more reusable, and could even be moved into a separate library altogether and used across multiple projects.