In this article I will explain with an example, how to implement
Captcha in ASP.Net Core MVC.
Download ASPSnippets Captcha DLL
You can download the latest ASPSnippets.Core.Captcha.dll from the following link.
Note: You will need to add the reference of ASPSnippets.Core.Captcha DLL in your project.
Installing System.Drawing.Common package from Nuget
In order to use
ASPSnippets.Core.Captcha DLL in .Net Core, you will need to install
System.Drawing.Common package from
Nuget.
Model
The Model class consists of following properties.
public class PersonModel
{
///<summary>
/// Gets or sets PersonId.
///</summary>
public int? PersonId { get; set; }
///<summary>
/// Gets or sets Name.
///</summary>
public string Name { get; set; }
///<summary>
/// Gets or sets Gender.
///</summary>
public string Gender { get; set; }
///<summary>
/// Gets or sets City.
///</summary>
public string City { get; set; }
///<summary>
/// Gets or sets ImageData.
///</summary>
public string ImageData { get; set; }
///<summary>
/// Gets or sets CaptchaAnswer.
///</summary>
public string CaptchaAnswer { get; set; }
}
Adding reference of ASPSnippets.Captcha DLL in project
1. Inside the Solution Explorer, right click on Project and then click on Add and then click on Project Reference.
![Implement Captcha in ASP.Net Core]()
2. Then, inside the Reference Manager window, click on Browse button.
![Implement Captcha in ASP.Net Core]()
3. Locate the ASPSnippets.Core.Captcha and select it.
![Implement Captcha in ASP.Net Core]()
4. The ASPSnippets.Core.Captcha DLL is now visible in the Reference Manager window. Select it and click OK button as shown below.
![Implement Captcha in ASP.Net Core]()
Finally, the ASPSnippets.Core.Captcha DLL is now referenced.
![Implement Captcha in ASP.Net Core]()
Namespaces
You will need to import the following namespaces.
using Newtonsoft.Json;
using ASPSnippets.Core.Captcha;
Controller
Inside the Controller, a property of class
Captcha is created. This property stores the data in
TempData so that it can be preserved during Form Submissions.
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method,
Captcha object is initialized and its width, height, Font size, Font color, background color and Mode are set.
Note: The ASPSnippets.Core.Captcha works in four different Modes i.e. Numeric, Alphabets, AlphaNumeric and Arithmetic. This article will use AlphaNumeric mode.
Then, an object of
PersonModel class is created and its
ImageData property is set with the value of
ImageData property of
Captcha class and the
PersonModel class object returned to the View.
Action method for handling POST operation
This Action method accepts the PersonModel class object as parameter.
Inside this Action method, the
Captcha is validated using the
IsValid method which accepts the
Answer inputted by the User.
If the validation fails then, the Error Message is assigned to a
ViewBag object.
Finally, the
ImageData property of
PersonModel class is set with the
ImageData property of
Captcha and returned to the View.
public class HomeController : Controller
{
public Captcha Captcha
{
get
{
return JsonConvert.DeserializeObject<Captcha>(TempData["Captcha"].ToString());
}
set
{
TempData["Captcha"] = value;
}
}
public IActionResult Index()
{
this.Captcha = new Captcha(140, 40, 20f, "#FFFFFF", "#61028D", Mode.AlphaNumeric);
PersonModel person = new PersonModel();
person.ImageData = this.Captcha.ImageData;
return View(person);
}
[HttpPost]
public IActionResult Index(PersonModel person)
{
if (this.Captcha.IsValid(person.CaptchaAnswer))
{
//Perform operations here.
int personId = person.PersonId.Value;
string name = person.Name;
string gender = person.Gender;
string city = person.City;
}
else
{
ViewBag.Error = "Captcha invalid";
}
person.ImageData = this.Captcha.ImageData;
return View(person);
}
}
View
HTML Markup
Inside the View, in the very first line the PersonModel class is declared as model for the View.
The View consists of HTML Form which has been created using the ASP.Net TagHelpers with the following attributes.
asp-action – Name of the Action. In this case the name is Index.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the HTML Markup, the
TempData object keeps the
Captcha as key.
The Form consists of four INPUT TextBoxes and an HTML SELECT element.
There is also an HTML Image element for displaying
Captcha and HTML SPAN element for displaying Error Message when validation fails.
The Form also consists of a Submit button.
@model AlphaNumeric_Captcha_Core.PersonModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@{
TempData.Keep("Captcha");
}
<form method="post" asp-action="Index" asp-controller="Home">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2" align="center">Person Details</th>
</tr>
<tr>
<td>Person Id: </td>
<td><input type="text" asp-for="PersonId" /></td>
</tr>
<tr>
<td>Name: </td>
<td><input type="text" asp-for="Name" /></td>
</tr>
<tr>
<td>Gender: </td>
<td>
<select asp-for="Gender" style="width:176px">
<option value="">Please select</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</td>
</tr>
<tr>
<td>City: </td>
<td><input type="text" asp-for="City" /></td>
</tr>
<tr>
<td><img src="@Model.ImageData" alt="Captcha" /></td>
<td>
<input type="text" asp-for="CaptchaAnswer" />
<span style="color:red">@ViewBag.Error</span>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Screenshot
![Implement Captcha in ASP.Net Core]()
Demo
Downloads
