Cómo Generar Código QR en Blazor

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>

The output is as follows:

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)

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")