Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Collapse]Report Extensions
   [Collapse]Document Viewer
     HTML5 Document Viewer
     ASP.NET Document Viewer
     ASP.NET Document Viewer Toolbar
   [Expand]Report Designer
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

HTML5 Document Viewer

The MVCxWebDocumentViewer is used to add an interactive document preview to a page of an ASP.NET MVC application. This control is implemented using the HTML5/JS technology and is primarily intended to be used on desktop browsers.

This document consists of the following sections.

Expanded Main Features

The Web Document Viewer control provides a toolbar that contains commands for navigation through the displayed document, export and printing. It also provides a Document Map and Parameter Editors.

Among the advantages of the HTML5 Document Viewer are the following.

  • Asynchronous building of documents.
  • Pixel-perfect rendering of documents.
  • The multi-page mode enabling you to display the entire document at once.
  • A flexible client-side customization mechanism (e.g., to customize the available export options).
  • A modern look of the application.
  • Support for in-place content editing.
  • Support for a Mobile Mode adapted for use on phones and tablets.

To see the Web Document Viewer in action, refer to the following online demo: ASP.NET MVC Reporting.

Expanded Implementation Details

To use a Web Document Viewer in ASP.NET MVC, use the WebDocumentViewerExtension class. To add a Web Document Viewer extension to a View, call the ExtensionsFactory.WebDocumentViewer helper method. This method expects a parameter that is a System.Action<DevExpress.Web.Mvc.WebDocumentViewerSettings> delegate. This delegate is used to configure the Web Document Viewer extension by adjusting its settings accumulated in a WebDocumentViewerSettings object.

As a client-side counterpart to the MVCxWebDocumentViewer, use the MVCxClientWebDocumentViewer class.

The following code demonstrates how to add a Web Document Viewer to a View.

View code (ASPX):

View code (Razor):

Controller code:

Expanded System Requirements

This section describes the requirements for running the HTML5 Document Viewer on the client.

The following script files should be installed on the client web browser to run the Document Viewer:

  • jQuery 1.11.3+

  • jQuery UI 1.11.4+ (both JavaScript and CSS files) with the following scripts:

    • core.js
    • widget.js
    • mouse.js
    • draggable.js
    • resizable.js
    • selectable.js

    To assemble a custom jQuery UI library that includes the required scripts, visit the following page: Download Builder.

  • globalize 1x

    The Document Viewer requires the core Globalize script and its four modules (message, number, date and currency), as well as some cldrjs scripts. Here is a list of the required Globalize scripts:

    Read more about Globalize modules and requirements in the Globalize documentation.

    The basic cldr content needed for the Document Viewer is included in the library. However, for locales other than "en" (or currencies other than "USD"), cldr content should be loaded additionally (read more in the Globalize documentation).

  • knockout 3.3.0+

You should download and place all JavaScript files into your application's Scripts folder, set the paths to these libraries in the src attribute, and put the CSS files into the Content folder. You can also use NuGet to download and install these files automatically.

To include these script files in a client application, do one of the following:

  • Automatic Integration

    Include these client-side libraries on the web page automatically by adding the "resources" section to the application's Web.config file, as shown below.

  • Manual Integration

    To avoid automatic loading of any libraries by a control (that is, when such libraries are already referenced on the web page), do the following:

    • Declare an empty "resources" section in the Web.config file.

    • Manually attach DevExtreme resources and the required third-party libraries (such as jQuery and Globalize) to the web page.

    Note

    Deleting the DevExpress "resources" section from the Web.config file enables the default behavior (with automatic loading only of DevExtreme, without adding third-party libraries).

    To learn more about this configuration, see Embedding Third-Party Libraries.

For a list of web browsers supported by the Document Viewer, refer to the following document: Supported Browsers.

Expanded See Also

How would you rate this topic?​​​​​​​