Generate QR Code in ASP.NET Core MVC

Introduction

In this article, we are going to create an ASP.NET Core MVC application that generates QR codes for different purposes such as email, website links, bookmark URLs, SMS, WhatsApp messages, and WiFi connections. The sample uses the QRCoder NuGet package.

About QRCoder

QRCoder is a simple C# library that lets you create QR codes without depending on other libraries. It is available for .NET Framework and .NET Core, and it supports multiple payload types.

The article uses these QR code types:

URL
Bookmark website
Send SMS
Send WhatsApp message
Compose email
Connect to WiFi

Create the ASP.NET Core MVC Project

Step 1

Open Visual Studio and click Create New Project.

Step 2

Select ASP.NET Core Web App (Model-View-Controller) and click Next.

Select MVC template

Step 3

Configure the project name and location, then click Next.

Configure project

Step 4

Choose the .NET Core version and click Create.

Add a New Controller

Step 1

Right-click the Controllers folder and choose Add, then Controller.

Add controller

Step 2

Select MVC Empty Controller and give it a name. The article uses QRCode.

Choose empty controller

Add the NuGet Package

Step 1

Right-click the project and choose Manage NuGet Packages.

Open NuGet manager

Step 2

Search for QRCoder in the Browse tab.

Search QRCoder

Step 3

Install the package.

Create the Model Class

To transfer data between the controller and the view, create a model class named QRCodeModel.

public class QRCodeModel
{
    public int QRCodeType { get; set; }
    public string QRImageURL { get; set; }
 
    // bookmark QR code
    public string BookmarkTitle { get; set; }
    public string BookmarkURL { get; set; }
 
    // email QR codes
    public string ReceiverEmailAddress { get; set; }
    public string EmailSubject { get; set; }
    public string EmailMessage { get; set; }
 
    // SMS QR codes
    public string SMSPhoneNumber { get; set; }
    public string SMSBody { get; set; }
 
    // website
    public string WebsiteURL { get; set; }
 
    // WhatsApp QR message code
    public string WhatsAppNumber { get; set; }
    public string WhatsAppMessage { get; set; }
 
    // WiFi QR code
    public string WIFIName { get; set; }
    public string WIFIPassword { get; set; }
}

Design View

Step 1

Create an action method in the controller. The article uses Index.

Step 2

Right-click the action method and choose Add View.

Step 3

Return the model from the controller.

public IActionResult Index()
{
    QRCodeModel model = new QRCodeModel();
    return View(model);
}

Step 4

Design the view with a drop-down for QR code type and separate input sections for each payload type.

@model QRCodeModel
@{
    ViewData["Title"] = "Generate QR Code";
}
 
<form asp-action="Index">
 
    <div class="row mt-2">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <label>Select QR Code Type</label>
            <select asp-for="QRCodeType" id="QRCodeType" class="form-control" onchange="onQRCodeTypeChange()">
                <option value="1">Website</option>
                <option value="2">Bookmark URL</option>
                <option value="3">SMS</option>
                <option value="4">WhatsApp</option>
                <option value="5">Email</option>
                <option value="6">WIFI</option>
            </select>
        </div>
    </div>
 
    <!-- Website -->
    <div class="row mt-2 hideDiv" id="DIV1">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <label>Enter your website URL</label>
            <input autocomplete="off" type="url" asp-for="WebsiteURL" class="form-control" />
        </div>
    </div>
 
    <!-- Bookmark URL -->
    <div class="row mt-2 hideDiv" id="DIV2">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <label>Enter your URL</label>
            <input type="url" asp-for="BookmarkURL" class="form-control" autocomplete="off" />
        </div>
    </div>
 
    <!-- SMS -->
    <div id="DIV3" class="hideDiv">
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter Phone Number with country code (for example +91)</label>
                <input type="text" asp-for="SMSPhoneNumber" class="form-control" autocomplete="off" />
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter your Message</label>
                <textarea asp-for="SMSBody" class="form-control"></textarea>
            </div>
        </div>
    </div>
 
    <!-- WhatsApp Message -->
    <div id="DIV4" class="hideDiv">
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter WhatsApp Number with country code (for example +91)</label>
                <input type="text" asp-for="WhatsAppNumber" class="form-control" autocomplete="off" />
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter your Message</label>
                <textarea asp-for="WhatsAppMessage" class="form-control"></textarea>
            </div>
        </div>
    </div>
 
    <!-- Compose Email -->
    <div id="DIV5" class="hideDiv">
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter Receiver's Email Address</label>
                <input type="text" asp-for="ReceiverEmailAddress" class="form-control" autocomplete="off" />
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter Email Subject</label>
                <input type="text" asp-for="EmailSubject" class="form-control" autocomplete="off" />
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter Email Message</label>
                <textarea asp-for="EmailMessage" class="form-control"></textarea>
            </div>
        </div>
    </div>
 
    <!-- WIFI -->
    <div id="DIV6" class="hideDiv">
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter WIFI Name</label>
                <input type="text" asp-for="WIFIName" class="form-control" autocomplete="off" />
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <label>Enter WIFI Password</label>
                <input type="text" asp-for="WIFIPassword" class="form-control" autocomplete="off" />
            </div>
        </div>
    </div>
 
    <div class="row mt-2">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <button type="submit" class="btn btn-primary">Generate</button>
            <button type="reset" class="btn btn-secondary">Reset</button>
        </div>
    </div>
 
    @if (!string.IsNullOrEmpty(Model.QRImageURL))
    {
        <div class="row mt-2" id="qrCodeImage">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <img height="250" width="250" src="@Model.QRImageURL" />
            </div>
        </div>
    }
 
</form>
 
@section Scripts {
    <script>
        $(document).ready(function () {
            $("#QRCodeType").trigger("change");
        });
 
        function onQRCodeTypeChange() {
            let qrcodeType = $("#QRCodeType").val();
            $(".hideDiv").hide();
            $("#DIV" + qrcodeType).show();
        }
    </script>
}

The drop-down controls which section is visible, and the generated QR image is rendered as a base64 string.

Generate the QR Code

Add a POST action method to generate the QR code based on the selected payload.

[HttpPost]
public IActionResult Index(QRCodeModel model)
{
    Payload payload = null;
 
    switch (model.QRCodeType)
    {
        case 1:
            payload = new Url(model.WebsiteURL);
            break;
        case 2:
            payload = new Bookmark(model.BookmarkURL, model.BookmarkURL);
            break;
        case 3:
            payload = new SMS(model.SMSPhoneNumber, model.SMSBody);
            break;
        case 4:
            payload = new WhatsAppMessage(model.WhatsAppNumber, model.WhatsAppMessage);
            break;
        case 5:
            payload = new Mail(model.ReceiverEmailAddress, model.EmailSubject, model.EmailMessage);
            break;
        case 6:
            payload = new WiFi(model.WIFIName, model.WIFIPassword, WiFi.Authentication.WPA);
            break;
    }
 
    QRCodeGenerator qrGenerator = new QRCodeGenerator();
    QRCodeData qrCodeData = qrGenerator.CreateQrCode(payload);
    QRCode qrCode = new QRCode(qrCodeData);
    var qrCodeAsBitmap = qrCode.GetGraphic(20);
 
    // Use this when you want to show your logo in the middle of the QR code and change its color.
    // Bitmap logoImage = new Bitmap(@"wwwroot/img/Virat-Kohli.jpg");
    // var qrCodeAsBitmap = qrCode.GetGraphic(20, Color.Black, Color.Red, logoImage);
 
    string base64String = Convert.ToBase64String(BitmapToByteArray(qrCodeAsBitmap));
    model.QRImageURL = "data:image/png;base64," + base64String;
    return View("Index", model);
}
 
private byte[] BitmapToByteArray(Bitmap bitmap)
{
    using (MemoryStream ms = new MemoryStream())
    {
        bitmap.Save(ms, ImageFormat.Png);
        return ms.ToArray();
    }
}

QR Code Flow

Create a QRCodeGenerator
Call CreateQrCode with the chosen payload
Create a QRCode instance from the generated data
Call GetGraphic to produce a bitmap
Convert the bitmap to base64 and bind it to the view

Payload Types

URL Payload

Use the URL payload to generate a QR code that opens a website.

payload = new Url(model.WebsiteURL);

Bookmark Payload

Use the Bookmark payload to create a bookmark-style QR code.

payload = new Bookmark(model.BookmarkURL, model.BookmarkURL);

SMS Payload

Use the SMS payload to create a QR code that composes an SMS message.

payload = new SMS(model.SMSPhoneNumber, model.SMSBody);

WhatsApp Message Payload

Use the WhatsAppMessage payload to create a QR code that opens a WhatsApp message.

payload = new WhatsAppMessage(model.WhatsAppNumber, model.WhatsAppMessage);

Mail Payload

Use the Mail payload to create a QR code that opens a composed email.

payload = new Mail(model.ReceiverEmailAddress, model.EmailSubject, model.EmailMessage);

WiFi Payload

Use the WiFi payload to create a QR code that stores WiFi credentials.

payload = new WiFi(model.WIFIName, model.WIFIPassword, WiFi.Authentication.WPA);

Conclusion

I hope you found this article helpful. The original post also linked to the source code on GitHub.