Comment générer des codes QR dans ASP.NET MVC

Installer Iron Barcode

Pour commencer, ouvrez la Console du Gestionnaire de Packages dans Visual Studio et exécutez la commande suivante :

Install-Package IronBarCode

Cette commande installera la bibliothèque Iron Barcode et ajoutera les références nécessaires à votre projet.

Maintenant, écrivons un peu de code pour créer des codes QR.

Créer QRCodeModel

Créez une classe modèle dans le dossier Models et écrivez le code suivant :

using System.ComponentModel.DataAnnotations;

public class QRCodeModel
{
    [Display(Name = "Enter QR Code Text")]
    public string QRCodeText { get; set; }
}

using System.ComponentModel.DataAnnotations;

public class QRCodeModel
{
    [Display(Name = "Enter QR Code Text")]
    public string QRCodeText { get; set; }
}

Imports System.ComponentModel.DataAnnotations

Public Class QRCodeModel
	<Display(Name := "Enter QR Code Text")>
	Public Property QRCodeText() As String
End Class

Créer le contrôleur de codes QR

Dans votre projet ASP.NET MVC, créez un nouveau contrôleur nommé QrCodeController. Pour ce faire, cliquez avec le bouton droit sur le dossier Controllers dans la structure de votre projet, sélectionnez "Ajouter" puis choisissez "Contrôleur". Parmi les options disponibles, sélectionnez "Contrôleur MVC - Vide".

Écrivez le code suivant dans QrCodeController :

using Microsoft.AspNetCore.Mvc;
using IronBarCode;
using System.IO;

public class QrCodeController : Controller
{
    private readonly IWebHostEnvironment _environment;

    public QrCodeController(IWebHostEnvironment environment)
    {
        _environment = environment;
    }

    public IActionResult CreateQRCode()
    {
        return View();
    }

    [HttpPost]
    public IActionResult CreateQRCode(QRCodeModel generateQRCode)
    {
        try
        {
            // Creating QR Code
            GeneratedBarcode barcode = QRCodeWriter.CreateQrCode(generateQRCode.QRCodeText);
            string path = Path.Combine(_environment.WebRootPath, "GeneratedQRCode");

            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }

            string filePath = Path.Combine(path, "qrcode.png");
            barcode.SaveAsPng(filePath);

            string fileName = Path.GetFileName(filePath);
            string imageUrl = $"{this.Request.Scheme}://{this.Request.Host}{this.Request.PathBase}/GeneratedQRCode/{fileName}";

            ViewBag.QrCodeUri = imageUrl;
        }
        catch (Exception ex)
        {
            // Handle exceptions
            // Log the exception details here for troubleshooting and debugging.
            throw;
        }

        return View();
    }
}

using Microsoft.AspNetCore.Mvc;
using IronBarCode;
using System.IO;

public class QrCodeController : Controller
{
    private readonly IWebHostEnvironment _environment;

    public QrCodeController(IWebHostEnvironment environment)
    {
        _environment = environment;
    }

    public IActionResult CreateQRCode()
    {
        return View();
    }

    [HttpPost]
    public IActionResult CreateQRCode(QRCodeModel generateQRCode)
    {
        try
        {
            // Creating QR Code
            GeneratedBarcode barcode = QRCodeWriter.CreateQrCode(generateQRCode.QRCodeText);
            string path = Path.Combine(_environment.WebRootPath, "GeneratedQRCode");

            if (!Directory.Exists(path))
            {
                Directory.CreateDirectory(path);
            }

            string filePath = Path.Combine(path, "qrcode.png");
            barcode.SaveAsPng(filePath);

            string fileName = Path.GetFileName(filePath);
            string imageUrl = $"{this.Request.Scheme}://{this.Request.Host}{this.Request.PathBase}/GeneratedQRCode/{fileName}";

            ViewBag.QrCodeUri = imageUrl;
        }
        catch (Exception ex)
        {
            // Handle exceptions
            // Log the exception details here for troubleshooting and debugging.
            throw;
        }

        return View();
    }
}

Imports Microsoft.AspNetCore.Mvc
Imports IronBarCode
Imports System.IO

Public Class QrCodeController
	Inherits Controller

	Private ReadOnly _environment As IWebHostEnvironment

	Public Sub New(ByVal environment As IWebHostEnvironment)
		_environment = environment
	End Sub

	Public Function CreateQRCode() As IActionResult
		Return View()
	End Function

	<HttpPost>
	Public Function CreateQRCode(ByVal generateQRCode As QRCodeModel) As IActionResult
		Try
			' Creating QR Code
			Dim barcode As GeneratedBarcode = QRCodeWriter.CreateQrCode(generateQRCode.QRCodeText)
			Dim path As String = System.IO.Path.Combine(_environment.WebRootPath, "GeneratedQRCode")

			If Not Directory.Exists(path) Then
				Directory.CreateDirectory(path)
			End If

			Dim filePath As String = System.IO.Path.Combine(path, "qrcode.png")
			barcode.SaveAsPng(filePath)

			Dim fileName As String = System.IO.Path.GetFileName(filePath)
			Dim imageUrl As String = $"{Me.Request.Scheme}://{Me.Request.Host}{Me.Request.PathBase}/GeneratedQRCode/{fileName}"

			ViewBag.QrCodeUri = imageUrl
		Catch ex As Exception
			' Handle exceptions
			' Log the exception details here for troubleshooting and debugging.
			Throw
		End Try

		Return View()
	End Function
End Class

Ce code configure un contrôleur qui peut générer des codes QR. Lorsque l'action CreateQRCode est appelée, elle prend le texte pour le code QR, génère l'image du code QR, l'enregistre et fournit l'URL de l'image dans la vue pour l'affichage. Plus de détails sont les suivants :

• Le contrôleur a un constructeur qui prend un paramètre IWebHostEnvironment pour accéder à l'environnement d'hébergement web.
• L'action CreateQRCode renvoie une vue.
• L'action CreateQRCode avec l'attribut [HttpPost] prend un paramètre QRCodeModel, qui contient le texte du code QR.
• À l'intérieur de l'action, un code QR est généré en utilisant la classe QRCodeWriter de la bibliothèque Iron Barcode.
• Le code QR généré est enregistré en tant que fichier image PNG dans un dossier appelé GeneratedQRCode dans le chemin racine du web.
• Si le dossier GeneratedQRCode n'existe pas, il est créé.
• Le chemin de fichier et l'URL de l'image du code QR enregistré sont générés.
• L'URL de l'image du code QR est stockée dans la propriété ViewBag.QrCodeUri pour être utilisée dans la vue.
• Toutes les exceptions qui se produisent pendant le processus sont capturées et enregistrées.

Ajouter la vue CreateQRCode

Maintenant, pour ajouter une nouvelle vue, cliquez avec le bouton droit sur la méthode d'action CreateQRCode dans la classe QrCodeController. Sélectionnez "Ajouter une vue", puis sélectionnez "Vue Razor" et cliquez sur le bouton "Ajouter".

Une nouvelle fenêtre apparaîtra comme montré ci-dessous.

Écrivez le nom de la vue, sélectionnez le modèle "Créer" et sélectionnez notre nouvelle classe de modèle créée QRCodeModel. Cliquez sur le bouton Ajouter. La vue sera créée. Remplacez votre vue par le code ci-dessous.

@model QRCodeModel

@{
    ViewData["Title"] = "CreateQRCode";
}

<h1>Create QRCode in ASP.NET MVC</h1>

<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="CreateQRCode">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="QRCodeText" class="control-label"></label>
                <input asp-for="QRCodeText" class="form-control" />
                <span asp-validation-for="QRCodeText" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
            <div class="form-group">
                @if (ViewBag.QrCodeUri != null)
                {
                    <img src="@ViewBag.QrCodeUri" class="img-thumbnail" alt="Generated QR Code" />
                }
            </div>
        </form>
    </div>
</div>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

Maintenant, passons à la classe Program.cs et changeons la route par défaut du contrôleur.

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=QrCode}/{action=CreateQRCode}/{id?}"
);

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=QrCode}/{action=CreateQRCode}/{id?}"
);

app.MapControllerRoute(name:= "default", pattern:= "{controller=QrCode}/{action=CreateQRCode}/{id?}")

Ceci changera la route par défaut de HomeController à notre QrCodeController.

Maintenant, compilez et exécutez le projet.

Sortie

Entrez le texte dans la boîte de texte et cliquez sur le bouton créer. Un code QR sera créé et affiché à l'écran comme montré ci-dessous.

Maintenant, ajoutons un style visuel à notre code-barres en ajoutant un texte d'annotation, la valeur du code QR et en changeant la couleur du code QR.

Ajouter un style visuel dans le code QR

Ajoutez la ligne de code suivante à l'intérieur de la méthode d'action CreateQRCode.

barcode.AddAnnotationTextAboveBarcode("QR Code Generated by Iron PDF");
barcode.AddBarcodeValueTextBelowBarcode();
barcode.ChangeBackgroundColor(System.Drawing.Color.White);
barcode.ChangeBarCodeColor(System.Drawing.Color.MediumVioletRed);

barcode.AddAnnotationTextAboveBarcode("QR Code Generated by Iron PDF");
barcode.AddBarcodeValueTextBelowBarcode();
barcode.ChangeBackgroundColor(System.Drawing.Color.White);
barcode.ChangeBarCodeColor(System.Drawing.Color.MediumVioletRed);

barcode.AddAnnotationTextAboveBarcode("QR Code Generated by Iron PDF")
barcode.AddBarcodeValueTextBelowBarcode()
barcode.ChangeBackgroundColor(System.Drawing.Color.White)
barcode.ChangeBarCodeColor(System.Drawing.Color.MediumVioletRed)

Maintenant, exécutez le projet et générez le code QR.