Comment générer un code QR dans Blazor

Les étapes suivantes vous aideront à générer des codes QR de la meilleure manière possible dans l'application Blazor Server :

Ajout de composants HTML Blazor

Le code se compose de quelques titres, un champ de saisie et des boutons. Le code se compose de quelques en-têtes, d'un champ de saisie et de boutons.

Utilisez le code ci-dessous pour ajouter les composants à l'application de code-barres Blazor :

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

<input @bind="text" />

<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 @bind="text" />

<button @onclick="QRCodeGenerater">Generate QR Code</button>

<p>Generated QR Code:</p>

La sortie est la suivante :

Le champ de texte est utilisé pour obtenir une saisie de l'utilisateur, et le bouton générer appellera la méthode QRCodeGenerater pour créer un code QR. Le code QR créé sera affiché sous l'en-tête "Code QR généré:". Maintenant, créons la méthode QRCodeGenerater.

Créez la méthode QRCodeGenerater

La section @code est ajoutée à la page "Index.razor". La section @code est ajoutée à la page " Index. Razor". Voyons d'abord le code complet ci-dessous :

@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());
    }
}

Dans le code ci-dessus, il y a deux variables string privées. qrCode affichera le code QR généré, et text récupérera la saisie de l'utilisateur dans le champ de saisie. Ensuite, dans la méthode QRCodeGenerater, myQRCode est créé à l'aide de la méthode QRCodeWriter de la classe CreateQrCode. La méthode CreateQrCode fournit plusieurs paramètres pour améliorer le résultat du code. Vous pouvez personnaliser la taille du code QR, définir des mots de code de correction d'erreur pour maintenir le niveau de correction d'erreur et modifier le QrVersion. Enfin, le code-barres Blazor généré est converti en une balise HTML, puis en une chaîne qrCode.

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

Enfin, le code-barres Blazor généré est converti en une balise HTML puis en une chaîne qrCode.

Affichage sur la Page d'Accueil de l'Application Blazor Server

Ajoutez le code ci-dessous dans les composants HTML de la page "Index.razor", après le titre H4 pour afficher qrCode :

Ajoutez le code ci-dessous dans les composants HTML de la page "Razor", après le titre H4, pour afficher qrCode :

@((MarkupString)qrCode)

Enregistrer en tant que fichier PNG

Vous pouvez également l'enregistrer dans un fichier PNG en utilisant la méthode SaveAsPng :

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

Vous pouvez également créer un code QR au chargement de la page et l'afficher pour que les utilisateurs puissent le scanner pour obtenir des données.

Vous pouvez également créer un code QR au chargement de la page.

@((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())
        );
    }
}