USING IRONBARCODE

How to Generate QR Code in Blazor

This article shows how developers can use the IronBarcode library to make QR codes in C# projects.

IronBarcode - C#

IronBarcode is a C# Barcode & QR code Library that allows you to read and generate barcodes and QR codes easily in any .NET C# applications. It prioritizes speed, accuracy, and ease of use for C#

IronBarcode is a user-friendly library that allows developers to easily add, read, and style QR codes in C# projects, usually within minutes. It enables developers to create QR codes in formats like Aztec, Data Matrix, MaxiCode. Different barcode types are available using IronBarcode, e.g., Code 39, Code 128, RSS14, etc.

IronBarcode is compatible with all .NET Framework languages, i.e., C#, F#, and VB.NET. It supports all .NET platforms listed below:

  • .NET 7, 6 & 5
  • .NET Core 2x & 3x
  • .NET Standard 2
  • .NET Framework 4.6.2+

How to Generate QR Code in Blazor Server Application?

Prerequisites

To create QR codes in Blazor web apps in C#, we require the following components:

  1. Visual Studio - It is an Integrated Development Environment (IDE) used for C# development. It can be downloaded from the Visual Studio website. Or you can use any other IDE supported for C#
  2. Blazor Server App: Creating Blazor Server app is the primary task. Follow the given steps below to create a Blazor server web application.

    • Open your IDE or Visual Studio. Click Create a new project.

      How to Generate QR Code in Blazor: Figure 1

    • Choose Blazor Server App from the available project options.

      How to Generate QR Code in Blazor: Figure 2

    • Next, set the location and name your project.

      How to Generate QR Code in Blazor: Figure 3

    • Next, set the additional information for your project. Select an appropriate .NET Framework Version. IronBarcode supports .NET versions 2 through 7, with .NET 7 being the latest.

      How to Generate QR Code in Blazor: Figure 4

  3. IronBarcode - The .NET QR code and Barcode library that helps to generate and read different barcode types. Following are the different ways to install IronBarcode:
    • Direct download IronBarcode from the NuGet website.
    • Install via Manage NuGet packages for solution in Visual Studio tools or right-click on solution explorer to choose NuGet Package Manager.
    • Download IronBarcode DLL directly from the Iron Software website.

Adding IronBarcode Namespace

Once everything is installed and ready, add the following assembly reference to your Blazor barcode application's "Imports.razor" file:

@using IronBarCode

How to Generate QR Code in Blazor: Figure 5

Add License Key

IronBarcode must be licensed to be used for deployment. You can get your free trial license key from here. Add the following lines of code to the Program.cs file:

using IronBarCode;

// Set the license key for IronBarcode here.
License.LicenseKey = "YOUR-KEY-HERE";
using IronBarCode;

// Set the license key for IronBarcode here.
License.LicenseKey = "YOUR-KEY-HERE";
Imports IronBarCode

' Set the license key for IronBarcode here.
License.LicenseKey = "YOUR-KEY-HERE"
$vbLabelText   $csharpLabel

Steps to Generate QR Code

The following steps will help generate QR codes in the best possible way in Blazor Server application:

Adding Blazor HTML Components

First, we are going to add some HTML code to the "Index.razor" page. The code consists of some headings, an input field, and buttons.

Use the code below to add the components to the Blazor barcode app:

<h4>Welcome to Blazor QR Code Generator</h4>
<p>Enter the value to Generate QR Code:</p>

<!-- Input field for QR code text -->
<input @bind="text" />

<!-- Button to trigger QR code generation -->
<button @onclick="QRCodeGenerater">Generate QR Code</button>

<p>Generated QR Code:</p>
<h4>Welcome to Blazor QR Code Generator</h4>
<p>Enter the value to Generate QR Code:</p>

<!-- Input field for QR code text -->
<input @bind="text" />

<!-- Button to trigger QR code generation -->
<button @onclick="QRCodeGenerater">Generate QR Code</button>

<p>Generated QR Code:</p>
HTML

The output is as follows:

How to Generate QR Code in Blazor: Figure 6

The text field is used to get input from the user, and the generate button will call the QRCodeGenerater method to create a QR code. The created QR code will be displayed under the "Generated QR Code:" heading. Now, let's create the QRCodeGenerater method.

Create the QRCodeGenerater Method

It's time to use the powerful IronBarcode library in Visual Studio to generate QR codes. The @code section is added to the "Index.razor" page. Let's first see the complete code below:

@code {
    // Variable to hold the generated QR code HTML
    private string qrCode = "";

    // Variable to hold user input text
    private string text = "";

    // Method to generate QR code from user input
    private void QRCodeGenerater()
    {
        // Create a QR code from the input text
        GeneratedBarcode myQRCode = QRCodeWriter.CreateQrCode(text);

        // Convert the generated QR code to HTML tag
        qrCode = Convert.ToString(myQRCode.ToHtmlTag());
    }
}

In the above code, there are two private string variables. qrCode will display the generated QR code, and text will get the user input from the input field. Then, in the QRCodeGenerater method, myQRCode is created using the QRCodeWriter class's CreateQrCode method. The CreateQrCode method provides several parameters to enhance the code output. You can customize the size of the QR code, set error correction code words to maintain the error correction level, and change the QrVersion. The code below helps you work with other parameters as well:

// Creating a QR code with custom parameters
QRCodeWriter.CreateQrCode(
    "https://ironsoftware.com/csharp/barcode/", // URL for the QR code
    500, // Size of the QR code
    QRCodeWriter.QrErrorCorrectionLevel.High, // Error correction level
    0 // QrVersion
)
// Creating a QR code with custom parameters
QRCodeWriter.CreateQrCode(
    "https://ironsoftware.com/csharp/barcode/", // URL for the QR code
    500, // Size of the QR code
    QRCodeWriter.QrErrorCorrectionLevel.High, // Error correction level
    0 // QrVersion
)
' Creating a QR code with custom parameters
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'QRCodeWriter.CreateQrCode("https://ironsoftware.com/csharp/barcode/", 500, QRCodeWriter.QrErrorCorrectionLevel.High, 0)
$vbLabelText   $csharpLabel

Finally, the generated Blazor barcode is converted to an HTML tag and then to a qrCode string.

Get more detail on IronBarcode features from this code examples page.

Display on the Blazor Server Application Home Page

Add the code below in HTML components in the "Index.razor" page, after the H4 heading to display qrCode:

@((MarkupString)qrCode)

Save As a PNG File

You can also save it to a PNG file using the SaveAsPng method:

// Save the generated QR code as a PNG file
myQRCode.SaveAsPng("myQRCode.png");
// Save the generated QR code as a PNG file
myQRCode.SaveAsPng("myQRCode.png");
' Save the generated QR code as a PNG file
myQRCode.SaveAsPng("myQRCode.png")
$vbLabelText   $csharpLabel

How to Generate QR Code in Blazor: Figure 7

Generate QR Code on Page Load

You can also create a QR code on page load and display it for the users to scan for data. The following code helps you achieve this task asynchronously:

@((MarkupString)qrCode)

@code {
    // Variable to hold the generated QR code HTML
    private string qrCode = "";

    // Method called when the page is initialized
    protected override async Task OnInitializedAsync()
    {
        // Asynchronously generate a QR code on page load
        await Task.Run(() =>
            qrCode = Convert.ToString(QRCodeWriter.CreateQrCode(
                "https://ironsoftware.com/csharp/barcode/", 
                500, 
                QRCodeWriter.QrErrorCorrectionLevel.High, 
                0).ToHtmlTag())
        );
    }
}

How to Generate QR Code in Blazor: Figure 8

Summary

In this article, we learned how to generate QR codes in a Blazor Server application using IronBarcode in C#. IronBarcode is a flexible library and provides all necessary methods and support for Blazor apps.

IronBarcode easily converts plain text, images, videos, or any other data to QR codes. You can control the code size, error correction levels, and its version. You can use IronBarcode to scan barcodes in Blazor applications. A complete example is here.

IronBarcode is free for development but must be licensed for commercial and deployment purposes. You can try the free trial to test all its functionality.

Frequently Asked Questions

What is a C# library for reading and generating barcodes and QR codes?

IronBarcode is a C# library that allows developers to read and generate barcodes and QR codes easily in any .NET C# applications. It supports various formats and is compatible with all .NET Framework languages.

How do I install a library for QR code generation in a Blazor project?

You can install IronBarcode by downloading it from the NuGet website, using the NuGet Package Manager in Visual Studio, or by downloading the DLL directly from the Iron Software website.

What are the prerequisites for generating QR codes in a Blazor Server application?

You need Visual Studio or another supported IDE, a Blazor Server App setup, and the IronBarcode library to generate QR codes in a Blazor Server application.

How can I display a generated QR code in a Blazor application?

Generated QR codes can be displayed by converting them into an HTML tag string and passing the information to MarkupString in the razor file.

How can I save a QR code as a PNG file using a .NET library?

You can use the SaveAsPng method provided by IronBarcode to save the generated QR code as a PNG file.

Can a .NET library be used with other .NET platforms?

Yes, IronBarcode is compatible with all .NET platforms, including .NET 7, 6, 5, .NET Core 2x & 3x, .NET Standard 2, and .NET Framework 4.6.2+.

Is there a free development library for barcodes and QR codes?

IronBarcode is free for development purposes, but it requires a license for commercial use and deployment. A free trial license is available for testing its functionality.

How do I add a barcode library namespace in a Blazor application?

You need to add the assembly reference @using IronBarCode to the application's Imports.razor file.

What is the purpose of a method to create QR codes from user input in a Blazor application?

The QRCodeGenerater method uses the IronBarcode library to create a QR code from user input and converts it into an HTML tag string for display.

Can a QR code be generated on page load in a Blazor app?

Yes, a QR code can be generated on page load using asynchronous methods in the OnInitializedAsync lifecycle event of the Blazor page.

Jordi Bardia
Software Engineer
Jordi is most proficient in Python, C# and C++, when he isn’t leveraging his skills at Iron Software; he’s game programming. Sharing responsibilities for product testing, product development and research, Jordi adds immense value to continual product improvement. The varied experience keeps him challenged and engaged, and he says it’s one of his favorite aspects of working with Iron Software. Jordi grew up in Miami, Florida and studied Computer Science and Statistics at University of Florida.
< PREVIOUS
How to Generate QR Codes in ASP.NET MVC
NEXT >
How to Generate QR Code in .NET MAUI