Add the HTML5 Document Viewer to an ASP.NET MVC Application

• Aug 01, 2019
• 3 minutes to read

Note

Watch the Video: Reporting: ASP.NET MVC Document Viewer (YouTube)

This document illustrates how to add a Document Viewer to a Web page in an ASP.NET MVC application.

To get started with this tutorial, open an existing reporting application or create a new one from scratch.

Insert the WebDocumentViewer MVC extension in one of the following ways:

• Use the DevExpress MVC Extension Wizard

  1. Open the main view (named Index.cshtml) and right-click anywhere in the view window. In the invoked context menu, select Insert DevExpress MVC Extension.

     

  2. In the invoked dialog, select the Reports tab and then select the WebDocumentViewer extension. Specify the required report as a model class to display in the Document Viewer and click Insert. Note that the report should have been added to the current project previously.

     

  After that, the following view code is generated automatically:

  ASP

  @Html.DevExpress().WebDocumentViewer(settings => {
      settings.Name = "WebDocumentViewer";
  }).Bind(new CachedReportSourceWeb(new DXWebApplication1.Reports.XtraReport1()).GetHtml()
  

  In this code, the CachedReportSourceWeb object passed as the Bind method’s parameter generates a document for the associated report, caching each generated page.

• Manually Register the Required Extension

  1. Switch to the HomeController.cs file and pass a CachedReportSourceWeb object as a model object to the Index view the corresponding action method returns.

     C#

     using System.Web.Mvc;
     using DevExpress.XtraReports.Web;
     // ...
     
     public class HomeController : Controller {
         public ActionResult Index() { 
             var cachedReportSource = new CachedReportSourceWeb(new XtraReport1());
             return View(cachedReportSource);
         }
     }
     

     VB.NET

     Imports System.Web.Mvc
     Imports DevExpress.XtraReports.Web
     ' ...
     
     Public Class HomeController
         Inherits Controller
         Public Function Index() As ActionResult
             Dim cachedReportSource = New CachedReportSourceWeb(New XtraReport1())
             Return View(cachedReportSource)
         End Function
     
     End Class
     

  2. Switch to the Index.cshtml file and add the following code, which calls the ExtensionsFactory.WebDocumentViewer method and passes specific settings to the method as a parameter:

     Razor

     @model DevExpress.XtraReports.UI.XtraReport
     @Html.DevExpress().WebDocumentViewer(settings => {
         settings.Name = "WebDocumentViewer";
     }).Bind(Model).GetHtml()
     

  3. Register the corresponding style sheet and script extensions in the _Layout.cshtml file.

     Razor

     @Html.DevExpress().GetStyleSheets(
         new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
     )
      @Html.DevExpress().GetScripts(
         new Script { ExtensionSuite = ExtensionSuite.Report }
     )
     

Add the “resources” section to the application’s Web.config file as shown below to transfer all the necessary script files to a client application automatically.

XML

<devExpress>
    <!-- ... -->
    <resources>
        <add type="ThirdParty" />
        <add type="DevExtreme" />
    </resources>
</devExpress>

See the Document Viewer Requirements and Limitations document to learn about manual Document Viewer integration.

Run the application to view the result in a web browser.