All of the code samples have now been consolidated and moved to my blog at http://house9.blogspot.com/. Many google searches still point here so I am leaving this blog operational.

Sunday, February 11, 2007

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();" 

No comments:

Custom Search
< ... back