In this article I will explain with an example, how to dynamically generate and display QR Code Image in ASP.Net Core (.Net Core) MVC.
The QR Code Image will be dynamically generated in ASP.Net Core MVC Razor using the QRCoder library which is an Open Source Library QR code generator.
Note: For beginners in ASP.Net Core (.Net Core 7), please refer my article ASP.Net Core 7: Hello World Tutorial with Sample Program example.
 
 

Installing QRCoder package System.Drawing.Common using Nuget

In order to install the following libraries using Nuget, for more details please refer following articles.
Install QRCoder library using Nuget
Install System.Drawing.Common from Nuget
 
 

Namespaces

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

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
 

Action method for handling POST operation

Inside this Action method, the value of the QR Code entered in the TextBox is captured as parameter.
The QR Code 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 a ViewBag object.
public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public IActionResult Generate(string qrcode)
    {
        //Generate QRCode object.
        QRCodeGenerator qrGenerator = new QRCodeGenerator();
        QRCode qrCode = new QRCode(qrGenerator.CreateQrCode(qrcode, QRCodeGenerator.ECCLevel.Q));
 
        //Create a Bitmap using the QRCode.
        using (Bitmap bmpQRCode = qrCode.GetGraphic(30))
        {
            using (MemoryStream ms = new MemoryStream())
            {
                //Saving the QRCode Bitmap to MemoryStream.
                 bmpQRCode.Save(ms, ImageFormat.Png);
 
                //Displaying the QRCode Image using BASE64 string.
                 ViewBag.QRCodeImage = "data:image/png;base64," + Convert.ToBase64String(ms.ToArray());
            }
        }
        return View("Index");
    }
}
 
 

View

HTML Markup

The View consists of an HTML Form with following ASP.Net Tag Helpers attributes.
asp-action – Name of the Action. In this case the name is Generate.
asp-controller – Name of the Controller. In this case the name is Home.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The View consists of an HTML TextBox, a Submit Button and an Image element.
 

Submitting the form

When the Submit Button is clicked, the ViewBag object is checked for NULL and if it is not NULL then the value of the object is set into the src property of the Image element and the generated QR Code Image is displayed.
@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" asp-action="Generate" asp-controller="Home">
        <input type="text" name="qrcode" />
        <input type="submit" value="Generate" />
    </form>
    <hr />
    @if (ViewBag.QRCodeImage != null)
    {
        <img src="@ViewBag.QRCodeImage" alt="" style="height:150px;width:150px" />
    }
</body>
</html>
 
 

Screenshot

ASP.Net Core: Dynamically generate and display QR Code Image in ASP.Net MVC Core
 
 

Demo

View Demo
 
 

Downloads

Download Code