VintaSoft Barcode .NET SDK 15.0: Documentation for Web developer
In This Topic
    Recognize barcodes in image in ASP.NET Core application
    In This Topic
    This tutorial shows how to create a blank ASP.NET Core Web application in Visual Studio .NET 2022 and recognize barcodes in image in ASP.NET Core application.

    Here are steps, which must be done:
    1. Create a blank ASP.NET Core Web application.

      Open Visual Studio .NET 2022 and create a new project, of ASP.NET Core Web application type:

      Configure the project to use .NET 8.0:

    2. Server side: Add references to the Vintasoft assemblies to ASP.NET Core Web application.

      Add references to the Vintasoft.Barcode.dll, Vintasoft.Barcode.SkiaSharp.dll, Vintasoft.Shared.dll, Vintasoft.Shared.Web.dll, Vintasoft.Barcode.Web.Services.dll and Vintasoft.Barcode.AspNetCore.ApiControllers.dll assemblies from "<InstallPath>\VintaSoft Barcode .NET v15.0\Bin\DotNet8\AnyCPU\" folder in ASP.NET Core Web application.

    3. Server side: Add Web API controller that allows to recognizes barcodes in image.

      • Add the "Controllers" folder to the project.
      • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
      • Select Empty API controller template, set the controller name to the "MyVintasoftBarcodeApiController" and press the "Add" button
      • Specify that MyVintasoftBarcodeApiController class is derived from Vintasoft.Barcode.AspNetCore.ApiControllers.VintasoftBarcodeApiController class

        Here are source codes of MyVintasoftBarcodeApiController class:
        using Microsoft.AspNetCore.Hosting;
        using Microsoft.AspNetCore.Mvc;
        using Vintasoft.Barcode.AspNetCore.ApiControllers;
        namespace WebApplication1.Controllers
            public class MyVintasoftBarcodeApiController : VintasoftBarcodeApiController
                public MyVintasoftBarcodeApiController(IWebHostEnvironment hostingEnvironment)
                    : base(hostingEnvironment)
    4. Server side: Add Newtonsoft JSON for deserialization of barcode recognition results.

      • Add reference to the Microsoft.AspNetCore.Mvc.NewtonsoftJson nuget-package:
    5. Server side: Create MVC controller for web view that will display barcode recognition result.

      • Press the right mouse button on the "Controllers" folder and select the "Add => Controller..." menu from context menu
      • Select "MVC Controller - Empty" template, set the controller name to the "HomeController" and press the "Add" button
      • Open "Program.cs" file, add controllers with views and Newtonsoft.Json formatters to the services of ASP.NET Core application:

        Add created MVC controller to the endpoints of ASP.NET Core application:

        Here are C# source codes of Program.cs file:
        var builder = WebApplication.CreateBuilder(args);
        // Add services to the container.
        var app = builder.Build();
        app.UseEndpoints(endpoints =>
            endpoints.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");
    6. Client side: Create web view for displaying barcode recognition result.

      • Open "HomeController.cs" file, press the right mouse button on the "Index" method of HomeController class and select the "Add View..." menu from context menu
      • Select "Razor View - Empty" template, press the "Add" button, Set view name to "Index" and press the "Add" button => "Views\Home\Index.cshtml" file will be created
    7. Client side: Add Vintasoft JavaScript files to the project.

      • Add the "wwwroot\Scripts\" folder to ASP.NET Core application.

      • Copy Vintasoft.Shared.js and Vintasoft.Barcode.js files from "<InstallPath>\VintaSoft Barcode .NET v15.0\Bin\JavaScript\" folder into "wwwroot\Scripts\" folder.
    8. Client side: Add JavaScript code, which recognizes barcode in image and displays barcode recognition result, to the web view.

      • Create folder "wwwroot\UploadedImageFiles\SessionID" and copy image file with barcodes "<InstallPath>VintaSoft\Barcode .NET v15.0\Images\AllSupportedBarcodes.png" to the folder. We will recognize barcodes in this image.
      • Open web view - file "Views\Home\Index.cshtml".
      • Add base code:

        Here is base HTML code:
            Layout = null;
            <meta name="viewport" content="width=device-width" />
            <title>ASP.NET Core Barcode Generator Demo</title>
      • Add references to Vintasoft JavaScript files:

        Here is HTML code that adds references to Vintasoft JavaScript files:
        <script src="~/Scripts/Vintasoft.Shared.js" type="text/javascript"></script>
        <script src="~/Scripts/Vintasoft.Barcode.js" type="text/javascript"></script>
      • Add HTML markup (a div element that will display barcode recogntion result) to the web view:

        Here is HTML markup code:
        <div id="barcodeInformation"></div>
      • Add JavaScript code that recognizes barcode in image and displays barcode recognition result:

        Here is JavaScript code that recognizes barcode in image and displays barcode recognition result:
        <script type="text/javascript">
             * Barcodes are recognized successfully.
            function __readBarcodes_success(data) {
                if (data.success) {
                    // get the barcode recognition result
                    var barcodeRecognitionResults = data.results;
                    var htmlMarkup = '';
                    // if no barcodes found
                    if (barcodeRecognitionResults.length == 0) {
                        htmlMarkup = 'No barcodes found.';
                    // if barcodes are found
                    else {
                        htmlMarkup = barcodeRecognitionResults.length.toString() + ' barcodes are found.<br />';
                        htmlMarkup += '<br />';
                        // for each recognized barcode
                        for (var i = 0; i < barcodeRecognitionResults.length; i++) {
                            // get the barcode recognition result
                            var barcodeRecognitionResult = barcodeRecognitionResults[i];
                            // output information about recognized barcode
                            htmlMarkup += '[' + (i + 1) + ':' + barcodeRecognitionResult.barcodeType + ']<br />';
                            htmlMarkup += '  Value: ' + barcodeRecognitionResult.value + '<br />';
                            htmlMarkup += '  Confidence: ' + barcodeRecognitionResult.confidence + '<br />';
                            htmlMarkup += '  Reading quality: ' + barcodeRecognitionResult.readingQuality.toFixed(2) + '<br />';
                            htmlMarkup += '  Threshold: ' + barcodeRecognitionResult.threshold + '<br />';
                            htmlMarkup += '  Region: ' +
                                'LT=(' + barcodeRecognitionResult.region.leftTop.x + ',' + barcodeRecognitionResult.region.leftTop.y + '); ' +
                                'RT=(' + barcodeRecognitionResult.region.rightTop.x + ',' + barcodeRecognitionResult.region.rightTop.y + '); ' +
                                'LB=(' + barcodeRecognitionResult.region.leftBottom.x + ',' + barcodeRecognitionResult.region.leftBottom.y + '); ' +
                                'RB=(' + barcodeRecognitionResult.region.rightBottom.x + ',' + barcodeRecognitionResult.region.rightBottom.y + '); ' +
                                'Angle=' + barcodeRecognitionResult.region.angle.toFixed(1) + '°<br />';
                            htmlMarkup += '<br />';
                    var barcodeInformationElement = document.getElementById("barcodeInformation");
                    barcodeInformationElement.innerHTML = htmlMarkup;
             * Barcode recognition is failed.
            function __readBarcodes_fail(data) {
                // show information about error
            // set the session identifier
            // create service that allows to recognize barcodes
            var barcodeService = new Vintasoft.Shared.WebServiceControllerJS("vintasoft/api/MyVintasoftBarcodeApi");
            // create the barcode reader
            var barcodeReader = new Vintasoft.Barcode.WebBarcodeReaderJS(barcodeService);
            // specify that Code39 barcode must be searched
            barcodeReader.get_Settings().set_BarcodeType(new Vintasoft.Barcode.WebBarcodeTypeEnumJS("Code39"));
            // create web image that references to a file "AllSupportedBarcodes.png" in directory "/UploadedImageFiles/SessionID/"
            var imageSource = new Vintasoft.Shared.WebImageSourceJS("AllSupportedBarcodes.png");
            var image = new Vintasoft.Shared.WebImageJS(imageSource, 0);
            // send an asynchronous request for barcode recognition
            barcodeReader.readBarcodes(image, this.__readBarcodes_success, this.__readBarcodes_fail);
      • Delete "Pages" folder.
    9. Run the ASP.NET Core application and see the result.