1. IronBarcode
  2. Commencer
  3. Scanner de codes-barres ASP.NET Core

Scanner de codes-barres ASP.NET Core

Curtis Chau
Curtis Chau
Mis à jour:
This article was translated from English: Does it need improvement?
Translated
View the article in English

Introduction

ASP.NET Core est un framework multiplateforme pour créer des applications web modernes. Son modèle Razor Pages offre une approche basée sur les pages pour gérer les requêtes HTTP, ce qui le rend bien adapté au traitement des codes-barres côté serveur. Avec IronBarcode, les images téléchargées peuvent être reçues en tant qu'objets IFormFile, converties en tableaux d'octets, et passées directement au lecteur de codes-barres sans écrire de fichiers temporaires sur le disque.

Cet article explique comment intégrer IronBarcode dans une application ASP.NET Core Razor Pages pour scanner des codes-barres et des QR codes à partir d'images téléchargées, ainsi que générer des codes-barres à partir du serveur.

## Comment lire et scanner des codes-barres dans ASP.NET Core
  1. Installez la bibliothèque C# pour lire et scanner des codes-barres
  2. Créer un nouveau projet ASP.NET Core Razor Pages
  3. Concevez le formulaire de téléchargement de fichiers pour accepter les images de codes-barres
  4. Utilisez la méthode `Read` pour scanner l'image téléchargée pour des codes-barres
  5. Affichez la valeur du code-barres décodée sur la page

IronBarcode : Bibliothèque C# Barcode

IronBarcode fournit une API robuste pour lire et écrire des codes-barres dans les applications .NET. La bibliothèque gère le traitement des images en interne, de sorte que les développeurs peuvent passer des octets bruts, des chemins de fichiers ou des flux directement à la méthode BarcodeReader.Read sans avoir besoin de bibliothèques de traitement d'image séparées. Elle prend en charge une large gamme de formats de codes-barres, y compris le QR Code, le Code 128, le Code 39, le PDF417, l'EAN, et bien d'autres.

Pour les applications web, IronBarcode est particulièrement utile car il traite les images entièrement en mémoire. Les fichiers téléchargés n'ont jamais besoin d'être enregistrés sur le disque, ce qui simplifie le déploiement et réduit le besoin de nettoyage. La même bibliothèque génère également des codes-barres avec BarcodeWriter.CreateBarcode, en faisant une seule dépendance pour la lecture et l'écriture.

Étapes pour construire un scanner de codes-barres dans ASP.NET Core

Suivez ces étapes pour créer un scanner de codes-barres basé sur le web en utilisant ASP.NET Core Razor Pages et IronBarcode.

Prérequis

  1. Visual Studio 2022 ou plus récent (ou tout IDE avec support .NET)
  2. SDK .NET 6.0 ou plus récent

Créez le projet

Créez un nouveau projet ASP.NET Core Web App (Razor Pages). Cela peut être fait via l'assistant de projet de Visual Studio ou à partir de la ligne de commande :

dotnet new webapp -n BarcodeWebApp
dotnet new webapp -n BarcodeWebApp
SHELL

Installer la bibliothèque IronBarcode

Installez la bibliothèque IronBarcode en utilisant la console de gestion des packages NuGet. Naviguez vers Tools > NuGet Package Manager > Package Manager Console dans Visual Studio et exécutez :

Install-Package BarCode

Sinon, installez-le à partir de la ligne de commande avec dotnet add package BarCode. La dernière version est disponible sur le site NuGet.

Frontend

Le frontend se compose d'un formulaire de téléchargement de fichiers et d'une zone d'affichage des résultats. Le formulaire utilise enctype="multipart/form-data" pour gérer les téléchargements de fichiers binaires. Lorsqu'un code-barres est détecté, le résultat apparaît dans une alerte de succès sous l'image téléchargée.

Remplacez le contenu dans le fichier Index.cshtml par ce qui suit :

@page
@model IndexModel
@{
    ViewData["Title"] = "Barcode Scanner";
}

<div class="container mt-4">
    <h1 class="mb-4">Barcode Scanner</h1>

    <div class="card mb-4">
        <div class="card-header"><h5>Upload & Read Barcode</h5></div>
        <div class="card-body">
            <form method="post" asp-page-handler="Upload" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="file" class="form-label">Select a barcode image:</label>
                    <input type="file" class="form-control" id="file"
                           name="UploadedFile" accept="image/*" />
                </div>
                <button type="submit" class="btn btn-primary">Scan Barcode</button>
            </form>

            @if (Model.ImageDataUrl != null)
            {
                <div class="mt-3">
                    <h6>Uploaded Image:</h6>
                    <img src="@Model.ImageDataUrl" alt="Uploaded barcode"
                         style="max-width: 300px;" class="img-thumbnail" />
                </div>
            }

            @if (Model.BarcodeResult != null)
            {
                <div class="alert alert-success mt-3">
                    <strong>Barcode Value:</strong> @Model.BarcodeResult
                </div>
            }

            @if (Model.ErrorMessage != null)
            {
                <div class="alert alert-warning mt-3">@Model.ErrorMessage</div>
            }
        </div>
    </div>
</div>
@page
@model IndexModel
@{
    ViewData["Title"] = "Barcode Scanner";
}

<div class="container mt-4">
    <h1 class="mb-4">Barcode Scanner</h1>

    <div class="card mb-4">
        <div class="card-header"><h5>Upload & Read Barcode</h5></div>
        <div class="card-body">
            <form method="post" asp-page-handler="Upload" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="file" class="form-label">Select a barcode image:</label>
                    <input type="file" class="form-control" id="file"
                           name="UploadedFile" accept="image/*" />
                </div>
                <button type="submit" class="btn btn-primary">Scan Barcode</button>
            </form>

            @if (Model.ImageDataUrl != null)
            {
                <div class="mt-3">
                    <h6>Uploaded Image:</h6>
                    <img src="@Model.ImageDataUrl" alt="Uploaded barcode"
                         style="max-width: 300px;" class="img-thumbnail" />
                </div>
            }

            @if (Model.BarcodeResult != null)
            {
                <div class="alert alert-success mt-3">
                    <strong>Barcode Value:</strong> @Model.BarcodeResult
                </div>
            }

            @if (Model.ErrorMessage != null)
            {
                <div class="alert alert-warning mt-3">@Model.ErrorMessage</div>
            }
        </div>
    </div>
</div>
HTML

La mise en page utilise les classes Bootstrap déjà incluses dans le modèle par défaut ASP.NET Core. Le formulaire soumet à la gestionnaire de page Upload, et des blocs conditionnels affichent l'aperçu de l'image téléchargée, le résultat décodé, ou un message d'erreur.

Exemples de codes-barres d'entrée

Les codes-barres d'exemple suivants peuvent être utilisés pour tester le scanner. Chaque image encode un format et une valeur différents :

ASP.NET Core Barcode Scanner - Sample QR Code input encoding a URL

QR Code encodant "https://ironsoftware.com"

ASP.NET Core Barcode Scanner - Sample Code 128 barcode input

Code 128 encodant "IRONBARCODE-2026"

ASP.NET Core Barcode Scanner - Sample Code 39 barcode input

Code 39 encodant "HELLO123"

Scan de codes-barres avec IronBarcode

La logique côté serveur gère le fichier téléchargé dans la méthode OnPostUploadAsync. Le fichier IFormFile téléchargé est lu dans un tableau d'octets, qui est passé directement à BarcodeReader.Read. Cela évite de sauvegarder des fichiers temporaires et maintient le traitement entièrement en mémoire.

Remplacez le contenu dans Index.cshtml.cs par :

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using IronBarCode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile? UploadedFile { get; set; }

    public string? BarcodeResult { get; set; }
    public string? ErrorMessage { get; set; }
    public string? ImageDataUrl { get; set; }

    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostUploadAsync()
    {
        if (UploadedFile == null || UploadedFile.Length == 0)
        {
            ErrorMessage = "Please select an image file.";
            return Page();
        }

        try
        {
            using var ms = new MemoryStream();
            await UploadedFile.CopyToAsync(ms);
            byte[] imageBytes = ms.ToArray();

            // Store image as base64 for preview display
            string base64 = Convert.ToBase64String(imageBytes);
            ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}";

            // Read barcode from uploaded image bytes
            var results = BarcodeReader.Read(imageBytes);

            if (results != null && results.Count() > 0)
            {
                BarcodeResult = string.Join("\n",
                    results.Select(r => r.Value));
            }
            else
            {
                ErrorMessage = "No barcode detected in the uploaded image.";
            }
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Error processing image: {ex.Message}";
        }

        return Page();
    }
}
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using IronBarCode;

public class IndexModel : PageModel
{
    [BindProperty]
    public IFormFile? UploadedFile { get; set; }

    public string? BarcodeResult { get; set; }
    public string? ErrorMessage { get; set; }
    public string? ImageDataUrl { get; set; }

    public void OnGet()
    {
    }

    public async Task<IActionResult> OnPostUploadAsync()
    {
        if (UploadedFile == null || UploadedFile.Length == 0)
        {
            ErrorMessage = "Please select an image file.";
            return Page();
        }

        try
        {
            using var ms = new MemoryStream();
            await UploadedFile.CopyToAsync(ms);
            byte[] imageBytes = ms.ToArray();

            // Store image as base64 for preview display
            string base64 = Convert.ToBase64String(imageBytes);
            ImageDataUrl = $"data:{UploadedFile.ContentType};base64,{base64}";

            // Read barcode from uploaded image bytes
            var results = BarcodeReader.Read(imageBytes);

            if (results != null && results.Count() > 0)
            {
                BarcodeResult = string.Join("\n",
                    results.Select(r => r.Value));
            }
            else
            {
                ErrorMessage = "No barcode detected in the uploaded image.";
            }
        }
        catch (Exception ex)
        {
            ErrorMessage = $"Error processing image: {ex.Message}";
        }

        return Page();
    }
}
$vbLabelText   $csharpLabel

Les étapes clés dans le code ci-dessus :

  1. Recevez le téléchargement - L'IFormFile est lié via [BindProperty] et reçu dans le gestionnaire POST.
  2. Convertissez en octets - Le fichier est copié dans un MemoryStream et converti en un tableau d'octets. C'est la même approche utilisée dans l'exemple de scanner web, adapté pour l'IFormFile d'ASP.NET Core au lieu des chaînes base64.
  3. Lisez le code-barres - BarcodeReader.Read(imageBytes) traite l'image et retourne tous les codes-barres détectés.
  4. Affichez le résultat - Toutes les valeurs des codes-barres détectés sont jointes et affichées dans l'interface utilisateur.

Le GIF suivant montre le lecteur de code-barres en action, téléchargeant une image de code-barres et affichant le résultat décodé :

ASP.NET Core Barcode Scanner - Demonstration of uploading and reading a barcode

Lecteur de code-barres scannant une image téléchargée dans l'application ASP.NET Core

Traitement de données d'image en base64

Pour les applications qui reçoivent des données d'image sous forme de chaînes base64 (par exemple, des captures de webcam ou canvas JavaScript), la même méthode BarcodeReader.Read fonctionne avec les tableaux d'octets décodés du base64. Ce modèle est courant dans les applications monopage qui envoient des données d'image via AJAX :

public string ReadBarCode(string imageDataBase64)
{
    // Decode the base64 image data
    var splitObject = imageDataBase64.Split(',');
    byte[] imageByteData = Convert.FromBase64String(
        (splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

    // Read barcode directly from byte array
    var results = BarcodeReader.Read(imageByteData);

    return $"{DateTime.Now}: Barcode is ({results.First().Value})";
}
public string ReadBarCode(string imageDataBase64)
{
    // Decode the base64 image data
    var splitObject = imageDataBase64.Split(',');
    byte[] imageByteData = Convert.FromBase64String(
        (splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

    // Read barcode directly from byte array
    var results = BarcodeReader.Read(imageByteData);

    return $"{DateTime.Now}: Barcode is ({results.First().Value})";
}
$vbLabelText   $csharpLabel

Cette approche gère à la fois le base64 brut et les formats de données URI (par exemple, data:image/png;base64,...) en se séparant sur la virgule et en prenant la charge utile base64 réelle. Pour une implémentation Blazor complète utilisant ce modèle, voir le guide d'intégration Blazor.

Génération de codes-barres sur le serveur

IronBarcode peut également générer des codes-barres côté serveur. L'ajout d'un point de terminaison de génération à la même application est simple avec BarcodeWriter.CreateBarcode :

public IActionResult OnPostGenerate()
{
    var barcode = BarcodeWriter.CreateBarcode(
        "https://ironsoftware.com", BarcodeEncoding.QRCode);
    byte[] barcodeBytes = barcode.ToPngBinaryData();

    return File(barcodeBytes, "image/png", "generated-barcode.png");
}
public IActionResult OnPostGenerate()
{
    var barcode = BarcodeWriter.CreateBarcode(
        "https://ironsoftware.com", BarcodeEncoding.QRCode);
    byte[] barcodeBytes = barcode.ToPngBinaryData();

    return File(barcodeBytes, "image/png", "generated-barcode.png");
}
$vbLabelText   $csharpLabel

Le code-barres généré est retourné en tant que téléchargement de fichier. L'image suivante montre la sortie du QR code produit par le gestionnaire OnPostGenerate :

ASP.NET Core Barcode Scanner - Server-generated QR code output

QR code généré côté serveur avec BarcodeWriter.CreateBarcode

Pour plus d'options de génération de codes-barres, voir le tutoriel de génération d'images de code-barres et le guide de style de code-barres.

Exécution de l'application

Exécutez le projet à partir de Visual Studio ou de la ligne de commande :

dotnet run
dotnet run
SHELL

L'application démarre sur le port spécifié dans launchSettings.json (typiquement https://localhost:5001 ou similaire). Naviguez vers la page d'accueil pour voir l'interface du scanner de codes-barres.

Conclusion

Cet article a démontré comment créer un scanner de codes-barres côté serveur en utilisant ASP.NET Core Razor Pages et IronBarcode. La même approche fonctionne avec les contrôleurs ASP.NET Core MVC, les points de terminaison Web API, et les applications Blazor Server en adaptant la manière dont les données d'image sont reçues. IronBarcode gère le traitement des images en interne, donc l'intégration nécessite peu de code quel que soit le framework web.

Pour lire des codes-barres sur d'autres plateformes .NET, voir le tutoriel de scan de codes-barres .NET MAUI et les guides de lecture de codes-barres. Obtenez plus de tutoriels sur IronBarcode depuis le tutoriel de lecture de codes-barres.

To get started quickly, download the complete BarcodeWebApp project and run it with dotnet run.

IronBarcode doit être licencié pour le développement et l'utilisation commerciale. Les détails de la licence sont disponibles ici.

Questions Fréquemment Posées

Comment puis-je implémenter un scanner de codes-barres dans ASP.NET Core en utilisant Razor Pages ?

Vous pouvez utiliser IronBarcode dans votre projet ASP.NET Core Razor Pages pour implémenter un scanner de codes-barres. La bibliothèque vous permet de lire divers formats de codes-barres, tels que des QR Codes, des Code 128 et des Code 39, en téléversant des images et en les traitant avec BarcodeReader.Read.

Quels types de codes-barres peuvent être lus avec IronBarcode ?

IronBarcode prend en charge la lecture de plusieurs formats de codes-barres, y compris les QR Codes, les Code 128 et les Code 39, ce qui le rend polyvalent pour diverses applications.

Comment puis-je téléverser des images pour la lecture de codes-barres dans un projet ASP.NET Core ?

Dans un projet ASP.NET Core, vous pouvez téléverser des images en utilisant IFormFile. IronBarcode traite ces images pour lire les codes-barres qu'elles contiennent.

IronBarcode peut-il générer des codes-barres côté serveur dans ASP.NET Core ?

Oui, IronBarcode peut générer des codes-barres côté serveur dans ASP.NET Core en utilisant la méthode BarcodeWriter.CreateBarcode, vous permettant de créer et afficher dynamiquement des codes-barres.

À quoi sert la méthode BarcodeReader.Read ?

La méthode BarcodeReader.Read dans IronBarcode est utilisée pour décoder les codes-barres à partir d'images, ce qui en fait une partie essentielle de l'implémentation d'un scanner de codes-barres dans ASP.NET Core.

Est-il possible de scanner à la fois des QR Codes et des codes-barres en utilisant la même bibliothèque dans ASP.NET Core ?

Oui, IronBarcode vous permet de scanner à la fois des QR Codes et divers autres formats de codes-barres dans la même application ASP.NET Core, offrant une solution unifiée.

Quels sont les avantages d'utiliser IronBarcode pour la lecture de codes-barres en C# ?

IronBarcode offre une intégration facile, une prise en charge de plusieurs formats de codes-barres, et des capacités robustes de génération de codes-barres côté serveur, ce qui en fait un choix efficace pour la lecture de codes-barres dans des applications C#.

Curtis Chau
Curtis Chau
  Discutez maintenant avec l'équipe d'ingénierie
Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Lire la suite
Prêt à commencer?
Nuget Téléchargements 2,108,094 | Version : 2026.3 vient de sortir
Still Scrolling Icon

Vous faites encore défiler ?

Vous voulez une preuve rapidement ? PM > Install-Package BarCode
exécuter un échantillon regarder votre chaîne devenir un code-barres.