Add the Document Viewer to an ASP.NET MVC Application

  • 3 minutes to read

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:

    @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.Web.CachedReportSourceWeb
      @Html.DevExpress().WebDocumentViewer(settings => {
          settings.Name = "WebDocumentViewer";
    3. Check whether the _Layout.cshtml file includes the style sheet and script as shown below. Add them if necessary. Make sure that the style sheet and script extensions are added only once.

          new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
          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.

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

For troubleshooting, review the Document Viewer Requirements and Limitations document. Run the application to view the result in a web browser.


See Also