Add the Document Viewer to an ASP.NET MVC Application

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.

      getting-started-eud-mvc-context-menu

    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.

      getting-started-asp-mvc-add-viewer-extension

    After that, the following view code is generated automatically:

    @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.

      using System.Web.Mvc;
      using DevExpress.XtraReports.Web;
      // ...
      
      public class HomeController : Controller {
          public ActionResult Index() { 
              var cachedReportSource = new CachedReportSourceWeb(new XtraReport1());
              return View(cachedReportSource);
          }
      }
      
    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:

      @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.

      @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.

<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.

getstarted-mvc-web-document-viewer

See Also