HTML5 Document Viewer
- 5 minutes to read
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.
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.
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 Action<T><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):
<%
Html.DevExpress().WebDocumentViewer(settings => {
settings.Name = "webDocumentViewer";
// Uncomment the following line to enable the mobile mode.
//settings.MobileMode = true;
}).Bind(Model).GetHtml();
%>
View code (Razor):
@model DevExpress.XtraReports.UI.XtraReport
@Html.DevExpress().WebDocumentViewer(settings => {
settings.Name = "webDocumentViewer";
// Uncomment the following line to enable the mobile mode.
//settings.MobileMode = true;
}).Bind(Model).GetHtml()
Note
Use the WebDocumentViewerSettings.MobileMode property to enable the Mobile Mode.
Controller code:
public class HomeController : Controller {
public ActionResult Index() {
return View(new XtraReport1());
}
}
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.
-
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:
<script src="js/cldr.js"></script> <script src="js/cldr.event.js"></script> <script src="js/cldr.supplemental.js"></script> <script src="js/cldr.unresolved.js"></script> <script src="js/globalize.js"></script> <script src="js/globalize/message.js"></script> <script src="js/globalize/number.js"></script> <script src="js/globalize/currency.js"></script> <script src="js/globalize/date.js"></script>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.
<devExpress> <!-- ... --> <resources> <add type="ThirdParty" /> <add type="DevExtreme" /> </resources> </devExpress>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.
<resources> </resources>Manually attach DevExtreme resources and the required third-party libraries (such as jQuery and Globalize) to the web page.
<html> <head> <script src="Scripts/jquery-1.11.3.js" type="text/javascript"></script> <script src="Scripts/jquery-ui-1.11.4.min.js" type="text/javascript"></script> <script src="Scripts/knockout-3.3.0.js" type="text/javascript"></script> <script src="Scripts/globalize/cldr.js"></script> <script src="Scripts/globalize/cldr.event.js"></script> <script src="Scripts/globalize/cldr.supplemental.js"></script> <script src="Scripts/globalize/cldr.unresolved.js"></script> <script src="Scripts/globalize/globalize.js"></script> <script src="Scripts/globalize/globalize.message.js"></script> <script src="Scripts/globalize/globalize.number.js"></script> <script src="Scripts/globalize/globalize.currency.js"></script> <script src="Scripts/globalize/globalize.date.js"></script> <link href="Content/themes/base/jquery-ui.css" type="text/css" rel="Stylesheet" /> ... </head> ... </html>
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.