In this article I will explain with an example, how to implement
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 .Net Core, you will need to install
ystem.Drawing.CommonS package from
Nuget.
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.
![Implement Captcha in ASP.Net Core Razor Pages]()
2. Then, inside the Reference Manager window, click on Browse button.
![Implement Captcha in ASP.Net Core Razor Pages]()
3. Locate the ASPSnippets.Core.Captcha and select it.
![Implement Captcha in ASP.Net Core Razor Pages]()
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 Razor Pages]()
Finally, the ASPSnippets.Core.Captcha DLL is now referenced.
![Implement Captcha in ASP.Net Core Razor Pages]()
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 AlphaNumeric 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(140, 40, 20f, "#FFFFFF", "#61028D", Mode.AlphaNumeric);
}
public void OnPostSubmit(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
{
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 AlphaNumeric_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
![Implement Captcha in ASP.Net Core Razor Pages]()
Demo
Downloads
