Code Samples: A client side (javascript) confirm box with ASP.NET

The following code sample illustrates a client side (javascript) confirm box in use with an aspx button, this presents the end user with a dialog box asking ''are you sure you want to submit this form?', it gives the user two options 'Ok' and 'Cancel', clicking ok will submit the form, clicking cancel will not

This sample code uses 4 variations;

TestButton1 - a standard html input type 'button', which submits the page using hand coded js
TestButton2 - a standard html input type 'submit', it has the default behaviour of submitting the form
TestButton3 - an asp:button with the OnClientClick (rendered as onclick) declared in the mark up
TestButton4 - an asp:button with the onclick defined in the code behind or c#

The aspx page markup - JavaScriptConfirm.aspx


<%@ Page 
  Language="C#" 
  AutoEventWireup="true" 
  CodeBehind="JavaScriptConfirm.aspx.cs" 
  Inherits="SandboxOne.JavaScriptConfirm" 
%>
<!DOCTYPE...>
<html>
<head runat="server">
    <title>Javascript Confirm</title>
    <script language="javascript" type="text/javascript">
    function AreYouSure()
    {
        return confirm('are you sure you want to submit this form?');
    }
    </script>
</head>
<body>
<form id="form1" runat="server">
    <input id="TestButton1"
            type="button"
            onclick="if(AreYouSure()) { document.forms[0].submit(); }"
            value="A regular html 'button' button"
    />
    <input id="TestButton2"
            type="submit"
            onclick="return AreYouSure();"
            value="A regular html 'submit' button"
    />
    <asp:Button ID="TestButton3"
                OnClientClick="return AreYouSure();"
                OnClick="InvokeServerSideMethod"
                Text="A asp button"
                runat="server"
    />
    <asp:Button ID="TestButton4"
                OnClick="InvokeServerSideMethod"
                Text="A asp button c# wired OnClientClick"
                runat="server"
    />
</form>
</body>
</html>

The c# 'code-behind'


public partial class JavaScriptConfirm : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // wire the client side onclick to TestButton4
        this.TestButton4.Attributes.Add("onclick", "return AreYouSure();");

        if(Page.IsPostBack)
        {
            Response.Write
            (
                String.Format("Page_Load, IsPostBack: {0}
", DateTime.Now.ToLongTimeString())
            );
        }
    }

    // the server side 'event' kicked off when asp:button is clicked
    protected void InvokeServerSideMethod(object sender, EventArgs e)
    {
        Response.Write
        (
            String.Format("InvokeServerSideMethod, E: {0}
", DateTime.Now.ToLongTimeString())
        );
    }
}

The 'key' here is the return in the onclick method; the javascript confirm will return true if 'Ok' is clicked and false if 'Cancel' is clicked, we must return this value from our buttons onclick event so that the form will not generate an HTTP POST (or PostBack if you like)

if you do not include the return statement in the onclick the form will post back regardless of which button is clicked 'Ok' or 'Cancel'; for instance you do NOT want to do this

 onclick="AreYouSure();"

but instead do this

 onclick="return AreYouSure();"

Code Samples

Sunday, February 11, 2007

A client side (javascript) confirm box with ASP.NET

No comments: