Implementing Captcha Control in ASP.NET MVC

It is always advisable to implement techniques to safegaurd applications and servers from being overloaded by unnecessary and undesirable traffic being generated through automated scripts / programs or robots. If the server or program is being hit by such automated traffic, it actually hinders the functionality for real users, user-experience, thereby consuming expensive resources and rendering the program becoming slower and slower. This may result in potential customer loss and damage to business. There are multiple ways that exist today to restrict such unwanted activities, and implementing Captcha control is one of such controls.

In this article we shall discuss how to implement Math Captcha control in the program based on ASP.NET and MVC framework.

Action Steps

There are major three steps that need to be undertaken for the required activity to be completed. The very first is to induct the required MVC Nuget package in the project. For this follow following indicative steps: -

Choose Tools >> NuGet Package Manager >> Manage NuGet Packages for solution.
Install CaptchMvc.Mvc5 say.
CaptchaMvc will implement your web MVC applications easier and more reliable protection.
Features Include:

• You can easily change or extend the current implementation of the captcha.
• By default there are two types of captcha, plain and mathematical.
• Supports MVC 3, MVC 4, MVC 5.
• Supports for storing captcha in the session or cookie.
• Supports the "intelligent" captcha.

It shall add CapchaMvc.dll library to your project and a reference of the same in References folder.

Action In Controller

As generally we implement Captcha Control for restricting the Input Forms, to be available for real users only, we need to modify the Presentation and POST Action for the Form in question. For doing so, in the controller, add required library file
using CaptchaMvc.HtmlHelpers;
And in the POST action of your Controller method,

            
if (this.IsCaptchaValid("Answer is not valid!"))
   {
     if (ModelState.IsValid)
      {
        try
        {
            db.FormRecords.Add(FormRecord);
            await db.SaveChangesAsync();
        }
       catch (Exception e)
          {
              ViewBag.ErrorMsg = "Error Occured While Saving the Record! - " + e.Message;
              goto BACK;
          }
          return RedirectToAction("Index", new { id = SomeValue }); // SUCCESS HERE...
       }
      goto BACK;
     }
       ViewBag.ErrorMsg = "Error: Answer is not valid!"; // The controll comes here if Captcha control fails...
     BACK:
           ...Your code here...
            return View("Create", FormRecord);
        }
            
            

Action In Presentation View

In the .cshtml file of your Form View, include following libraries: -

            
                @using CaptchaMvc.HtmlHelpers;
                @*  @using MathCaptcha; Not required... *@
                @using CaptchaMvc;
            
            

At the top of your Form, you may like to add following line for displaying error supplied by the Controller: -

            
                @if (ViewBag.ErrorMsg != null)
                {
                <div>@ViewBag.ErrorMsg</div>
                }
            
            

Then just before the last input form item group, you may like to insert this form grooup item: -

            
            <div class="form-group">
            <div class="col-md-offset-4 col-md-8">
                @Html.MathCaptcha()
            <p class="text-danger"> @ViewBag.ErrorMsg</p>
            </div>
            </div>