In this article I will explain with an example, how to dynamically generate and display QR Code Image in ASP.Net Core Razor Pages.
The QR Code Image will be dynamically generated in ASP.Net Core Razor Pages using the QRCoder library 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.
QRCoder
 
 
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.
 
 
Namespaces
You will need to import the following namespaces.
using QRCoder;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
 
 
Razor PageModel (Code-Behind)
The PageModel consists of the following two Handler methods.
Handler method for handling GET operation
This Handler method is left empty as it is not required.
 
Handler method for handling QR core generate operation
This Handler method gets called, when Generate Button is clicked.
Inside this event handler, the qrcode variable is passed to the CreateQrCode method of the QRCoder library which returns a Bitmap image.
Finally, the Bitmap image is saved to MemoryStream and then converted to Base64 string and the Base64 string is set into the public property QRCodeImage.
public class IndexModel : PageModel
{
    public string QRCodeImage { get; set; }
    public void OnGet()
    {
    }
 
    public void OnPostGenerate(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 (Bitmap bitMap = qrCode.GetGraphic(20))
            {
                bitMap.Save(ms, ImageFormat.Png);
                this.QRCodeImage = "data:image/png;base64," + Convert.ToBase64String(ms.ToArray());
            }
        }
    }
}
 
 
Razor Page (HTML)
The HTML of Razor Page consists of an HTML Form consisting of an HTML Input element and a Submit Button.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostGenerate, but here it will be specified as Generate when calling from the Razor HTML Page.
 
Form Submit
When the Generate Button is clicked, the generated QR Code Image is displayed in HTML Image element.
@page
@model QRCode_Core_Razor.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <form method="post">
        <input type="text" name="qrcode" asp-for="@Model.QRCodeImage" />
        <input type="submit" value="Generate" asp-page-handler="Generate" />
    </form>
    @if (Model.QRCodeImage != null)
    {
        <img src="@Model.QRCodeImage" alt="" style="height:150px;width:150px" />
    }
</body>
</html>
 
 
Screenshot
ASP.Net Core Razor Pages: Dynamically generate and display QR Code Image
 
 
Demo
View Demo
 
 
Downloads
Download Code