TX Text Control Blog

Using the ASP.NET MVC DocumentViewer JavaScript API

Björn Meyer

Blogged by Björn Meyer on April 28, 2017 and tagged with mvc, documentviewer, asp.net, javascript.


The MVC DocumentViewer is an HTML5 based control to view TX Text Control supported document formats in all browsers. It is an MVC HtmlHelper and can be easily integrated into an MVC view:

This tutorial shows how to create a new MVC application using the DocumentViewer:

Creating an ASP.NET MVC DocumentViewer application with Razor

The available settings that can be adjusted in the view are documented here:

DocumentViewerSettings Class documentation

Additionally, the DocumentViewer also provides a JavaScript API to adjust the most typical settings client-side. The JavaScript documentation can be found here:

TXDocumentViewer Object documentation

NameDescription
toggleToolbarToggles the toolbar of the document viewer.
toggleSidebarToggles the sidebar of the document viewer that contains the page thumbnails for faster navigation.
toggleSelectionEnables and disables (toggle) the selection feature that enables users to select text lines.
toggleFullscreenToggles the fullscreen mode.
selectSearchboxSelects the text in the toolbar search input form element.
scrollToPageScrolls to a specific page. Usage: scrollToPage(int pageNumber)
printDocumentOpens the client-side PDF print dialog box to print the current document.
nextSearchResultNavigates to the next or previous search result. Usage: nextSearchResult(bool next)
lockZoomToggles the zoom lock to 100%.
findSearches for a string in the document. Usage: find(string)
downloadDocumentDownloads the document as a PDF.
cancelSearchClears the search results.

The easiest way to test the JavaScript API is to open the JavaScript console (browser F12 developer tools) and to start typing TXDocumentViewer. The object TXDocumentViewer exposes its members automatically:

Using the ASP.NET MVC DocumentViewer JavaScript API

For example, the following JavaScript code toggles the quick navigation sidebar:

Most methods are simple calls without any parameters to toggle a specific visual element of the DocumentViewer. Two methods have a parameter: find and scrollToPage. The following code is searching for a specific string in the document:

The next code snippet scrolls to a specific page in the current document:

Try this on your own and join the beta program with the free "go live" license for valid subscribers of TX Text Control .NET Server for ASP.NET.

Happy coding!

 
 
Call us: +1 704-544-7445 (United States)
 
 

Products

Support

Downloads

Corporate

Buy Now

About Text Control

Founded in 1991, Text Control is an award-winning Visual Studio Industry Partner and leading vendor of word processing and reporting components for Microsoft development technologies. The products help thousands of developers add comprehensive word processing functionality to their applications. Text Control is 100% self-owned and independent of all investor decisions. Customers benefit from these years of experience, large user-base, and at the same time, appreciate developing with a mature, reliable product.

SD Times 100SD Times 100SD Times 100SD Times 100SD Times 100SD Times 100Visual Studio 2015 Launch PartnerVisual Studio 2013 Launch PartnerVisual Studio 2012 Launch PartnerVisual Studio Partner