Navigation

Users scroll, jump to pages and follow links in the Document Viewer, and your own navigation next to the viewer, such as a table of contents or a list of sections, can do the same. Your code scrolls to a page, shows the page thumbnails and decides what happens when users click links.

The examples change the view of the ASP.NET Core tutorial. They load App_Data/template.docx, as the tutorial does in "Load a File With DocumentPath"; use a document with several pages and at least one hyperlink.

How Users Navigate

• Scrolling. Users scroll through the pages of the document.
• Page thumbnails. The thumbnail sidebar shows a small image of each page. A toolbar button shows and hides it, and the sidebar can be resized.
• Two-page view. A toolbar button switches between a view with one page and a view with two pages side by side, like an open book, which gives an overview of long documents.
• Page navigator. A small bar at the bottom of the pages shows the current page and the number of pages, with Previous page and Next page buttons. The status bar shows the same numbers, for example "PAGE 1 OF 5".
• Links. A click on a document link, such as an entry of a table of contents, scrolls to its target in the document. A click on a hypertext link navigates to its URL.

The following viewer shows a document of five pages in the two-page view, with the thumbnail sidebar on the left and the page navigator at the bottom:

On smaller screens, the viewer shows a mobile-friendly view with its own buttons; see User Interface.

Navigate From Code

TXDocumentViewer has methods for the same functions. The following view adds a page number field with a Go button and a button that shows and hides the thumbnails. Replace the content of Views/Home/Index.cshtml:

@using TXTextControl.Web.MVC.DocumentViewer

<div style="margin-bottom: 8px;">
    <label for="pageNumber">Page:</label>
    <input type="number" id="pageNumber" value="1" />
    <input type="button" id="goToPage" value="Go" />
    <input type="button" id="thumbnails" value="Show or Hide Thumbnails" />
</div>

<div style="width: 800px; height: 600px;">

@Html.TXTextControl().DocumentViewer(settings => {
    settings.DocumentPath = "App_Data/template.docx";
    settings.Dock = DocumentViewerSettings.DockStyle.Fill;
    settings.ShowThumbnailPane = false;
}).Render()

</div>

<script>
    window.addEventListener("documentViewerLoaded", function () {
        document.getElementById("goToPage").addEventListener("click", function () {
            var page = parseInt(document.getElementById("pageNumber").value, 10);
            TXDocumentViewer.scrollToPage(page);
        });

        document.getElementById("thumbnails").addEventListener("click", function () {
            TXDocumentViewer.toggleSidebar();
        });
    });
</script>

The code works as follows:

• ShowThumbnailPane with false hides the thumbnail sidebar when the viewer starts. By default, it is visible. In Angular, React and a plain JavaScript page, the setting is named showThumbnailPane.
• TXDocumentViewer exists only after the viewer has raised the documentViewerLoaded event, so the click handlers are attached in its handler.
• scrollToPage scrolls to the page with the given number.
• toggleSidebar shows the thumbnail sidebar if it is hidden, and hides it if it is visible.

Run the application, enter a page number and click Go: the viewer scrolls to that page. Click Show or Hide Thumbnails to open the sidebar.

Both methods return nothing. The API has no method that returns the current page or the number of pages, and no event that is raised when the user scrolls to another page.

Handle Link Clicks

The viewer raises an event before it follows a link:

Call preventDefault on the event object to stop the default behavior. The following script keeps users in the application by ignoring clicks on hypertext links, while document links keep working. Add it to the handler of documentViewerLoaded in the view above:

TXDocumentViewer.addEventListener("hypertextLinkClicked", function (e) {
  // Don't navigate to the URL of the link
  e.preventDefault();
});

addEventListener attaches the handler. Apart from preventDefault, the reference documents no properties of the event object for these two events.

The links come from the document. In the Document Editor, users and your code insert hyperlinks, bookmarks and document links, as described in Fields. A table of contents inserted with links consists of document links to its headings; see Tables of Contents.

Next Steps

• Search: find text in the document.
• Zooming: change the size of the pages.
• Events: all events of the viewer.