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 pontonetpt.com 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 …
Captcha
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
Implementation
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
}
Configuration
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:
Add the following configuration to default.browser file:<?xml version='1.0' encoding='utf-8'?>
<browsers>
<browser refID="Default">
<controlAdapters>
<!-- Adapter for the WeblogPostCommentForm
control in order to add the Captcha and prevent SPAM comments -->
<adapter controlType="CommunityServer.Blogs.Controls.WeblogPostCommentForm" adapterType="NunoGomes.CommunityServer.Components.WeblogPostCommentFormCaptchaAdapter, NunoGomes.CommunityServer" />
</controlAdapters>
</browser>
</browsers>
Add the following configuration to web.config file:<configuration>
<configSections>
<!-- New section for Captcha providers configuration -->
<section name="communityServer.Captcha" type="NunoGomes.CommunityServer.Captcha.Configuration.CaptchaSection" />
</configSections>
<!-- Configuring a simple Captcha provider -->
<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>
<!-- The Captcha Image handler used by the simple Captcha provider -->
<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">
<!-- The Captcha Image handler used by the simple Captcha provider -->
<add verb="GET" name="captcha" path="captcha.ashx" type="NunoGomes.CommunityServer.Captcha.Providers.SimpleCaptchaProviderImageHandler, NunoGomes.CommunityServer" />
</handlers>
</system.webServer>
</configuration>
Conclusion
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.
