Add a Document Viewer to an ASP.NET WebForms Application

This tutorial describes how to place the ASP.NET Document Viewer onto a web page in an ASP.NET WebForms application:

  1. Run the Visual Studio designer and press CTRL+ALT+X to open the Toolbox. Expand the DX.18.1: Reporting tab and drop the ASPxWebDocumentViewer control onto the page.

    drop-control-document-viewer-web-page

    This adds the HTML5 Document Viewer (the latest Web Document Viewer that supports the HTML5/JS technology).

  2. Click the Document Viewer's smart tag and select Switch to Classic ASP.NET Document Viewer.

    WebDocumentViewer_SwitchToClassicViewer

    This converts the HTML5 Document Viewer into the ASP.NET Document Viewer (an older Document Viewer version).

    AspNetDocumentViewer

  3. You can change the toolbar type by clicking the Document Viewer's smart tag and selecting the required type from the Toolbar Mode's drop-down list.

    The following options are available:

    • StandardToolbar (default) - a simple standard toolbar;
    • Ribbon - a grouped ribbon toolbar;
    • ExternalRibbon - the Document Viewer allocates its toolbar controls on a specified external ASPxRibbon;
    • None - the Document Viewer does not contain a toolbar.

    asp-document-viewer-generate-ribbon-layout

  4. Assign your report to the document viewer by setting its ASPxDocumentViewer.Report property. Click the Document Viewer's smart tag, expand the drop-down list for the Local Report property and select the report.

    report-viewer-associate-xtrareport

  5. In Visual Studio 2012 and later versions, exclude the directory with the default visual themes along with the site.css file that is automatically created because they may corrupt the Document Viewer toolbar's layout. Press CTRL+ALT+L to switch to the Solution Explorer and remove the themes folder and the Site.css file from the Content directory.

    report-toolbar-remove-default-styles

Run the application to view the report on a web page.

web-create-print-preview

See Also