Add a ReportDocument component to the web page by double-clicking on the ReportDocument component. The ReportDocument component is listed in the Components section of the Toolbox. As mention in the previous section, when you add a ReportDocument component to your form, it automatically displays the Choose a ReportDocument dialog box. This lets you select which report will be displayed. The dropdown control lists all the reports that are part of your project. For this example, it will only show the Employee List report.

Figure 1-8. The ReportDocument dialog box.

Select the Employee List report and click the OK button. This adds the ReportDocument component to your form.

You have to associate the ReportDocument component with the viewer control so that the viewer knows which report to display. Look at the viewer’s properties and at the very top is the DataBindings property. Click on it and then click on the ellipses button to open the DataBindings dialog box.

Click on the ReportSource property listed on the left. Expand the Page item in the Simple Binding window. It shows you the reports that were added to the page using the ReportDocument components. In this example, only the Employee List report is shown.

Click on the Employee List report item and click the OK button. A preview of the report is immediately displayed. Unlike Windows development, the viewer control shows you what the report looks like while you are in design mode. This a great feature for web developers!

At this point, you’ve performed all the same steps that were shown during the previous example for previewing with a Windows application. However, if you ran your ASP.NET application now, the report wouldn’t be shown. To make the report display on the web page you have to call its DataBind() method. Do this in the Page_Load() event.

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
CrystalReportViewer1.DataBind()
End Sub

After typing in this code, run the web application and you’ll see the Employee List report automatically previewed when the page opens.

Figure 1-9. The Employee List report shown in an ASP.NET application.