Skip to main content

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

  • 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.24.1: Reporting Toolbox tab, drag the ASPxWebDocumentViewer control, and drop it onto a web page.

    drop-control-document-viewer-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.

      aspx-web-doc-viewer-set-report

      The following markup is generated:

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

      aspx-web-doc-viewer-set-report-properties-window

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

      using DevExpress.XtraReports.Web;
      //...
          protected void Page_Load(object sender, EventArgs e)
          {
              ASPxWebDocumentViewer1.OpenReport(new DXWebApplication1.XtraReport1());
          }
      
    • Create a class that implements the IReportProvider interface, and register it as a service at startup. Call the OpenReport(String) method:

      using DevExpress.XtraReports.Web;
      //...
          protected void Page_Load(object sender, EventArgs e)
          {
              ASPxWebDocumentViewer1.OpenReport("TestReport");
          }
      
  4. Add the “resources” section to the application’s Web.config file with the following content to automatically load the required scripts:

    <devExpress>
        <!-- ... -->
        <resources>
            <add type="ThirdParty" />
            <add type="DevExtreme" />
        </resources>
    </devExpress>
    
  5. Run the application to view the Document Viewer in a web browser.

    get-started-web-document-viewer-result

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

See Also