Add the Document Viewer to an ASP.NET Web Forms Application

• Sep 19, 2023
• 2 minutes to read

Watch Video: Reporting: Web Viewer (YouTube)

Step-by-Step Guide

This tutorial demonstrates how to add the Document Viewer to a web page in an ASP.NET Web Forms application:

1. Open an application that contains a report or add a new report in Visual Studio.

2. Expand the DX.23.2: Reporting Toolbox tab, drag the ASPxWebDocumentViewer control, and drop it onto a web page.

   

3. Rebuild the project. Assign a report to the ASPxWebDocumentViewer control in one of the following ways:

   • Click the control’s smart tag, expand the drop-down list for the Report property, and select a report.

     

     The following markup is generated:

     Default.aspx

     <asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
         <dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server"  ReportSourceId="WebFormsExample.Reports.XtraReport1" >
         </dx:ASPxWebDocumentViewer>
     </asp:Content>
     

   • Specify the ReportSourceId property in the Properties window:

     

   • Instantiate a report and call the ASPxWebDocumentViewer.OpenReport(XtraReport) method:

     Default.aspx.cs

     using DevExpress.XtraReports.Web;
     //...
         protected void Page_Load(object sender, EventArgs e)
         {
             ASPxWebDocumentViewer1.OpenReport(new DXWebApplication1.XtraReport1());
         }
     

     Default.aspx.vb

     Imports DevExpress.XtraReports.Web
     '...
         Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
             ASPxWebDocumentViewer1.OpenReport(New XtraReport1())
         End Sub
     

   • Create the CachedReportSourceWeb object that generates a document internally and caches each generated page (recommended for large reports). Call the ASPxWebDocumentViewer.OpenReport method:

     Default.aspx.cs

     using DevExpress.XtraReports.Web;
     //...
         protected void Page_Load(object sender, EventArgs e)
         {
             var cachedReportSource = new CachedReportSourceWeb(new XtraReport1());
             ASPxWebDocumentViewer1.OpenReport(cachedReportSource);
             // ASPxWebDocumentViewer1.OpenReport(new XtraReport1());
         }
     

     Default.aspx.vb

     Imports using DevExpress.XtraReports.Web
     '...
         Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
             Dim cachedReportSource = New CachedReportSourceWeb(New XtraReport1())
             ASPxWebDocumentViewer1.OpenReport(cachedReportSource)
         End Sub
     

4. Add the “resources” section to the application’s Web.config file with the following content to automatically load the required scripts:

   Web.config

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

5. Run the application to view the Document Viewer in a web browser.

   

Troubleshooting

Review the following help topic: Document Viewer Requirements and Limitations

Customization

Review the following help topic for information on how you can customize the Web Document Viewer: Document Viewer Customization (ASP.NET Web Forms).