In this article I will explain with an example, how to implement
Captcha in
ASP.Net Core (.Net Core 8) Razor Pages.
Download ASPSnippets Captcha DLL
You can download the latest ASPSnippets.Core.Captcha.dll from the following link.
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>
[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 setsCaptchaAnswer.
/// </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.
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))
{
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
