Step-by-Step Guide for Integrating Anyline Web SDK into an ASP.NET Web Forms Project

Should you not already have Visual Studio for Windows installed, Download here.

Setting Up a Web Application Project

1. Open the installed Visual Studio.

2. Click on the “File” menu, then “New”, and then “Project…”.

3. In the “New Project” dialog, select “ASP.NET Web Application (.NET Framework)” under the “Web” category.

4. On the next page, provide a Project Name and Solution Name. Other checkboxes are optional.

5. Choose “Web Forms” for the template.

The Web SDK contains a bunch of TypeScript files that are required in order to successfully integrate the SDK and scan with it. Unlike .NET 6.0. the .NET Framework 4.7.2 does not come with the extensions and packages required to read and run these files. Here is a list of the following Extensions/Packages that you would require before continuing to integrate the Web SDK:

Extensions

To handle TypeScript files in your ASP.NET Project, you should install the Microsoft.TypeScript.MSBuild NuGet package. This package integrates TypeScript support into your project, allowing you to compile TypeScript files using MSBuild.

It should look something like this:

Open

Packages

Here is a summary of the commands you need to run:

There are two options for downloading Anyline Web SDK:

1. Using npm:
   Install the @anyline/anyline-js npm package and get the content from node_modules/@anyline. Use the following commands in an empty folder:

   npm init -y npm install @anyline/anyline-js npm install

Once done, it should look something like this:

Open

2. Downloading from GitHub:
   Download the assets from the GitHub repository: anyline-ocr-anylinejs-module.

Place the Anyline Web SDK content inside the Scripts folder in your project. For example, you can copy it to the Scripts folder.

It should look something like this:

Open

In order for all the syntax contained inside the Web SDK’s TypeScript files to be recognized and to avoid and Build Errors, create the following tsconfig.json file inside your root directory:

Make the following changes in the Site.Master file

Import the anyline.js file:

The newly updated ScriptManager should look like this:

Make the following changes in the Default.aspx file

1. Replace the default <div> element:

   <div id="root" style="height: 100vh"></div>

   Important note: This <div> must have an id and a height specified in the style.

2. Initialize the Anyline Web SDK:

   <script> document.addEventListener('DOMContentLoaded', function () { const anylicense = '<LICENSE>'; const { init } = window.anylinejs; const anyline = init({ preset: 'all_barcode_formats', license: anylicense, element: document.getElementById('root'), }); anyline.onResult = result => { alert('GOT RESULT: ' + JSON.stringify(result.result)); }; anyline.onError = error => { console.error('GOT ERROR: ', error); }; anyline.startScanning().catch(error => { console.error('GOT ERROR: ', error); alert('GOT ERROR: ' + JSON.stringify(error)); }); }); </script>

    

   The newly updated Default.aspx file should look like this:
   
   

   <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="<ProjectName>._Default" %> <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <script> document.addEventListener('DOMContentLoaded', function () { const anylicense = '<LICENSE>'; const { init } = window.anylinejs; const anyline = init({ preset: 'all_barcode_formats', license: anylicense, element: document.getElementById('root'), }); anyline.onResult = result => { alert('GOT RESULT: ' + JSON.stringify(result.result)); }; anyline.onError = error => { console.error('GOT ERROR: ', error); }; anyline.startScanning().catch(error => { console.error('GOT ERROR: ', error); alert('GOT ERROR: ' + JSON.stringify(error)); }); }); </script> <div id="root" style="height: 100vh"></div> </asp:Content>

1. Add the anylinePath config to the init function parameters:

   <script> document.addEventListener('DOMContentLoaded', function () { const anylicense = '<LICENSE>'; const { init } = window.anylinejs; const anyline = init({ anylinePath: '/Scripts/anyline-js/anylinejs', preset: 'all_barcode_formats', license: anylicense, element: document.getElementById('root'), }); anyline.onResult = result => { alert('GOT RESULT: ' + JSON.stringify(result.result)); }; anyline.onError = error => { console.error('GOT ERROR: ', error); }; anyline.startScanning().catch(error => { console.error('GOT ERROR: ', error); alert('GOT ERROR: ' + JSON.stringify(error)); }); }); </script>

    

   The newly updated Default.aspx file should look like this:
   
   

   <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="<ProjectName>._Default" %> <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <script> document.addEventListener('DOMContentLoaded', function () { const anylicense = '<LICENSE>'; const { init } = window.anylinejs; const anyline = init({ anylinePath: '/Scripts/anyline-js/anylinejs', preset: 'all_barcode_formats', license: anylicense, element: document.getElementById('root'), }); anyline.onResult = result => { alert('GOT RESULT: ' + JSON.stringify(result.result)); }; anyline.onError = error => { console.error('GOT ERROR: ', error); }; anyline.startScanning().catch(error => { console.error('GOT ERROR: ', error); alert('GOT ERROR: ' + JSON.stringify(error)); }); }); </script> <div id="root" style="height: 100vh"></div> </asp:Content>

2. Update ASP.NET to serve unknown file types:

   • Add the following code in the Web.config file right inside the <configuration> section:

     <system.webServer> <staticContent> <mimeMap fileExtension=".*" mimeType="application/octet-stream" /> </staticContent> </system.webServer>