VintaSoft Barcode .NET SDK 12.5 for Web
In This Topic
    Recognize barcodes in image in ASP.NET WebForms application
    In This Topic

    This tutorial shows how to create a blank ASP.NET WebForms application in Visual Studio .NET 2019 and recognize barcodes in image in ASP.NET WebForms application.

    Here are steps, which must be done:

    1. Create a blank ASP.NET WebForms application.

      Open Visual Studio .NET 2019 and create a new project, of ASP.NET Web application type, and configure the project to use .NET Framework 4.7.2:
      Open Visual Studio .NET 2019 and create a new project, of ASP.NET Web Application type, and configure the project to use .NET Framework 4.7.2
      Select the "Empty" template for ASP.NET Web application and configure the project to use WebForms:
      Select the Empty template for ASP.NET Web Application and configure to use WebForms
    2. Server side: Add references to the Vintasoft assemblies to ASP.NET WebForms application.

      Add references to the Vintasoft.Barcode.dll, Vintasoft.Shared.dll, Vintasoft.Shared.Web.dll, Vintasoft.Barcode.Web.Services.dll and Vintasoft.Barcode.Web.HttpHandlers.dll assemblies from "<InstallPath>\VintaSoft Barcode .NET v12.5\Bin\DotNet4\AnyCPU\" folder in ASP.NET WebForms application.

      Add references to the Vintasoft assemblies
    3. Server side: Add generic handler, which allows to recognize barcodes in image, to ASP.NET WebForms application.

      • Add the "Handlers" folder to ASP.NET WebForms application.
      • Press the right mouse button on the "Handlers" folder and select the "Add => New Item..." menu from context menu
      • Select "Generic Handler" template, set the handler name to the "MyVintasoftBarcodeHandler" and press the "Add" button
        Generic handler settings
      • Specify that MyVintasoftBarcodeHandler class is derived from Vintasoft.Barcode.Web.HttpHandlers.VintasoftBarcodeHandler class
        C# source codes of MyVintasoftBarcodeHandler class
        Here are C# source codes of MyVintasoftBarcodeHandler class:
        // The project, which uses this code, must have references to the following assemblies:
        // - Vintasoft.Barcode.Web.HttpHandlers
        
        namespace WebApplication1.Handlers
        {
            /// <summary>
            /// Summary description for MyVintasoftBarcodeHandler
            /// </summary>
            public class MyVintasoftBarcodeHandler : Vintasoft.Barcode.Web.HttpHandlers.VintasoftBarcodeHandler
            {
        
                public bool IsReusable
                {
                    get
                    {
                        return false;
                    }
                }
        
            }
        }
        
    4. Client side: Add Vintasoft JavaScript files to the project.

      • Add the "Scripts" folder to ASP.NET WebForms Web application.

      • Copy jQuery (version 3 or higher) file into "Scripts" folder.
        You can use jquery-3.3.1.min.js file from "<InstallPath>\VintaSoft Barcode .NET v12.5\Examples\ASP.NET WebForms\CSharp\AspNetBarcodeDemo\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 "Scripts" folder.
        Add references to Vintasoft JavaScript files
    5. Client side: Add JavaScript code, which recognizes barcodes and displays barcode recognition result, to the Default web form.

      • Create folder "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.
      • Create the Default web form - file "Default.aspx".
        • Press the right mouse button on the project and select the "Add => WebForm" menu from context menu:
          Add default web view
        • Specify "Default" as web form name => created web form will be opened:
          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.3.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 recognition result) to the web view:
        HTML markup (a div element that will display barcode recognition result)
        Here is HTML markup code:
        <div id="barcodeInformation"></div>
        
      • Add JavaScript code that recognizes barcodes and displays barcode recognition result:
        JavaScript code that recognizes barcodes and displays barcode recognition result
        Here is JavaScript code that recognizes barcodes 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 HTTP handler that allows to recognize barcodes in image
            var barcodeService = new Vintasoft.Shared.WebServiceHandlerJS("/Handlers/MyVintasoftBarcodeHandler.ashx");
        
            // 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>
        
    6. Run the ASP.NET WebForms application and see the result.

      Barcode recognition result in ASP.NET WebForms application