The requested page is not available for the requested platform. You are viewing the content for Default platform.

Add the HTML5 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