ASP.NET Core Barcode Scanner

先決條件

1. Visual Studio 2022 or later (or any IDE with .NET support)
2. .NET 6.0 or later SDK

Create the Project

Create a new ASP.NET Core Web App (Razor Pages) project. This can be done through Visual Studio's project wizard or from the command line:

dotnet new webapp -n BarcodeWebApp

dotnet new webapp -n BarcodeWebApp

安裝 IronBarcode 庫

Install the IronBarcode library using the NuGet Package Manager Console. Navigate to Tools > NuGet Package Manager > Package Manager Console in Visual Studio and run:

Install-Package BarCode

Alternatively, install it from the command line with dotnet add package BarCode. The latest version is available on the NuGet website.

Frontend

The frontend consists of a file upload form and a result display area. The form uses enctype="multipart/form-data" to handle binary file uploads. When a barcode is detected, the result appears in a success alert below the uploaded image.

Replace the content in the Index.cshtml file with the following:

@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

The layout uses Bootstrap classes already included in the default ASP.NET Core template. The form submits to the Upload page handler, and conditional blocks display the uploaded image preview, the decoded result, or an error message.

Sample Input Barcodes

The following sample barcodes can be used to test the scanner. Each image encodes a different format and value:

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

Code 128 barcode encoding "IRONBARCODE-2026"

Code 39 barcode encoding "HELLO123"

Barcode Scanning with IronBarcode

The server-side logic handles the uploaded file in the OnPostUploadAsync method. The uploaded IFormFile is read into a byte array, which is passed directly to BarcodeReader.Read. This avoids saving temporary files and keeps the processing entirely in memory.

Replace the content in Index.cshtml.cs with:

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

The key steps in the code above:

1. Receive the upload - The IFormFile is bound via [BindProperty] and received in the POST handler.
2. Convert to bytes - The file is copied to a MemoryStream and converted to a byte array. This is the same approach used in the web scanner example, adapted for ASP.NET Core's IFormFile instead of base64 strings.
3. Read the barcode - BarcodeReader.Read(imageBytes) processes the image and returns all detected barcodes.
4. Display the result - All detected barcode values are joined and displayed in the UI.

The following GIF demonstrates the barcode reader in action, uploading a barcode image and displaying the decoded result:

Barcode reader scanning an uploaded image in the ASP.NET Core application

Processing Base64 Image Data

For applications that receive image data as base64 strings (e.g., from webcam captures or JavaScript canvas), the same BarcodeReader.Read method works with byte arrays decoded from base64. This pattern is common in single-page applications that send image data 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})";
}

This approach handles both raw base64 and data URI formats (e.g., data:image/png;base64,...) by splitting on the comma and taking the actual base64 payload. For a complete Blazor implementation using this pattern, see the Blazor integration guide.

Generating Barcodes on the Server

IronBarcode can also generate barcodes server-side. Adding a generation endpoint to the same application is straightforward with 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");
}

The generated barcode is returned as a file download. The following image shows the QR code output produced by the OnPostGenerate handler:

QR code generated server-side with BarcodeWriter.CreateBarcode

For more barcode generation options, see the barcode image generation tutorial and the barcode styling guide.

運行應用程式

Run the project from Visual Studio or the command line:

dotnet run

dotnet run

The application starts on the port specified in launchSettings.json (typically https://localhost:5001 or similar). Navigate to the home page to see the barcode scanner interface.