Wie man QR-Code in Blazor generiert

Die folgenden Schritte helfen, QR-Codes zu generieren auf die bestmögliche Weise in einer Blazor Server-Anwendung:

Hinzufügen von Blazor HTML-Komponenten

Zuerst werden wir etwas HTML-Code zur "Index.razor"-Seite hinzufügen. Der Code besteht aus einigen Überschriften, einem Eingabefeld und Schaltflächen.

Verwenden Sie den untenstehenden Code, um die Komponenten zur Blazor Barcode-App hinzuzufügen:

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

Das Ergebnis ist wie folgt:

    ![Wie man einen QR-Code in Blazor generiert: Abbildung 6](/static-assets/barcode/blog/blazor-qr-code-generator-tutorial/blazor-qr-code-generator-tutorial-6.webp)

Das Textfeld wird verwendet, um Eingaben vom Benutzer zu erhalten, und die Schaltfläche "Generieren" ruft die Methode QRCodeGenerater auf, um einen QR-Code zu erstellen. Der erstellte QR-Code wird unter der Überschrift "Generierter QR-Code:" angezeigt. Nun erstellen wir die Methode QRCodeGenerater.

Erstellen der QRCodeGenerater-Methode

Es ist an der Zeit, die leistungsstarke IronBarcode-Bibliothek in Visual Studio zu verwenden, um QR-Codes zu generieren. Der Abschnitt @code wird zur "Index.razor"-Seite hinzugefügt. Sehen wir uns zuerst den vollständigen Code unten an:

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

Im obigen Code gibt es zwei private String-Variablen. qrCode zeigt den generierten QR-Code an, und text erhält die Benutzereingabe aus dem Eingabefeld. Dann wird in der QRCodeGenerater-Methode myQRCode mit der Methode CreateQrCode der Klasse QRCodeWriter erstellt. Die Methode CreateQrCode bietet mehrere Parameter, um die Codeausgabe zu verbessern. Sie können die Größe des QR-Codes anpassen, Fehlerkorrekturwörter festlegen, um das Fehlerkorrekturniveau zu erhalten, und die QrVersion ändern. Der untenstehende Code hilft Ihnen dabei, auch mit anderen Parametern zu arbeiten:

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

Schließlich wird der generierte Blazor Barcode in einen HTML-Tag konvertiert und dann in einen qrCode-String.

Erfahren Sie mehr über die Funktionen von IronBarcode auf dieser Code-Beispiel-Seite.

Anzeige auf der Startseite der Blazor Server-Anwendung

Fügen Sie den untenstehenden Code in HTML-Komponenten auf der Seite "Index.razor" ein, nach der H4-Überschrift, um qrCode anzuzeigen:

@((MarkupString)qrCode)

Als PNG-Datei speichern

Sie können es auch als PNG-Datei mit der Methode SaveAsPng speichern:

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

    ![Wie man einen QR-Code in Blazor generiert: Abbildung 7](/static-assets/barcode/blog/blazor-qr-code-generator-tutorial/blazor-qr-code-generator-tutorial-7.webp)