How to Implement CAPTCHA in ASP.Net MVC
Step 1 Create the Empty ASP.NET MVC application.
Step 2 Add the CaptchaMvc library to the Reference Layer like this
Step 3 In the Model layer add a User class and create the property like this.
public class User { public int Id { get; set; } public string Name { get; set; } public string LastName { get; set; } }
Step 4 Create a HomeController and write the action method like this.
using CaptchaMvc.HtmlHelpers; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MVCCaptcha.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult About() { ViewBag.Message = "Your application description page."; return View(); } public ActionResult Contact() { ViewBag.Message = "Your contact page."; 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 CAPTCHA MVC.HtmlHelpers namespace. In the post action method I wrote code for CAPTCHA validation.
Step 5 Now create the Index View like this.
Right-click on Index view then click on Add View
@using CaptchaMvc.HtmlHelpers @using MVCCaptcha; @using CaptchaMvc; @model MVCCaptcha.Models.User @{ ViewBag.Title = "Index"; } @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>User Details</legend> <div class="editor-label"> @Html.LabelFor(model => model.Name) </div> <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> <div class="editor-label"> @Html.LabelFor(model => model.LastName) </div> <div class="editor-field"> @Html.EditorFor(model => model.LastName) @Html.ValidationMessageFor(model => model.LastName) </div> @Html.MathCaptcha() @*@Html.Captcha(3)*@ <br /> <p class="Error"> @ViewBag.ErrMessage </p> <p> <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.
Right-click on ThankYouPage view then click on Add View
@model MVCCaptcha.Models.User @{ ViewBag.Title = "ThankYouPage"; } <h2>ThankYouPage</h2> <b> Thank you for submitting your details.</b>
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.
Run the project to see the output