Hi everyone in this article, I’m explaining about Captcha Code in Asp.Net MVC4

Description:

A CAPTCHA is a validation layer to recognize the type of user before sending data to the server. 

Advantage of Captcha Code

There are many tools to send automated messages. If you have not implemented a CAPTCHA in your feedback or user registration page then you will get many spam messages or users.

So the main advantages of CAPTCHA is to avoid spam messages or users.

How to use Captcha in ASP.Net MVC4

There are many open-soure libraries available to do this. Even though you can write your own code to implement a CAPTCHA in your application, that totally depends on you.

Step 1

Create the new Asp.Net Mvc Application

Open visual Studio >> File >> New >> Project

Give the  Project name “Captcha”

 

Step 2

Add the CaptchaMvc library to the reference  layer like this.

 

Step 3

In the model layer add a Feedback class and create the property like this.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace Captcha.Models
{
    publicclassFeedback
    {
        publicint Id { get; set; }
        publicstring Title { get; set; }
        publicstring Comment { get; set; }   
    }
}

Step 4

Create HomeController and write the action method like this.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CaptchaMvc.HtmlHelpers; 

namespace Captcha.Controllers
{ 
    public class HomeController : Controller
    { 
        // 
        // GET: /Home/ 

        public ActionResult Index()
        { 
            return View(); 
        } 
        [HttpPost]
        public ActionResult Index(string empty)
        { 
            // Code for validating the CAPTCHA 
            if (this.IsCaptchaValid("Captcha is not valid"))
            { 
                return RedirectToAction("ThankYouPage"); 
            } 
            ViewBag.ErrMessage = "Error: captcha is not valid.";
            return View(); 
        } 
        public ActionResult ThankYouPage()
        {
            return View(); 
        } 

    } 
}

 

Note: Do not forget to use the using CaptchaMvc.HtmlHelpers; in the post action method I wrote code for captcha validation

Step 5

Now create the index view like this.

@using CaptchaMvc.HtmlHelpers
@using Captcha;
@using CaptchaMvc; 
@model Captcha.Models.Feedback 
@{ 
    ViewBag.Title = "Index"; 
} 

<style>
    .editor-label {
        width: 20%;
        float: left; 
    } 
    .editor-field {
        width: 76%;
        float: left; 
    }

    input[type='text'] {
        width: 100%;
        height: 35px; 
    }

    textarea {
        width: 100%;
        height: 100px; 
    } 
</style> 

@using (Html.BeginForm())
{ 
    @Html.ValidationSummary(true) 
    <br />
    <br />
    <fieldset style="width: 50%; margin: 0 auto;">
        <legend>Register</legend>
        <div> 
            <div class="editor-label">
                @Html.LabelFor(model => model.Title)
            </div> 
            <div class="editor-field">
                @Html.EditorFor(model => model.Title)
                @Html.ValidationMessageFor(model => model.Title) 
            </div>
            <br />
            <br />
            <br />
        </div> 
        <div> 
            <div class="editor-label"> 
                @Html.LabelFor(model => model.Comment) 
            </div> 
            <div class="editor-field"> 
                @Html.TextAreaFor(model => model.Comment, 5, 40, null) 
                @Html.ValidationMessageFor(model => model.Comment) 
            </div> 
            <br /><br /><br /><br /><br /><br /> 
        </div> 
         @Html.MathCaptcha() 
        @*@Html.Captcha(3)*@ 
        <br /> 
        <p class="Error">@ViewBag.ErrMessage </p> 
        <p style="text-align:right;padding-right:20px;"> 
            <input type="submit" value="Send" /> 
        </p> 
    </fieldset> 
} 
 

Note: Here if you use the @Html.MathCaptcha() helper class then it will generate a mathmatical CAPTCHA. If you use the @Html. Captcha(3) helper class then it will generate a Char CAPTCHA. 3 is the length of the CAPTCHA. 

Step 6

Create the ThankYouPage index like this.

@model Captcha.Models.Feedback
 
@{  
    ViewBag.Title = "ThankYouPage";  
}
 
<h2>ThankYouPage</h2>
 
<b>Thank you sending your valuable feedback to us.</b>  

 

 Output 

Insert right Captcha Code

 

After click Send Output

 

Points to remember 

1. Just include the CaptchaMvc libray.
2. Use the CaptchaMvc.HtmlHelpers namespace.
3. Use the MathCaptcha namespace for using mathCaptcha.
4. Use the CaptchaMvc namespace for using CharCaptcha.
5. For a math CAPTCHA use the @Html.MathCaptcha() helper class.
6. For a Char CAPTCHA use the @Html.Captcha(3) helper class.

Summary

Here we saw how to use a CAPTCHA in an ASP.NET MVC application. It is very simple and straight forward to implement in MVC applications. 

In my next post I’ll explain about Check Availability of user name or email using ASP.NET, Ajax and Jquery