Guide for C#
Integrate Web Viewer Control
Core Document Formats
Additional Features

C# Imaging - How to Integrate Web Viewer Control

Detailed Guide on Integrating Doc Image Web Viewer Control in C#.NET Program

Visual C#
Home > .NET Imaging SDK > C# > Integrate Web Viewer Control
If this is your first time to use our DocImageSDK, we strongly suggest you reading How to Start first!

Overview of .NET Imaging Web Viewer in C#
RasterEdge DocImage SDK for C#.NET provides comprehensive and powerful APIs for developers to view, edit, annotate and process variable image and document formats in commonly used modern browsers, such as IE, Chrome, Firefox, and Safari.
This C#.NET Web Document Imaging Viewer SDK is easy to be installed and integrated into Microsoft .NET Framework applications. Following guidance is provided for C# developers to install and integrate Web Document Imaging Viewer SDK into their .NET, C#.NET projects in an easy way.
Download C#.NET Web Document Imaging Viewer SDK
It is very simple to finish this operation. Visual C#.NET developers are capable of downloading our Web Document Viewer SDK of RasterEdge .NET Imaging product package by clicking the "Download Now - Get the Free Trial SDK" button in the upper right corner of this page, or you can check this download RasterEdge DocImage SDK for .NET link directly.
One thing that needs to be mentioned here is that you have to activate product license as required before using this C#.NET Web Document Image Viewer SDK. And the activation steps are easy to follow. You may see license activation guide here.
C#.NET Imaging Web Viewer SDK Package Overview
In this part, we will show you what are contained in this C#.NET Web Document Viewer SDK package.
  • bin: you can find .NET Web Document Image Viewer DLL & other imaging dlls under this folder
  • Demo projects: demo project for building a modern web document image viewer is contained in this folder
  • License manager: executive applications are offered here for you to activate and get your valid developer license
  • RasterEdgeImagingDeveloperGuide8.0.pdf: from this user manual, you can find the detailed instructions and explanations for why & how to create & insert a professional .NET web document image viewer in Visual C# .NET programming application
Installation Requirements of Using C#.NET Imaging Web Viewer
This section provides C# users with detailed instructions for the system requirements for using RasterEdge .NET Web Document Image Viewer SDK from several sub-sections.

Supported Operating Systems for C# Web Doc Viewing Project

  • Windows 2000 Service
  • Windows Server 2003 32-bit
  • Windows Server 2003 x64 edition
  • Windows XP 32-bit
  • Windows XP Professional x64 edition
  • Windows Server 2008 32-bit and 64-bit editions
  • Windows 7 32-bit and 64-bit editions
  • Visual Studio 2005, 2008, 2010, 2012 and 2013 versions

Supported .NET Framework Versions for C#.NET Web Doc Viewing

Our C#.NET Imaging SDK and its Web Document Viewer DLL are compatible with Microsoft .NET Framework 2.0, 3.0, 3.5, 4.0 & 4.5 versions.

Supported Web Browsers

This C# .NET Web Document Image Viewer supports IIS and owns high compatibility with the following browsers:
  • Windows Internet Explorer 7.0 and above
  • Firefox 3.0 and above
  • Safari 4.0 and above
  • Chrome 4.0 and greater
Integrate RasterEdge C#.NET Web Document Image Viewer Control

Setup Your ASP.NET Website

Create a new website or open your existing one from where the website is ready to run.
  1. Add references to assemblies.
    Right-click the project, select "Add Reference...", locate the RasterEdge.DocImagSDK(version)\bin in the download package, and add a new reference called RasterEdge.Imaging.WebViewer.dll to your C# web project. Once you do this, dependencies will automatically be included in your project.
  2. Modify your configuration file.
    Copy the content of Web.config in the download package to your configuration file which is supposed to be Web.config.
  3. Copy the Web Document Viewer resources to your C#.NET web project.
    These resources include client side javascript and styles. Resources folders are named RasterEdge_Imaging_Files, RasterEdge_Demo_Docs and RasterEdge_Cache, located in the download package. The WebHandler.ashx file has been included in RasterEdge_Imaging_Files. Please copy these directories to the root of your C# project.

Embed Document Viewer to Your ASPX Web Page

In a real deployment, C# developers will want to insert the web document viewer into your own web page, but for this example we will work with a new page.
Now, you may add a new Web Form to your web project. We assume that you name this file Default.aspx and Visual Studio will automatically create a code behind for this file, called Default.aspx.cs.
  1. First, copy the following lines of C# code to the head of Default.aspx.
<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">
_fid = "<%=fid %>";
_viewer = new RasterEdgeViewer({
_serverUrl: "/RasterEdge_Imaging_Files/WebHandler.ashx",
//0 represent png, 1 represent svg
_pdfViewer: 1,
_wordViewer: 1,

//Set width and height of the webViewer(pixel)
_viewerWidth: 1024,
_viewerHeight: 730,

//define annotation style
//annotation style
//Color:Hexadecimal color can be used
//Transparency:1 on behalf of saturated, 0 represents completely transparent
TextAnnoStyle = new AnnoStyle({FillColor: "White", ShowedText: "double click to edit", TextColor: "Black", TextFont: "Arial", TextSize: 12, TextStyle :"normal"});
FreehandAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.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: "Good", TextColor: "Black", TextFont: "Arial", TextSize: 12, TextStyle: "Italic"});
PolygonLinesAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.0});
PolygonAnnoStyle = new AnnoStyle({OutLineColor: "OrangeRed", OutLineWidth: 3.0, FillColor: "OrangeRed"});
LineAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.0});
ArrowAnnoStyle = new AnnoStyle({OutLineColor: "Red", OutLineWidth: 5.0, FillColor: "Red",Transparency:0.8});

//Set whether the toolbar shows the corresponding icon(true or false)
//You can set the item including:_toolbar/_fileToolbar/_annoToolbar/_fullToolbar
//_uploadToolbar/_printToolbar/_saveToolbar/_convertToolbar //_textToolbar/_freehandToolbar/_arrowToolbar/_lineToolbar/_polygonLinesToolbar/_filledRectangleToolbar/_rectangleToolbar/_highlightToolbar/_ellipseToolbar/_polygonToolbar/_rubberStampToolbar/_deleteToolbar
The first three lines of code are to load the necessary resources for creating web document viewer objects. And the remaining code is to initialize your C#.NET web viewer.
  1. Next, add the following HTML into your document's body to create the document viewing area.
<div class="re_container">
<div class = "re_func_toolbar"></div>
<div id="_tblImgs"class="re_content" style="width:100%">
<div class="RE_WebViewer" id="REWebViewer1"></div>
  1. Here are some snippets of Default.aspx. In order to implement certain functions in your own C#.NET project, you may select some codes below to Default.aspx.cs file in your project. Two methods, OpenFile() and SaveFile(), allow users to customize the way to open and store files. Customization details are in the sections under "Advanced settings".
public string mode;
public string fid;
protected void Page_Load(object sender, EventArgs e)
string command = Request.Form["RECommand"];
if (command == null || command.Equals(""))
else if (command.Equals("OpenFile"))
else if (command.Equals("SaveFile"))

public void LoadFileFromUrl()
string file = Request.QueryString["file"];
if (file != null &&file != "")
file = file.Trim();
string initFilePath = file;
string projectName = System.Web.HttpContext.Current.Request.PhysicalApplicationPath.Replace("\\", "/");
string path = projectName + "
/RasterEdge_Demo_Docs/" + initFilePath;
if (File.Exists(path))
fid = REDocumentControl.GenerateId();
string result = LoadFile("
RasterEdge_Demo_Docs" + initFilePath, fid);
if (result != "
", "<script>alert('" + result + "');</script>");

public void LoadFileFromUpload()
string uploadFile = Request.Form["
string filename = "
/RasterEdge_Cache/" + uploadFile;
fid = Request.Form["
string result = LoadFile(filename, fid);

//load document from stream
//REDocumentControl.LoadFile(Stream stream, fid);

//load document from array
//REDocumentControl.LoadFile(byte[] array, fid);

public void SaveFile()
string fileName = Request.Form["
string fid = Request.Form["

private string LoadFile(string filename,string fid)
string result = "
REDocumentControl.LoadFile(filename, fid);
catch (Exceptionex)
result = ex.Message.ToString();
return result;
More Image Web Viewer Tutorials!
Check to see more tutorials for using .NET, C#.NET Web Document and Image Viewer.

Recommend this to Google+