Click here to Skip to main content
Click here to Skip to main content
Technical Blog

ASP.NET Controls – CommunityServer Captcha ControlAdapter, a practical case

, 13 Apr 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
The ControlAdapter is available since .NET framework version 2.0 and his main goal is to adapt and customize a control render in order to achieve a specific behavior or layout. This customization is done without changing the base control.A ControlAdapter is commonly used to custom render for specifi

The ControlAdapter is available since .NET framework version 2.0 and his main goal is to adapt and customize a control render in order to achieve a specific behavior or layout. This customization is done without changing the base control.

A ControlAdapter is commonly used to custom render for specific platforms like Mobile.

In this particular case the ControlAdapter was used to add a specific behavior to a Control. In this  post I will use one adapter to add a Captcha to all WeblogPostCommentForm controls within CommunityServer instance.

The Challenge

The ControlAdapter complexity is usually associated with the complexity/structure of is base control. This case is precisely one of those since base control dynamically load his content (controls) thru several ITemplate.

Those of you who already played with ITemplate knows that while it is an excellent option for control composition it also brings to the table a big issue:

“Controls defined within a template are not available for manipulation until they are instantiated inside another control.”

While analyzing the WeblogPostCommentForm control I found that he uses the ITemplate technique to compose it’s layout and unfortunately I also found that the template content vary from theme to theme. This could have been a problem but luckily WeblogPostCommentForm control template content always contains a submit button with a well known ID (at least I can assume that there are a well known set of IDs).

Using this submit button as anchor it’s possible to add the Captcha controls in the correct place.

Another important finding was that WeblogPostCommentForm control inherits from the WrappedFormBase control which is the base control for all CommunityServer input forms.

Knowing this inheritance link the main goal has changed to became the creation of a base ControlAdapter that  could be extended and customized to allow adding Captcha to:

  • post comments form
  • contact form
  • user creation form.

And, with this mind set, I decided to used the following ControlAdapter base class signature :

public abstract class WrappedFormBaseCaptchaAdapter<T> : ControlAdapter where T : WrappedFormBase{}
Great, but there are still many to do …


The Captcha will be assembled with:

  • A dynamically generated image with a set of random numbers
  • A TextBox control where the image number will be inserted
  • A Validator control to validate whether TextBox numbers match the image numbers

This is a common Captcha implementation, is not rocket science and don’t bring any additional problem. The main problem, as told before, is to find the correct anchor control to ensure a correct Captcha control injection.

The anchor control can vary by:

  • target control 
  • theme


To support this dynamic scenario I choose to use the following implementation:

private List<string> _validAnchorIds = null;protected virtual List<string> ValidAnchorIds{    get    {        if (this._validAnchorIds == null)        {            this._validAnchorIds = new List<string>();            this._validAnchorIds.Add("btnSubmit");        }        return this._validAnchorIds;    }}private Control GetAnchorControl(T wrapper){    if (this.ValidAnchorIds == null || this.ValidAnchorIds.Count == 0)    {        throw new ArgumentException("Cannot be null or empty", "validAnchorNames");    }    var q = from anchorId in this.ValidAnchorIds            let anchorControl = CSControlUtility.Instance().FindControl(wrapper, anchorId)            where anchorControl != null            select anchorControl;    return q.FirstOrDefault();}

I can now, using the ValidAnchorIds property, configure a set of valid anchor control  Ids.

The GetAnchorControl method searches for a valid anchor control within the set of valid control Ids. Here, some of you may question why to use a LINQ To Objects expression, but the important here is to notice the usage of CSControlUtility.Instance().FindControl CommunityServer method. I want to build on top of CommunityServer not to reinvent the wheel.

Assuming that an anchor control was found, it’s now possible to inject the Captcha at the correct place. This not something new, we do this all the time when creating server controls or adding dynamic controls:

protected sealed override void CreateChildControls(){    base.CreateChildControls();    if (this.IsCaptchaRequired)    {        T wrapper = base.Control as T;        if (wrapper != null)        {            Control anchorControl = GetAnchorControl(wrapper);            if (anchorControl != null)            {                Panel phCaptcha = new Panel {CssClass = "CommonFormField", ID = "Captcha"};                int index = anchorControl.Parent.Controls.IndexOf(anchorControl);                anchorControl.Parent.Controls.AddAt(index, phCaptcha);                CaptchaConfiguration.DefaultProvider.AddCaptchaControls(                    phCaptcha,                    GetValidationGroup(wrapper, anchorControl));            }        }    }}

Here you can see a new entity in action: a provider. This is a CaptchaProvider class instance and is only goal is to create the Captcha itself and do everything else is needed to ensure is correct operation.

public abstract class CaptchaProvider : ProviderBase{    public abstract void AddCaptchaControls(Panel captchaPanel, string validationGroup);}

You can create your own specific CaptchaProvider class to use different Captcha strategies including the use of existing Captcha services  like ReCaptcha.

Once the generic ControlAdapter was created became extremely easy to created a specific one. Here is the specific ControlAdapter for the WeblogPostCommentForm control:

public class WeblogPostCommentFormCaptchaAdapter : WrappedFormBaseCaptchaAdapter<WrappedFormBase>{    #region Overriden Methods    protected override List<string> ValidAnchorIds    {        get        {            List<string> validAnchorNames = base.ValidAnchorIds;            validAnchorNames.Add("CommentSubmit");            return validAnchorNames;        }    }    protected override string DefaultValidationGroup    {        get { return "CreateCommentForm"; }    }    #endregion Overriden Methods}


This is the magic step.

Without changing the original pages and keeping the application original assemblies untouched we are going to add a new behavior to the CommunityServer application.

To glue everything together you must follow this steps:

  1. Add the following configuration to default.browser file:
    	<?xml version='1.0' encoding='utf-8'?><browsers>  <browser refID="Default">    <controlAdapters>      <!--<span class="code-comment"> Adapter for the WeblogPostCommentForm control in order to add the Captcha and prevent SPAM comments --></span>      <adapter controlType="CommunityServer.Blogs.Controls.WeblogPostCommentForm" adapterType="NunoGomes.CommunityServer.Components.WeblogPostCommentFormCaptchaAdapter, NunoGomes.CommunityServer" />    </controlAdapters>  </browser></browsers>
  2. Add the following configuration to web.config file:
    	<configuration>  <configSections>    <!--<span class="code-comment"> New section for Captcha providers configuration --></span>    <section name="communityServer.Captcha" type="NunoGomes.CommunityServer.Captcha.Configuration.CaptchaSection" />  </configSections>
    	  <!--<span class="code-comment"> Configuring a simple Captcha provider --></span>  <communityServer.Captcha defaultProvider="simpleCaptcha">    <providers>      <add name="simpleCaptcha" type="NunoGomes.CommunityServer.Captcha.Providers.SimpleCaptchaProvider, NunoGomes.CommunityServer"            imageUrl="~/captcha.ashx"            enabled="true"            passPhrase="_YourPassPhrase_"            saltValue="_YourSaltValue_"            hashAlgorithm="SHA1"            passwordIterations="3"            keySize="256"            initVector="_YourInitVectorWithExactly_16_Bytes_"            />    </providers>  </communityServer.Captcha>
    	  <system.web>    <httpHandlers>      <!--<span class="code-comment"> The Captcha Image handler used by the simple Captcha provider --></span>      <add verb="GET" path="captcha.ashx" type="NunoGomes.CommunityServer.Captcha.Providers.SimpleCaptchaProviderImageHandler, NunoGomes.CommunityServer" />    </httpHandlers>  </system.web>  <system.webServer>    <handlers accessPolicy="Read, Write, Script, Execute">      <!--<span class="code-comment"> The Captcha Image handler used by the simple Captcha provider --></span>      <add verb="GET" name="captcha" path="captcha.ashx" type="NunoGomes.CommunityServer.Captcha.Providers.SimpleCaptchaProviderImageHandler, NunoGomes.CommunityServer" />    </handlers>  </system.webServer></configuration>


Building a ControlAdapter can be complex but the reward is his ability to allows us, thru configuration changes, to modify an application render and/or behavior.

You can see this ControlAdapter in action here and here (anonymous required).

A complete solution is available in “CommunityServer Extensions” Codeplex project.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Nuno M. F. Gomes
Software Developer (Senior)
Portugal Portugal
Nuno Gomes currently works as a Senior Developer for one of the major portuguese banks.
Gomes graduated from Instituto Superior Tecnico with a Electronics and Computers degree in 1999.
His daily work main focus is, since 2003, on ASP.NET. A true .NET developer with great passion for the simple solution.

Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150128.1 | Last Updated 13 Apr 2010
Article Copyright 2010 by Nuno M. F. Gomes
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid