In this article I will explain with an example, how to dynamically generate and display QRCodeCode Image in ASP.Net Core (.Net Core 2) Razor Pages.
Note: For beginners in ASP.Net Core (.Net Core 2) Razor Pages, please refer my article ASP.Net Core Razor Pages: Hello World Tutorial with Sample Program example.
 
 

Installing System.Drawing.Common library

First, you will need to install the System.Drawing.Common package.
Note: For more details, please refer my article How to use Bitmap in .Net Core 2.1.
 
 

Downloading QRCoder package

You will need to install the QRCoder package using the following command.
Install-Package QRCoder -Version 1.1.5
 
 

Namespaces

You will need to import the following namespaces.
using QRCoder;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
 
 

Index PageModel (Code-Behind)

Indie the PageModel, a public property of string type i.e. QRCodeImage is created.
The PageModel consists of following Handler methods.

Handler method for handling GET operation

This Handler method left empty as it is not required.
 

Handler method for handling POST operation

This Handler method accepts the value entered in the TextBox as parameter.
Inside this Action method, an object of QRCodeGenerator is created and QRCode class object is initialized with calling CreateQrCode method of QRCodeGenerator class which accepts the TextBox value as parameter.
The CreateQrCode method returns the Bitmap image which is saved to the MemoryStream and converted to BASE64 string.
Finally, the BASE64 string is set into the public property i.e. QRCodeImage (created earlier).
public class IndexModel : PageModel
{
    public string QRCodeImage { get; set; }
    public void OnGet()
    {
    }
 
    public void OnPostGenerate(string qrcode)
    {
        QRCodeGenerator qrGenerator = new QRCodeGenerator();
        QRCode qrCode = new QRCode(qrGenerator.CreateQrCode(qrcode, QRCodeGenerator.ECCLevel.Q));
        using (MemoryStream ms = new MemoryStream())
        {
            using (Bitmap bitMap = qrCode.GetGraphic(20))
            {
                bitMap.Save(ms,ImageFormat.Png);
                this.QRCodeImage = "data:image/png;base64," + Convert.ToBase64String(ms.ToArray());
            }
        }
    }
}
 
 

Razor Page (HTML)

HTML Markup

Inside the Razor Page the ASP.Net Tag Helpers is inherited.
The Razor Page consists of an HTML Form consisting of an HTML INPUT TextBox, a Submit Button and an Image element.
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.
 

Submitting the Form

When the Submit Button is clicked, the QRCodeImage property is checked for NULL and if it is not NULL then the value of the Model property i.e. BASE64 string is set to the src property of the Image element and the QRCode is displayed.
@page
@modelGenerate_QRCode_Core_2_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" /> 
        <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 2 Razor Pages: Dynamically generate and display QR Code Image
 
 

Demo

View Demo
 
 

Downloads

Download Code