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

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

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

Add a required report to the current project and insert the DocumentViewer 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 DocumentViewer extension. Specify the required report as a model class to display in the Document Viewer and click Insert. Note that you should add the report to the project before running this dialog.


  • Manually Register the Required Extension

    1. Create a partial view file (for instance, DocumentViewerPartial) and add the following code which calls the ExtensionsFactory.DocumentViewer method and passes specific settings to the method as a parameter:

      @Html.DevExpress().DocumentViewer(settings =>{
          // The following settings are required for a Document Viewer.
          settings.Name = "documentViewer1";
          settings.Report = (DXWebApplication1.XtraReport1)ViewData["Report"];
          // Callback and export route values specify corresponding controllers and their actions. 
          // These settings are also required.
          settings.CallbackRouteValues = new { Controller="Home", Action="DocumentViewerPartial" };
          settings.ExportRouteValues = new { Controller="Home", Action="ExportDocumentViewer" };
    2. Switch to the HomeController.cs file and write the following code for the action methods to pass report instances to the Views' data:

      using System.Web.Mvc;
      // ...
      namespace DevExpressMvcApplication1.Controllers {
          public class HomeController : Controller {
              public ActionResult Index() {
                  // Add the report to View data.
                  ViewData["Report"] = new DXWebApplication1.XtraReport1();
                  return View();
              public ActionResult DocumentViewerPartial() {
                  ViewData["Report"] = new DXWebApplication1.XtraReport1();
                  return PartialView("DocumentViewerPartial");
              public ActionResult ExportDocumentViewer() {
                  return DevExpress.Web.Mvc.DocumentViewerExtension.ExportTo(
                      new DXWebApplication1.XtraReport1());
    3. Register the corresponding style sheet and script extension in the _Layout.cshtml file.

          new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
          new Script { ExtensionSuite = ExtensionSuite.Report }

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