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

The following Guide can be implemented in Visual Studio on Windows. Please make sure to have the latest version of Visual Studio for Windows before proceeding.

Development Tools

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

Setting Up a Web Application Project

Open the installed Visual Studio.
Click on the “File” menu, then “New”, and then “Project…”.
In the “New Project” dialog, select “ASP.NET Web Application (.NET Framework)” under the “Web” category.
On the next page, provide a Project Name and Solution Name. Other checkboxes are optional.
Choose “Web Forms” for the template.

Required Extensions and Packages

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:

Packages

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

npm install typescript --save-dev
npm install react react-dom --save
npm install @types/node --save-dev
npm install @types/jest --save-dev
npm install tsconfig-paths --save-dev

Downloading Anyline Assets

There are two options for downloading Anyline Web SDK:

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:

PLEASE NOTE:

For the above example, I created an Empty Folder called “Web SDK” only for demonstrative purposes. Name your Empty Folder however you wish.

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

Placing Anyline Web SDK Content in the ASP.NET Web Forms Project

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:

Required `tsconfig.json` File

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:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./Scripts",
    "rootDir": "./TypeScript",
    "strict": true,
    "jsx": "react", // or "react-jsx" if you're using React 17+
    "lib": [ "es2015", "es2015.iterable", "dom" ],
    "types": [ "node", "jest" ],
    "esModuleInterop": true
  },
  "include": [
    "Scripts/anyline-js/types/**/*.ts",
    "Scripts/anyline-js/types/**/*.tsx" // Include JSX/TSX files
  ],
  "exclude": [
    "Scripts/anyline-js/types/exclude-this-folder" // Adjust as needed
  ]
}

Calling Anyline Web SDK

Make the following changes in the `Site.Master` file

Import the anyline.js file:

PLEASE NOTE:

Please be sure to add the following inside your ScriptManager inside the Site.Master file.

The newly updated ScriptManager should look like this:

Make the following changes in the `Default.aspx` file

Replace the default <div> element:
Important note: This <div> must have an id and a height specified in the style.
Initialize the Anyline Web SDK:

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

Serving SDK Data Model Locally

Add the anylinePath config to the init function parameters:

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

Update ASP.NET to serve unknown file types:
- Add the following code in the Web.config file right inside the <configuration> section: