ASP.NET Document Viewer

• Aug 01, 2019
• 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.

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):

C#

<%
    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();
%>

VB.NET

<%
    Html.DevExpress().DocumentViewer(Function(settings) 
        ' The following settings are required for a Document Viewer.
        settings.Name = "documentViewer1"
        settings.Report = DirectCast(ViewData("Report"), DevExpressMvcApplication1.Reports.XtraReport1)
        ' Callback and export route values specify corresponding controllers and their actions. 
        ' These settings are also required.
        settings.CallbackRouteValues = New With { _        
                Key .Controller = "Home", _
                Key .Action = "DocumentViewerPartial" _
        }
        settings.ExportRouteValues = New With { _
                Key .Controller = "Home", _
                Key .Action = "ExportDocumentViewer" _
        }
    End Function).Render()
%>

Partial view code - “ReportViewerPartial” (Razor):

C#

@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()

VB.NET

@Html.DevExpress().DocumentViewer(Function(settings) 
    ' The following settings are required for a Document Viewer.
    settings.Name = "documentViewer1"
    settings.Report = DirectCast(ViewData("Report"), DevExpressMvcApplication1.Reports.XtraReport1)
    ' Callback and export route values specify corresponding controllers and their actions. 
    ' These settings are also required.
    settings.CallbackRouteValues = New With { _
        Key .Controller = "Home", _
        Key .Action = "DocumentViewerPartial" _
    }
    settings.ExportRouteValues = New With { _
        Key .Controller = "Home", _
        Key .Action = "ExportDocumentViewer" _
    }
End Function).GetHtml()

Controller code:

C#

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());
        }
    }
}

VB.NET

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

Namespace DevExpressMvcApplication1.Controllers
    Public Class HomeController
        Inherits Controller
        Public Function Index() As ActionResult
            ' Add the report to View data.
            ViewData("Report") = New DevExpressMvcApplication1.Reports.XtraReport1()
            Return View()
        End Function

        Public Function DocumentViewerPartial() As ActionResult
            ViewData("Report") = New DevExpressMvcApplication1.Reports.XtraReport1()
            Return PartialView("DocumentViewerPartial")
        End Function

        Public Function ExportDocumentViewer() As ActionResult
            Return DevExpress.Web.Mvc.DocumentViewerExtension.ExportTo(New DevExpressMvcApplication1.Reports.XtraReport1())
        End Function
    End Class
End Namespace