How to scan, read barcodes using C# in ASP.NET Core, MVC web applications?

KA Barcode Reader for C# Library

How to read barcodes in C# ASP.NET Core, MVC, web apps?

Using barcode reader library to scan, recognize 1D and 2D Barcode Images in C# for ASP.NET Core/Framework web Application

Barcode Reader for C#.NET > Scan, read, recognize barcode image in C#

Easy to scan, read 20+ linear and 2d barcode from images using C# in ASP.NET Core, ASP.NET Framework, Razor pages, MVC, Blazor, ASP.NET web service, web applications
Support read and decode barcode with special data formats, such as GS1 data message, Unicode characters
Advanced barcode read, scan options, such as image regions scanning, rotated barcodes, multiple/bulk barcodes reading
Highly optimized algorithems to scan imperfect barcode images

How to scan, read barcodes using C# in a new ASP.NET Core web app?

The content below will show you how to create a new ASP.NET Core web app, add online barcode reading features in the ASP.NET web app using C# coding.

Create a new ASP.NET Core web app
Install barcode reader library and NuGet package
Add C# code to support online barcode reader function in web browser
Run the web app

Step 1: Create a new ASP.NET Core web app

Start Visual Studio 2022 and choose "Create a new project".

Choose "ASP.NET Core Web App" in the dialog, and then press "Next" button.

Create a new web project with name KeepAutomation.BarcodeReader.ASPNETCoreWebAppDemo

Choose .NET 6.0 (Long-term support), and then press "Create"

Now, all auto-generated files for ASP.NET Core barcode reader demo project could be found in the solution explorer.

Open the file "Program.cs" and make sure that it has enabled following Middlewares.

Step 2: KeepAutomation Barcode Reader for C# dll and NuGet package

Add C# Barcode Reader library for ASP.NET Core DLL reference KeepAutomation.BarcodeReader.Standard.dll from downloaded package {Downloaded package}/Dll/netstandard/

Right-click "Dependencies" in the Solution Explorer, and choose "Manage NuGet Packages".

Choose Browse and use the search control to find System.Drawing.Common from the package source "nugget.org".

Choose the version 6.0.0 or later to install the package.

Check "Packages" in the Solution Explorer to ensure the installation is success.

Step 3: Add C# code to scan, read barcodes in ASP.NET Core web page

Add the C# source code below in the file "Index.cshtml".

@page
@model IndexModel
@{
    ViewData["Title"] = "Scan Barcodes from image file online";
}

<div class="text-center">
    <form enctype="multipart/form-data" method="post">
        <input asp-for="@Model.FormFile" type="file" style="width:300px; "
               onchange="document.getElementById('Submit').removeAttribute('disabled')" />
        &nbsp;&nbsp;
        Barcode Type:
        <select name="BarcodeType">
            @for (var i = 0; i < Model.BarcodeTypes.Length; i++)
            {
                @if (i == @Model.SelectedType)
                {
                    <option value="@i" selected>@Model.BarcodeTypes[i]</option>
                }
                else
                {
                    <option value="@i">@Model.BarcodeTypes[i]</option>
                }
            }
        </select>
        <br /><br />
        <input id="Submit" type="submit" value="Scan Barcodes" disabled />
    </form>
    <br />
    <table name="ScanResult" class="table-bordered" style="width:40%; " align="center">
        <thead>
            <tr>
                <td colspan="2">Scan Result</td>
            </tr>
        </thead>
        <tbody>
            @if (Model.ResultCount >= 0)
            {
                <tr>
                    <td colspan="2" align="left">
                        Barcodes found:&nbsp;&nbsp;@Model.ResultCount
                    </td>
                </tr>
            }
            @for (var i = 0; i < Model.ResultCount; i++)
            {
                var idx = i + 1;
                var msg = Model.Results[i];
                <tr>
                    <td style="width:10%;">@idx:</td>
                    <td align="left">'@msg'</td>
                </tr>
            }
        </tbody>
    </table>
</div>

Add the C# source code below in the file "Index.cshtml.cs".

using KeepAutomation.BarcodeReader;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace KeepAutomation.BarcodeReader.ASPNETCoreWebAppDemo.Pages
{
    public class IndexModel : PageModel
    {
        public int SelectedType { get; set; } = 5;
        public String[] BarcodeTypes { get; set; } = new String[] {
            "Codabar", "Code39", "Code39Ex", 
            "Code128", "EAN8", "EAN13",  "Interleaved25", 
             "UPCA", "UPCE", "DataMatrix", "PDF417", "QRCode"

        };
        public IFormFile? FormFile { get; set; }
        public int ResultCount { get; set; } = -1;
        public String[] Results { get; set; } = new String[0];

        public void OnGet()
        {
        }

        public Task<IActionResult> OnPost()
        {
            this.SelectedType = Int32.Parse(this.Request.Form["BarcodeType"]);

            if (this.FormFile != null)
            {
                var file = this.Request.Form.Files[0];
                using (MemoryStream ms = new MemoryStream())
                {
                    file.CopyTo(ms);

                    String[] result = BarcodeReader.readBarcodeMessage(ms, (BarcodeType)this.SelectedType);

                    
                    if (result != null)
                    {
                        this.ResultCount = result.Length;
                        this.Results = result;
                    }
                    else
                        this.ResultCount = 0;
                }
            }

            return Task.FromResult<IActionResult>(Page());
        }
    }
}

Step 4: Run barcode reader for ASP.NET Core web app

It is done. Now press "Ctrl+F5" to run the web project.

It launches the Kestrel server and opens the default browser. Use "Choose File" button to browse and add an image file with barcode(s).

Then, press "Scan Image" button to submit the form to server.

And all barcodes found in the image would be shown in a table as below.

Now we have created a new ASP.NET Core web app with online barcode reading enabled using C# codes.