Creating an Atalasoft Web Document Viewer

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

The Web Document Viewer is easily generated with the Atalasoft DotImage SDK which is a web viewing, web scanning, and annotations developer toolkit for Microsoft .NET. You can get a fully-functional trial by downloading the installer.

After you install and activate your trial licenses, you can begin. It’s pretty simple – there isn’t much code.

Setting up Your 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 Atalasoft DotImage WebControls (.NET 2.0).  This component was made available when you installed DotImage 10.0.  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.

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 DotImage 10.0.  The default install location for these is in C:\Program Files (x86)\Atalasoft\DotImage 10.0\bin\2.0\x86\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
{
}

There is no need for further modification to your handler.

Add your 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 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 codebehind 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.

<script src="WebDocViewer/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="WebDocViewer/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="WebDocViewer/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="WebDocViewer/atalaWebDocumentViewer.js" type="text/javascript"></script>
<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 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, and Managed Pipeline Mode is set to Classic.  This will ensure your application is consistent with the DotImage assemblies you used.

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

Congrats!

Conclusion

As you saw, the Web Document Viewer is a simple way to add an embedded document viewer to any web page. It features page view controls and smooth, flick-scrolling, and also loads pages quickly and efficiently.

Again, The Web Document Viewer is easily generated with the Atalasoft DotImage SDK which is a web viewing, web scanning, and annotations developer toolkit for Microsoft .NET. You can get a fully-functional trial by downloading the installer.

The Web Document Viewer is just a small part of the whole Atalasoft DotImage Document Imaging SDK suite. Contact sales[at]atalasoft.com with any questions.