ASP.NET CORE WDV WHITEPAPER (.NET Framework)

IMPORTANT NOTICE - THIS ARTICLE IS OUT OF DATE - SEE NEW ARTICLE

As of 11.4, we have support for .NET 5 / .NET 6 and it is now possible using the latest 11.4 to target .NET 6 with an ASP.NET Core app - please see the new arcile:

INFO:WDV In .NET 6 - Getting Started

The rest of this article is about 11.3 and is considered legacy

ORIGINAL ARTICLE CONTENT

GETTING STARTED

When creating a new application using the WebDocumentViewer, there are a few steps you will need in order to get the project up and running.

We will use this document to discuss the requirements of using the WebDocumentViewer within the context of an ASP.NET Core web application targeting the .NET framework, and then walk through its creation, step by step.

TECHNICAL REQUIREMENTS

ASP.NET Core Support (not .NET Core)

It is of critical importance to note: e do not have a full .NET Core (sometimes referred to as .NET Core Native) component. Our SDK is a .NET SDK in terms of the meaning of that before ASP.NET Core and .NET Core... our SDK is for targeting the .NET framework.

Please consider reviewing FAQ: Support for ASP.NET Core / .NET Core before continuing with this whitepaper

For this solution we will be targeting ASP.NET Core 2.1 using .NET Framework 4.7. In DotImage 11.3, these are the minimum versions supported.

Development Tools/Environment

This document and our SDK assume that you're a developer familiar with basic use of Visual Studio, IIS Express or IIS, and general web application development practices using MS Visual Studio 2017 or later. The samples will be using an HTML 5 approach in a non-MVC ASP.NET Core web application targeting .NET framework 4.6.2 targeting 64 bit application pool and using Visual Studio's built in IIS Express web server.

To ensure you're using the x64 version of IISExpress, in Visual Studio, go to Tools -> Options and then in the options menu, navigate to Projects and Solutions -> Web Projects and ensure the "Use the 64 bit version of IIS Express for web sites and projects" option is checked

NOTE: There is no major difference in using our control in MVC vs non-MVC apps - the only practical differences are that MVC likes to put scripts and css in specific locations and uses a slightly different means of interpolating paths in includes. All of this information should be able to be applied in an MVC app - just make sure you put all the markup on a single ASPX view.

We will be providing examples in C#. Our SDK works with VB.NET as well, but for the sake of simplicity any .NET code will be provided in C#. You can use a converter tool such as Telerik Code converter to convert examples to VB.NET.

.NET Framework

Currently, DotImage 11.0 and up maintain a minimum .NET Framework requirement of either 3.5 (using or .NET 3.5 DLLs) or 4.5.2 or higher (using our 4.5.2 DLLs). Please note that .NET 3.0 and lower are not supported in 11.0 and newer. Likewise, .NET 4.0, 4.5, and 4.5.1 are not supported in DotImage 11.0 and newer. The particular ASP.NET Core solution we're supporting needs 4.7 or higher as a minimum (for DotImage 11.3)

If you have an existing ASP.NET Core app you want to add DotImage to that targets an unsupported .NET framework, you will need to update it.

It will be necessary to make sure that your application meets the minimum framework requirements. We have not seen any conflicts with using any higher frameworks, so there should be no restrictions in terms of which .NET framework version you use, so long as it meets those minimums.

The WebDocumentViewer also requires jQuery, jQuery UI and jQuery Easing libraries. Additionally, the Raphael.js library will be required if using annotations.

jQuery and other libraries

WebDocumentViewer (and WebDocumentThumbnailer) also requires jQuery, jQuery UI and jQuery Easing libraries. Additionally,the Raphael.js library will be required if using annotations.

Our SDK ships with the minimum version of all required libraries.. our ASP.NET Core sample here is going to make use of our published packages (we may actually show options for the deprecated bower as well as using npm packages and manual adding of resources). It IS possible to update to newer versions if you like.. but whatever you choose, you should be aware of the MINIMUM required.

On installing the NuGet package for WebDocumentViewer the scripts will be delivered to they are placed in:
C:\Program Files (x86)\Atalasoft\DotImage 11.1\bin\WebResources\WebDocViewer

As of 11.3.0.3, these are:

jquery-3.5.1.min.js
jquery-ui-1.13.1.min.js
raphael-min.js
clipboard.min.js
atalaWebDocumentViewer.js
jquery-ui-1.13.1.min.css
atalaWebDocumentViewer.css

SDK Requirements / Versions

A brief set of instructions for downloading our SDK and activating a license will be given, but the rest of the document assumes you've installed the latest DotImage SDK (currently 11.3.0.3 as of April, 2022)

We do not currently provide access for our ASP.NET Core components directly in the SDK install, so this tutorial will be using our NuGet packages.

If you're a licensed developer, or are actively evaluating our SDK and run into problems/questions, you are welcome to contact support. You can make a support case in writing at our support portal. You may also call in to support during our normal business hours Support Hours: M - F from 8AM - 5PM EDT (New York Time)
Call us: 1-781-743-2119

STANDARD TROUBLESHOOTING

Web applications with WebDocumentViewer / WebDocumentThumbnailer have a lot of "moving parts" and troubleshooting can seem a daunting task.

There is a free third party tool that can greatly enhance troubleshooting and assist you in reporting issues to support

If you are having issues with WebDocumentViewer, problems related to the web components are best diagnosed by looking at a log of the network traffic. Most commonly a faulting application will clearly show a 500 internal server error being thrown and the full response body of that error will offer a great deal of insight into the root cause (licensing issues, and errors in the WebDocumentRequestHandler will most often show up in the 500 error response body)

We recommend Fiddler if you need to collect a log and report it to support.

Please download, install, and run Fiddler web logging

Use it to collect a log while you reproduce the issue, then save the log as a native .saz file and and attach it to your support case as a file attachment/ (please do not save as CSV or text log. The native SAZ file gives us much better access to the tools we need to help diagnose your issue)

PLEASE NOTE: you need to capture a session while NOT using SSL/HTTPS. Fiddler logs cannot see into HTTPS without enabling a special certificate which we do not recommend.. if your capture is of an HTTPS session we will not get useful diagnostic information from the log

INSTALLATION AND LICENSING

You may have already installed our SDK from the download site latest version of Atalasoft DotImage SDK, and activated a paid or eval license. If so that's fine. The licensing can be done using our licensing component NuGet package...

NOTE: The current version is 11.3.0.3 as of April 2022. updates of the SDK happen with regularity. We work hard not to make breaking changes so this guide should be compatible with future releases. We will update the specific technical details as needed as changes arise

If you have not done so, please log in or create an account with Atalasoft so that you can activate our SDK.

In Visual Studio, go to Tools->Extensions and Updates
Select the Online option
In the search box, type "Atalasoft"
Select Atalasoft DotImage Activation Wizard for VS2017 and click Download
Close the tab and close Visual Studio (needs visual studio to close to finish the install)
The VSIX installer will pop a dialog asking if you want to Modify Visual Studio...
Click the Modify and allow the process to complete
Once the install is complete close the install window and restart Visual Studio
There should now be an "Activate DotImage" option under your Tools option in Visual Studio... click it... this will start the activation wizard.
If you have SDK serials for DotImage and/or WingScan use the "Activate an SDK serial for use on this machine or a server license" option and activate your serials for version 11.3
If you do not yet have licenses, you can select the "request 30 day evaluation"
If you run into issues activating or require assistance, please contact support

NOTE for IIS users: The licensing above should be sufficient if you're using the built in web server in Visual Studio (IIS Express.. which this document assumes you are doing) but if you are using a local copy of IIS, then the IIS process does not run as your user name so it will not pick up your licenses. You'll need to take the extra step of copying your licenses into the application bin directory.

Assuming you have an app named WdvAspNetCoreSample hosted in IIS under:
c:\inetpub\wwwroot\WdvAspNetCoreSample\

Then you'd copy your licenses from:
C:\users\YOUR_USERNAME\AppData\Local\Atalasoft\DotImage 11.3\
to
c:\inetpub\wwwroot\WdvAspNetCoreSample\bin\

EXAMPLE 1

BUILDING A MINIMAL WEB VIEWING APP

We're going to be creating a very minimal WebDocumentViewer (WDV) based application which will also make use of our WebDocumentThumbnailer (WDT).

While this may seem not too useful, it's the fundamental minimum you need to get the WDV running with ASP.NET Core. Don't worry, you can easily get more fancy (we have other documents and whitepapers that go into more advanced use cases), but this tutorial will give you the basic hooks to see how to get it running. For now, we're going to start with the basics.

The first step assumes you've licensed yourself as instructed above or by installing the SDK and running the license wizard to either request a 30 day evaluation or activate paid license for DotImage Document Imaging.

We will be using Visual Studio 2017. You can use later versions of Visual Studio (as available), however for the purpose of this project, 2017 is the platform we will be following. From there, you will create a new ASP.Net web application. Lets also target .NET 4.6.2 as our target framework, since it is the minimum version that this particular use case can support.

Starting the Project

Open Visual Studio 2017
Create a new project a C# ASP.NET Core web application targeting .NET framework 4.7 (or higher if you wish) - make SURE you're targeting .NET Framework here.
Name the project/solution WdvAspNetCoreSample
We will be setting it up for EMPTY project.. target .NET Framework and ASP.NET Core 2.1 as shown:
STOP! please TRIPLE CHECK that you selected .NET Framework and NOT .NET CORE!

If you selected .NET Core, it will appear to work but you will later find that the app is claiming dependencies are missing even though you've followed

Prerequisites (NuGet Packages)

Now, we need to add the relevant NuGet packages for WDV and our Atalasoft references
Go to Tools -> NuGet Package Manager -> Package Manager Console

at the PM> prompt type in the following and hit enter:

Install-Package Atalasoft.DotImage.WebControls.Core.x64

Again, at the PM> prompt type in the following and hit enter:
```
Install-Package Microsoft.AspNetCore.StaticFiles
```
If you wish to verify proper installation, you can go to Tools -> NuGet Package Manager ->> Manage Packages for Solution. It will look like this:

Prerequisites (Clientside Scripts)

We need to add required scripts, images, and css for WebDocumentViewer. The official documentation has used a bower repository, but bower has been deprecated by its creators. There are a few means of getting packages downloaded/installed.. we will provide 3 different approaches.. choose the one that works best for you.. the options are:

Manual copying/install of files
Easiest to understand, but manual work required. We've provided a convenience distribution for the files for 11.3.0.3 and may update them in the future, and will include full manual description
Bower Package
Easiest to implement but based on a distribution method that may be removed from future Visual Studio versions
npm Pagkage
Most stable and future-proof, but requires the most 'extra work' to implement

Manual Installation

As we mentioned, this may be the most "understandable" as it has no "man behind the curtain" It's all just you copying and renaming a few files from our SDK distribution.

Download the ClientSide resources (see FAQ:Where can I find the WebDocViewer / WebCapture Client Side Resources )
- For 11.3.0.3: Atalasoft_Web_Resources_v11.3.0.3.zip
- For 11.3.0.2: Atalasoft_Web_Resources_v11.3.0.2.zip
- For 11.3.0.1: Atalasoft_Web_Resources_v11.3.0.1.zip
- For 11.3.0.0: Atalasoft_WebResources_v11.3.0.0.zip
Unzip this file to a known location
Using Windows Explorer, navigate to the now unzipped AspNetCore_WebDocViewerResources_v11.3.0.3 directory
COPY the lib directory in its entirety to the wwwroot location in your solution. We strongly recommend doing this from Windows Explorer (source) to Visual Studio Solution Explorer (destination) so that the files are ADDED to your project
If you want to make your own lib files from installed SDK files, this is the process we used to create the download
- Open file explorer and navigate to a known location.
- Create a new directory and name it lib
- within that lib directory create the following folder structure:
```
lib\clipboard\
lib\jquery\
lib\jquery-ui\css\
lib\raphael\
lib\web-document-viewer\images\
```
- Open another Windows File explorer and navigate to
  C:\Program Files (x86)\Atalasoft\DotImage 11.3\bin\WebResources\WebDocViewer\
- copy the contents of the images directory into lib\web-document-viewer\images\
- copy the atalaWebDocumentViewer.js and atalaWebDocumentViewer.css into lib\web-document-viewer\
- copy clipboard.min.js into lib\clipboard\
- copy jquery-3.5.1.min.js to lib\jquery\ and rename it to jquery.min.js
- copy jquery-ui-1.13.1.min.css to lib\jquery-ui\css and rename it to jquery-ui.min.css
- copy jquery-ui-1.13.1.min.js to lib\jquery-ui and rename it to jquery-ui.min.js
- copy raphael-min.js to lib\raphael and rename it to raphael.min.js
- Create a simple text file named VERSION.txt in the lib directory - make a note in there that you're using 11.3.0.3 and save it
Skip to the next step: Prerequisites (Other Files)

Bower Packages

Bower was the original "official" way we distributed these components. The issue is that bower was deprecated by its creators as the development community felt that it was just an extra complication on top of npm and was too "visual studio-centric". It is no longer showing up in Visual Studio so we can no longer support it.

npm Packages

This is probably the most involved process, but it is likely to be the official future-proof way to distribute packages. In ASP.NET Core apps, there are some limitations on what package installers can put into the project files directly so we have to use a couple additional packages and the setup is a bit more complex.

To add npm packages you need to create a package.json from npm Configuration file template, add a web-document-viewer package, and save the file.
- Begin by creating the package.json file: Right-click on the project in Solution explorer and select Add -> New Item
- look in the tree to the left and expand ASP.NET Core -> Web -> Scripts. Then find npm Configuration File
- Select that and click Add.. This will place a package.json file in your project root
- Open the package.json file. it will look like this:
```
{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
  }
}
```
- add web document viewer, gulp, rimraf and jquery-ui-dist to the file with the following values:
```
{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "web-document-viewer": "^11.3.3",
    "gulp": "^4.0.0",
    "rimraf": "^2.0.0",
    "jquery-ui-dist": "^1.13.1"
  }
}
```
- Save the file
- WAIT
- No, seriously wait.. after saving , the package manager should start installing. This process can take a while. you'll need to wait until the output window shows all packages are installed. Watch your output window, when done it will look like this:

After that, when all packages are installed, you need to add a gulpfile.js, VS2017 doesn't provide a special template for it, so you can use a generic template for JavaScript files. We will be adding all the needed content by copy/paste. The purpose of this is to help the npm packages copy the needed components from the download/install location to the actual wwwroot/bib. Let's go:

right click the project in Solution explorer and click Add -> New Item
Choose JavaScript file and name it gulpfile.js

Edit gulpfile.js and paste in the following contents:

/// <binding BeforeBuild='build' Clean='clean' />>
"use strict";
const gulp = require("gulp");
const rimraf = require("rimraf");
const libPath = 'wwwroot/lib/'; //Path where all dependencies should be copied
const nodeModules = "node_modules/"; //Folder where node modules stored by default
//List of dependencies for our application
//src - list of files of wildcard paths to files to copy
//dest - folder name of path relative to libpath variable where files should be copied
const dependencies = [
    {
        src: ["jquery/dist/jquery.min.js"],
        dest: "jquery"
    },
    {
        src: ["jquery-ui-dist/jquery-ui.min.js"],
        dest: "jquery-ui"
    },
    {
        src: ["jquery-ui-dist/jquery-ui.min.css"],
        dest: "jquery-ui/css"
    },
    {
        src: ["raphael/raphael.min.js"],
        dest: "raphael"
    },
    {
        src: ["clipboard/dist/clipboard.min.js"],
        dest: "clipboard"
    },
    {
        src: ["web-document-viewer/*.js", "web-document-viewer/*.css"],
        dest: "web-document-viewer"
    },
    {
        src: ["web-document-viewer/images/*"],
        dest: "web-document-viewer/images"
    }
];
function getSourcePaths(rootpath, paths) {
    return paths.map(path => rootpath + path);
}
gulp.task("build",
    (done) => {
        dependencies.forEach(dep => {
            gulp.src(getSourcePaths(nodeModules, dep.src)).pipe(gulp.dest(`${libPath}/${dep.dest}`));
        });
        done();
    });
gulp.task("clean",
    (done) => {
        return rimraf(libPath, done);
    });
gulp.task("rebuild", gulp.series("clean","build"));

Save the file
Right-click on Gulpfile.js in solution explorer and select >Task Runner Explorer
You need to find the Refresh option and click it.. Here's a screenshot of what it looks like and where the Refresh is..
click Refresh... if it is successful it will update the bindings and now look like this:
Finally, to get the files updated and test that it worked, do a rebuild on your solution
If gulper and npm did their magic, then you will see that the wwwroot directory now has a lib subdirectory which itself has several folders and files.. it will look something like this:

Prerequisites (Other Required Files)

We need to add the sample images we will be reading from

Download AspNetCore_SampleImages.zip
Unzip this file to a known location
Using Windows Explorer, navigate to the now unzipped AspNetCore_SampleImages directory
COPY the images directory in its entirety to the wwwroot location in your solution. We strongly recommend doing this from Windows Explorer (source) to Visual Studio Solution Explorer (destination) so that the files are ADDED to your project
When complete, your Solution Explorer will look something like this:

What we have done here is install the Atalasoft ASP.NET Core version of our SDK (the server side DLLs etc..), our Clientside components, and the sample images we will load to show it worked. These are just the base dependencies.. we now need to make use of them.

Startup Class Modifications

We need to set up the DotImage middleware .. this is going to require modification of the startup class (startup.cs). Here we go:

First, delete (or comment out) this run line that is put into the default Startup.Configure method:

    app.Run(async (context) =>
    {
        await context.Response.WriteAsync("Hello World!");
    });

Now, we want to add a console so we can do a bit of logging:
- Add the following using statement at the top of the startup.cs file:
```
using Microsoft.Extensions.Logging;
```
- Modify the constructor of the Configure method to add as the third argument:
```
, ILoggerFactory loggerFactory
```
  so that the Configure constructor now look like this:
```
    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        ...
```
- At the beginning of the Configure method, add this line of code:
```
    loggerFactory.AddConsole();
```
- When done it will look something like this:
Next, we need to add some access for file system.
- To allow the middleware to work with files, we need to add the following strings in the Startup.Configure method:
```
 app.UseDefaultFiles();
 app.UseStaticFiles();
```
- When done it will look something like this:
OPTIONAL If you want to enable support for viewing PDF files, you will need to add a PdfDecoder to the RegisteredDecoders.Decoders collection at this point. This is only required if you want PDF support
- Add the following using statements to the top of the startup.cs file:
```
using Atalasoft.Imaging.Codec;
using Atalasoft.Imaging.Codec.Pdf;
```
- Now, we add a PdfDecoder to the RegisteredDecoders.Decoders collection:
```
    RegisteredDecoders.Decoders.Add(new PdfDecoder() { Resolution = 200 });
```
- When completed, your startup.cs will now look something like this:

Now, we need to enable the WebDocumentViewer Middleware. We are going to give you a hook for "custom callbacks" which is our ASP.NET Core middleware version of "custom handling of events". We're doing this even if you don't use it now.. just because this is the most common use case (some custom handling of events for the "handler" (middleware)

First, we add the needed using statements to the growing collection of them at the top of startup.cs
```
using Atalasoft.Imaging.WebControls.Core;
using Atalasoft.Imaging.WebControls;
```

We need to add a new class to handle the callbacks (events)... In the startup.config, OUTSIDE the Startup class (but in the WdvAspNetCoreSample namespace), add this class:

   public class MyWDVCallbacks : WebDocumentViewerCallbacks
    {
        /// IMPORTANT: make sure you fully disable File Upload if you're not using it by adding this handler
        public override void FileUpload(FileUploadEventArgs args)
        {
            args.Cancel = true;
            base.FileUpload(args);
        }
        public override void DocumentInfoRequested(DocumentInfoRequestedEventArgs args)
        {
            Console.WriteLine("**********===DocumentInfoRequested===**********");
            base.DocumentInfoRequested(args);
        }
        public override void ImageRequested(ImageRequestedEventArgs args)
        {
            Console.WriteLine("**********===ImageRequested===**********");
            base.ImageRequested(args);
        }
        /*
         * The above was just an example of hooking to the two main events.. you can handle any exposed event here
         *
         * //.. most common ...
         *  AnnotationDataRequested
         *  DocumentSave
         *  DocumentStreamWritten
         *  AnnotationStreamWritten
         *  //.. less common .
         *  PageTextRequested
         *  PdfFormRequested
         *  //.. rarely if ever used .. 
         *  ReleaseDocumentStream
         *  ReleasePageStream
         *  ResolveDocumentUri
         *  ResolvePageUri
         */
    }

Finally, up in the Configure method, just below the RegisteredDecoders.Decoders line, add this code:
```
 app.Map("/wdv", wdvApp => { wdvApp.RunWebDocumentViewerMiddleware(new MyWDVCallbacks()); } );
```

After these changes the Configure method will look like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Atalasoft.Imaging.Codec;
using Atalasoft.Imaging.Codec.Pdf;
using Atalasoft.Imaging.WebControls.Core;
using Atalasoft.Imaging.WebControls;
namespace WdvAspNetCoreSample
{
    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)
        {
        }
        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole();
            app.UseDefaultFiles();
            app.UseStaticFiles();
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            RegisteredDecoders.Decoders.Add(new PdfDecoder() { Resolution = 200 });
            app.Map("/wdv", wdvApp => { wdvApp.RunWebDocumentViewerMiddleware(new MyWDVCallbacks()); });
            //// Commented out as we won't be using this
            //app.Run(async (context) =>
            //{
            //    await context.Response.WriteAsync("Hello World!");
            //});
        }
    }
    public class MyWDVCallbacks : WebDocumentViewerCallbacks
    {
        /// IMPORTANT: make sure you fully disable File Upload if you're not using it by adding this handler
        public override void FileUpload(FileUploadEventArgs args)
        {
            args.Cancel = true;
            args.Overwrite = false;
            base.FileUpload(args);
        }
        public override void DocumentInfoRequested(DocumentInfoRequestedEventArgs args)
        {
            Console.WriteLine("**********===DocumentInfoRequested===**********");
            base.DocumentInfoRequested(args);
        }
        public override void ImageRequested(ImageRequestedEventArgs args)
        {
            Console.WriteLine("**********===ImageRequested===**********");
            base.ImageRequested(args);
        }
        /*
         * The above was just an example of hooking to the two main events.. you can handle any exposed event here
         *
         * //.. most common ...
         *  AnnotationDataRequested
         *  DocumentSave
         *  DocumentStreamWritten
         *  AnnotationStreamWritten
         *  //.. less common .
         *  PageTextRequested
         *  PdfFormRequested
         *  //.. rarely if ever used .. 
         *  ReleaseDocumentStream
         *  ReleasePageStream
         *  ResolveDocumentUri
         *  ResolvePageUri
         */
    }
}

Clientside scripts and Markup

The setup for web document viewing just requires placing some JavaScript, CSS, and HTML into your page.

Create a new index.html page which will host your web controls:
- Right click on the wwwroot section of the project in Solution explorer and choose Add New
- select HTML Page and name it "index.html" and click Add

Edit the new index.html file

The default head section looks like this:

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

Add in the following script block after the title tags:

    <!-- Scripts for Web Viewing -->
    <script src="lib/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="lib/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <script src="lib/raphael/raphael.min.js"></script>
    <script src="lib/clipboard/clipboard.min.js"></script>
    <script src="lib/web-document-viewer/atalaWebDocumentViewer.js" type="text/javascript"></script>
    <!-- Style for Web Viewer -->
    <link href="lib/jquery-ui/css/jquery-ui.min.css" rel="stylesheet" />
    <link href="lib/web-document-viewer/atalaWebDocumentViewer.css" rel="stylesheet" />

Now, we also need to add the JavaScript that will initialize and configure the main WDV and WDT viewers.

In the head block below where you added the above script blocks, add this code:

    <script type="text/javascript">
        var _viewer;
        var _thumbs;
        // Initialize Web Viewing
        $(function () {
            try {
                // Initialize Web Document Viewer
                _viewer = new Atalasoft.Controls.WebDocumentViewer({
                    parent: $('#_containerViewer'),
                    toolbarparent: $('#_toolbar1'),
                    serverurl: 'wdv',
                    allowannotations: true,
                    forcepagefit: true
                });
                _thumbs = new Atalasoft.Controls.WebDocumentThumbnailer({
                    parent: $('#_containerThumbs'),
                    serverurl: 'wdv',
                    allowannotations: true,
                    viewer: _viewer
                });
                loadFile();
            } catch (error) {
                appendStatus("Thrown error: " + error.description);
            }
        });

        function loadFile() {
            _thumbs.OpenUrl($('#FileSelectionList').val(),'');
        }
        // Show status and error messages
        function appendStatus(msg) {
            var stat = $("#status");
            stat.append(msg + "<br>");
        }
    </script>

Finally, we need to add in the html markup that will give us our viewer user interface and the open file selection boxes.

In the body section of the page, add the following html markup:

    <h1>Atalasoft ASP.NET Core Web Viewing Sample</h1>
    <form id="WDVForm" runat="server">
        Select File to display:
        <select ID="FileSelectionList" onchange="loadFile();">
            <option value="images/Test.tif">Test.tif</option>
            <option value="images/Test.pdf">Test.pdf</option>
        </select>
        <div style="width: 900px;">
            <div id="_toolbar1"></div>
            <div id="_containerThumbs" style="width: 180px; height: 600px; display: inline-block;"></div>
            <div id="_containerViewer" style="width: 710px; height: 600px; display: inline-block;"></div>
        </div>
        <div id="status"></div>
    </form>

Run it

If all has gone well, you should now be able to run the solution and will see this on startup:

SAMPLE APPS DOWNLOAD

It is our hope that you've been following along with the tutorial and have successfully built your solution. However, if you've run into issues or if you want a working reference app, we've implemented the WdvAspNetCoreSample three separate times. Once with manual clientside package install, one with bower packages and one with npm packages.

WdvAspNetCoreSample - Manual Clientside scripts (11.3.0.3)
All files are included in this simplest implementation.
WdvAspNetCoreSample - NPM Packages (11.3.0.3)
Note: you will need to let NPM download and then for gulp to install the repositories and push them to the wwwroot/lib

CONCLUSION

In many respects we have barely even scratched the surface of the WebDocumentViewer and WebDocumentThumbnailer. This paper was meant as a very basic getting started that will serve you well as a step by step guide to just getting the viewer set up and working under ASP.NET Core. Atalasoft support engineers use a very similar base "boilerplate" app that we used as our inspiration for this demo nearly every day .. as a quick test harness / repro base solution to quickly test customer cases/issues and to test out various coding ideas having to do with WDV/ WDT.

In order to keep this document to a manageable size, we will end here for now. There are plans in the works for more advanced tutorials.. all of those will focus on the starting apps we've done here.

If you're looking for a getting started for WingScan .. our Web Scanning SDK, please see INFO: WingScan Whitepaper - Getting Started with Web Scanning

v010 - 2022/06/15 - TD

Original Article:

Q10469 - INFO: ASP.NET Core WDV Whitepaper - Getting Started (11.1 version)

INFO: ASP.NET Core (.net Framework) WDV Whitepaper - Getting Started