Web Document Image Viewer - Installation

How to Install Document Image Viewer SDK in ASP.NET Application

.NET Imaging Viewer
SDK & Add-Ons
Image Controls for:
Home > .NET Image Viewer > Demos > ASP.NET
This ASP.NET web document image viewer control SDK allows developers to build a modern image viewer in ASP.NET web application. Using latest HTML5 technology, this JavaScript based ASP.NET image viewing component can not only enable programmers to display various document and image formats, but also offer the APIs for developers to perform mature image annotating, processing and redacting functions for source document & image files in ASP.NET web applications.
Related .net document control helps:
asp.net pdf viewer control: ASP.NET PDF Viewer Control: view, navigate, zoom Adobe PDF document in C# ASP.NET
asp.net ppt viewer: ASP.NET PowerPoint Document Viewer Control (MVC & WebForms): view ppt, pptx files online in C# using ASP.NET
asp.net open word document in browser: ASP.NET Office Word Document Viewer: view Word doc files online using C# in ASP.NET MVC web applications
asp.net edit pdf text color: ASP.NET PDF Text Edit Control: online edit PDF text content using C# ASP.NET
asp.net mvc text file viewer: ASP.NET Text file viewer in MVC, WebForms: Open, view, annotate, convert txt files in C# ASP.NET
asp.net tiff viewer control: ASP.NET Tiff Viewer: view, annotate multipage Tiff images in ASP.NET MVC, WebForms using C# Control
asp.net document viewer control: EdgeDoc:ASP.NET Document Viewer C# Control: Open, view, annotate, redact, convert documents online in C#, VB.NET, AS...
And this tutorial will tell developers how to install our mature and professional .NET web document image viewer SDK into their ASP.NET web form applications. Besides, we also offer more detailed installing instructions in the developer guide which you can find in the downloaded trial version. Following this online guide page, you will successfully create a web page which contains a professional web document image viewer.
Set Up ASP.NET Project
There are two main steps involved in this project setup process, which are adding reference and modifying configuration file. Please note, you may firstly activate trial/purchased license with RasterEdge.Imaging License Manager.exe in the downloaded package.
Add Project Resources
After setting up your project, now you need to copy the resources from RasterEdge ASP.NET web document image viewer package into the root of your own application. These project resources, which includes client side JavaScript and styles, are contained in the following folders, namely, RasterEdge_Imaging_Files, RasterEdge_Demo_Docs and RasterEdge_Cache. And these resources are contained in the downloaded package.
Add Web Page
To better explain how to insert a web document viewer into web page, we here will illustrate the installing steps with a new web page.
  • After you add a new Web Form, which is named Default.aspx, to your ASP.NET application, Microsoft Visual Studio will automatically create a codebehind for this file, namely, Default.aspx.cs.
  • Open Default.aspx and add following code (Javascript and HTML) to its head.
<link href="RasterEdge_Imaging_Files/RasterEdge.css" rel="stylesheet" type="text/css"/>
<script src="RasterEdge_Imaging_Files/RasterEdge.js" type="text/javascript"></script>
<script src="RasterEdge_Imaging_Files/CreateViewerToolBar.js" type="text/javascript"> </script>
<script type="text/javascript">
//the patameters defined in aspx.cs are also needed in javascript
_serverUrl = "<%=ServerUrl%>";
_docWidth = "<%=DocWidth%>" - 17;
_docHeight = "<%=DocHeight%>";
_thumbWidth = "<%=ThumbWidth%>";
_thumbHeight = "<%=ThumbHeight%>";
_rnd = "<%=SessionId%>";
_pageSizeType = "<%=PageSizeType%>"
//define annotation style
TextAnnoStyle = new AnnoStyle({FillColor: "White", ShowedText: "double click to edit",
TextColor: "Black", TextFont: "Arial", TextSize: 12, TextStyle :"Italic"});
FreehandAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 3.0});
HighlightAnnoStyle = new AnnoStyle({FillColor: "Yellow"});
RectangleAnnoStyle = new AnnoStyle({OutLineColor: "Black", OutLineWidth: 3.0});
FilledRectangleAnnoStyle = new AnnoStyle({OutLineColor: "Black", OutLineWidth: 3.0,
FillColor: "Black", Transparency: 1});
EllipseAnnoStyle = new AnnoStyle({FillColor: "Orange"});
RubberStampAnnoStyle = new AnnoStyle({OutLineColor: "Tomato", OutLineWidth: 3.0, FillColor:
"Red", ShowedText: "Stamp annotation can show text here", TextColor: "Black", TextFont:
"Arial", TextSize: 12, TextStyle: "Italic"});
PolygonLinesAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 3.0});
PolygonAnnoStyle = new AnnoStyle({OutLineColor: "OrangeRed", OutLineWidth: 3.0, FillColor:
"OrangeRed"});
LineAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 3.0});
</script>
  • Now we need to define a document image viewing area, which can be achieved by adding following HTML into the body of Default.aspx file.
<div class="re_container">
   <div class="re_func_toolbar"></div>
   <div id="_tblImgs" class="re_content" style="width:100%" >
   </div>
</div>
  • Display our web document image viewer control in the Toolbox. Right click Toolbox, select "Choose Items ..." and select "RasterEdge.Imaging.WebViewer.dll" that you can find in the bin folder of downloaded trial version. After you finish this step, you will find a newly added web control called REWebViewer in the Toolbox of your ASP.NET web project.
  • Drag the newly added control REWebViewer to the <div> whose id is _tblImgs, as follows.
<div id="_tblImgs" class="re_content" style="width:100%" >
   <cc1:REWebViewer ID="REWebViewer1" runat="server" />
</div>
Add Page_Load Content
In order to initialize some information, we need to add the following code to Default.aspx.cs file in your ASP.NET project.
public string ServerUrl;
public string SessionId;
public string OpenFileUrl;
public float ThumbHeight = 100;
public float ThumbWidth = 80;
public float DocHeight = 640;
public float DocWidth = 819;
public int PageSizeType = 1;
protected void Page_Load(object sender, EventArgs e)
{
   this.ServerUrl = "/RasterEdge_Imaging_Files/WebHandler.ashx";
   this.SessionId = "RasterEdge" + Session.SessionID;
   this.OpenFileUrl = "OpenServerFile.aspx";
   string method = Request.Form["method"];
   if (method == null || method.Equals(""))
   {
      this.REWebViewer1.DocWidth = DocWidth;
      this.REWebViewer1.DocHeight = DocHeight;
      this.REWebViewer1.ThumbWidth = ThumbWidth;
      this.REWebViewer1.ThumbHeight = ThumbHeight;
      OpenFile();
    }
   else if (method.Equals("OpenFile"))
   {
      OpenFile();
   }
   else if (method.Equals("SaveFile"))
   {
      SaveFile();
   }
}

public void OpenFile()
{
   string uploadFile = Request.Form["uploadfile"];
   if (uploadFile == null || uploadFile.Equals(""))
   {
      string fileName = Request.QueryString["filename"];
      if (fileName == null || fileName.Equals(""))
      {
         this.REWebViewer1.LoadFile("/RasterEdge_Demo_Docs/Sample.pdf",
         this.SessionId);
      }
      else
      {
         this.REWebViewer1.LoadFile(fileName, this.SessionId);
      }
   }
   else
   {
      string filename = "/RasterEdge_Cache/" + uploadFile;
      this.REWebViewer1.LoadFile(filename, this.SessionId);
      //load from stream
      //this.REWebViewer1.LoadFile(stream, this.SessionId);
   }
}

public void SaveFile()
{
   REDocument doc = (REDocument)Session[this.SessionId + "Save"];
   if (doc != null)
   {
      REFile.SaveDocumentFile(doc, "c:/save.pdf", new PDFEncoder());
   }
}
After you finish above document image viewer SDK installing steps, you will find you have successfully inserted an image viewer in your web page and the embedded document image viewer has displayed a PDF document file. If you have met any problem in the whole web document image viewer SDK installing process, please feel free to contact us via E-mail.
If you want to create a fully customized ASP.NET web document image viewer, please read the Developer Guide contained in RasterEdge.DocImageSDK6.0 package. For example, you can create a self-defined toolbar for this ASP.NET web document image viewer. You can customize the annotating style and specify the way to load or save document image file in ASP.NET web application.
Besides this installing tutorial page, we also offer other guide pages to illustrate various imaging functions supported by this web document image viewer SDK. And these tutorials are listed below.
Start Imaging Processing Journey
Want to install Imaging SDK in WinForms applications, please go to Use Imaging SDK in WinForms.


RasterEdge.com is professional provider of ASP.NET MVC Document Viewer, ASP.NET PDF Viewer, MVC PDF Viewer document, content and imaging solutions, available for ASP.NET AJAX, Silverlight, Windows Forms as well as WPF. We are dedicated to provide powerful & profession imaging controls, PDF document, image to pdf files and components for capturing, viewing, processing, converting, compressing and stroing images, documents and more.

©2000-2017 Raster Edge.com