Tutorial: Demo Application

Demo Application

This guide takes you through setting up a basic web page containing an embedded Web Document Viewer and displaying an initial document in it.

Set up a project

In Visual Studio, create a new Web Site using the ASP.NET Empty Web Site template.

Immediately, you should open your project's Property Pages to set up the necessary references and project options. Two changes must be made here.

  • In the References menu, add a new reference to DotImage WebControls. This component was made available when you installed Atalasoft DotImage. Dependencies will automatically be included in your project.
  • In the Build menu, change your Target Framework to .NET Framework 3.5 . This will force your project to reopen, as well as populate your web.config.

Third Party Dependencies

The Web Document Viewer has a number of dependencies on third party libraries that should be properly included in the web page. It is especially important in the case of NuGet deployment, because user can update NuGet dependencies individually (for example, update jQuery to a newer version).

Here is the list of JavaScript libraries Web Document Viewer relies on:

  • jquery
  • jquery-ui
  • raphael
  • clipboard

You need to explicitly include both JavaScript and CSS resources to a web page. A typical example looks like this (versions and locations of the components could be different in your case):

<link href="Scripts/jquery-ui-1.13.1.min.css" rel="stylesheet" type="text/css" />
<link href="Scripts/atalaWebDocumentViewer.css" rel="stylesheet" type="text/css" />

<script src="Scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.13.1.min.js" type="text/javascript"></script>
<script src="Scripts/raphael-min.js" type="text/javascript"></script>
<script src="Scripts/clipboard.min.js" type="text/javascript"></script>
<script src="Scripts/atalaWebDocumentViewer.js" type="text/javascript"></script>

Add project resources

Your project will need a copy of the Web Document Viewer resources, which includes client-side javascript and styles. These resources were installed with Atalasoft DotImage. The default install location for these is in C:\Program Files (x86)\Atalasoft\DotImage 11.4\bin\WebResources\WebDocViewer.

Copy the WebDocViewer directory into the root of your project.

We'll also create a default location to store images that will be displayed by the viewer. Create a new directory called Images in the root of your project, and add an image or document of your choice to this directory that you want displayed by default. We'll assume that the image you've added is called Example.tif.

Add a handler for the viewer

The document viewer will communicate with a separate handler on your website.

Add a new Generic Handler to your project. We'll assume that this file is called WebDocViewer.ashx.

Visual Studio adds a default implementation of a web handler. Replace the entire contents of the file with the following piece of code.

<%@ WebHandler Language="C#" Class="WebDocViewerHandler" %>
using System;
using System.Web;
using Atalasoft.Imaging.WebControls;
public class WebDocViewerHandler : WebDocumentRequestHandler
{}

The document viewer will communicate with a separate handler on your website. The handler will be a class deriving from WebDocumentRequestHandler, which in turn derives from IHttpHandler.

Default server side behavior can be customized by subscribing and handling events exposed by WebDocumentRequestHandler. For details see the Atalasoft .NET API Reference which latest version is available on Atalasoft's APIs & Developer Guides page.

Add a web page

In a real deployment, you will want to insert the web document viewer into your own web page, but for this example we will work with a new page.

Add a new Web Form to your project. We'll assume that this file is called Default.aspx. Visual Studio will automatically create a code behind for this file called Default.aspx.cs, but you will not need to change it.

A Web Document Viewer needs three chunks of code to load resources, create a viewing area, and initialize that area.

To load the necessary resources for creating web document viewer objects, add the following lines of HTML in your document's head.

Some of the resources included contain explicit version numbers which may change in future releases. Make sure the version numbers referenced in your src attributes match the files in the WebResources directories.

<script src="WebDocViewer/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="WebDocViewer/atalaWebDocumentViewer.js" type="text/javascript"></script>
<link href="WebDocViewer/jquery-ui-1.13.1.min.css" rel="Stylesheet" type="text/css" />
<link href="WebDocViewer/atalaWebDocumentViewer.css" rel="Stylesheet" type="text/css" />

Next, add the following HTML into your document's body to create the document viewing area. The div tags can be customized. In this example, the height and width have been constrained.

<div id="_toolbar1" class="atala-document-toolbar" style="width: 670px;"></div>
<div id="_container1" class="atala-document-container" style="width: 670px; height: 500px;"></div>

Finally, add the following chunk of JavaScript for initializing your viewer. The constructor accepts various configuration options that affect the viewer's behavior or initial state. A minimum configuration is provided to tell the viewer where it should create the viewer (pointing to the div tags we added), where its web handler is located, and what image should be displayed initially.

<script type="text/javascript" language="javascript">
    var _docUrl = 'Images/Example.tif';
    var _serverUrl = 'WebDocViewer.ashx';
    var _viewer = new Atalasoft.Controls.WebDocumentViewer({
        'parent': $('#_container1'), // parent container to put the viewer in
        'toolbarparent': $('#_toolbar1'), // parent container to put the viewer toolbar in
        'serverurl': _serverUrl, // server handler url to send image requests to
        'documenturl': _docUrl // document url relative to the server handler url
    });
</script>

Deploying to IIS

At this point your web site is ready to build and use. If you are deploying to IIS, you will need to make sure the following items are taken care of.

  • Copy your project to a path within your IIS document root.
  • Get a server license for Atalasoft DotImage, and put it in a location where it can be found. The best place to put your license file is in your project's Bin directory.
  • In IIS Manager, convert your project directory to an Application and assign it to an Application Pool.
  • Check the settings of the Application Pool you used, and make sure Enable 32-Bit Applications is set to True. This will ensure your application is consistent with the assemblies you used.

At this point, you should be able to navigate to your page in a browser, and see a loaded document.