Cancel post back based on user confirmation

Okay, in my first post in the ASP.NET rookies I said I will explain how you can have a button which will first ask you if you are sure you want to do particullar action.

I did the example with a simple button, not with GridView as it does'n matter, the logic is the same. First of all let's create new Web Application. My application name is "ASPNETRookies" as I plan to use this project not only for this demo but in the future for other demos.

Open the Default.aspx page in Visual Studio 2005 designer and place a button on the form:

<asp:Button ID="btnConfirmation" runat="server" Text="Chameleon Bulgaria"/>

I used "btnConfirmation” for ID and "Chameleon Bulgaria" to be shown as caption. If you have a grid for example, you will have some functionality to delete the user for which the button is pressed and probably to repopulate this grid with the users left in the database. To keep it simple I added very basic functionality to this button - our button will simply redirect to a site. So if the user confirms the dialog - he will be redirected to the site, if not - the post back should be cancelled and he should stay on the same page. To add the redirection part do the following:

Double click the button in designer view so Visual Studio can generate onclick handler (remember that this is the code behind onclick event handler. The code in it will be executed on the server, not on the client machine, so you should see that the page does post back).
Here is what I wrote in my onclick event handler:

     protected void btnConfirmation_Click(object sender, EventArgs e)
     {
        Response.Redirect("http://chameleonbulgaria.com");
     }


Now let's see how can we implement the rest of the logic - to have a confirmation box which asks the user something. The javascript function which asks the user a question and returns true or false according to his answer is Confirm('Text'). This will open a confirmation box with two buttons - OK and Cancel. If the user choose "OK" the Confirm function will return true, otherwise - it will return false. Okay, we know what we need, but where to place this code?

Well there are few ways to assign client click handler on ASP.NET button - all of them however, rely on the "OnClientClick" property. It receives the javascript which will be executed as a string. You can assign the name of a javascript function, or, alternativelly - the javascript code (only short code, please!). You can assign this property through the ASP.NET markup of the button (in the Default.aspx page) or you can assign it in the code behind (Page_Load handler for example). Okay, if you add it now as I did, you will have something like this:

     <asp:Button ID="btnConfirmation"
             runat="server"
             Text="Chameleon Bulgaria"
             OnClick="btnConfirmation_Click"
             OnClientClick="confirm('Do you want to go to Chameleon Bulgaria?');" />

Now run the project and click on the button. You will see the confirmation box. If you click on the "Cancel" button you should stay on the same page, but wait ..., what is going on? The button click event is raised again. This means we failed to complete our mission.
Now let’s think a bit. We see the confirmation box before the page is posted back to the server. So all we need to do is to somehow cancel the post back. Typically the button is rendered as submit html element. So what it does is to call our form .submit() method. Okay how can we cancel submit? By adding “return false” is the answer. When the browser see “return false” it will stop the execution of the javascript statement. Try this with our button. Add “return false” to the OnClientClick, removing our confirm for a while.

Okay we understood that we need to cancel the submission of the form, we understood how we can do this. Now let’s put all things together - we have a confirm() which returns true or false based on which button the user clicked. So in order to achieve the right functionality we need to add “return” before our confirm method like this:


OnClientClick="return confirm('Do you want to go to Chameleon Bulgaria?');" />


Try to run the project now. It should work just as expected. When you click “Cancel” the page won’t be sent back to the server.