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.

Notification

So when a user uncheck the checkbox a confirmation message will be shown (The message we entered as property of the checkbox). If the users selects ‘Ok’ the checkbox stays unchecked and when the user selects ‘Cancel’ the checkbox will stay checked and the “OnCheckChange” event of the checkbox will not be called.

Related Posts

Azure Event Grid with Custom Events As of yesterday (16-8-2017) the public preview of Azure Event Grid is live. Azure Event Grid is a fully managed event routing service. Azure Event Gri...
.NET Library for quick and easy Twitter integration A few days ago I wanted to create a solution to automatically tweet new blog posts. Because I did not have enough time to write a custom component...
System.Web.UI.WebControls.WebParts.WebPart versus Microsoft.SharePoint.WebPartPa... When I started developing for SharePoint two years ago I was thrown in a big black hole and started to develop webparts by hands on experience. In th...
ASP.Net Server Controls In January of this year I wrote a post about creating a virtual earth web part (You can read about it here). I had done this by adding JavaScript to ...
ASP:Menu in IE8 Since a few days I have installed Internet Explorer 8 on my computer and I was curious how it would display certain sites. Till a few hours ago every...
Virtual Earth WebPart After reading a post on the blog of Wesley Bakker I thought by myself maybe it is fun to create a webpart in which we can load a map from Virtual Ear...

Leave a Reply

Your email address will not be published. Required fields are marked *