VintaSoft Barcode .NET SDK 12.5 for Web
In This Topic
    Recognize barcodes 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 2019 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 2019 and create a new project, of ASP.NET Core Web application type:
      Open Visual Studio .NET 2019 and create a new project, of ASP.NET Core Web Application type
      Select the "None" template for ASP.NET Core Web application and configure the project to use ASP.NET Core 3.1:
      Select the 'Empty' template for ASP.NET Core Web Application and configure the project to use ASP.NET Core 3.1
    2. Server side: Add references to the Vintasoft assemblies to ASP.NET Core Web application.

      Add references to the Vintasoft.Barcode.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 v12.5\Bin\DotNetCore3\AnyCPU\" folder in ASP.NET Core Web application.

      Add references to the Vintasoft assemblies
    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 'Add => Controller' context menu for 'Controllers' folder
      • Select Empty API controller template, set the controller name to the "MyVintasoftBarcodeApiController" and press the "Add" button
        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
        Source codes of Barcode API controller
        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:
        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 'Add => Controller' context menu for 'Controllers' folder
      • Select "MVC Controller - Empty" template, set the controller name to the "DefaultController" and press the "Add" button
        ASP.NET Core controller settings
      • Open "Startup.cs" file, add controllers with views and Newtonsoft.Json formatters to the services of ASP.NET Core application:
        Controllers in Startup.cs file
        Add created MVC controller to the endpoints of ASP.NET Core application:
        Endpoints in Startup.cs file
        Here are C# source codes of Startup.cs file:
        using Microsoft.AspNetCore.Builder;
        using Microsoft.AspNetCore.Hosting;
        using Microsoft.Extensions.DependencyInjection;
        using Microsoft.Extensions.Hosting;
        
        namespace WebApplication1
        {
            public class Startup
            {
                // This method gets called by the runtime. Use this method to add services to the container.
                // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
                public void ConfigureServices(IServiceCollection services)
                {
                    services.AddControllersWithViews().AddNewtonsoftJson();
                }
        
                // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
                public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
                {
                    if (env.IsDevelopment())
                    {
                        app.UseDeveloperExceptionPage();
                    }
        
                    app.UseStaticFiles();
                    app.UseRouting();
        
                    app.UseEndpoints(endpoints =>
                    {
                        endpoints.MapControllerRoute("default", "{controller=Default}/{action=Index}/{id?}");
                    });
                }
            }
        }
        
    6. Client side: Create web view for displaying barcode recognition result.

      • Open "DefaultController.cs" file, press the right mouse button on the "Index" method of DefaultController class and select the "Add View..." menu from context menu
        'Add view...' context menu
      • Select "Razor View" template, Set view name to "Index", uncheck "Use a layout page" checkbox and press the "Add" button => "Views\Default\Index.cshtml" file will be created
        Web view settings
    7. Client side: Add Vintasoft JavaScript files to the project.

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

      • Copy jQuery (version 3 or higher) file into "wwwroot\Scripts\" folder.
        You can use jquery-3.4.1.min.js file from "<InstallPath>\VintaSoft Barcode .NET v12.5\Examples\ASP.NET MVC\CSharp\AspNetMvcBarcodeDemo\Scripts\External\" folder or jQuery (version 3 or higher) file from any other source.

      • Copy Vintasoft.Shared.js and Vintasoft.Barcode.js files from "<InstallPath>\VintaSoft Barcode .NET v12.5\Bin\JavaScript\" folder into "wwwroot\Scripts\" folder.
        Add references to Vintasoft JavaScript files
    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 v12.5\Images\AllSupportedBarcodes.png" to the folder. We will recognize barcodes in this image.
      • Open web view - file "Views\Default\Index.cshtml".
        Default web view
      • Add references to Vintasoft JavaScript files:
        References to Vintasoft JavaScript files
        Here is HTML code that adds references to jQuery and Vintasoft JavaScript files:
        <script src="~/Scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
        <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:
        HTML markup (a div element that will display barcode recogntion result)
        Here is HTML markup code:
        <div id="barcodeInformation"></div>
        
      • Add JavaScript code that recognizes barcode in image and displays barcode recognition result:
        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
                alert(data.errorMessage);
            }
        
        
            // set the session identifier
            Vintasoft.Shared.WebImagingEnviromentJS.set_SessionId("SessionID");
        
            // 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);
        </script>
        
    9. Run the ASP.NET Core application and see the result.

      Barcode recognition result in ASP.NET Core application