Guide for C#
Collaborating Tiff Doc Online
Core Document Formats
Additional Features

C# Imaging - Tutorial: Collaborate TIFF Doc Online

Add Annotations to Web Document Viewer Using C#.NET

Visual C#
Home > .NET Imaging SDK > C# > Tutorial: Collaborate TIFF Document Online
If this is your first time to use our DocImageSDK, we strongly suggest you reading How to Start first!

Online Document Collaborating Overview
RasterEdge DocImage SDK for .NET offers mature and practical imaging solutions for developers to capture, view, process and annotate document files in C#.NET web site applications. This article is aimed to demonstrate how to integrate comprehensive and advanced annotating support into the web viewer. With the annotation support, you can easily and vividly add markup, notes and other collaborating features to document files through web service viewer using C# code.
Related .net document control helps:
asp.net pdf page: ASP.NET PDF Pages Edit Control: add, remove, sort, replace PDF pages online using C#
asp.net mvc pdf editor: ASP.NET MVC PDF Viewer & Editor: view, annotate, redact, edit PDF document in C# ASP.NET MVC
asp.net document viewer c#: ASP.NET Document Viewer using C#: Open, View, Annotate, Redact, Convert document files in ASP.NET using C#, HTML5, JQuer...
asp.net image viewer: ASP.NET Image Viewer Control(MVC & WebForms): view, annotate, redact, convert image files in html, JQuery
asp.net mvc document viewer: ASP.NET MVC Document Viewer: view, annotate, redact files on ASP.NET MVC web projects
asp.net word viewer: ASP.NET Office Word Document Viewer: view Word doc files online using C# in ASP.NET MVC web applications
asp.net edit pdf text: ASP.NET PDF Text Edit Control: online edit PDF text content using C# ASP.NET
To help you have a better understanding of the web document collaborating process, we will take C#.NET TIFF document annotating application as an example.
Before you add annotations to source document in web site application, you need to create a client capture application to submit a multi-page tiff document to a web service to a database. Then you can create an ASP.NET class application to navigate and view the document from the SQL database.
The online web document collaborating tutorial page is arranged in following four parts.
  • Configure C#.NET imaging controls for document annotation drawing & viewing
  • Configure C#.NET imaging application for document annotation drawing
  • Configure SQL Database to save & store created annotations
  • Save & load annotations from SQL Database
Deploy Controls for Annotation Drawing & Viewing
Follow the link to create a web viewer using C#.NET. Then open or load a tiff document from web application. After that, please follow the steps below to configure web viewing controls.
  1. Activate the ShowAnnotations propertry of the WebThumbnailViewer;
  2. Activate the AutoLinkThumbnailViewer in WebAnnotationsViwer;
  3. Add two HTML buttons (btnCallout & btnRectangle) for adding sticky notes annotations to document and for highlighting viewing document.
Deploy Application for Annotation Drawing & Writing
After you finish the controls' configuration, now you can deploy the C#.NET web viewer application to draw & add annotations.
  1. Copy following "using statements" to the default.aspx.cs file;
  2. In the Page_Load event handler, create default annotations for Callout and Rectangle using C# code listed below;
  3. Adjust the JavaScript code;
    • Change the InteractMode to Author;
    • Create the annotations;
    • In the OnAnnotationCreated event, change the InteractMode back to Modify so that the normal mouse operations can be regained.
You can have online web document annotation support after adding the code shown below and clicking the created Callout or Rectangle annotations onto the image.
Set SQL Database for Storing Created Annotations
From this part, you can find step-to-step guidance on how to configure the SQL database to store drawn annotations.
  1. To save drawn annotations separately from image data as XML, you need to add an annotation field with type varbinary(MAX);
  2. Create a query to the ImageDatabaseTableAdapter called CaptureAnnotations using the following SQL statement;
    • SELECT Annotations FROM ImageDatabase WHERE ImageID = @ImageID
  3. Create a query to the ImageDatabaseTableAdapter called UpdateAnnotations using the following SQL statement:
    • UPDATE ImageDatabase SET Annotations = @Annotations WHERE (ImageID = @Original_ImageID)
Save & Load Annotations from SQL Database

How to Store Annotations Using C#.NET

  1. Open the toolbox and drag a button (which is called a server button) onto your form and name it btnSave;
  2. Add the following code to the handler (be created by double-clicking) to save the annotations as XMP and store them in the database;

How to Load Annotations Using C#.NET

Remember to load the TIFF image first before you add the code below for annotations loading from the database.
  1. Clear the annotations from the previous image by invoking the ClearAnnotations() method of WebAnnotateViewer;
  2. Get the annotations using the Query previously added.
After you finish above two steps, the C#.NET application can easily load the tiff document with annotations that are stored in the database. Besides, more annotations can be drawn and saved back to the database.


Recommend this to Google+


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