In this article I will explain with an example, how to generate QR Code image from database in ASP.Net Core (.Net Core 8) Razor Pages.
In this article, I will make use of
QRCoder which is an Open Source Library QR code generator.
Downloading QRCoder package
You will need to install the QRCoder package using the following command.
Install-Package QRCoder -Version 1.1.5
For more details and documentation on QRCoder library, please refer following link.
Downloading System.Drawing.Common library
You will need to install the System.Drawing.Common package using the following command.
Install-Package System.Drawing
Note: The System.Drawing.Common package is necessary to use the System.Drawing class as it is not available in .Net Core.
Database
This article makes use of table named Links whose schema is defined as follows.
I have inserted few records in the table.
Note: You can download the database table SQL by clicking the download link below.
Model
The Model class consists of the following properties.
public class LinkModel
{
[Key]
publicint LinkId { get; set; }
public string Link { get; set; }
}
public class QRCodeModel
{
public int LinkId { get; set; }
public string Link { get; set; }
public string QRCodeImage{ get; set; }
}
Database Context
Once the
Entity Framework is configured and connected to the database table, the Database Context will look as shown below.
using Microsoft.EntityFrameworkCore;
namespace QRCode_Database_Core_Razor
{
public class DBCtx : DbContext
{
public DBCtx(DbContextOptions<DBCtx> options) : base(options)
{
}
public DbSet<LinkModel> Links { get; set; }
}
}
Namespaces
You will need to import the following namespaces.
using QRCoder;
using System.IO;
using System.Linq;
using System.Drawing;
using System.Drawing.Imaging;
Razor PageModel (Code-Behind)
The PageModel consists of the following Handler method.
Handler method for handling GET operation
Inside this Handler method, the records from the database are fetched using
Entity Framework.
The QRCodeImage is generated using the GenerateQRCode method.
Inside the GenerateQRCode method, the value of the QR Code fetched from the database is captured as parameter.
The QR Code is passed to the
CreateQrCode method of the
QRCoder library which returns a Bitmap image.
The Bitmap image is then saved as PNG image in MemoryStream which later is converted to a Base64 string and displayed on the page using an Image control.
Finally, the Base64 string is returned set in the public property QRCodeImage.
public class IndexModel : PageModel
{
public List<QRCodeModel> QRCodeImage { get; set; }
private DBCtx Context { get; }
public IndexModel(DBCtx _context)
{
this.Context = _context;
}
public void OnGet()
{
this.QRCodeImage = (from link in this.Context.Links.AsEnumerable()
select new QRCodeModel
{
LinkId = link.LinkId,
Link = link.Link,
QRCodeImage = GenerateQRCode(link.Link)
}).ToList();
}
public string GenerateQRCode(string qrcode)
{
using (MemoryStream ms = new MemoryStream())
{
QRCodeGenerator qrGenerator = new QRCodeGenerator();
QRCodeData qrCodeData = qrGenerator.CreateQrCode(qrcode, QRCodeGenerator.ECCLevel.Q);
QRCode qrCode = new QRCode(qrCodeData);
using (BitmapbitMap = qrCode.GetGraphic(20))
{
bitMap.Save(ms, ImageFormat.Png);
return "data:image/png;base64," + Convert.ToBase64String(ms.ToArray());
}
}
}
}
Razor Page (HTML)
Inside the Razor Page, an
HTML Table is used for displaying the records.
A loop will be executed over the Model which will generate the
HTML Table rows with QR Code image and the records fetched from the Database.
The QR Code image is displayed using an
HTML Image element.
@page
@model QRCode_Database_Core_Razor.Pages.IndexModel
@using QRCode_Database_Core_Razor.Models
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<table>
<tr>
<th>Link Id</th>
<th>Link</th>
<th>QRCode</th>
</tr>
@foreach (QRCodeModel link in Model.QRCodeImage)
{
<tr>
<td>@link.LinkId</td>
<td>@link.Link</td>
<td><img src="@link.QRCodeImage" height="100" width="100" /></td>
</tr>
}
</table>
</body>
</html>
Screenshot
Downloads