ASP.NET Checkbox with confirmation message

For one of my assignments I had to create a checkbox that displays a confirmation message when you uncheck a checkbox. I thought I would share my solution with you guys.

 

First off al you will have to create a new class file that we will call ‘ConfirmationCheckbox’ the class will inherit from ‘System.Web.UI.WebControls.Checkbox’ (the normal checkbox). For our checkbox you have to override the ‘OnPreRender’ to add JavaScript to the page and the ‘AddAttributesToRender’ to add the onclick to the checkbox for the notification. Besides that you have to create a property for the confirmation text.

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Web.UI.WebControls;
 using System.Web.UI;
 using System.Globalization;

 namespace Motion10.SharePoint.WebControls {
     public class ConfirmationCheckBox : CheckBox {
         public string ConfirmationText { get; set; }

        protected override void OnPreRender(EventArgs e) {
             base.OnPreRender(e);
             this.Page.ClientScript.RegisterClientScriptResource(typeof(ConfirmationCheckBox), "Motion10.SharePoint.JavaScript.js");
         }

         protected override void AddAttributesToRender(HtmlTextWriter writer) {
             this.Attributes["onclick"] += string.Format(CultureInfo.CurrentCulture, "Confirmation(this, '{0}');", this.ConfirmationText);
             base.AddAttributesToRender(writer);
        }
    }
}

In the code sample above you see the overridden methods, in the ‘AddAttributesToRender’ we add a call to the JavaScript method to the attribute ‘onclick’. The JavaScript that we will create later on in this article needs two parameters the object in this case the checkbox (this) and the text for the confirmation (this.ConfirmationText).

The JavaScript will be added to the page in the OnPreRender method of the CheckBox. The JavaScript is a embedded resource in our dll. For that reason you have to use “Motion10.SharePoint.Notification.JavaScript.js”.

If you want to create a JavaScript file as embedded resource you have to do the following:

1. Create a JavaScript file within your project.
2. Right click on the file and choose properties.
3. In the properties window set the Build Action to embedded resource.

After you have done this you can add the Resource to the ‘AssemblyInfo.cs’ file under the properties like this:

[assembly: WebResource("Motion10.SharePoint.JavaScript.js", "text/javascript")]

Finally you will have to point to the file by using the full assembly name followed by the filename. If you place the file in a folder you will also have to add the folder to the name.

 

Know we have got this out off the way we still have to create the JavaScript for the confirmation message.

function Confirmation(el, message) {
    if (!el.checked) {
       el.checked = !confirm(message);
    }
}

As you can see we have one method in the JavaScript file called Confirmation that needs to parameters. The ‘el’ stands for the checkbox and ‘message’ for the message that needs to be displayed. In the method we check if the checkbox is unchecked because we only want to display a notification when the checkbox is unchecked.