Case Study: Comparing ASP.NET Web Forms and MVC Implementations
Introduction
Apparently, I am the last ASP.NET Web Forms developer in the whole World, which makes me kind of sad… anyway, after much crying, I decided to try out something: a comparison of Web Forms and MVC to solve a real life problem! Now, I only needed a problem to solve… Then, a colleague of mine came questioning me about captchas, so I thought, why not use it as my example? And here we are!
Everyone is familiar with captchas. They are a way to prevent the automated use of web forms, so as to make sure that it is indeed an human that is providing the information. There are lots of implementations out there, and I don’t claim that mine is better or worse, I just implemented it in a couple of hours as an exercise.
Core Library
I designed a couple of classes, framework-agnostic, to hold my abstractions and sample implementations. These are:
A succinct description is in order.
CaptchaSecretPersister
The contract for storing a secret key. Defines two methods, Store and Retrieve.
SessionCaptchaSecretPersister
An implementation of CaptchaSecretPersister that stores the secret key in the ASP.NET session.
CaptchaImageTransformer
The contract for transforming an image. Only has a single method, Transform.
NullCaptchaImageTransformer
Inherits from CaptchaImageTransformer, but doesn’t do anything.
CaptchaSecretGenerator
The contract for generating a new secret key (GetSecret).
RandomCaptchaSecretGenerator
An implementation of CaptchaSecretGenerator that generates a series of random letters.
CaptchaImageProducer
Base class for producing an image with a given secret key, dimensions, colors and an optional image transformer. Only has a single method, GetImage.
GdiCaptchaImageProducer
An implementation of CaptchaImageProducer that uses GDI+.
CaptchaSecretValidator
Base contract for secret key validation. Only defines a method, Validate.
CaseInsensitiveCaptchaSecretValidator
A case-insensitive string comparison implementation of CaptchaSecretValidator.
And here is their code:
public abstract class CaptchaSecretPersister
{public abstract void Store(String secret);
public abstract String Retrieve();
}
public sealed class SessionCaptchaSecretPersister : CaptchaSecretPersister
{public static readonly CaptchaSecretPersister Instance = new SessionCaptchaSecretPersister();
internal const String Key = "Captcha";
public override void Store(String secret)
{HttpContext.Current.Session[Key] = secret;
}
public override String Retrieve()
{return HttpContext.Current.Session[Key] as String;
}
}
public abstract class CaptchaImageTransformer
{public abstract void Transform(Graphics g);
}
public sealed class NullCaptchaImageTransformer : CaptchaImageTransformer
{public static readonly CaptchaImageTransformer Instance = new NullCaptchaImageTransformer();
public override void Transform(Graphics g)
{ //do nothing}
}
public abstract class CaptchaSecretGenerator
{public abstract String GetSecret(UInt32 length);
}
public sealed class RandomCaptchaSecretGenerator : CaptchaSecretGenerator
{public static readonly CaptchaSecretGenerator Instance = new RandomCaptchaSecretGenerator();
public override String GetSecret(UInt32 length)
{ var builder = new StringBuilder(); var rand = new Random(); for (var i = 0; i < length; i++) { var ch = (Char)('A' + rand.Next(26));builder.Append(ch);
}
return builder.ToString();}
}
public abstract class CaptchaImageProducer
{public abstract Image GetImage(Int32 width, Int32 height, String secret, Color foreColor, Color backColor, CaptchaImageTransformer transformer);
}
public sealed class GdiCaptchaImageProducer : CaptchaImageProducer
{public static readonly CaptchaImageProducer Instance = new GdiCaptchaImageProducer();
public override Image GetImage(Int32 width, Int32 height, String secret, Color foreColor, Color backColor, CaptchaImageTransformer transformer)
{ var img = new Bitmap(width, height, PixelFormat.Format32bppArgb); using (var graphics = Graphics.FromImage(img))using (var font = new Font(FontFamily.GenericSansSerif, 10F))
using (var color = new SolidBrush(foreColor))
{graphics.TextRenderingHint = TextRenderingHint.AntiAlias;
graphics.Clear(backColor);
graphics.DrawString(secret, font, color, 0F, 0F);
if (transformer != null)
{transformer.Transform(graphics);
}
return img;}
}
}
public abstract class CaptchaSecretValidator
{public abstract Boolean Validate(String storedSecret, String secret);
}
public sealed class CaseInsensitiveCaptchaSecretValidator : CaptchaSecretValidator
{public static readonly CaptchaSecretValidator Instance = new CaseInsensitiveCaptchaSecretValidator();
public override Boolean Validate(String storedSecret, String secret)
{ return String.Equals(storedSecret, secret, StringComparison.OrdinalIgnoreCase);}
}
Noteworthy:
- Base classes are always abstract;
- Actual implementations are sealed, stateless, and therefore define a static read only field, to avoid multiple instantiations.
Both implementations, Web Forms and MVC, will use these classes.
Web Forms
So let’s start playing. Web Forms has the concept of validators. A validator must implement interface IValidator, and a BaseValidator class exists to make the task easier. When a form is submitted by a control that triggers validation, such as Button, all registered validators (Page.Validators) of the same validation group (ValidationGroup) as the trigger control are fired (Validate is called). The page will be considered valid if all validators have their IsValid property set to true. Knowing this, I created a custom control to display the captcha image and perform its validation:
public sealed class CaptchaImage : WebControl, IValidator
{public CaptchaImage() : base(HtmlTextWriterTag.Img)
{ this.CaptchaSecretGenerator = RandomCaptchaSecretGenerator.Instance; this.CaptchaImageTransformer = NullCaptchaImageTransformer.Instance; this.CaptchaImageProducer = GdiCaptchaImageProducer.Instance; this.CaptchaSecretPersister = SessionCaptchaSecretPersister.Instance; this.CaptchaSecretValidator = CaseInsensitiveCaptchaSecretValidator.Instance; this.CaptchaLength = 4; this.CaptchaFormat = ImageFormat.Png; this.ForeColor = Color.Black; this.BackColor = Color.Transparent; this.AlternateText = String.Empty; this.ControlToSetError = String.Empty; this.ControlToValidate = String.Empty;(this as IValidator).IsValid = true;
}
public CaptchaSecretPersister CaptchaSecretPersister { get; set; } public CaptchaSecretGenerator CaptchaSecretGenerator { get; set; } public CaptchaImageTransformer CaptchaImageTransformer { get; set; } public CaptchaImageProducer CaptchaImageProducer { get; set; } public CaptchaSecretValidator CaptchaSecretValidator { get; set; } [DefaultValue("")] public String AlternateText { get; set; }[DefaultValue(4)]
public UInt32 CaptchaLength { get; set; }[DefaultValue(typeof(ImageFormat), "Png")]
public ImageFormat CaptchaFormat { get; set; } [DefaultValue("")][IDReferenceProperty]
[TypeConverter(typeof(ControlIDConverter))] public String ControlToValidate { get; set; } [DefaultValue("")][IDReferenceProperty]
[TypeConverter(typeof(ControlIDConverter))] public String ControlToSetError { get; set; } [DefaultValue("")] public String ErrorMessage { get; set; }public event EventHandler ValidationSuccess;
public event EventHandler ValidationFailure;
public event EventHandler ValidationComplete;
private void OnValidationSuccess()
{ var handler = this.ValidationSuccess;if (handler != null)
{ handler(this, EventArgs.Empty);}
}
private void OnValidationComplete()
{ var handler = this.ValidationComplete;if (handler != null)
{ handler(this, EventArgs.Empty);}
}
private void OnValidationFailure()
{ var handler = this.ValidationFailure;if (handler != null)
{ handler(this, EventArgs.Empty);}
}
private ITextControl FindTextControl(String id) {return this.NamingContainer.FindControl(id) as ITextControl;
}
protected override void OnInit(EventArgs e)
{if (this.Enabled == true)
{this.Page.Validators.Add(this);
}
base.OnInit(e);}
protected override void Render(HtmlTextWriter writer)
{var secret = this.CaptchaSecretGenerator.GetSecret(this.CaptchaLength);
this.CaptchaPersister.Store(secret);using (var img = this.CaptchaImageProducer.GetImage((Int32)this.Width.Value, (Int32)this.Height.Value, secret, this.ForeColor, this.BackColor, this.CaptchaImageTransformer))
using (var stream = new MemoryStream())
{ img.Save(stream, this.CaptchaFormat);this.Attributes[HtmlTextWriterAttribute.Src.ToString().ToLower()] = String.Format("data:image/{0};base64,{1}", this.CaptchaFormat.ToString().ToLower(), Convert.ToBase64String(stream.ToArray()));
this.Attributes[HtmlTextWriterAttribute.Alt.ToString().ToLower()] = this.AlternateText;
}
base.Render(writer);var val = this as IValidator;
if (val.IsValid == false)
{var errorControl = this.FindTextControl(this.ControlToSetError);
if (errorControl != null)
{ errorControl.Text = this.ErrorMessage;}
else { writer.Write(this.ErrorMessage);}
}
}
Boolean IValidator.IsValid { get; set; } void IValidator.Validate() {var val = this as IValidator;
val.IsValid = true;var secretControl = this.FindTextControl(this.ControlToValidate);
if (secretControl != null)
{ var storedSecret = this.CaptchaSecretPersister.Retrieve(); val.IsValid = this.CaptchaSecretValidator.Validate(storedSecret, secretControl.Text);if (val.IsValid == true)
{ this.OnValidationSuccess();}
else { this.OnValidationFailure();}
this.OnValidationComplete();}
}
}
The CaptchaImage class inherits from WebControl, so that we can leverage some of its properties (ForeColor, BackColor), and defines a containing tag of IMG.
In its constructor, all relevant properties are instantiated to sensible defaults, these include a number of properties for the core library classes (CaptchaSecretPersister, CaptchaSecretGenerator, CaptchaImageProducer, CaptchaImageTransformer and CaptchaSecretValidator). Other important properties are:
- ErrorMessage: the message to display in case of a validation error;
- AlternateText: the image’s ALT text;
- CaptchaLength: the desired length of the secret key; the default is 4;
- CaptchaFormat: the image format of choice, where the default is ImageFormat.Png;
- ControlToValidate: the required ID of a server-side control containing text (must implement ITextControl);
- ControlToSetError: an optional ID for a control that can take text (must implement ITextControl too), which will be used to set the ErrorMessage value.
The IsValid property, from IValidator, is implemented privately because most of the time we do not want to mess with it. Another inherited property, Enabled, can be used to turn off validation.
Then we have three events:
- ValidationSuccess: raised when the validation occurs and is successful;
- ValidationFailure: raised when a failed validation occurs;
- ValidationComplete: always raised when a validation is performed, regardless of its outcome.
When the control loads, OnInit is called, and it registers itself with the Validators collection, this is a required step. In Render, it generates a secret key, stores it, produces an image from it and renders it as an inline image using the Data URI format. It is the same approach that I talked about a number of times before. When the control receives a validation request, the Validate method is called, and the provided key is validated against the stored one.
A typical usage would be like this:
<web:CaptchaImage runat="server" ID="captcha" Width="50px" Height="25px" BackColor="Blue" AlternateText="Captcha riddle" ControlToValidate="text" ErrorMessage="Invalid captcha" OnValidationSuccess="OnSuccess" OnValidationFailure="OnFailure" OnValidationComplete="OnComplete" />
Whereas the registered event handlers might be:
protected void OnSuccess(Object sender, EventArgs e)
{this.captcha.Visible = false;
}
protected void OnFailure(Object sender, EventArgs e)
{}
protected void OnComplete(Object sender, EventArgs e)
{}
Easy, don’t you think? Now, let’s move on to MVC!
MVC
In MVC we don’t really have controls, because of the separation of concerns and all that. The closest we have at the moment are extension methods, let’s have a look at the Captcha method:
public static IHtmlString Captcha(this HtmlHelper html, Int32 width, Int32 height, UInt32 length = 4, String alternateText = "", ImageFormat captchaFormat = null, Color? foreColor = null, Color? backColor = null)
{var captchaSecretGenerator = DependencyResolver.Current.GetService<CaptchaSecretGenerator>();
var captchaSecretPersister = DependencyResolver.Current.GetService<CaptchaSecretPersister>();
var captchaImageProducer = DependencyResolver.Current.GetService<CaptchaImageProducer>();
var captchaImageTransformer = DependencyResolver.Current.GetService<CaptchaImageTransformer>();
var secret = captchaSecretGenerator.GetSecret(length);
captchaSecretPersister.Store(secret);
using (var img = captchaImageProducer.GetImage(width, height, secret, foreColor ?? Color.Black, backColor ?? Color.Transparent, captchaImageTransformer))using (var stream = new MemoryStream())
{img.Save(stream, captchaFormat ?? ImageFormat.Png);
var tag = String.Format("<img src=\"data:image/{0};base64,{1}\" width=\"{1}\" height=\"{2}\" alt=\"{3}\"/>", (captchaFormat ?? ImageFormat.Png).ToString().ToLower(), Convert.ToBase64String(stream.ToArray()), width, height, alternateText);return new HtmlString(tag);
}
}
It is unpractical to pass all components, so we are relying on MVC’s built-in dependency injection framework. I used Microsoft Unity as my Inversion of Control (IoC) container, and to make it integrate with MVC, I installed the Unity.Mvc NuGet package:
Then I had to register the actual implementations for my services, this is usually done in the App_Start\UnityConfig.cs file’s RegisterTypes method:
container.RegisterInstance<CaptchaSecretGenerator>(RandomCaptchaSecretGenerator.Instance);
container.RegisterInstance<CaptchaImageProducer>(GdiCaptchaImageProducer.Instance);
container.RegisterInstance<CaptchaSecretPersister>(SessionCaptchaSecretPersister.Instance);
container.RegisterInstance<CaptchaImageTransformer>(NullCaptchaImageTransformer.Instance);
container.RegisterInstance<CaptchaSecretValidator>(CaseInsensitiveCaptchaSecretValidator.Instance);
The code from Unity.Mvc automatically hooks Unity with the DependencyResolver class, so we don’t have to do it ourselves. For an example implementation, I once wrote a post on it that you can check out, if you are curious.
Now, we need two things: a view and a controller. Let’s look at the view first (simplified):
@Html.Captcha(50, 25)
@using (Html.BeginForm("Validate", "Home")){ @Html.TextBox("secret")<button>Validate</button>
}
As you can see, the form will post to the Validate method of an HomeController. The output of the Captcha method doesn’t have to be inside the form, because it merely renders an IMG tag.
As for the controller, the Validate method is pretty straightforward:
public ActionResult Validate(String secret)
{var captchaPersister = DependencyResolver.Current.GetService<CaptchaSecretPersister>();
var captchaSecretValidator = DependencyResolver.Current.GetService<CaptchaSecretValidator>();
var storedSecret = captchaPersister.Retrieve();
var isValid = captchaSecretValidator.Validate(storedSecret, secret);
if (isValid == true)
{ return this.View("Success");}
else
{ return this.View("Failure");}
}
It tries to obtain the services from the DependencyResolver, validates the supplied secret key and then returns the proper view, accordingly.
Conclusion
So, which implementation do you prefer? The Web Forms one, unsurprisingly, only needs a single class, CaptchaImage, and, of course, a host page; the assembly containing it can be referenced by other projects and used very easily. As for the MVC version, we need to have the Captcha extension method, the IoC bootstrapping/registration code, a view and a controller with a Validate method similar to the one presented. The extension method and the controller may come from another referenced assembly, it needs some work, but can definitely be done.
Of course, this is a sample implementation, things can be done in a myriad of alternative ways. I’d like to hear from you about the problems with this particular implementation, and alternative ways to do it. By the way, feel free to use and modify the code anyway you want to, I will soon make it available in my GitHub account.