DotImage创建Atalasoft Web文档查看器实例

本指南将帮助你学会如何利用.NET图像处理开发包DotImage创建一个包含了嵌入式Web文档查看器的Web页面以及如何在Web页面中显示初始文件。

创建项目

在VS中，通过ASP.NET Empty Web Site 模板创建一个网页。随即，打开项目的属性页，设置必要的参数和项目。需要注意以下两点：

• 在 References 菜单中，添加一个新的引用到Atalasoft DotImage WebControls (.NET 2.0)。DotImage 10.0提供了该WebControls，在你安装DotImage 10.0后，依赖自动包含在项目中。
• 在Build菜单中，将框架改为.NET Framework 3.5，然后重新打开项目，并迁移web.config。

新增项目资源

项目需要Web文档查看器资源的副本文件，包括客户端JavaScript和样式。DotImage 10.0自带该资源，默认情况下位于: C:\Program Files (x86)\Atalasoft\DotImage 10.0\bin\2.0\x86\WebResources\WebDocViewer。

将WebDocViewer 目录复制到项目根目录。

此外，我们还将创建一个默认的位置用于储存查看器中显示的图片。在项目的根目录下创建一个Images目录，然后将所选择的图像或文件添加到该目录下。本文以Example.tif图像为例。

添加Handler

连接文档查看器与网站上的独立处理器。

在项目中新增一个Generic Handler，文件名命为WebDocViewer.ashx。用下列代码替换掉文件的全部内容：

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

添加网页

假设我们在本文中添加网页为Default.aspx. Visual Studio将会为该文件自动创建这个名为Default.aspx.cs中的代码隐藏。

Web文档查看器需要3块代码，分别用于加载资源，创建显示区域以及初始化该区域。

在文档的顶部添加下列HTML代码，从而加载所需资源以创建Web文档查看器对象。

<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"/>

接下来，在文档的body中添加下列HTML代码，从而创建文档显示区域。你可以自定义DIV标签。在本示例中，页面的高度和宽度有限制。

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

最后，下列JavaScript代码可初始化查看器。构造函数接受影响查看器行为和初始状态的所有配置。最低配置将提示何处应该创建查看器，何处应该放置Web处理器以及最初应显示何种图像。

<script type="text/javascript"language="javascript">
var_docUrl = 'Images/Example.tif';
var_serverUrl = 'WebDocViewer.ashx';
 
var_viewer = newAtalasoft.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>

部署到IIS

此时此刻，网站已准备就绪。如果您要部署到IIS，需要注意一下几点：

• 将项目复制到IIS文档根目录下。
• 获取DotImage服务器授权，将授权文件置于项目的Bin目录。
• 在IIS Manager中，将你的项目目录转换到应用程序，并将其分配到Application Pool。
• 检查所使用Application Pool的设置，确定Enable 32-Bit Applications设置为“True”，Managed Pipeline Mode设置为Classic。

此时，你便可以在浏览器中查看你的所加载的文件。