ASP.NET Core BarCode-Scanner

Updated: 2. März 2026

Einführung

ASP.NET Core ist ein plattformübergreifendes Framework zum Erstellen moderner Webanwendungen. Sein Razor Pages-Modell bietet einen seitenbasierten Ansatz zur Verarbeitung von HTTP-Anfragen, was es gut für die serverseitige Barcode-Verarbeitung geeignet macht. Mit IronBarcode können hochgeladene Bilder als IFormFile-Objekte empfangen, in Byte-Arrays konvertiert und direkt an den Barcode-Leser übergeben werden, ohne temporäre Dateien auf die Festplatte zu schreiben.

Dieser Artikel beschreibt die Integration von IronBarcode in eine ASP.NET Core Razor Pages-Anwendung, um Barcodes und QR-Codes von hochgeladenen Bildern zu scannen und Barcodes vom Server zu generieren.

Wie man Barcodes in ASP.NET Core lesen und scannen kann

Installieren Sie die C#-Bibliothek, um Barcodes zu lesen und zu scannen
Erstellen Sie ein neues ASP.NET Core Razor Pages-Projekt
Entwerfen Sie das Datei-Upload-Formular, um Barcode-Bilder zu akzeptieren
Verwenden Sie die Read-Methode, um das hochgeladene Bild nach Barcodes zu scannen
Zeigen Sie den entschlüsselten Barcode-Wert auf der Seite an

IronBarcode: C# Barcode Library

IronBarcode bietet eine robuste API zum Lesen und Schreiben von Barcodes in .NET-Anwendungen. Die Bibliothek verarbeitet die Bilder intern, sodass Entwickler rohe Bytes, Dateipfade oder Streams direkt an die BarcodeReader.Read-Methode übergeben können, ohne separate Bildverarbeitungsbibliotheken zu benötigen. Es unterstützt eine Vielzahl von Barcode-Formaten, einschließlich QR Code, Code 128, Code 39, PDF417, EAN und vielen anderen.

Für Webanwendungen ist IronBarcode besonders nützlich, da es Bilder vollständig im Speicher verarbeitet. Hochgeladene Dateien müssen nie auf der Festplatte gespeichert werden, was die Bereitstellung vereinfacht und den Aufräumaufwand reduziert. Die gleiche Bibliothek erzeugt auch Barcodes mit BarcodeWriter.CreateBarcode, was sie zu einer einzigen Abhängigkeit sowohl für das Lesen als auch für das Schreiben macht.

Schritte zum Erstellen eines Barcode-Scanners in ASP.NET Core

Befolgen Sie diese Schritte, um einen webbasierten Barcode-Scanner mit ASP.NET Core Razor Pages und IronBarcode zu erstellen.

Voraussetzungen

Visual Studio 2022 oder später (oder jede IDE mit .NET-Unterstützung)
.NET 6.0 oder später SDK

Erstellen Sie das Projekt

Erstellen Sie ein neues ASP.NET Core Web App (Razor Pages) Projekt. Dies kann über den Projektassistenten von Visual Studio oder über die Befehlszeile geschehen:

dotnet new webapp -n BarcodeWebApp

dotnet new webapp -n BarcodeWebApp

SHELL

IronBarcode-Bibliothek installieren

Installieren Sie die IronBarcode-Bibliothek mit der NuGet-Paket-Manager-Konsole. Navigieren Sie zu Tools > NuGet Package Manager > Package Manager Console in Visual Studio und führen Sie Folgendes aus:

PM > Install-Package BarCode

Install-Package BarCode

Alternativ installieren Sie es über die Befehlszeile mit dotnet add package BarCode. Die neueste Version ist auf der NuGet-Website verfügbar.

Frontend

Das Frontend besteht aus einem Datei-Upload-Formular und einem Ergebnis-Anzeigebereich. Das Formular verwendet enctype="multipart/form-data", um den Upload binärer Dateien zu handhaben. Wenn ein Barcode erkannt wird, erscheint das Ergebnis in einem Erfolgs-Alert unter dem hochgeladenen Bild.

Ersetzen Sie den Inhalt der Index.cshtml Datei durch Folgendes:

@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

Das Layout verwendet Bootstrap-Klassen, die bereits in der standardmäßigen ASP.NET Core-Vorlage enthalten sind. Das Formular wird an den Upload-Seitenhandler übermittelt, und bedingte Blöcke zeigen die hochgeladene Bildvorschau, das dekodierte Ergebnis oder eine Fehlermeldung an.

Beispiel-Input-Barcodes

Die folgenden Beispielbarcodes können verwendet werden, um den Scanner zu testen. Jedes Bild codiert ein anderes Format und einen anderen Wert:

ASP.NET Core Barcode-Scanner – Beispiel-QR-Code als Eingabe, der eine URL codiert

QR-Code kodiert "https://ironsoftware.com"

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

Code 128 Barcode kodiert "IronBarcode-2026"

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

Code 39 Barcode kodiert "HELLO123"

Barcode-Scannen mit IronBarcode

Die serverseitige Logik verarbeitet die hochgeladene Datei in der OnPostUploadAsync-Methode. Der hochgeladene IFormFile wird in ein Byte-Array eingelesen, das direkt an BarcodeReader.Read übergeben wird. Dies vermeidet das Speichern temporärer Dateien und hält die Verarbeitung vollständig im Speicher.

Ersetzen Sie den Inhalt in Index.cshtml.cs mit:

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

Imports Microsoft.AspNetCore.Mvc
Imports Microsoft.AspNetCore.Mvc.RazorPages
Imports IronBarCode
Imports System.IO
Imports System.Threading.Tasks

Public Class IndexModel
    Inherits PageModel

    <BindProperty>
    Public Property UploadedFile As IFormFile

    Public Property BarcodeResult As String
    Public Property ErrorMessage As String
    Public Property ImageDataUrl As String

    Public Sub OnGet()
    End Sub

    Public Async Function OnPostUploadAsync() As Task(Of IActionResult)
        If UploadedFile Is Nothing OrElse UploadedFile.Length = 0 Then
            ErrorMessage = "Please select an image file."
            Return Page()
        End If

        Try
            Using ms As New MemoryStream()
                Await UploadedFile.CopyToAsync(ms)
                Dim imageBytes As Byte() = ms.ToArray()

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

                ' Read barcode from uploaded image bytes
                Dim results = BarcodeReader.Read(imageBytes)

                If results IsNot Nothing AndAlso results.Count() > 0 Then
                    BarcodeResult = String.Join(vbLf, results.Select(Function(r) r.Value))
                Else
                    ErrorMessage = "No barcode detected in the uploaded image."
                End If
            End Using
        Catch ex As Exception
            ErrorMessage = $"Error processing image: {ex.Message}"
        End Try

        Return Page()
    End Function
End Class

Imports Microsoft.AspNetCore.Mvc
Imports Microsoft.AspNetCore.Mvc.RazorPages
Imports IronBarCode
Imports System.IO
Imports System.Threading.Tasks

Public Class IndexModel
    Inherits PageModel

    <BindProperty>
    Public Property UploadedFile As IFormFile

    Public Property BarcodeResult As String
    Public Property ErrorMessage As String
    Public Property ImageDataUrl As String

    Public Sub OnGet()
    End Sub

    Public Async Function OnPostUploadAsync() As Task(Of IActionResult)
        If UploadedFile Is Nothing OrElse UploadedFile.Length = 0 Then
            ErrorMessage = "Please select an image file."
            Return Page()
        End If

        Try
            Using ms As New MemoryStream()
                Await UploadedFile.CopyToAsync(ms)
                Dim imageBytes As Byte() = ms.ToArray()

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

                ' Read barcode from uploaded image bytes
                Dim results = BarcodeReader.Read(imageBytes)

                If results IsNot Nothing AndAlso results.Count() > 0 Then
                    BarcodeResult = String.Join(vbLf, results.Select(Function(r) r.Value))
                Else
                    ErrorMessage = "No barcode detected in the uploaded image."
                End If
            End Using
        Catch ex As Exception
            ErrorMessage = $"Error processing image: {ex.Message}"
        End Try

        Return Page()
    End Function
End Class

Die Schlüsselschritte im obigen Code:

Upload empfangen - Der IFormFile wird über [BindProperty] gebunden und im POST-Handler empfangen.
In Bytes umwandeln - Die Datei wird in einen MemoryStream kopiert und in ein Byte-Array umgewandelt. Dies ist derselbe Ansatz, der im Webscanner-Beispiel verwendet wird, jedoch für ASP.NET Core's IFormFile anstelle von Base64-Strings angepasst.
Den Barcode lesen - BarcodeReader.Read(imageBytes) verarbeitet das Bild und gibt alle erkannten Barcodes zurück.
Ergebnis anzeigen - Alle erkannten Barcode-Werte werden zusammengefügt und in der Benutzeroberfläche angezeigt.

Das folgende GIF zeigt den Barcode-Leser in Aktion, wie ein Barcode-Bild hochgeladen und das entschlüsselte Ergebnis angezeigt wird:

ASP.NET Core Barcode-Scanner – Demonstration des Hochladens und Lesens eines Barcodes

Barcode-Leser scannt ein hochgeladenes Bild in der ASP.NET Core-Anwendung

Verarbeitung von Base64-Bilddaten

Für Anwendungen, die Bilddaten als Base64-Strings erhalten (z.B. aus Webcam-Aufnahmen oder JavaScript-Canvas), funktioniert die gleiche BarcodeReader.Read-Methode mit Byte-Arrays, die aus Base64 dekodiert wurden. Dieses Muster ist in Single-Page-Applikationen üblich, die Bilddaten via AJAX senden:

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

Public Function ReadBarCode(imageDataBase64 As String) As String
    ' Decode the base64 image data
    Dim splitObject = imageDataBase64.Split(","c)
    Dim imageByteData As Byte() = Convert.FromBase64String(
        If(splitObject.Length > 1, splitObject(1), splitObject(0)))

    ' Read barcode directly from byte array
    Dim results = BarcodeReader.Read(imageByteData)

    Return $"{DateTime.Now}: Barcode is ({results.First().Value})"
End Function

Public Function ReadBarCode(imageDataBase64 As String) As String
    ' Decode the base64 image data
    Dim splitObject = imageDataBase64.Split(","c)
    Dim imageByteData As Byte() = Convert.FromBase64String(
        If(splitObject.Length > 1, splitObject(1), splitObject(0)))

    ' Read barcode directly from byte array
    Dim results = BarcodeReader.Read(imageByteData)

    Return $"{DateTime.Now}: Barcode is ({results.First().Value})"
End Function

Dieser Ansatz verarbeitet sowohl rohe Base64- als auch Data-URI-Formate (z.B. data:image/png;base64,...), indem er an dem Komma aufteilt und nur die tatsächliche Base64-Nutzlast nimmt. Für eine vollständige Blazor-Implementierung, die dieses Muster verwendet, siehe den Blazor-Integrationsleitfaden.

Erstellen von Barcodes auf dem Server

IronBarcode kann auch serverseitig Barcodes generieren. Das Hinzufügen eines Generierungsendpunkts zu derselben Anwendung ist mit BarcodeWriter.CreateBarcode unkompliziert:

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

Public Function OnPostGenerate() As IActionResult
    Dim barcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com", BarcodeEncoding.QRCode)
    Dim barcodeBytes As Byte() = barcode.ToPngBinaryData()

    Return File(barcodeBytes, "image/png", "generated-barcode.png")
End Function

Public Function OnPostGenerate() As IActionResult
    Dim barcode = BarcodeWriter.CreateBarcode("https://ironsoftware.com", BarcodeEncoding.QRCode)
    Dim barcodeBytes As Byte() = barcode.ToPngBinaryData()

    Return File(barcodeBytes, "image/png", "generated-barcode.png")
End Function

Der generierte Barcode wird als Dateidownload zurückgegeben. Das folgende Bild zeigt die QR-Code-Ausgabe, die vom OnPostGenerate-Handler erzeugt wurde:

ASP.NET Core Barcode-Scanner – servergenerierte QR-Code-Ausgabe

QR-Code serverseitig mit BarcodeWriter.CreateBarcode generiert

Weitere Optionen zur Barcode-Erstellung finden Sie im Barcode-Bilderzeugungs-Tutorial und im Barcode-Styling-Leitfaden.

Ausführung der Anwendung

Führen Sie das Projekt von Visual Studio oder der Befehlszeile aus:

dotnet run

dotnet run

SHELL

Die Anwendung startet auf dem in launchSettings.json angegebenen Port (typischerweise https://localhost:5001 oder ähnlich). Navigieren Sie zur Startseite, um die Barcode-Scanner-Schnittstelle zu sehen.

Abschluss

Dieser Artikel zeigte, wie man einen serverseitigen Barcode-Scanner mit ASP.NET Core Razor Pages und IronBarcode erstellt. Der gleiche Ansatz funktioniert mit ASP.NET Core MVC-Controllern, Web-API-Endpunkten und Blazor-Serveranwendungen, indem angepasst wird, wie die Bilddaten empfangen werden. IronBarcode verarbeitet die Bildverarbeitung intern, sodass die Integration unabhängig von der Webplattform minimalen Code erfordert.

Zum Lesen von Barcodes auf anderen .NET-Plattformen siehe das .NET MAUI Barcode-Scanner-Tutorial und die Barcode-Lesetipps. Mehr Tutorials zu IronBarcode finden Sie im Barcode-Lese-Tutorial.

Um schnell loszulegen, laden Sie das komplette BarcodeWebApp-Projekt herunter und führen Sie es mit dotnet run aus.

IronBarcode muss für die Entwicklung und kommerzielle Nutzung lizenziert sein. Lizenzdetails sind hier verfügbar.

Häufig gestellte Fragen

Wie kann ich einen Barcode-Scanner in ASP.NET Core mit Razor Pages umsetzen?

Sie können IronBarcode in Ihr ASP.NET Core Razor Pages-Projekt integrieren, um einen Barcode-Scanner zu implementieren. Die Bibliothek ermöglicht es Ihnen, verschiedene Barcode-Formate wie QR-Codes, Code 128 und Code 39 durch Hochladen und Verarbeiten von Bildern mit BarcodeReader.Read zu lesen.

Welche Arten von Barcodes können mit IronBarcode gelesen werden?

IronBarcode unterstützt das Lesen mehrerer Barcode-Formate, darunter QR-Codes, Code 128 und Code 39, was es vielseitig für verschiedene Anwendungen macht.

Wie lade ich Bilder für das Barcode-Scanning in einem ASP.NET Core-Projekt hoch?

In einem ASP.NET Core-Projekt können Sie Bilder mit IFormFile hochladen. IronBarcode verarbeitet diese Bilder, um die darin enthaltenen Barcodes zu lesen.

Kann IronBarcode Barcodes serverseitig in ASP.NET Core erzeugen?

Ja, IronBarcode kann Barcodes serverseitig in ASP.NET Core mit der BarcodeWriter.CreateBarcode-Methode erzeugen, sodass Sie Barcodes dynamisch erstellen und anzeigen können.

Wofür wird die BarcodeReader.Read-Methode verwendet?

Die BarcodeReader.Read-Methode in IronBarcode wird verwendet, um Barcodes aus Bildern zu dekodieren, was sie zu einem wichtigen Bestandteil der Implementierung eines Barcode-Scanners in ASP.NET Core macht.

Ist es möglich, sowohl QR-Codes als auch Barcodes mit derselben Bibliothek in ASP.NET Core zu scannen?

Ja, IronBarcode ermöglicht es Ihnen, sowohl QR-Codes als auch verschiedene andere Barcode-Formate innerhalb derselben ASP.NET Core-Anwendung zu scannen, was eine einheitliche Lösung bietet.

Welche Vorteile bietet die Verwendung von IronBarcode für das Barcode-Scanning in C#?

IronBarcode bietet eine einfache Integration, unterstützt mehrere Barcode-Formate und bietet robuste serverseitige Barcode-Erzeugungsfähigkeiten, was es zu einer effizienten Wahl für das Barcode-Scanning in C#-Anwendungen macht.

What method does IronBarcode provide to read barcodes from byte arrays?

IronBarcode provides the BarcodeReader.Read method to process images and read barcodes directly from byte arrays.

Curtis Chau

Jetzt mit dem Ingenieurteam chatten

Technischer Autor

Curtis Chau hat einen Bachelor-Abschluss in Informatik von der Carleton University und ist spezialisiert auf Frontend-Entwicklung mit Expertise in Node.js, TypeScript, JavaScript und React. Leidenschaftlich widmet er sich der Erstellung intuitiver und ästhetisch ansprechender Benutzerschnittstellen und arbeitet gerne mit modernen Frameworks sowie der Erstellung gut strukturierter, optisch ansprechender Handbücher.

...