HOWTO: Simple document viewer with ASP.NET MVC as external service

Attached is a simple version of our latest document viewer which no longer uses rest services but instead is a self contained ASP.NET MVC project. The attached doesn't touch any server code, instead is a separate project on your server that uses the self contained MVC project as a external service and allows you to easily create your own UI.



Steps:

1. Open the local DocumentViewer(\LEADTOOLS 19\Examples\JS\DocumentViewer) in visual studio(as admin)

2. Go to project properties

3. Go to web tab

4. Under Servers, switch it from IIS Express to local IIS, then press 'create virtual directory'(http://localhost/WebApp)

5. unzip my project into the root of your IIS(c:\inetpub\wwwroot)

6. browse to http://localhost/newdocumentviewer

optional: You can remove the App folder from the DocumentViewerDemo that you put on your server since it's the client side code. But I recommend using a separate copy for this since it will destroy the DocumentViewerDemo's usability as a Document Viewer.



The reason we have to switch to local IIS is because our document server and client have to be served on the same port. At the very beginning of app.js I set the path to the server using https://www.leadtools.com/help/leadtools/v19/dh/javascript/to/leadtools.topics.documents~dox.topics.documents_application.html



If you want to name the server-side portion of your code something else than WebApp or want a slightly different folder structure then you will need to modify these accordingly.



The simple version of the document viewer is based off of our sample code on the website, with separation of code and some added functionality and styles.

https://www.leadtools.com/help/leadtools/v19/dh/javascript/doxui/leadtools.documents.ui~leadtools.documents.ui.documentviewer.html



The style sheets "imageviewerstyles.css" and "thumbnailstyles.css" are taken from the document viewer demo to style thumbnails, and document if you have useElements set to true(default). Because it's not one solid canvas and each element has its own divs and img tags, the styling has to be done from the client side, this can be modified to your liking.



Additional info about the elements when useElements is set to true:

https://www.leadtools.com/help/leadtools/v19/dh/javascript/to/leadtools.topics.controls~c.topics.imageviewer_elementsmode.html

https://www.leadtools.com/help/leadtools/v19/dh/javascript/c/leadtools.controls~leadtools.controls.imageviewercreateoptions~elementsmodeoptions.html

https://www.leadtools.com/help/leadtools/v19/dh/javascript/c/leadtools.controls~leadtools.controls.imageviewercreateoptions~useelements.html%lt;/install_dir>

LEADTOOLS Support
LEAD Technologies, Inc.

Edited by moderator Tuesday, October 18, 2016 11:37:03 AM(UTC)  | Reason: Not specified

See also:
HOWTO: Print From HTML5 DocumentViewer

Edited by moderator Tuesday, October 18, 2016 11:38:38 AM(UTC)  | Reason: Updated link