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.
Note: For beginners in ASP.Net Core (.Net Core 8) Razor Pages, please refer my article ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example.
 
 

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.
ASP.Net Core Razor Pages: Generate QR Code from Database
 
I have inserted few records in the table.
ASP.Net Core Razor Pages: Generate QR Code from Database
 
Note: You can download the database table SQL by clicking the download link below.  
         Download SQL file
 
 

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.
Note: For beginners in ASP.Net Core Razor Pages and Entity Framework, please refer my article ASP.Net Core Razor Pages: Simple Entity Framework Tutorial with example. It covers all the information needed for connecting and configuring Entity Framework with ASP.Net Core.
 
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

ASP.Net Core Razor Pages: Generate QR Code from Database
 
 

Downloads