In this article I will explain with an example, how to implement Arithmetic Captcha in ASP.Net Core Razor Pages.
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 Core, you will need to install
System.Drawing.Common package from
Nuget else you will be encountered with the following error if you are initializing Captcha in Core.
Model
The Model class consists of following properties.
public class PersonModel
{
///<summary>
/// Gets or sets PersonId.
///</summary>
[BindProperty]
public int? PersonId { get; set; }
///<summary>
/// Gets or sets Name.
///</summary>
[BindProperty]
public string Name { get; set; }
///<summary>
/// Gets or sets Gender.
///</summary>
[BindProperty]
public string Gender { get; set; }
///<summary>
/// Gets or sets City.
///</summary>
[BindProperty]
public string City { get; set; }
///<summary>
/// Gets or sets ImageData.
///</summary>
[BindProperty]
public string ImageData { get; set; }
///<summary>
/// Gets or sets CaptchaAnswer.
///</summary>
[BindProperty]
public string CaptchaAnswer { get; set; }
}
Adding reference of ASPSnippets.Core.Captcha DLL in project
1. Inside the Solution Explorer, right click on Project and then click on Add and then click on Project Reference.
![ASP.Net Core: Implement Arithmetic Captcha]()
2. Then, inside the Reference Manager window, click on Browse button.
![ASP.Net Core: Implement Arithmetic Captcha]()
3. Locate the ASPSnippets.Core.Captcha and select it.
![ASP.Net Core Razor Pages: Implement Arithmetic Captcha]()
4. The ASPSnippets.Core.Captcha DLL is now visible in the Reference Manager window. Select it and click OK button as shown below.
![ASP.Net Core Razor Pages: Implement Arithmetic Captcha]()
Finally, the ASPSnippets.Core.Captcha DLL is now referenced.
![ASP.Net Core Razor Pages: Implement Arithmetic Captcha]()
Namespaces
You will need to import the following namespaces.
using Newtonsoft.Json;
using ASPSnippets.Core.Captcha;
Razor PageModel (Code-Behind)
Inside the PageModel, a property of class Captcha is created. This property stores the data in TempData so that it can be preserved during Form Submissions.
The PageModel consists of following Handler methods.
Handler method for handling GET operation
Inside this Handler 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 Arithmetic mode.
Handler method for handling POST operation
This Handler method accepts the PersonModel class object as parameter.
Inside this Handler 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
ViewData object.
public class IndexModel : PageModel
{
public Captcha Captcha
{
get
{
return JsonConvert.DeserializeObject<Captcha>(TempData["Captcha"].ToString());
}
set
{
TempData["Captcha"] = JsonConvert.SerializeObject(value);
}
}
public void OnGet()
{
this.Captcha = new Captcha(100, 40, 20f, "#FFFFFF", "#61028D", Mode.Arithmetic);
}
public void OnPostSubmit(PersonModel person)
{
if (this.Captcha.IsValid(person.CaptchaAnswer))
{
int personId = person.PersonId.Value;
string name = person.Name;
string gender = person.Gender;
string city = person.City;
}
else
{
ViewData["Error"] = "Captcha invalid";
}
}
}
Razor Page (HTML)
HTML Markup
Inside the HTML Markup, the TempData object keeps the Captcha as key.
The HTML of Razor Page consists of an HTML Form which 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 which has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
@page
@model Captcha_Core_Razor.Pages.IndexModel
@{
Layout = null;
}
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
@{
TempData.Keep("Captcha");
}
<form method="post">
<table cellpadding="0" cellspacing="0">
<tr>
<th colspan="2" align="center">Person Details</th>
</tr>
<tr>
<td>Person Id: </td>
<td>
<input type="text" name="PersonId" />
</td>
</tr>
<tr>
<td>Name: </td>
<td>
<input type="text" name="Name" />
</td>
</tr>
<tr>
<td>Gender: </td>
<td>
<select name="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" name="City" />
</td>
</tr>
<tr>
<td><img src="@Model.Captcha.ImageData" alt="Captcha" /></td>
<td>
<input type="text" name="CaptchaAnswer" />
<span style="color:red">@ViewData["Error"]</span>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" asp-page-handler="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Screenshot
![ASP.Net Core Razor Pages: Implement Arithmetic Captcha]()
Demo
Downloads
