All docs
V18.2
20.2 (EAP/Beta)
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
18.1
17.2

ASP.NET Document Viewer

  • 3 minutes to read

The Document Viewer renders report documents on ASP.NET MVC web pages. It provides a toolbar to navigate, export and print a document. If a report has bookmarks assigned to its elements, the Document Viewer provides a Document Map to navigate through the report. The Document Viewer also provides a user interface to request report parameter values on the client.

ReportToolbarExtension

The Document Viewer can publish documents supplied by a remote report service or Report and Dashboard Server, which is illustrated in the following example: Printing a Remotely Created Document in an ASP.NET MVC.

To see the Document Viewer in action, refer to the following online demo: ASP.NET MVC Reporting.

Implementation Details

To use a Document Viewer in ASP.NET MVC, use the DocumentViewerExtension class. To add a Document Viewer extension to a View, call the ExtensionsFactory.DocumentViewer helper method. This method provides a parameter that returns the DocumentViewerSettings. Use these settings to customize the Document Viewer extension.

As a client-side counterpart of an MVCxDocumentViewer, use the MVCxClientDocumentViewer class.

The following code demonstrates how to add a Document Viewer to a view.

Partial view code - "ReportViewerPartial" (ASPX):

<%
    Html.DevExpress().DocumentViewer(settings =>{
        // The following settings are required for a Document Viewer.
        settings.Name = "documentViewer1";
        settings.Report = (DevExpressMvcApplication1.Reports.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" };
    }).Render();
%>

Partial view code - "ReportViewerPartial" (Razor):


@Html.DevExpress().DocumentViewer(settings =>{
    // The following settings are required for a Document Viewer.
    settings.Name = "documentViewer1";
    settings.Report = (DevExpressMvcApplication1.Reports.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" };
    }).GetHtml()

Controller code:

using System.Web.Mvc;
// ...

namespace DevExpressMvcApplication1.Controllers {
    public class HomeController : Controller {
        public ActionResult Index() {
            // Add the report to View data.
            ViewData["Report"] = new DevExpressMvcApplication1.Reports.XtraReport1();
            return View();
        }

        public ActionResult DocumentViewerPartial() {
            ViewData["Report"] = new DevExpressMvcApplication1.Reports.XtraReport1();
            return PartialView("DocumentViewerPartial");
        }

        public ActionResult ExportDocumentViewer() {
            return DevExpress.Web.Mvc.DocumentViewerExtension.ExportTo(
                new DevExpressMvcApplication1.Reports.XtraReport1());
        }
    }
}
See Also