Post
Ask Question

Create QR Code In Blazor Using ASP .Net Core

Introduction

This article demonstrates how to generate QR Codes in a Blazor application. Microsoft created the Blazor framework to let developers create interactive web apps using C#,.NET, and HTML. The framework supports single-page apps (Blazor WebAssembly) downloaded onto your web browser before starting and apps hosted on ASP.NET Core Server (Blazor Server). The technique for creating QR Codes presented in this lesson supports both circumstances. The process uses a.NET Standard 2.0 class library to encode input data before adding a barcode font to the output so that it can be displayed. The benefit of this is that it is independent of any underlying graphics API. Before returning a text string of ones (1 - Black) and zeros, the class library verifies the input data, creates Error Correction Codewords, and applies the necessary QR Code mask patterns (0 - White). This tutorial will show you how to create QR codes using Visual Studio on Windows. On other platforms, Visual Studio Code can be used to produce QR Codes similarly.

Prerequisite

What is a QR Code

A QR code (Quick Response code) is a type of two-dimensional barcode that can be scanned and read by a smartphone or QR code reader. It consists of black and white squares arranged in a specific pattern that stores information, such as a website URL, product information, or contact details. QR codes are commonly used in marketing, advertising, and packaging to provide quick access to information for consumers. They can also be used for inventory management, ticketing, and payment transactions.

How to Generate dynamic QR Code

Step 1 - Create Blazor Application

Launch Visual Studio and click on Create a new project. Select the Blazor WebAssembly App and click on the Next button.

Create QR Code In Blazor

Give your project a name and choose a location to save it. Select Blazor WebAssembly App as the project template and click the Create button. Visual Studio will create the project structure for you with the necessary files and folders. You can then start building your Blazor application in Visual Studio, using features such as IntelliSense, debugging, and more.

Step 2

Add the QR Code class library to the project after it has been developed. Right-click BlazorQRCode in Solution Explorer and choose Manage Nuget Packages. On Browse, enter "ConnectCode QR Code," choose "NETStandardQRCode," and then click Install to add the class library in the NuGet Package Manager (as seen below) (select version 1.0.0 or above).

Create QR Code In Blazor

Step 3

To create a razor component with the name QRGenerator. Right-click Pages in solution explorer, choose the Add option, select the razor component, and then give the component's name.

Create QR Code In Blazor

Step 4

Write a code in QRGenerator Component.

@page "/"
@using Microsoft.AspNetCore
@using System.Drawing;
@using QRCoder;
@using System.Drawing.Imaging;

<PageTitle>QR Code Generator</PageTitle>

    <div class="input-group">
        <div class="col-sm-6">
            <label class="mb-3">QR Code Text</label>
            <input type="text" @bind-value="QRCodeText" placeholder="Enter your text" class="form-control mb-4" />
            <button @onclick="GenerateQRCode" class="btn btn-success">Generate QR Code</button>
        </div>
    </div>


<img alt ="" src="@QRByte" width="300" class="mb-5" />

@code {
    public string QRCodeText { get; set; }
    public string QRByte = "";

    public void GenerateQRCode()
    {        
        if (!string.IsNullOrEmpty(QRCodeText))
        {
            using MemoryStream ms = new();
            QRCodeGenerator qrCodeGenerate = new();
            QRCodeData qrCodeData = qrCodeGenerate.CreateQrCode(QRCodeText, QRCodeGenerator.ECCLevel.Q);
            QRCode qrCode = new(qrCodeData);
            using Bitmap qrBitMap = qrCode.GetGraphic(20);
            qrBitMap.Save(ms, ImageFormat.Png);
            string base64 = Convert.ToBase64String(ms.ToArray());
            QRByte = string.Format("data:image/png;base64,{0}", base64);
        }
    }
}

In this code, we create a function for generating a dynamic QR Code. The name of the function is GenerateQRCode. In this method, to create an object for MemoryStream and QRCodeGenerator, then call the CreateQrCode method from QRCodeGenerator class in this method is required for two parameters first one is a text message, and another one is ECCLevel (Error Correction Code Level). After creating the QR, create an object for the Bitmap class to save the QR in an Image Format.

In this project, we are creating a QR image format and a base64 string format. The image can be used for storing the database, and the base64 string shows the QR code.

Output

Create QR Code In Blazor

Conclusion

Generating a QR code in Blazor effectively enhances the user experience and simplifies the data exchange process. Using a reliable QR code generation library such as QRCoderNetCore, developers can quickly generate QR codes in their Blazor applications without much effort. The flexibility of the Blazor framework allows for seamless integration of the QR code generation feature into existing applications or new projects. With the increasing demand for data sharing and mobile-friendly applications, QR codes are becoming more widespread. Thus, the ability to generate QR codes in Blazor applications is a valuable skill for developers to possess and can significantly enhance the functionality and user experience of their applications.


Similar Articles